WordPressでウィジェットを使わずに最新記事一覧を表示する方法

2017.12.18 WordPress
WordPressでウィジェットを使わずに最新記事一覧を表示する方法

WordPressでは、ウィジェット(最近の投稿)を利用することで簡単に最新記事一覧を表示することができます。

しかし、ウィジェットで生成されるHTMLタグをカスタマイズしたい場合には、テーマのfunctions.phpからwp-include/default-widgets.phpをカスタマイズする必要が出てくるため面倒です。

ということで、今回はウィジェットを使わずに最新記事一覧を出力する方法についてご紹介します。この方法であればfunctions.phpを編集する必要もなく、生成されるHTMLタグも自由にできます。

WordPressで最新記事一覧を表示するソース

テーマ内の最新記事一覧を表示したい箇所に、下記のように追記します。

ここではオーソドックスにul+liでリスト表示していますが、divやdlなど使いやすいタグに変えて使ってください。

<ul class="side_menu">
<?php $posts = get_posts('numberposts=10'); foreach($posts as $post): ?>
<li><a href="<?php the_permalink(); ?>"><?php
if(mb_strlen($post->post_title)>30):
$title= mb_substr($post->post_title,0,30) ; echo $title. ・・・ ;
else:
echo $post->post_title;
endif;
?></a></li>
<?php endforeach; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>
</ul>

投稿データを取得するテンプレートタグget_posts

get_postsは、指定した条件に基づいて投稿データを取得することができるテンプレートタグです。

ここではget_postsを使って直近の投稿10件を取得しています。なお、get_postsではnumberpostsとposts_per_pageどちらでも使えますので好きな方で大丈夫です。

$postはWordPressのループ内で使えるグローバル変数です。get_postsで投稿データ直近10件を配列に指定して$postsに代入、foreachで反復処理をしています。

そして、投稿タイトルの先頭30文字をリスト表示するという流れです。

最新記事をサムネイル付きで一覧表示

また、has_post_thumbnailを併用すればサムネイル(アイキャッチ画像)付きで表示させることもできます。

<ul class="side_menu">
<?php $posts = get_posts('numberposts=10'); foreach($posts as $post): ?>
<li>
<a href="<?php the_permalink(); ?>">
<div class="thumb">
<?php if ( has_post_thumbnail() ): ?>
<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php else: ?>
<img src="<?php echo do_shortcode('[theme]'); ?>images/no_image.png" alt="" />
<?php endif; ?>
</div>
<div class="title">
<?php
if(mb_strlen($post->post_title)>30):
$title= mb_substr($post->post_title,0,30) ; echo $title. ・・・ ;
else:
echo $post->post_title;
endif;
?>
</div>
</a>
</li>
<?php endforeach; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>
</ul>

アイキャッチ画像を使用するには、事前にテーマ内のfunctions.phpからアイキャッチ画像を有効化しておいてください。

add_theme_support( 'post-thumbnails' );

ここでは、投稿にアイキャッチ画像が設定されていない場合、代替画像(no_image.png)が表示されるようにしています。

投稿本文の冒頭も抜粋して表示する

投稿本文から冒頭部分を抜粋して表示することもできます。

<ul class="side_menu">
<?php $posts = get_posts('numberposts=10'); foreach($posts as $post): ?>
<li>
<a href="<?php the_permalink(); ?>">
<div class="thumb">
<?php if ( has_post_thumbnail() ): ?>
<?php the_post_thumbnail( 'thumb300' ); ?>
<?php else: ?>
<img src="<?php echo do_shortcode('[theme]'); ?>images/no_image.png" alt="" />
<?php endif; ?>
</div>
<div class="desc">
<div class="title">
<?php
if(mb_strlen($post->post_title)>30):
$title= mb_substr($post->post_title,0,30) ; echo $title. ・・・ ;
else:
echo $post->post_title;
endif;
?>
</div>
<div class="lead">
<?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?>
</div>
</div>
</a>
</li>
<?php endforeach; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>
</ul>

ここではタイトル(30文字)のあとに投稿本文の冒頭60文字を抜粋して表示しています。投稿本文(post_content)ではなく抜粋(post_excerpt)を使用することもできますので、お好みで変更してください。

柴田竹思

柴田竹思

ベトナム在住Web系フリーランス。有名企業から個人事業まで、いろんなウェブサイトを制作してます。これまで400弱くらい作りました。一年中WordPressばっかりいじってます。

プロフィールはこちら