WordPress無限スクロール機能を使用する

FacebookさえずりredditPinterestのLinkedInのmail

ワードプレスで記事のリストページ(例えば、ホーム/フロントページ、カテゴリページ、タグページなど)で画面の一番下に移動すると、自動的に文をロードするようにして無限スクロール機能を使用する場合:

ここで紹介されたプラグインは、ほとんどの長いアップデートがされていない最新のワードプレスの環境では、正常に動作しない場合があります。 "ワードプレスでLoad More Button(もっと見るボタン)を追加する方法"を参照してください。

ワードプレスで無限スクロール機能を使用する

まず、プラグインを考えてみることができます。 この機能を担当する Infinite-Scrollというプラグインがありますが更新はよくないされてワードプレス4.3前まででのみ使用することができ4.3のバージョンでは動作しません。

他の方法でJetPack(ジェトペク)の「無限スクロール」機能を使用することができます。 この機能を使用するには、 ジェトペク>設定で "無限スクロール」を有効にヘジュオヤます。

Infinite Scroll in WordPress

しかし、「無限スクロール」機能を有効にしても、無限スクロール機能が動作しないことです。 関数ファイル(functions.php)に次の関数を追加するようにします。

// Infinite scroll
function mytheme_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'render' => 'mytheme_infinite_scroll_render',
'footer' => 'wrapper',
) );
}
add_action( 'init', 'mytheme_infinite_scroll_init' );

function mytheme_infinite_scroll_render() {
get_template_part( 'loop' );
}

今テストしてみると良いでしょう。 ちなみに、この機能がうまく動作しないテーマもあります。 以上でJetPackの無限スクロール機能を使用して書かれ、自動ロード機能を使用する方法について説明しました。

参考としてjQueryを使用してLoad More(もっと見る)ボタンを押すと、追加で書き込みが表示されている構造にすることもできます。 詳細については、 「Load More」(もっと見る)ボタンを追加するを参照してください。

アップデイト:おそらくJetPackを使用すると、カスタムポストタイプ(例えば、右コマース、bbPressなど)も無限スクロール機能が正常に動作するようだが、テストをしてみました。 もし思うようにうまく機能していない場合はWooCommerceなど無限スクロール機能を使用するには、有料のプラグインを検討することです。 Animated Infinite Scrollというプラグインがその一つです。 評価もいいし(5点満点で4.85)デモページを見ると、右コマースでもうまく動作しますね。 そしてLoad More(もっと見る)ボタン形式も提供しています。

Infinite scroll for woocommerce and bbPress in WordPress

ウコマース向けに出てくる "WooCommerce無限スクロールとAjaxページネーション」というプラグインがあります。商品をメイソンリー(Masonry)方式やIsotopグリッド方式でロードすることができます。

加えて、コンテンツをポートフォリオ形式で一覧表示してくれるベストセラープラグイン エッセンシャルグリッドでもLoad Moreボタン(無限スクロール機能)をサポートすると述べています。 Essential Gridは、グリッドのプラグインとして販売1の上を走るベストセラープラグインで多くのユーザーに愛されています。

Essential Gridは、グリッド機能(コンテンツをポートフォリオレイアウトに配列)を提供するプラグインとして販売1位を記録しているベストセラーのプラグインです。
Essential Gridは、グリッド機能(コンテンツをポートフォリオレイアウトに配列)を提供するプラグインとして販売1位を記録しているベストセラーのプラグインです。

参考



コメントを残す