WordPressでLoad More Button(もっと見るボタン)を追加する方法

最近出てくる有料 WordPress テーマは、最新のお気に入りリストやアーカイブ(保管物ページ)で、ページネーションの種類にLoad Moreボタンや無限スクロールを選択できるオプションを提供する場合があります。

例えば、 Avadaでは、ブログのオプションでPagination Typeにページネーション(Pagination)、無限スクロール(Infinite Scroll)、その他のボタン(Load More Button)の中から選択することができます。

Avada ページネーションオプション

このブログに設置された Publisher テーマでも似たようなオプションを提供しています。

Publisherのテーマ -  Load Moreボタン

しかし、無料のテーマは通常、基本的なPaginationオプションだけを提供し、無限スクロールやLoad Moreボタンを追加するオプションを提供しません。 「もっと見る」ボタンを追加したい場合 Ajaxの負荷よりというプラグインを使用することができます。

WordPressにAjax Load Moreボタンを追加する

WordPress Ajax Load Moreプラグイン

伝言板>プラグイン>新規追加から Ajaxの負荷よりを検索してインストールして有効にします。 これにより、管理者ページの左側のサイドバーにAjax Load Moreメニューが追加されます。

Ajax Load More設定メニュー

まず、 Ajax Load More> Settings ページに移動します。 ここでLoad Moreボタンの色などを設定することができます。

Ajax Load Moreボタンのカラー設定

このページではButton / Loadingスタイルも指定することができます。 必要に応じてLoad Moreボタンの代わりに無限スクロールを選択することもできます。

Ajax Load Moreボタンのスタイルを設定

Infinite Scroll(無限スクロール)を利用する場合は、ボタンの代わりに、上記の図のようにスクロールされたときに表示するアニメーションアイコンを選択することができます。

次に Ajax Load More> Repeater Template ページに移動して、ポストを表示するテンプレートを追加する必要があります。

Ajax Load Moreテンプレート

上記の図のように、プラグインでポストを表示する 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(前のポスト)がラベルに指定されています。

WordPress Ajaxその他のボタン

このフレーズを必要に応じて変更します。 そして、自動的にスクロールするか、またはユーザーがボタンを押すポストをロードするかを選択することができます。

WordPress その他のボタンを作成

スクローリング 下の Enable Scrolling(スクロール有効) オプションを 또는 × の中から選択します。 基本的には が選択されています。 ボクンをクリックする必要がロードされるようにするには、 ×を選択します。

残りのオプションも見て適切に指定するようにするようにします。 設定がすべて完了したら、右の Copy Shortcodeをクリックして、ショートコードをコピーするようにします。

Ajaxその他のボタンを追加する

今このショートコードをボタンが表示される場所に貼り付けてください。

index.phpファイルやarchiveテンプレートファイルでendwhile; タグの直後に次のような形式でショートコードを追加するようにします。

echo do_shortcode('[ajax_load_more container_type="div" post_type="post" scroll="false" button_label="더 보기"]');

この操作を実行する前に、子テーマを作って作業しなければなら後日にテーマを更新しても、変更が消えません。

今保存して確認してみると、Load Moreボタンが追加されていて、クリックすると、ポストをロードします。

WordPress Load Moreボタン

上の図は、Twenty Seventeenテーマのindex.phpファイルにショートコードを追加したときの形状を示しています。 下部のPagination部分は、テーマファイルから削除します。

少し複雑に見えますが、実際のみればそれほど難しくありません。 このタスクを実行する前に、もしかしたら分からない万一の事態に備えるために バックアップを必ず実施してください。

最後に、

以上でLoad More機能をサポートしていない WordPress テーマにAjax Load Moreプラグインを使用してLoad Moreボタンを追加する方法を説明しました。

参考までに無限にスクロールするアーカイブページを使用すると、SEOに不利になる可能性があります。 少なくともLoad Moreボタンを追加する方法を検討してください。 無限スクロールまたは「もっと見る」ボタンを使用すると、ユーザーが別のページに移動したときよりもバナー広告を表示する機会が少なくなり、Google AdSense 広告収入も否定的な影響を与える可能性があるでしょう。

メモ:


コメントを残す

*メールアドレスは公開されません。