WordPressチュートリアル：無限スクロールWPサイトを作成する方法

確かに、サイトのユーザビリティを向上させるために懸命に働いているため、ユーザーは頻繁に復帰する可能性が高くなります。 さて、あなたが実装できる改善の1つは、無限のスクロール・テクニックです。 これは基本的には基本的なコンテンツが最初に表示されるTwitterやFacebookでのものと基本的に同じで、下にスクロールするほど多くのコンテンツが追加されます。 これは、サイトのパフォーマンスを向上させ（読み込み時間を短縮する）、ユーザーエクスペリエンスを向上させるのに非常に適しています（ボタンをクリックするなどのアイテムを追加する必要はありません）。

ここでは、自分のサイトでそれを使用する理由と方法を見ていきます

無限スクロールサイトの例

大物が何をしているのかを確認することは常に良いことです。この種の効果（多くの場合、気づかないほどです）は、Facebook（ライブフィード）、Twitter、Pinterest、Feedlyなどの多くの大きなサイトやアプリで使用されています。

無限スクロール–すべきことといけないこと

この手法では、サイトの定期的なページ区切りリンク（「古い投稿」または投稿後の番号付きページ）が削除されます。 このテクニックの大きな「プロ」はローディング時間です。最初にロードするアイテムが少なくて済むため、より速くサイトを運ぶことができます。また、ページリロードなしでアイテムを追加すると、10の "ページ"気づいて、ずっとあなたのサイトに長く滞在してください。

それはほとんどのサイトに適用することができますが、多くのコンテンツと画像を持っているブログやポートフォリオのようなサイトには適しており、多くのコンテンツでユーザーを圧倒したくはありません。

このガイドではコーディングの習熟度は必要ありません。正直なところ、WordPressのテーマを少し調整する方法については確かに少し学ぶことができます。

資産

私たちは使用します Paul IrishのJSプラグイン。 それをダウンロードしてテーマのjsフォルダにインストールしてください。 私たちは提案を学習するためにTwenty Twelveを使用しますが、どのテーマでも自由に使用できます（それがあなたにとってうまくいかない場合は質問を投稿してください）。

また、「読み込み中」メッセージ用の素敵なgif画像が必要です。 あなたはそれらの多くを見つけることができますが、 AjaxLoad サイトには、多くのプリセットスタイルをお手伝いする素晴らしいツールがあり、カラースキームに適した色を選択することができます。

Wp-content / themes / twentytwelve / jsの下にスクリプトと素敵なGIFイメージがあれば、始めてみることができます！

PHPコード

怖がらないでください。コピー＆ペーストスニペットを提供しますが、ここではそれを機能させるために必要なことを示します。

• 無限のスクロールプラグインを内部でロードして登録する関数を作成する - WordPressがそれを2回読み込んでテーマの機能を破壊するのを防ぐ
• 表示する1以上のポストを持つ単一のポストオンリーページではないページがある場合にのみ、スクリプトをロードすると、より多くのアイテムをロードする必要があります。

functions.phpファイルはあなたのテーマの心です。 すべての機能は通常そこにあるか、他のファイルからそこに呼び出されます。 したがって、このコードを関数ファイルに追加して、無限のスクロールサポートを追加することができます（ファイルの最後に追加してください）：

<？php / ************************* WEB REVENUE無限スクロール**************** ******** / / *テーマで使用される無限スクローリングのスクリプトを登録して待ち行列に入れる関数。 * / function twentytwelve_script_infinite_scrolling（）{wp_register_script（ 'infinite_scrolling'、//スクリプトの名前get_template_directory_uri（）。 '/ js / jquery.infinitescroll.min.js'、//ファイルは配列（ 'jquery'）、//このスクリプトにはjqueryスクリプトnullが必要です。//スクリプトのバージョン番号はtrueにしないでください。// scriptはフッターに配置されます。 if（！is_singular（））{// 1以上の投稿がある場合のみ//このスクリプトをロードしますwp_enqueue_script（ 'infinite_scrolling'）; //カスタムスクリプトを登録してください。 add_action（ 'wp_enqueue_scripts'、 'twentytwelve_script_infinite_scrolling'）; / *ページ内に表示する無限スクロールを設定する機能。 * / function set_infinite_scrolling（）{if（！is_singular（））{//ここでも、1以上の投稿がある場合のみ// // jsスクリプトを以下に追加しますか？> <script type = "text / javascript"> / *これは無限スクロール設定、あなたはあなたの意志でこれを変更することができます* / var inf_scrolling = {/ * img：そこにロード画像パス、そこに素晴らしいgifロードアイコンを追加しますmsgText：ロードメッセージfinishedMsg：終了ロードメッセージimg： "<？echo get_template_directory_uri（）;？> / images / ajax-loading.gif"、msgText： "次の投稿を読み込み中..."、finishedMsg： "投稿が読み込まれました!!"、}、/ *次の項目はnextSelectorを設定します。 NextSelectorはページナビゲーションのCSSクラスです。 私たちの場合は＃nav-below .nav-previous a * / "nextSelector"： "＃nav-below .nav-previous a"、// navSelectorはページナビゲーションのCSS IDです。 "navSelector"： "＃nav-below "、// itemSelectorは投稿が表示されるdiv" itemSelector "：" article "、// contentSelectorはページのコンテンツ（投稿）が表示されるdiv" contentSelector "："＃content "}; / *最後に行うことは、infinite-scroll.min.jsのjquery関数を使用して、contentSelectorを無限スクロールに設定することです。* / jQuery（inf_scrolling.contentSelector）.infinitescroll（inf_scrolling）; </script> <？ このアクションをページのフッターに追加する必要があります。 100は後の実行に対応する優先順位番号です。 * / add_action（ 'wp_footer'、 'set_infinite_scrolling'、100）; ？

代替アプローチ - ページとカスタム投稿タイプの読み込み

前のコードはすべての投稿を読み込みますが、ページやカスタムポストタイプ（テーマがサポートしている場合は、ポートフォリオアイテムなど）を表示する場合はどうなりますか？ さて、コードを少し修正して、それを動作させることもできます。

必要な唯一の調整は、索引、カテゴリ、またはアイテムをロードするその他のファイルにあります。現在のループを別のコードに置き換えます。 このコードでループを識別できます：

while（have_posts（））：

だから、それを見つけたら、この魔法のコードを使うことができます：

<div id = "content" role = "main"> <？php / *無限スクロールのページだけを表示する！ ここに秘密があります：必要なものに対してpost_typeを設定できます。それは簡単です！ 'post'、 'page'、 'product' * / $ args = array（//引数を設定してください）のように、必要なだけ多くの投稿タイプを追加することができます。 'post_type' => 'page'、//ページのみ）; query_posts（$ args）; //ループを開始する* /？> <？php while（have_posts（））：the_post（）; //これらの項目を表示する "通常の"ループコード？>

結論

これは単なる「ウォームアップ」記事です。 このようなアプローチでできることはたくさんあります。 たとえば、ユーザーがスクロールするときに店内に商品をロードしたり（おそらくWooCommerceを使用して）、JSやCSSコードを追加してポスト画像用の視差に似たローダーを作成することができます。

この技術についてどう思いますか？ あなたはそれが好きですか？ あなたはそれを使用しますか？ コメント欄を使ってあなたの考えを共有してください！