WORDPRESSの最新記事一覧の作成方法

2025年5月20日 PHP,最新記事の作成

STEP1　関連記事が必要な理由



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

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

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

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



STEP2　最新記事一覧を作る




テーマ内の最新記事一覧（タイトルと日付のみ）を表示したい箇所に、下記のように追記します。

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


<!-- 最新記事 -->

<ul class="side_menu">
<?php $posts = get_posts('numberposts=5'); 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>
<time class="card__time" datetime="<?php the_time('Y.m.d'); ?>">
        <?php the_time('Y.m.d'); ?>
    </time>
</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文字をリスト表示するという流れです。


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


また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(); ?>
      <?php else: /* 登録されていなかったら */ ?>
        <img src="<?php echo get_template_directory_uri(); ?>/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>
  <time class="card__time" datetime="<?php the_time('Y.m.d'); ?>">
        <?php the_time('Y.m.d'); ?>
    </time>
</li>

<?php endforeach; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>
</ul>

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

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

/*function.phpにて*/
/* ---------- thumbnailの有効化---------- */
add_theme_support('post-thumbnails');

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


<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(); ?>
      <?php else: /* 登録されていなかったら */ ?>
        <img src="<?php echo get_template_directory_uri(); ?>/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>
  <time class="card__time" datetime="<?php the_time('Y.m.d'); ?>">
        <?php the_time('Y.m.d'); ?>
  </time>
</li>

<?php endforeach; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>
</ul>

ここではタイトル(30文字)のあとに投稿本文の冒頭60文字を抜粋して表示しています。

投稿本文(post_content)ではなく抜粋(post_excerpt)を使用することもできますので、お好みで変更してください。

/* 関連記事 */
.related_post{
    width: auto;
    margin-bottom: 40px;
}
.related_post h3{
    font-size: 20px;
    font-weight: 600;
    border-left: 9px solid #51342B;
    text-align: justify;
    margin-bottom: 40px;
    padding: 0 15px;
    box-sizing: border-box;
}
.related_post_container{
    width: auto;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.related_post_container li{
    width: 24%;
    margin-right: 1.3%;
}
.related_post_container li:nth-child(4){
    margin-right: 0;
}
.related_post_container li:nth-child(8){
    margin-right: 0;
}
.related_post_container li:nth-child(n+1):nth-child(-n+4){
    margin-bottom: 10px;
}
.related_post_container a{
    display: flex;
    flex-direction: column;
    color: #1f1411;
}
.related_thumb{
    width: 100%;
}
.related_title{
    font-size: 12px;
    font-weight: 700;
}
@media (max-width: 550px){
    .related_post h3{
        font-size: 18px;
    }
    .related_post_container{
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .related_post_container li{
        width: auto;
        margin-right: 0;
        margin-bottom: 10px;
        border: 1px solid #E8E8E8;
    }
    .related_post_container li:nth-child(n+1):nth-child(-n+4){
        margin-bottom: 10;
    }
    .related_post_container a{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .related_thumb{
        width: 43%;
    }
    .related_thumb img{
        vertical-align: bottom;
    }
    .related_title{
        width: 55%;
        font-size: 12px;
    }
}
上記のコードをスタイルシートにコピペして完了です。

また、リセットCSSを使っていないとデザインが崩れるかもなので、リセットCSS推奨です。軽量のリセットCSSを「【コピペOK】リセットCSSとは？必要性を解説【最低限は必要です】」で配布しておりますので、必要な方はどうぞ。

以上で関連記事の実装は完了となります。 簡単に実装できますので、自作に挑戦したいという方はやってみましょう。それでは。