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

WordPressのブログ記事に多くの時間を費やしたのに、読者が1ページで離れてしまうのを見ると、イライラします。

大きな理由の1つは？投稿の下にあるプレーンテキストのナビゲーションリンクは、ほとんど注目されません。

これらのナビゲーションリンクにサムネイル画像を追加すると、注目を集めることができます。読者は次に何が来るかをすぐに確認できるため、コンテンツに長く留まり、探索する可能性がはるかに高くなります。

私たちは多くの方法をテストし、WPCodeがこの作業に最適なツールであることを見つけました。これにより、テーマファイルを変更せずにカスタムコードスニペットを安全に追加できます。

このガイドでは、WordPressで前後の投稿リンクにサムネイルを追加する方法を正確に説明します。思ったより簡単です！💡

前後の投稿リンクにサムネイルを表示するのはなぜですか？

要するに、サムネイルはナビゲーションリンクを瞬時に目を引き、クリックしやすくします。読者がサイトをさらに探索することを奨励できます。

WordPress ブログには、訪問者が新しいコンテンツを見つけたり、サイトをナビゲートしたりするのに役立つ便利な機能がいくつか用意されています。これらの機能には以下が含まれます。

• ナビゲーションメニュー
• 検索バーを追加し、
• 投稿アーカイブウィジェット。

もう 1 つの便利なナビゲーション機能は、各 ブログ記事 の下部にあります。そこには、サイトの前の投稿と次の投稿へのリンクがあります。

これらのリンクはユーザーエンゲージメントを高めます。なぜなら、訪問者がブログ記事を読み終えたときに、他に読むものを探す可能性があるからです。ただし、サムネイルを追加すると、リンクはよりインタラクティブに見えます。

パフォーマンスの高い、または人気のブログ記事に注目を集める素晴らしい方法でもあります。

例えば、すでに多くのトラフィックを生成し、読者をメール購読者に転換させているピラーコンテンツがあるかもしれません。投稿リンクにサムネイルを追加することは、メールリストの構築と中小企業の成長を促進するのに役立つだけです。

これを踏まえて、WordPressで前の投稿と次の投稿リンクにサムネイルを追加する方法を説明します。この記事で取り上げるトピックは次のとおりです。

• Using Thumbnails with Previous and Next Post Links in WordPress
• 代替案：サムネイル付きの人気投稿を表示する
• 投稿ナビゲーションサムネイルに関するよくある質問
• ボーナスリンク：WordPressでの画像やその他のメディアファイルの利用

さあ、始めましょう！

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

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

WPCode を使用してコードを追加する

最初のステップは、最高のコードスニペットプラグインであるWPCodeを使用して、次のコードスニペットを追加することです。これにより、サイトを壊すことなくコードを追加でき、すぐに使える多くのテンプレートが用意されているため、コードをゼロから書く必要がありません。

パートナーブランドのサイト全体で、WPCodeを使用してカスタムコードスニペットを作成および管理しています。これは私たちにとって非常にうまく機能しており、WPCodeの完全なレビューをチェックして、その機能を探ることができます。

開始するには、WPCodeプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関する記事をご覧ください。

有効化したら、WordPressダッシュボードから コードスニペット » + スニペットを追加 ページに移動します。

次に、「新規追加」ボタンをクリックします。

事前作成されたさまざまなテンプレートを選択できるコードスニペットライブラリにリダイレクトされます。

前後の投稿リンクにサムネイルを追加するには、カスタムコードの文字列をアップロードします。したがって、「カスタムコードを追加 (新規スニペット)」の下にある「スニペットを使用」をクリックしましょう。

表示されるポップアップで、コードの種類を選択します。

ここでは、「PHPスニペット」を選択します。

次のステップは、コードスニペットに名前を付けて、後で参照できるようにすることです。

次に、以下のコードをWPCodeテキストエディタにコピーするだけです。

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;
}

スニペットを入力したら、ボタンを「非アクティブ」から「アクティブ」に切り替えることができます。

このようになります。

これにより、コードが機能するようになります。

その後、「更新」ボタンをクリックするだけです。

次に、コードスニペット » + スニペットを追加ページに戻る必要があります。

