【WordPress】【コピぺOK】前後の記事をサムネイル付きで表示する方法

こんにちは。すずきです。

このようなお悩みにお答えします。

自作のWordPressテーマを制作しているとこのような悩みが出てきますよね。
特にサムネイルや本文表示など、カスタマイズに悩む方も多いと思います。

この記事では、前後の記事を表示させる具体的な方法や、前後の記事を表示させるメリットについて詳しく解説します。

この記事を読むことで、前後の記事を思い通りに表示させるコードが書けるようになります。

3. WordPressで前後の記事を表示させる方法

WordPressには、前の記事や次の記事へのリンクを生成するための関数が用意されています。
これを利用することで、簡単に前後の記事を表示させることができます。

以下は、基本的なPHPコードの例です

<div class="post-navigation">
    <div class="prev-post">
        <?php previous_post_link('%link', '前の記事: %title'); ?>
    </div>
    <div class="next-post">
        <?php next_post_link('%link', '次の記事: %title'); ?>
    </div>
</div>

このコードを single.phpの表示させたい場所に追加します。

コードの説明

このコードを追加することで、記事のページに前後の記事へのリンクが表示されるようになります。

デザインやスタイルは、CSSを使用してカスタマイズすることができます。

前後の記事にサムネイルや本文を追加する方法

記事のタイトルだけでなく、サムネイルや本文を表示することで、訪問者に記事の内容をより魅力的に伝えることができます。
特にサムネイルは画像なので、訪問者の目を惹くのに有効です。

以下は、サムネイルと抜粋を表示するためのPHPコードの例です

<div class="post-navigation">
    <div class="prev-post">
        <?php
        $prev_post = get_previous_post();
        if ($prev_post) {
            $prev_thumbnail = get_the_post_thumbnail($prev_post->ID, 'thumbnail');
            $prev_excerpt = get_the_excerpt($prev_post->ID);
            echo '<a href="' . get_permalink($prev_post->ID) . '">' . $prev_thumbnail . '</a>';
            echo '<a href="' . get_permalink($prev_post->ID) . '">' . $prev_post->post_title . '</a>';
            echo '<p>' . $prev_excerpt . '</p>';
        }
        ?>
    </div>
    <div class="next-post">
        <?php
        $next_post = get_next_post();
        if ($next_post) {
            $next_thumbnail = get_the_post_thumbnail($next_post->ID, 'thumbnail');
            $next_excerpt = get_the_excerpt($next_post->ID);
            echo '<a href="' . get_permalink($next_post->ID) . '">' . $next_thumbnail . '</a>';
            echo '<a href="' . get_permalink($next_post->ID) . '">' . $next_post->post_title . '</a>';
            echo '<p>' . $next_excerpt . '</p>';
        }
        ?>
    </div>
</div>

このコードを single.php ファイルの適切な場所に追加することで、前後の記事のサムネイルと抜粋が表示されます。デザインやレイアウトは、CSSを使用してカスタマイズすること

サムネイルの追加には get_the_post_thumbnail() を使用します。
この関数を使用することで、簡単にサムネイルを表示することができます。

本文のの追加にはget_the_excerpt() 関数を使用することで、記事の抜粋を取得することができます。

WordPressで前後の記事を表示させるメリット

WordPressで前後の記事を表示させる事で、以下のようなメリットがあります。

訪問者の利便性の向上

訪問者が関心を持った記事を読んでいる際、関連する前後の記事へ簡単にアクセスできると、サイト内での移動がスムーズになります。
これにより、訪問者は追加の情報を探す手間が省け、利便性が向上します。

サイトの滞在時間の延長

前後の記事へのリンクがあることで、訪問者は複数の記事を連続して読むことが増える可能性があります。
これにより、サイトの滞在時間が延び、訪問者の関心や興味をさらに深めることができます。

SEO対策としての効果

サイト内リンクは、検索エンジンのクローラーがサイトを巡回する際の手助けとなります。
前後の記事へのリンクを増やすことで、クローラーの巡回が効率的になり、サイトのSEO評価が向上する可能性があります。

バウンス率の低減

訪問者がサイトに訪れて1ページだけを閲覧し、すぐに離れる現象をバウンスと言います。
前後の記事を表示させることで、訪問者が他のページにも興味を持ち、バウンス率が低減する可能性があります。

コンテンツの再利用と価値の最大化

過去に書かれた記事も、前後の記事として表示されることで、新しい訪問者にも読まれる機会が増えます。
これにより、過去のコンテンツが再利用され、その価値が最大化されることが期待できます。

前後の記事がある事で上記のようなメリットがある為、実装できるようになっておくとサイトの質が高まり、クライアントにも喜んでもらえるようになるかと思います。

おわりに

WordPressで前後の記事を表示させる方法と、前後の記事を表示させるメリットについて解説しました。

WordPressにおいて、前後の記事を表示させることは非常に効果的です。
特に、サムネイルや抜粋を追加することで、訪問者の興味を引きやすくなります。

この記事を参考に、ぜひ実際に試してみてください。