Blog

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

2017.12.18 2020.10.25 WordPress

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

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

ということで、今回はウィジェットを使わずに最新記事一覧を出力する方法についてご紹介します。

この方法であればfunctions.phpを編集する必要もなく、生成されるHTMLタグも自由にできます。

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

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

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

PHP
<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を併用すれば、サムネイル(アイキャッチ画像)付きで表示させることもできます。

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

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

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

functions.php
add_theme_support( 'post-thumbnails' );

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

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

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