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

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

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

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

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

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

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

サムネイルは、ナビゲーションリンクを瞬時に目を引き、クリックしやすくします。読者はサイトをさらに探索するようになり、ページビューと滞在時間が増加する可能性があります。

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

これらの機能には以下が含まれます:

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

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

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

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

たとえば、すでに多くのトラフィックを生成し、読者をメール購読者に転換しているピラーコンテンツがある場合があります。投稿リンク付きのサムネイルを追加すると、メールリストを構築し、小規模ビジネスを成長させるのに役立ちます。

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

さあ、始めましょう！

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

前後の投稿リンクにサムネイルを追加するには、WordPressテーマのファイルにコードを追加する必要があります。

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

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

これを行ったことがない場合は、WordPressでコードをコピーして貼り付ける方法に関するガイドを参照してください。

開始するには、WPCodeプラグインをインストールして有効化する必要があります。WordPress管理画面から、プラグイン » プラグインを追加に移動します。

次の画面で、検索ボックスを使用してWPCodeプラグインをすばやく見つけます。

検索結果で「今すぐインストール」をクリックし、次に「有効化」をクリックします。

ヘルプが必要な場合は、WordPressプラグインのインストール方法に関する記事を参照してください。

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

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

前後の投稿リンクにサムネイルを追加するには、カスタムコードの文字列をアップロードします。

それでは、「カスタムコードを追加（新規スニペット）」の下にある「+ カスタムスニペットを追加」をクリックしましょう。

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

ここでは、「PHPスニペット」を選択します。これは、WordPressの機能を拡張するために使用される小さなコード片です。

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

次に、以下のコードを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;
}

画面上ではこのようになります。

有効化する前に、下部までスクロールして「挿入」セクションの設定を確認してください。

ここで、「挿入方法」が「自動挿入」に、「場所」が「すべて実行」に設定されていることを確認してください。

次に、もう一度上にスクロールして、ボタンを「非アクティブ」から「アクティブ」に切り替えることができます。

新しい機能を有効にするには、「スニペットを保存」または「更新」ボタンをクリックすることを忘れないでください。

関数が作成されたので、WordPressにページ上のどこに表示するかを正確に伝えるために、2番目のスニペットを作成する必要があります。これを2つのスニペットに分割することで、まず機能を安全に作成し、サイトを圧倒したりレイアウトを壊したりすることなく、簡単に配置できます。

コードスニペット » + スニペットを追加ページに戻りましょう。

再度、「カスタムコードを追加（新規スニペット）」オプションの下にある「+ カスタムスニペットを追加」をクリックします。

表示されるポップアップで、WPCodeはコードの種類を尋ねます。

「PHPスニペット」を選択できます。

これにより、以前と同じテキストエディターが開きます。

後で参照しやすいように、新しいカスタムスニペットにわかりやすい名前を付けてください。

次に、以下のコードをWPCodeテキストエディターにコピー＆ペーストします。このコードは、WordPressにアイキャッチ画像付きのナビゲーションをどこに表示するかを指示します。

wpb_posts_nav();

画面上ではこのようになります。

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

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

最後に、「アクティブ」をオンにして、「スニペットを保存」（または「更新」）をクリックします。

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

場所を「投稿の後で挿入」に設定したため、WPCodeが自動的に配置を処理します。テーマファイルを編集する必要はありません。

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

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

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

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

人気の投稿には、最も成功したコンテンツが含まれています。それらを訪問者に表示すると、ページビューを増やし、ユーザーエンゲージメントを高めるのに役立ちます。

前の記事と次の記事へのリンクは時系列での閲覧に便利ですが、MonsterInsightsのようなツールを使えば、最も優れたコンバージョン率の高いコンテンツを自動的に表示し、読者を引きつけ続けることができます。

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

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

WordPressで表示回数別に投稿を表示する方法に関するガイドで、設定の簡単さを学ぶことができます。

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

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

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

WordPressで画像やその他のメディアファイルを使用するためのボーナスリンク

このチュートリアルが、WordPress で前後の投稿リンクにサムネイルを使用する方法を学ぶのに役立ったことを願っています。

次に、以下についても知っておくと良いでしょう。

• WordPressの投稿サムネイルをトリミングおよび編集する方法
• WordPressで注目の動画サムネイルを追加する方法
• WordPressにおける画像代替テキストと画像タイトルの違い
• WordPressでアイキャッチ画像が表示されない問題を修正する方法
• 品質を損なわずにWebパフォーマンスのために画像を最適化する方法

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。