[WordPress] 外掛分享： Ajax Pagination and Infinite Scroll

WordPress 外掛 Ajax Pagination and Infinite Scroll 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Ajax Pagination and Infinite Scroll」是 2015-09-08 上架。 目前已經下架不再更新，不建議安裝使用。
  • 目前有 3000 個安裝啟用數。
  • 上一次更新是 2017-02-02，距離現在已有 3310 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 3.6.0 以上版本才可以安裝。
  • 有 27 人給過評分。
  • 論壇上目前有 1 個提問，問題解答率 0%

外掛協作開發者

malinkymedia |

外掛標籤

ajax | back | admin | ajax pagination | custom post types |

內容簡介

這個外掛可在整個 WordPress 網站上使用 Ajax 載入分頁內容。該外掛可在文章、頁面、搜尋、自訂文章類型和 WooCommerce 上運作。在同一範本中分頁多組文章。

請參考演示網站。

我們正在尋找使用此外掛的網站，以展示在我們的展示頁面中。如果您有興趣，請將您網站的連結發送到[email protected]。

這個外掛有三種分頁類型可供選擇。

無限滾動 - 當使用者滾動到螢幕底部時自動載入新文章。
載入更多按鈕 - 點擊以載入新文章。
分頁 - 正常的分頁，但是使用 Ajax 載入下一頁。

設定方式

若需更多協助，請參考這個影片。
一旦安裝此外掛，請前往設定 -> Ajax 分頁設定。
選擇一個適用的主題默認值。如果您的主題不在列表中，請新增正確的選擇器。
需要使用您的瀏覽器開發人員工具找到 4 個必要的選擇器。
'文章選擇器' - 包含所有文章/商品的選取器。
'文章選項' - 單個文章/商品的選取器。
'導覽選擇器' - 文章/商品導覽的選取器。
'下一步選擇器' - 導覽下一個鏈接的選取器。
選擇其中一個分頁類型。
添加可選的回調函數。
點擊 '保存更改'。

多個設定值

例如，如果您的網站同時運作 WooCommerce 和部落格，那麼這兩種模板可能會使用不同的選擇器，需要從管理設置進行不同的設置。

在螢幕頂部點擊 '新增'。
重複上面的設定步驟並點擊 '保存更改'。
在螢幕頂部，您可以在保存的設置之間進行導覽。

多組文章設定

可將多組文章查詢和顯示在同一範本中，並獨立分頁。需要在範本文件中進行特定的設置，此已在這裡中簡要介紹。

刪除設置

在螢幕頂部選擇要刪除的分頁設置。
向下滾動螢幕，然後點擊 '刪除'。

樣式設計 - 載入更多按鈕

載入更多按鈕被包裝在一個具有 CSS 類別名 .malinky-load-more 的 div 中，該按鈕具有 CSS 類別名 .malinky-load-more__button。
在您的主題 style.css 文件中設計這些。

初始化（設置）

當頁面首次加載時，該外掛會初始化，然後更新分頁使用 Ajax。如果您需要隨時重新初始化該外掛，請在您的 JavaScript 中調用以下函數。

MalinkyAjaxPaging.setUp();

如果您在電子商務網站上運行任何其他 JavaScript/Ajax，例如篩選，那麼這是有用的。

回調函式

在每次載入新的文章集之後在設定中添加您自己的 JavaScript 代碼。
回調函數接收兩個參數：loadedPosts（一個新文章的數組）和 url（加載的 URL）。

原文外掛簡介

Load paged content with Ajax throughout your WordPress site. The plugin works on posts, pages, search, custom post types and WooCommerce. Paginate MULTIPLE sets of posts in the same template.
Take a look at the demo site.
We’re looking for websites that use the plugin to feature on a showcase page. If you’re interested please email a link to your website to [email protected].
There are 3 pagination types to choose from.

Infinite Scroll – Automatically load new posts when the user reaches the bottom of the screen.
Load More Button – Click to load new posts.
Pagination – Normal pagination but load the next page with Ajax.

Set Up

For additional help watch this video.
Once the plugin is installed navigate to Settings -> Ajax Pagination Settings.
Select an applicable theme default. If your theme isn’t listed then add the correct selectors.
There are 4 required selectors which can be found by using your browser developer tools.
‘Posts Selector’ The selector that wraps all of the posts/products.
‘Post Selector’ The selector of an individual post/product.
‘Navigation Selector’ The selector of the post/product navigation.
‘Next Selector’ The selector of the navigation next link.
Choose a pagination type.
Add an optional callback.
Click ‘Save Changes’.

Multiple Settings
If for example your site is running WooCommerce and also a Blog then the two templates will probably use different selectors and require a different set up from the admin settings.

Click ‘Add New’ at the top of the screen.
Repeat the set up steps above and click ‘Save Changes’.
At the top of the screen you can navigate between your saved settings.

Multiple Sets of Posts
It’s possible to query and display multiple sets of posts in the same template and independently paginate them. This requires a specific set up within the template file which has been outlined here.
Delete Setting

At the top of the screen select the pagination setting you wish to delete.
Scroll to the bottom of the screen and click ‘Delete’.

Styling Load More Button

The load more button is wrapped in a div with the css class .malinky-load-more and the button has the css class .malinky-load-more__button.
Style these in your themes style.css file.

Initialization (Setup)
The plugin is initialized when the page first loads and the pagination is then updated to use Ajax. If you need to reinitialize the plugin at anytime call the folowing function in your javascript.
MalinkyAjaxPaging.setUp();

This is useful if you run any other javascript / ajax on the page, for example filtering on an ecommerce site.
Callback

Add your own Javascript code in the settings which runs after each new set of posts are loaded.
Callback receives two parameters: loadedPosts (An array of the new posts) and url (The url that was loaded).

Custom Events
There are 3 custom events that are triggered. Bind to these events to perform your own actions.

malinkyPaginationInitialized. Triggered after initialization.
document.addEventListener('malinkyPaginationInitialized', function(e) {
console.log('PaginationInitialized');
});

malinkyLoadPostsStart. Triggered before new posts are loaded.
document.addEventListener('malinkyLoadPostsStart', function(e) {
console.log('LoadPostsStart');
});

malinkyLoadPostsComplete. Triggered after new posts are loaded.
document.addEventListener('malinkyLoadPostsComplete', function(e) {
console.log('LoadPostsComplete');
});

Events only function when using a single set of pagination on a page.

Isotope / Masonry
If your using an isotope / masonry layout then you’ll need to add a callback in the settings to layout the new posts when they are added. This should be in the following format.
$('.grid').isotope('reloadItems').isotope();

Change the reference to the class name .grid to your own container element.
Additional

If using infinite scroll there is an option to amend the buffer in pixels before the next set of posts are loaded.
If using load more button there is an option to amend the button text.
You can choose your own preloader.gif.
When using pagination the browser history is maintained allowing your visitors to use the browser back and forward buttons as expected.

Conditional Loading
By default the plugin loads on every page load. You can stop loading the Javascript and CSS by setting the following constants to false in your wp-config.php file.
define('MALINKY_LOAD_JS', false);
define('MALINKY_LOAD_CSS', false);

Or by adding these two lines to your functions.php
add_filter( 'malinky_load_js', '__return_false' );
add_filter( 'malinky_load_css', '__return_false' );

Once disabled you can load the Javascript and CSS in specific templates by adding the following before the wp_head().
global $malinky_ajax_pagination;
$malinky_ajax_pagination->malinky_ajax_pagination_styles();
$malinky_ajax_pagination->malinky_ajax_pagination_scripts();

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Ajax Pagination and Infinite Scroll」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.0 | 1.1.0 | 1.1.1 | 1.2.0 | 1.2.1 | 1.3.0 | 2.0.0 |

延伸相關外掛（你可能也想知道）

  • Redux Framework 》Redux – 快速在 WordPress 的 Gutenberg 中建立完整頁面, , 使用我們不斷更新的 WordPress 區塊模板、版面配置和模式強化 Gutenberg 編輯器。發現無限可能，...。
  • Loginizer 》Loginizer 是一個 WordPress 外掛，可幫助您對抗暴力攻擊，當 IP 地址達到最大重試次數時，該外掛會阻止其登錄。您可以使用 Loginizer 將 IP 地址列入黑名單...。
  • LightStart – Maintenance Mode, Coming Soon and Landing Page Builder 》這款 WordPress 外掛可讓您在維護網站時顯示一個維護頁面，讓訪客知道您的網站是暫時關閉的，也可以為新網站新增「即將到來」頁面，同時也可為現有網站創建登...。
  • Admin Menu Editor 》Admin Menu Editor 可讓您手動編輯儀表板菜單。您可以重新排序菜單，顯示/隱藏特定項目，修改權限等等。, 功能, , 更改菜單標題、URL、圖標、CSS 類等。, 通...。
  • White Label CMS 》White Label CMS 外掛針對開發者設計，提供客戶更具個性化且易於使用的內容管理系統。, 詳細瞭解 2.0 版本外掛變更，請參閱 Video User Manuals 網站。, 功能...。
  • InfiniteWP Client 》InfiniteWP 可讓使用者從自己的伺服器管理無限數量的 WordPress 網站。, 主要功能:, , 自行託管系統：位於您自己的伺服器上，完全受您控制, 一鍵更新所有網站...。
  • Admin Columns 》這個 WordPress 外掛可以管理並整理文章、使用者、評論及媒體列表的欄位。它讓 WordPress 後台界面變得更美觀、明確。, , Admin Columns Pro, Admin Columns ...。
  • Advanced Custom Fields: Extended 》🚀 全方位增強套件，可改進WordPress和Advanced Custom Fields。此外掛旨在提供一個強大的管理框架，涵蓋了眾多改進和優化。, 此外掛需要至少 ACF Pro 5.8。,...。
  • Nested Pages 》Nested Pages 是什麼？, , , 提供直覺且易於操作的拖放介面，以管理網頁結構及文章排序, 增強了快速編輯功能, 新增可編輯、可排序的樹狀表示網站頁面結構, 會...。
  • Disable REST API 》這是最全面的 WordPress REST API 存取控制外掛！, 輕鬆安裝，安裝後不需要額外設定即可使用。只需上傳並啟用，整個 REST API 將無法被一般訪客存取。, 但如...。
  • Widget Shortcode 》這個短碼需要小工具的ID，但不需要猜測，外掛會為你生成代碼。如果你想要覆蓋小工具的標題，你可以使用 "title" 參數：, [widget id=”text-1″...。
  • All In One Favicon 》查看最新的WordPress交易以優化您的網站。, All In One Favicon為您的網站和管理頁面添加favicon。, 您可以使用您已經上傳的favicon或使用內置的上傳機制將fa...。
  • Add From Server 》這個外掛提供有限的支援。請不要期望有太多新功能或修正 bug。功能可能隨時被移除。, Add From Server 外掛旨在幫助緩解不好的網站主機所造成的困擾，讓您可...。
  • Conditional Menus 》條件式選單 (Conditional Menus) 是一款由 Themify 推出的簡單而實用的 WordPress 外掛，可讓您根據特定條件更換佈景主題中的選單。簡而言之，您可以在不同的...。
  • WP Total Hacks 》WP Total Hacks 可以在您的 WordPress 網站上自訂超過 20 個設置。, 此外掛已在 GitHub 上發布。, 一些功能：, 您可以選擇啟用或停用所有項目。, 需要 PHP5！...。

文章
Filter
Mastodon