SWELL│新着記事リストを表示するカスタマイズ

swell-news-list

SWELLで新着記事リストを表示するには投稿リストブロックを使います。

しかし表示内容のカスタマイズの応用が利かない場合があります。

その場合はテンプレートを自作して表示することができます。

SWELLと書いていますが、別テーマでも使えるカスタマイズです。

本記事ではそのカスタマイズ方法の備忘録になります。

※テンプレートを使わないfunctions.phpだけのバージョンも追記しました。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

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という名前を付けて、テーマ直下に格納しました。

サーバーへの格納方法はFTPを使ってアプロードするか、プラグインのFile Managerを使用してください。

<?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

4行目で表示する記事リスト数が変更できます。

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]のショートコードを記事に中に記述して新着記事リストの表示を確認しましょう。

新着記事リストのサンプル

まとめ

トップページのカスタマイズ等でよく使う新着記事リストのカスタマイズ。

自分の好きなようにカスタマイズしたい場合は、ぜひこの記事を参考にしてみてください。

目次