WordPressで「さらに読み込む」ボタンを追加する方法

訪問者がブログにアクセスしたとき、目標はできるだけ長く滞在してもらうことです。しかし、常に次のページをクリックしなければならない場合、離脱の原因となる摩擦が生じ、コンテンツをさらに探索する前にサイトを離れてしまう可能性があります。

そこで、「投稿をさらに読み込む」ボタンが登場します。読者は、流れを中断することなく、ページを離れることなく新しい記事をすぐに読み込むことができます。このシンプルな機能は、直帰率を減らし、サイト滞在時間を改善し、コンテンツの閲覧を楽にします。

このアプローチは、特に多くの投稿があるブログや雑誌スタイルのサイトで効果的であることがわかっています。「さらに読み込む」ボタンを追加すると、読者はより多くのコンテンツを発見しやすくなります。さらに、滞在時間が長くなるほど、購読したり、ロイヤルカスタマーになったりする可能性が高まります。

この記事では、WordPressで投稿をさらに読み込むボタンを追加する方法をステップバイステップでご紹介します。

WordPressで「さらに投稿を読み込む」ボタンを追加する時期と理由

訪問者にサイトでより多くの時間を過ごしてもらいたいなら、新しいコンテンツを発見しやすくする必要があります。訪問者がコンテンツに夢中になっている時間が長いほど、表示回数が増え、購読したり、また戻ってきたりする可能性が高くなります。

ほとんどのブログでは、ホームページ、ブログ、アーカイブページの下部に、「古い投稿」リンクやページネーションのようなシンプルなナビゲーションを使用しています。これは機能しますが、読書の流れを中断させ、訪問者が閲覧をやめてしまう可能性があります。

だからこそ、特定の種類のサイトでは、投稿をさらに読み込むボタンを追加することで大きなメリットが得られます。これは、フードブログ、写真サイト、リスト記事、バイラルニュースサイトのようなコンテンツが豊富なウェブサイトに特に効果的です。

例えば、So Much Food というブログを見てみましょう。彼らは、新しいレシピを即座に読み込む、クリーンな「もっと投稿を読み込む」ボタンを使用しています。

「投稿をさらに読み込む」ボタンは、新しいページ全体を読み込む代わりに、無限スクロールのように機能します。JavaScriptを使用して次のコンテンツセットをすばやく取得します。これにより、ユーザーエクスペリエンスが向上し、中断することなくより多くのコンテンツを閲覧する機会が得られます。

それでは、WordPressウェブサイトに「さらに読み込む」投稿ボタンを簡単に追加する方法を見ていきましょう。

ステップ1：WordPressに「さらに読み込む」ボタンを追加する

まず最初に行う必要があるのは、Ajax Load Moreプラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化すると、プラグインはWordPress管理メニューに「Ajax Load More」という新しいメニュー項目を追加します。それをクリックして、プラグインの設定ページに移動する必要があります。

設定ページでは、ボタンの色を選択できます。また、ボタンを無限スクロールに置き換えることもできます。これにより、ユーザーがボタンをクリックしなくても、次の投稿バッチが自動的に読み込まれます。

次に、投稿を表示するためのテンプレートを追加するには、Ajax Load More » リピーターテンプレート ページにアクセスする必要があります。

このプラグインには、投稿を表示するためのWordPressループを含む基本的なテンプレートが付属しています。ただし、テーマと一致しない場合があり、ウェブサイトで場違いに見える可能性があります。

これを修正するには、テーマがインデックス、アーカイブ、ブログページに投稿を表示するために使用するコードをコピーする必要があります。

通常、このコードはテーマの`template-parts`フォルダにあります。そのフォルダには、さまざまなコンテンツを表示するためのテンプレートがあります。たとえば、`content-page.php`、`content-search.php`などです。

ジェネリックな`content.php`テンプレートを探します。デモテーマの`content.php`ファイルの例を次に示します。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
        // Post thumbnail.
        twentyfifteen_post_thumbnail();
    ?>
 
    <header class="entry-header">
        <?php
            if ( is_single() ) :
                the_title( '<h1 class="entry-title">', '</h1>' );
            else :
                the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
            endif;
        ?>
    </header><!-- .entry-header -->
 
    <div class="entry-content">
        <?php
            /* translators: %s: Name of current post */
            the_content( sprintf(
                __( 'Continue reading %s', 'twentyfifteen' ),
                the_title( '<span class="screen-reader-text">', '</span>', false )
            ) );
 
            wp_link_pages( array(
                'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
                'after'       => '</div>',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',
            ) );
        ?>
    </div><!-- .entry-content -->
 
    <?php
        // Author bio.
        if ( is_single() && get_the_author_meta( 'description' ) ) :
            get_template_part( 'author-bio' );
        endif;
    ?>
 
    <footer class="entry-footer">
        <?php twentyfifteen_entry_meta(); ?>
        <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-footer -->
 
</article><!-- #post-## -->

そのコードを見つけたら、プラグイン設定の「リピーターテンプレート」フィールドに貼り付ける必要があります。

設定を保存するために、「テンプレートを保存」ボタンをクリックすることを忘れないでください。

次に、Ajax Load More » Shortcode Builderページにアクセスして、ショートコードを生成する必要があります。

このページには、カスタマイズできるさまざまなオプションがあります。まず、コンテナタイプを選択する必要があります。不明な場合は、以前にコピーしたテンプレートを確認してください。ほとんどの最新のWordPressテーマでは、<div>要素が使用されています。

その後、ボタンラベルのセクションまで下にスクロールします。ここでボタンに表示されるテキストを変更できます。デフォルトでは、プラグインは「古い投稿」を使用しますが、これを「さらに投稿を読み込む」または好きなものに変更できます。

最後に、投稿を自動的に読み込むか、ユーザーが「さらに読み込む」ボタンをクリックするのを待つかを選択する必要があります。

ショートコードが使用できるようになりました。右側の列にショートコードの出力が表示されます。ショートコードをコピーしてテキストエディタに貼り付けてください。次のステップで必要になります。

ステップ2：WordPressテーマに「さらに投稿を読み込む」を追加する

このチュートリアルのこの部分では、WordPressテーマファイルにコードを追加する必要があります。これを行ったことがない場合は、WordPressでコードをコピーして貼り付ける方法に関するガイドをご覧ください。

注意: 変更を加える前に、WordPressテーマのバックアップを忘れないでください。

テーマ内で「さらに読み込む」ボタンを追加したいテンプレートファイルを見つける必要があります。テーマの構成方法によりますが、通常これらのファイルは index.php、archives.php、categories.php などです。

前にコピーしたショートコードを、endwhile; タグの直後にテーマに追加する必要があります。

ショートコードをテーマファイルに追加するため、do_shortcode関数内に追加する必要があります。次のようになります。

echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]');  

これで変更を保存し、ウェブサイトにアクセスして「もっと投稿を読み込む」ボタンが機能していることを確認できます。デモサイトでは以下のようになりました。

この記事がWordPressに投稿をさらに読み込むボタンを追加する方法を学ぶのに役立ったことを願っています。また、WordPressで今後の予約投稿を表示する方法に関するガイドや、WordPressのベスト関連記事プラグインの専門家のおすすめもご覧ください。

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