[WordPress] 外掛分享: DMD Infinite Scroll

WordPress 外掛 DMD Infinite Scroll 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「DMD Infinite Scroll」是 2016-07-03 上架。
  • 目前有 100 個安裝啟用數。
  • 上一次更新是 2017-04-17,距離現在已有 2938 天。超過一年沒更新,安裝要確認版本是否可用。以及後續維護問題!
  • 外掛最低要求 WordPress 4.2 以上版本才可以安裝。
  • 有 5 人給過評分。
  • 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。

外掛協作開發者

deadmustdie |

外掛標籤

ajax pagination | infinite scroll | load more buttons | wordpress infinite scroll | woocommerce infinite scroll |

內容簡介

這個外掛提供 AJAX 載入 WooCommerce 產品,並可用於任何其他文章。在同一個範本中分成最多 10 組文章進行分頁。

可與任何有選項呼叫自訂 JavaScript 程式碼的 AJAX 外掛相容。

無限捲動 – 當使用者向下捲動並到達產品(文章)底部時自動載入新產品(文章)。
載入更多按鈕 – 點選以載入新的產品(文章)。
分頁 – 普通分頁但使用 AJAX 載入下一頁。

在不同的頁面和文章類型中使用一個外掛。於 WordPress 和 WooCommerce 中運作良好。

功能

對於文章和產品使用無限捲動、載入更多按鈕或 AJAX 分頁。
多重設定集合。
在下一頁和上一頁中使用無限捲動和載入更多按鈕。
同時僅顯示所需的頁數。
產品更換時可滾動至頂部。
無限捲動的自訂閾值。
可載入自訂載入圖片。
可以輕鬆修改下一頁按鈕和上一頁按鈕的樣式。
可以在文章(產品)載入之前或之後執行自訂 JavaScript 程式碼。
HTML5 的 PushState。

安裝

安裝外掛後,於管理區中導覽至 “DMD Infinite Scroll”(“DMD Plugins” -> “DMD Infinite Scroll”)。
從下拉式清單 “預設值” 中選擇佈景主題。如果您的佈景主題沒有列出,則添加正確的選擇器。
您可以使用特殊工具來設定選擇器(僅適用於 “設定集合 1”)。

您的網站上的文章(產品)必須至少包含 3(三)頁。
打開第二頁。
在頁面中加入鏈接 “?dmd_is=selectors” 或者如果鏈接已經有 “?” 符號,則加入 “&dmd_is=selectors”。
點擊元素並使用右側和底部的 “父級” 按鈕移動到上一個元素。
紅色邊框顯示已選擇的元素。
如果這是正確的元素,則點擊下一步。

這是實驗性工具。它可能無法與某些佈景主題一起運作。有時還需要自行編輯結果。
如果此工具對您無效,則使用您的瀏覽器開發人員工具。
“文章選擇器”——包含所有文章/產品的選擇器。
“文章選擇器”——單個文章/產品的選擇器。
“分頁選擇器”——文章/產品分頁的選擇器。
“下一頁選擇器”——分頁下一個鏈接的選擇器。
“上一頁選擇器”——分頁上一頁鏈接的選擇器。
“頁數選擇器”——其他分頁連結的選擇器。
選擇所需的設定。
點擊 “保存更改”。

多重設定集合

在 “集合計數” 選項中選擇您需要的設定集數。
點擊 “保存並重新載入” 按鈕。
您可以使用 “現有集合” 下拉清單在設定集合之間導航。

樣式

您可以在管理區中為按鈕設計樣式。
導覽至 “DMD Infinite Scroll”(“DMD Plugins” -> “DMD Infinite Scroll”)
開啟 “樣式” 標籤。
點擊 “編輯樣式” 按鈕。

點擊選項(邊距、邊框、填充、內容)以進行編輯。

原文外掛簡介

Plugin provide AJAX loading for WooCommerce products and can be used for any other posts. Paginate up to 10 sets of posts in the same template.
Can be compatible with any other AJAX plugins, that has option to call custom JavaScript code.

Infinite Scroll – Automatically load new products(posts) when the user scroll down and reaches the bottom of the products(posts).
Load More Button – Click to load new products(posts).
Pagination – Normal pagination but load the next page with AJAX.

Use one plugin for different pages and post types. Work great with WordPress and WooCommerce
Features

Infinite scroll, load more buttons or AJAX pagination for posts and products.
Multiple sets of settings.
Infinite scroll and load more button for next page and previous page.
Only the required number of pages is displayed at the same time.
Page can be scrolled to the top, when products is replaced.
Custom threshold for infinite scroll
Custom load image can be loaded.
Easy stylization for next page button and previous page button.
Custom JavaScript code can be execute before or after posts(products) load
HTML5 PushState

Setup

Once the plugin is installed navigate in admin area to “DMD Infinite Scroll”( “DMD Plugins” -> “DMD Infinite Scroll” ).
Select theme from drop down list “Presets”. If your theme isn’t listed then add the correct selectors.
You can use special tool to setup selectors(work only for “Setting set 1”)

Your site with posts(products) must contain at least 3(three) pages.
Open second page.
Add to the page link “?dmd_is=selectors” or “&dmd_is=selectors” if link already has “?” symbol.
Click on element and move to the previous element with “Parent” button on right and bottom.
Red border show element, that selected.
Click next if this is correct element.

This is experimental tool. It may not work with some themes. It is also sometimes necessary to edit the result of yourself.
If this tool isn’t work for you, then use your browser developer tools.
“Posts Selector” The selector that wraps all of the posts/products.
“Post Selector” The selector of an individual post/product.
“Pagination Selector” The selector of the post/product pagination.
“Next Selector” The selector of the pagination next link.
“Previous Selector” The selector of the pagination next link.
“Pages Selector” The selector of the other pagination links.
Choose settings, that you want.
Click “Save Changes”.

Multiple sets of settings

Select in “Sets count” option how many sets you need.
Click “Save and reload” button.
You can navigate between settings sets with help of “Current set” drop down list.

Styling

You can style buttons in admin area.
Navigate to “DMD Infinite Scroll”( “DMD Plugins” -> “DMD Infinite Scroll” )
Open “Styles” tab.
Click on “Edit styles” button.

Click option(Margin, Border, Padding, Content) to edit it.

Also you can style any button with help of CSS code.

“div.dmd_next_page” – wraper for next page button. “div.dmd_next_page a.button” – next page button.
“div.dmd_previous_page” – wraper for previous page button. “div.dmd_previous_page a.button” – previous page button.
“div.dmd_ajax_product_load” – wraper for loading image. “div.dmd_ajax_product_load img” – loading image.

各版本下載點

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

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


最新版本

延伸相關外掛(你可能也想知道)

暫無相關外掛推薦。

文章
Filter
Apply Filters
Mastodon