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)を使用することもできますので、お好みで変更してください。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら