今回は、「サイドバーで最新の記事一覧を表示させる方法」について紹介します。

WordPressのブログサイトでは、サイドバーに最新の記事一覧を表示していることが多いので、是非この機会にマスターしましょう！

【WordPress】サイドバーで最新の記事一覧を表示させる方法

それでは、以下の手順でサイドバーに最新記事を表示していきましょう！

テンプレートファイルを作成する

まずは、最新記事の一覧を表示させるテンプレートファイルを作成しましょう。

名前は「sidebar-latests.php」にします。

そして、sidebar-latests.phpに最新記事の一覧に関する箇所のコードを記述します。

<aside class="sidebar__item">
    <h2 class="sidebar__title">新着記事</h2>
    <ul class="sidebar__list">
     <li>
        <a href="">最新記事です。</a>
     </li>
    </ul>
</aside>

liは後でループを使って複数表示させるので、現段階では1つだけ残しておけばOKです。

テンプレートパーツを共通化して読み込ませる

sidebar-latests.phpが出来たら、次に最新記事の一覧を表示させたい箇所にsidebar-latests.phpのテンプレートファイルを読み込ませていきます。

やり方は簡単で、<?php get_sidebar(); ?>を使って表示させます。

<div class="sidebar">
  <?php get_sidebar('latests'); ?>
</div>

sidebar-latests.phpのテンプレートファイルを読み込ませたい場合は、「-(ハイフン)」後の「latests」をパラメーターに入れてあげればOK。

最新記事の一覧に関するコードを<?php get_sidebar(‘latests’); ?>で共通化しておきます。

そうすることでコードの記述が短くなり、修正もsidebar-latests.phpだけを修正したら良いので、管理が楽になるメリットもあります。

テンプレートファイルを修正する

最後に、sidebar-latests.phpのコードにテンプレートタグを組み込んでいきましょう。

sidebar-latests.phpのコードを以下のように修正します。

<?php
$args = array(
'post_type' => 'post', //カスタム投稿タイプを指定
'posts_per_page' => 3, //表示する記事数
);

$the_query = new WP_Query($args);
if ($the_query->have_posts()):
?>

<aside class="sidebar__item">
    <h2 class="sidebar__title">新着記事</h2>
    <ul class="sidebar__list">

    <?php while ($the_query->have_posts()): $the_query->the_post(); ?>

    <li>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>


    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>

    </ul>
</aside>

<?php endif; ?>

post_typeでは、デフォルトの投稿タイプの記事を表示させたいので、「post」を指定します。

posts_per_pageでは、表示する記事数を指定します。

今回は3記事だけ表示させるようにしたいと思います。

'post_type' => 'post', //カスタム投稿タイプを指定
'posts_per_page' => 3, //表示する記事数

そして残りのコードでは、ループを使って最新の記事が上から一覧で表示されるようにしました。

以下の画像のように最新記事の一覧が表示されたら完了です！

まとめ

以上が、「サイドバーで最新の記事一覧を表示させる方法」でした。