再度、「カスタムコードを追加（新しいスニペット）」オプションの下で、「スニペットを使用」を選択します。

表示されるポップアップで「PHPスニペット」を選択してください。

その後、後で簡単に見つけられるように、わかりやすい名前を付けることができます。

次のコードをコピーして、WPCodeのテキストエディタに貼り付けることができます。

wpb_posts_nav();

このコードは、アイキャッチ画像付きのナビゲーションをどこに表示するかをWordPressに指示します。

これが完了したら、「挿入」セクションまでスクロールダウンし、「場所」の横にあるドロップダウンをクリックします。

ここから「ページ固有」に移動し、「投稿の後に挿入」を選択します。そうすれば、サムネイルがリンクの横に正しく表示されます。

最後に、「アクティブ」をオンに切り替えて、「更新」をクリックします。

変更を保存した後、サムネイル付きの前の投稿と次の投稿リンクを表示したいテンプレートでこの機能を使用できます。

これで、前の投稿と次の投稿のサムネイルを追加して設定しました！

これで、ウェブサイトで投稿を表示すると、投稿の下部にある前後のリンクにサムネイルが表示されるようになります。

代替案：サムネイル付きの人気投稿を表示する

読者が記事を読んだ後にエンゲージさせるもう1つの方法は、各記事の後に人気の記事リストを表示することです。これにより、読者は単に前の記事と次の記事だけでなく、あなたの最高のコンテンツを見ることができます。

人気の記事には、最も成功したコンテンツが含まれています。それらを訪問者に表示することで、信頼を築き、ソーシャルプルーフを改善し、訪問者がウェブサイトに長く滞在することを保証します。

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

WPBeginnerでは、ウェブサイトのパフォーマンスを注意深く監視するためにMonsterInsightsを使用しています。当社のMonsterInsightsのレビュー全文をご覧いただければ、データに基づいた意思決定を行うための当社の定番ツールである理由がお分かりいただけるでしょう！

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

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

投稿ナビゲーションサムネイルに関するよくある質問

投稿ナビゲーションにサムネイルを追加することについて質問がありますか？始める前に読者がよく尋ねる質問をいくつか紹介します。

サムネイルのサイズを変更できますか？

もちろんです！最初のコードスニペットで、[ 100, 100 ] を含む行を探してください。これらの数値はピクセル単位の幅と高さを表します。テーマのデザインに最適な寸法に置き換えるだけです。

コードでサムネイルを追加すると、ウェブサイトの速度が低下しますか？

全く問題ありません。このコードは軽量でパフォーマンスを考慮して構築されているため、遅延に気づくことはないはずです。さらに、WPCode は、スニペットが必要な単一投稿ページでのみロードされるようにします。

アイキャッチ画像がない投稿はどうなりますか？

心配いりません。リンクされた投稿にアイキャッチ画像がない場合、コードはテキストリンクのみを表示します。とはいえ、すべての投稿にアイキャッチ画像を設定すると、サイトの見栄えが整い、一貫性が保たれます。

前後の投稿へのリンクを表示するのと、人気の投稿セクションを表示するのと、どちらが良いですか？

目標によります。前の投稿と次の投稿へのリンクは、関連コンテンツを順番に案内するのに役立ちます。

しかし、トップ記事の閲覧を続けたい場合は、人気記事セクション（MonsterInsightsのようなツールを使用）が驚くほど効果を発揮します。

ボーナスリンク：WordPressでの画像やその他のメディアファイルの利用

このチュートリアルで、WordPressでサムネイル付きの前の投稿と次の投稿リンクの使用方法を学べたことを願っています。次に、次のことも学びたいかもしれません。

• WordPressの投稿サムネイルをトリミングおよび編集する方法
• WordPressに背景画像を追加する方法
• WordPressで注目の動画サムネイルを追加する方法
• WordPressにオーディオ音楽プレーヤーウィジェットを追加する方法
• WordPressにPDFのインデックス作成と検索を追加する方法
• WordPressにおける画像代替テキストと画像タイトルの違い
• WordPressでアイキャッチ画像が表示されない問題を修正する方法
• 品質を損なわずにWebパフォーマンスのために画像を最適化する方法

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。