WordPress教程:如何創建無限滾動WP站點

您當然會努力提高網站的可用性,以便您的用戶更快樂,更有可能經常回來,對吧? 嗯,您可以實現的一項改進是無限滾動技術。 它與我們在Twitter或Facebook上的內容基本相同,首先顯示基本內容,向下滾動時添加更多內容。 這非常適合提高網站的性能(減少加載時間)和改善用戶體驗(因為不需要執行任何操作來加載更多項目,例如單擊按鈕)。

在這裡,我們將了解為什麼以及如何在您自己的網站中使用它

範例無限滾動網站

檢查那些大傢伙在做什麼總是好的,這種效果(很多次難以察覺)很多大型網站和應用程序,如Facebook(現場直播),Twitter,Pinterest,Feedly。

Feedly的
推特

無限捲軸 - 做和不做

此技術將刪除您網站的常規分頁鏈接(“舊帖子”或帖子後的編號頁面)。 這項技術的最大“專業”是加載時間,因為首先加載的項目較少,你可以有一個更快的網站,並且由於更多的項目沒有頁面重新加載,用戶可以向下滾動10“頁面”的帖子甚至沒有注意,在您的網站停留更長時間。

它可以應用於大多數站點,但它更適合於博客或類似投資組合的站點,在這些站點中,您擁有大量內容和圖像,並且您不希望用大量內容壓倒用戶。

本指南不需要編碼熟練程度,說實話,你肯定會學到一點如何調整你的WordPress主題。

資產

我們會用的 Paul Irish的JS插件。 下載並將其安裝在主題的js文件夾中。 我們將使用Twenty Twelve進行學習建議,但可以隨意在任何主題中使用它(如果它不適合你,也可以發布問題)。

另外,您還需要一個漂亮的gif圖像作為“加載”消息。 您可以在那裡找到很多,但是 AjaxLoad 網站有一個非常棒的工具,可以幫助您使用許多預設樣式,您可以選擇更適合您的配色方案的顏色。

一旦你有了Wp-content / themes / twentytwelve / js下的腳本和漂亮的gif圖像,我們就可以開始了!

PHP 碼

好的,不要害怕,我們會給你一個複制和粘貼片段,但這是我們需要做的才能讓它工作:

  • 創建一個將在內部加載和註冊無限滾動插件的函數 - 這將阻止WordPress加載它兩次並破壞主題的功能
  • 僅當您的頁面不是單個帖子時才加載腳本-只有要顯示多個帖子的頁面才需要加載更多項。

功能。php 文件是您主題的核心。 所有功能通常都在那裡,或者從其他文件中調用。 因此,我們可以在您的函數文件中添加此代碼以添加無限滾動支持(將其添加到文件末尾):

<?php
/************************* 網絡收入無限滾動 ******************** *****/ /* 將註冊和排隊無限 scolling 的腳本以在主題中使用的函數。 */ function twotwelve_script_infinite_scrolling(){ wp_register_script( 'infinite_scrolling',//腳本名稱 get_template_directory_uri().'/js/jquery.infinitescroll.min.js',//其中文件為array('jquery'),//此腳本需要一個 jquery 腳本 null,//沒有腳本版本號 true//腳本將放置在頁腳); 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腳本?>            
            /*
                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()):

所以,一旦你找到它,你可以使用這個神奇的代碼:

<?php         
/* 在無限滾動時只顯示頁面! 這是秘密:您可以根據需要設置 post_type ,這很簡單! 一些 post_types 可能是:portfolio, project, product 我們可以添加任意數量的帖子類型,用逗號分隔它們,例如 'post', 'page', 'product' */ $args = array( // 設置參數'post_type' => 'page', // 只有頁面 ); 查詢帖子($args); // 加載帖子 if ( have_posts() ) : ?> <?php /* 開始循環 */ ?> <?php 而(有_posts()):the_post(); //顯示這些項目的“通常”循環代碼?>

結論

這只是一篇“熱身”文章。 使用這種方法可以做很多事情。 例如,您可以在商店中加載產品(可能使用WooCommerce)作為用戶滾動,或者甚至在那裡添加更多JS和CSS代碼來創建和用於後期圖像的令人敬畏的視差加載器。

你怎麼看待這種技術? 你喜歡它嗎? 你會用嗎? 使用評論部分分享您的想法!

作者照片

羅切斯特·奧利維拉的文章