最近出てくる有料 WordPress テーマは、最新のお気に入りリストやアーカイブ（保管物ページ）で、ページネーションの種類にLoad Moreボタンや無限スクロールを選択できるオプションを提供する場合があります。
例えば、 Avadaでは、ブログのオプションでPagination Typeにページネーション（Pagination）、無限スクロール（Infinite Scroll）、その他のボタン（Load More Button）の中から選択することができます。
このブログに設置された Publisher テーマでも似たようなオプションを提供しています。
しかし、無料のテーマは通常、基本的なPaginationオプションだけを提供し、無限スクロールやLoad Moreボタンを追加するオプションを提供しません。 「もっと見る」ボタンを追加したい場合 Ajaxの負荷よりというプラグインを使用することができます。
WordPressにAjax Load Moreボタンを追加する
伝言板>プラグイン>新規追加から Ajaxの負荷よりを検索してインストールして有効にします。 これにより、管理者ページの左側のサイドバーにAjax Load Moreメニューが追加されます。
まず、 Ajax Load More> Settings ページに移動します。 ここでLoad Moreボタンの色などを設定することができます。
このページではButton / Loadingスタイルも指定することができます。 必要に応じてLoad Moreボタンの代わりに無限スクロールを選択することもできます。
Infinite Scroll（無限スクロール）を利用する場合は、ボタンの代わりに、上記の図のようにスクロールされたときに表示するアニメーションアイコンを選択することができます。
次に Ajax Load More> Repeater Template ページに移動して、ポストを表示するテンプレートを追加する必要があります。
上記の図のように、プラグインでポストを表示する WordPress ループが含まれているデフォルトのテンプレートを提供しています。 しかし、この部分を使用しているテーマのindex、アーカイブ、ブログのページで使用される実際のコードに置き換える必要があります。
たとえば、Twenty Seventeenテーマの場合 /template-parts/post/content.php 内のコードがポストを表示するループステートメントで使用されます。
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
if ( is_sticky() && is_home() ) :
echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
endif;
?>
<header class="entry-header">
<?php
if ( 'post' === get_post_type() ) {
echo '<div class="entry-meta">';
if ( is_single() ) {
twentyseventeen_posted_on();
} else {
echo twentyseventeen_time_link();
twentyseventeen_edit_link();
};
echo '</div><!-- .entry-meta -->';
};
if ( is_single() ) {
the_title( '<h1 class="entry-title">', '</h1>' );
} elseif ( is_front_page() && is_home() ) {
the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
} else {
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
}
?>
</header><!-- .entry-header -->
<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div><!-- .post-thumbnail -->
<?php endif; ?>
<div class="entry-content">
<?php
/* translators: %s: Name of current post */
the_content(
sprintf(
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
get_the_title()
)
);
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
'after' => '</div>',
'link_before' => '<span class="page-number">',
'link_after' => '</span>',
)
);
?>
</div><!-- .entry-content -->
<?php
if ( is_single() ) {
twentyseventeen_entry_footer();
}
?>
</article><!-- #post-## -->
// Twenty Seventeen 테마의 /template-parts/post/content.php 파일 내용
Repeater Templateのデフォルトのテンプレートを削除し、上記の ... 部分のコードをコピーして貼り付けようにします。 この部分は、使用しているテーマによって異なります。 テーマを分析してスレッドを表示するループステートメントで使用されているコードを検索するようにします。
コードを貼り付けたら、一番下の 「Save Template（テンプレートの保存）「をクリックしてテンプレートを保存します。
今 Ajax Load More> Shortcode Builder（ショートコードビルダー） ページに移動し、ショートコードを生成する必要があります。
このページ上のボタンに表示されるテキストを指定することができます。 Button Labels（ボタンラベル） セクションに移動します。 基本的には Older Posts（前のポスト）がラベルに指定されています。
このフレーズを必要に応じて変更します。 そして、自動的にスクロールするか、またはユーザーがボタンを押すポストをロードするかを選択することができます。
スクローリング 下の Enable Scrolling（スクロール有効） オプションを ◯ 또는 × の中から選択します。 基本的には ◯が選択されています。 ボクンをクリックする必要がロードされるようにするには、 ×を選択します。
残りのオプションも見て適切に指定するようにするようにします。 設定がすべて完了したら、右の Copy Shortcodeをクリックして、ショートコードをコピーするようにします。
今このショートコードをボタンが表示される場所に貼り付けてください。
index.phpファイルやarchiveテンプレートファイルでendwhile; タグの直後に次のような形式でショートコードを追加するようにします。
echo do_shortcode('[ajax_load_more container_type="div" post_type="post" scroll="false" button_label="더 보기"]');
この操作を実行する前に、子テーマを作って作業しなければなら後日にテーマを更新しても、変更が消えません。
今保存して確認してみると、Load Moreボタンが追加されていて、クリックすると、ポストをロードします。
上の図は、Twenty Seventeenテーマのindex.phpファイルにショートコードを追加したときの形状を示しています。 下部のPagination部分は、テーマファイルから削除します。
少し複雑に見えますが、実際のみればそれほど難しくありません。 このタスクを実行する前に、もしかしたら分からない万一の事態に備えるために バックアップを必ず実施してください。
最後に、
以上でLoad More機能をサポートしていない WordPress テーマにAjax Load Moreプラグインを使用してLoad Moreボタンを追加する方法を説明しました。
参考までに無限にスクロールするアーカイブページを使用すると、SEOに不利になる可能性があります。 少なくともLoad Moreボタンを追加する方法を検討してください。 無限スクロールまたは「もっと見る」ボタンを使用すると、ユーザーが別のページに移動したときよりもバナー広告を表示する機会が少なくなり、Google AdSense 広告収入も否定的な影響を与える可能性があるでしょう。
コメントを残す