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でもフォローできます。