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

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

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

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

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

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

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

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

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

資産

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

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

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

PHPコード

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

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

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

    
                    
            /*
                This is the inifinite scrolling setting, you can modify this at your will
            */
            var inf_scrolling = {                
                /*
                    img: is the loading image path, add a nice gif loading icon there                    
                    msgText: the loading message                
                    finishedMsg: the finished loading message
                */
                loading:{
                    img: "/images/ajax-loading.gif",
                    msgText: "Loading next posts....",
                    finishedMsg: "Posts loaded!!",
                },

                /*Next item is set nextSelector. 
                NextSelector is the css class of page navigation.
                In our case is #nav-below .nav-previous a
                */
                "nextSelector":"#nav-below .nav-previous a",

                //navSelector is a css id of page navigation
                "navSelector":"#nav-below",

                //itemSelector is the div where post is displayed
                "itemSelector":"article",

                //contentSelector is the div where page content (posts) is displayed
                "contentSelector":"#content"
            };

            /*
                Last thing to do is configure contentSelector to infinite scroll,
                with a function jquery from infinite-scroll.min.js
            */
            jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
                
    

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

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

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

while（have_posts（））：

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

'page'、//ページのみ）; query_posts（$ args）; //投稿を読み込むif（have_posts（））：？>

結論

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

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