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

文章撰寫者:
  • WordPress
  • 更新:Jul 29,2014

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

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

示例os Infinite Scrolling站點

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

Feedly的

推特

無限捲軸 - 做和不做

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

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

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

資產

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

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

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

PHP代碼

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

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

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

<?php / ************************* WEB REVENUE INFINITE SCROLLING ***************** ******** / / *將註冊並排列在主題中使用的無限scolling腳本的函數。 * / function twentytwelve_script_infinite_scrolling(){wp_register_script('infinite_scrolling',//腳本名稱get_template_directory_uri()。'/ js / jquery.infinitescroll.min.js',//文件是數組('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腳本?> <script type =“text / javascript”> / *這是inifinite滾動設置,你可以隨意修改這個* / var inf_scrolling = {/ * img:是加載圖像路徑,添加一個漂亮的gif加載圖標有msgText:加載消息finishedMsg:完成加載消息* / loading:{ 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是頁面導航“navSelector”的css id:“#nav-below “,// itemSelector是顯示帖子的div”itemSelector“:”article“,// contentSelector是顯示頁面內容(帖子)的div”contentSelector“:”#content“}; / *最後要做的是將contentSelector配置為無限滾動,使用函數jquery from infinite-scroll.min.js * / 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_types可能是:組合,項目,產品我們可以添加任意數量的帖子類型,用逗號分隔它們,比如'post','page','product'* / $ args = array(//設置參數'post_type'=>'page',// Only Pages); query_posts($參數); //加載帖子if(have_posts()):?> <?php / *啟動循環* /?> <?php while(have_posts()):the_post(); //顯示那些項目的“通常”循環代碼?>

結論

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

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

關於羅切斯特奧利維拉

我是來自巴西Itajubá(MG)的網頁設計師和企業家。 我喜歡寫一些關於模糊主題和做一些很酷的東西。

連接: