WordPress で前後の投稿リンクにサムネイルを追加する方法

WordPress で前投稿と次投稿のリンクを含むサムネイルを表示しますか?

WordPress では各投稿の下部に、簡単にナビゲーションできるように前後の投稿へのリンクが表示されます。これらのリンクにサムネイルを追加すると、読者にとってより魅力的なものになります。

この記事では、WordPress で前と次の投稿リンク付きのサムネイルを使用する方法を説明します。

前と次の投稿リンクとともにサムネイルを表示するのはなぜですか?

WordPress ブログには、訪問者が新しいコンテンツを見つけたり、サイト内を移動したりするのに役立つ便利な機能がいくつか用意されています。

これらの機能には、ナビゲーションメニュー、検索バー、アーカイブ投稿ウィジェットが含まれます。

もう 1 つの便利なナビゲーション機能が WordPress の各ブログ投稿の下部にあります。そこには、サイト上の前後のブログ投稿へのリンクが表示されます。

これらのリンクは、訪問者が 1 つのブログ投稿を読み終えると、別の記事を探すようになるため、ユーザーエンゲージメントを高めます。ただし、サムネイルを追加すると、リンクがよりインタラクティブに見えます。

そうは言っても、WordPress で前と次の投稿リンクにサムネイルを追加する方法を見てみましょう。

WordPress で前および次の投稿リンクでサムネイルを使用する

サムネイルを前後の投稿リンクに追加するには、WordPress テーマのファイルにコードを追加する必要があります。これまでにこれを行ったことがない場合は、WordPress でコードをコピーして貼り付ける方法に関するガイドを参照してください。

テーマのfunctions.php ファイルにコードを追加する

最初のステップは、サイト固有のプラグインで、またはコードスニペットプラグインを使用して、次のコードスニペットを function.php ファイルに追加することです。

function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
    
    if ( $next_post || $prev_post ) : ?>
    
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
    
    <?php endif;
}

変更を保存すると、前後の投稿リンクをサムネイル付きで表示したいテンプレートからこの関数を呼び出すことができます。

テーマの single.php テンプレートにコードを追加する

次に、テーマの single.php ファイルを開く必要があります。このファイルには、サムネイルなしで前後の投稿リンクを追加するコードがすでに含まれています。まずそのコードを削除する必要があります。

たとえば、これは Twenty TwentyOne テーマの single.php ファイルのスクリーンショットです。 // 前/次の投稿ナビゲーション というラベルの付いたセクションを探します。

次に、そのセクションのコードを the_post_navigation で始まりループの終わりまで削除する必要があります。その後、次のコードをその場所に貼り付ける必要があります。

wpb_posts_nav();

完了したら、必ずファイルを保存してください。

テーマのスタイルシートに CSS コードを追加する

前と次のリンクのスタイルを設定するには、テーマのスタイルシートにカスタム CSS を追加する必要があります。 WordPress サイトにカスタム CSS を簡単に追加する方法については、ガイドをご覧ください。

このコードをテーマのstyles.cssファイルに追加するか、WordPressテーマカスタマイザーを使用して追加します。

.wpb-posts-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 100px auto;
}

.wpb-posts-nav a {
    display: grid;
    grid-gap: 20px;
    align-items: center;
}

.wpb-posts-nav h4,
.wpb-posts-nav strong {
    margin: 0;
}

.wpb-posts-nav a svg {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

.wpb-posts-nav > div:nth-child(1) a {
    grid-template-columns: 100px 1fr;
    text-align: left;
}

.wpb-posts-nav > div:nth-child(2) a {
    grid-template-columns: 1fr 100px;
    text-align: right;
}

.wpb-posts-nav__thumbnail {
    display: block;
    margin: 0;
}

.wpb-posts-nav__thumbnail img {
    border-radius: 10px;
}

変更を保存することを忘れないでください。

前と次のリンクをサムネイルでプレビューする

Web サイトで投稿を表示すると、投稿の下部にある前と次のリンクにサムネイルが表示されるようになりました。

リンクされた投稿のいずれかに注目の画像がまだない場合、サムネイルは表示されません。投稿にサムネイルを追加する方法については、WordPress で注目の画像を追加する方法またはサムネイルを投稿する方法に関するガイドを参照してください。

代替案: 人気のある投稿をサムネイルで表示する

投稿を読んだ読者の興味を引くもう 1 つの方法は、各記事の後に人気のある投稿のリストを表示することです。これにより、読者は、公開された前後の記事だけでなく、最高のコンテンツを見る機会が得られます。

人気の投稿には、最も成功したコンテンツが含まれています。これらを訪問者に表示すると、信頼が構築され、社会的証明が向上し、訪問者が Web サイトに長く滞在できるようになります。

WordPress で投稿をビューごとに表示する方法に関するガイドの最初の方法を確認すると、MonsterInsights プラグインを使用して人気の投稿を追加するのがいかに簡単であるかがわかります。

MonsterInsights の人気投稿ウィジェットは、幅広い魅力的なテーマと多くのカスタマイズオプションを提供します。

また、WordPress で投稿後にカスタムウィジェットを追加する方法に関するガイドも参照してください。ここでは、各ブログ投稿の最後にさまざまなタイプのコンテンツを追加する方法を学ぶことができます。

このチュートリアルが、WordPress で前および次の投稿リンクでサムネイルを使用する方法を学ぶのに役立つことを願っています。 WordPress のパフォーマンスを高速化する方法を学んだり、WordPress に最適なソーシャルメディアプラグインのリストをチェックしたりすることもできます。

この記事が気に入っていただけましたら、WordPress ビデオチュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook でもご覧いただけます。