SWELLで新着記事リストを表示するには投稿リストブロックを使います。
しかし表示内容のカスタマイズの応用が利かない場合があります。
その場合はテンプレートを自作して表示することができます。
本記事ではそのカスタマイズ方法の備忘録になります。
※テンプレートを使わないfunctions.phpだけのバージョンも追記しました。
SWELLで新着記事リストを自作する方法│追加版
テンプレートを使わないfunction.phpとcssだけの新着記事版の備忘録です。
functions.phpの記述
functions.phpのコードは下記に記述します。
posts_per_pageは表示したい新着記事数を入力しましょう。
WordPressの管理画面 ＞ 外観 ＞ テーマファイルエディター ＞ functions.php
function motoki_news2(){
$str = '<div class="motoki_news_area">';
global $post;
$arg = array(
'posts_per_page' => 4,
'orderby' => 'date',
'order' => 'DESC',
);
global $wp;
setup_postdata($post);
$posts = get_posts($arg);
foreach($posts as $post):
setup_postdata($post);
$post_id = $arg[0];
$title = get_the_title($post_id);
$url = get_permalink($post_id);
$post_date = get_the_date('Y/m/d', $post_id);
$category = get_the_category($post_id);
if (has_post_thumbnail($post_id)) {
$thumb_id = get_post_thumbnail_id($post_id);
$thumb_img = wp_get_attachment_image_src($thumb_id, 'medium');
$src = $thumb_img[0];
} else {
$src = wp_upload_dir()['baseurl'].'/2022/10/dummy.png';
}
$str.='<div class="news2-card"><a href="'.$url.'" class="news2-link"><img src="'.$src.'" alt="'.$title.'"><div class="news2-info"><div class="news2-title">'.$title.'</div><span class="news2-date">'.$post_date.'</span><span class="news2-cat">'.$category[0]->name.'</span></div></a></div>';
endforeach;
$str.='</div>';
wp_reset_postdata();
return $str;
}
add_shortcode('motoki_news2', 'motoki_news2');CSSを追加
お好みで新着記事カードの見た目を整えます。
.motoki_news_area {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 2em 0;
}
.news2-info {
padding: 0.5em;
}
.news2-card {
margin: 0 auto;
max-width: 46%;
border-radius: 8px;
box-shadow: 0px 5px 15px 0px rgb(0 0 0 / 35%);
background-color: #fff;
}
.news2-card img {
border-radius: 8px 8px 0 0;
}
.news2-card a {
text-decoration: none;
color: #000;
}
.news2-title {
line-height: 1.8em;
margin: 0 0.5em 1.5em 0.75em;
}
.news2-date {
margin-left: 0.75em;
}
.news2-cat {
margin-left: 1em;
}
.news2-date, .news2-cat {
font-size:0.8em;
}ショートコードから出力
最後に[motoki_news2]のショートコードを記事に中に記述して新着記事リストの表示を確認しましょう。
以上です。
好きな条件を加えれば、テーマに関係なくお好みのブログカードが作れます。
テンプレートも使わないので、お手軽で良いです。
SWELLで新着記事リストを自作する方法│テンプレート使用版
過去に作った新着記事リストのやり方です。
早速、自作の新着記事リストを作ってみましょう。
テンプレートの格納
まずはPHPのコードを書かれたテンプレート（motoki_news.php）をテーマの直下に格納します。
/public_html/motoki-design.co.jp/wp-content/themes/swell_child
下記のコードをテキストエディタでコピペ。
motoki_news.phpという名前を付けて、テーマ直下に格納しました。
<?php
$num = $args['num'];
$information = get_posts(array(
'posts_per_page' => $num,
));
if ($information):
?>
<div class="news-box">
<ul>
<?php
foreach ($information as $post):
setup_postdata($post);
$cat = get_the_category();
$catname = $cat[0]->cat_name;
?>
<li>
<a href="<?php the_permalink(); ?>">
<span class="news-date"><?php the_time('Y.m.d');?></span>
<span class="news-cat"><?php echo $catname; ?></span>
<span class="news-article"><?php echo mb_substr($post->post_title, 0, 20, 'UTF-8').'...'; ?></span>
<span class="news-arrow"><?php echo do_shortcode(''); ?></span>
</a>
</li>
<?php
endforeach;
wp_reset_postdata();
?>
</ul>
</div>
<?php else: ?>
<?php endif; ?> functions.phpの記述
続いて格納したテンプレートをショートコードで読み込みましょう。
functions.phpのコードは下記に記述します。
WordPressの管理画面 ＞ 外観 ＞ テーマファイルエディター ＞ functions.php
function motoki_news() {
ob_start();
$args = [
'num' => 5, //新着記事数
];
get_template_part('motoki_news',null,$args);
return ob_get_clean();
}
add_shortcode('motoki_news', 'motoki_news');CSS
お好みで整えましょう。
.news_box img {
margin-bottom: 1em;
}
.news-box ul {
padding-left: 0em;
list-style: none;
}
.news_box li {
margin-bottom: 1em;
}
.news-arrow {
color: #000;
}
.news-date {
color: #b18e37;
margin-right: 1em;
}
.news-article {
color:#3d3d3d;
display: inline-block;
}
.news-arrow {
top: 5px;
position: absolute;
right: 0;
}
.news-cat {
color: #fff;
background-color: #b18e37;
padding: 1px;
font-size: 0.9em;
display: inline-block;
width: 100px;
text-align: center;
border-radius: 4px;
margin-right: 1em;
}以上です。
最後に[motoki_news]のショートコードを記事に中に記述して新着記事リストの表示を確認しましょう。
まとめ
トップページのカスタマイズ等でよく使う新着記事リストのカスタマイズ。
自分の好きなようにカスタマイズしたい場合は、ぜひこの記事を参考にしてみてください。