前言介紹
- 這款 WordPress 外掛「DZS Ajaxer Lite – Ajaxify Your WordPress Site and Comments」是 2016-06-30 上架。 目前已經下架不再更新，不建議安裝使用。
- 目前有 20 個安裝啟用數。
- 上一次更新是 2016-07-03，距離現在已有 3226 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.2 以上版本才可以安裝。
- 有 2 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
ajax | ajaxer | ajaxify | WordPress ajax | wordpress ajaxify |
內容簡介
示範 – https://0.s3.envato.com/files/182575275/index.html
安裝可以在 WP 控制台中的管理頁面完成。Ajaxer Page。
若有出現「安裝預設{{your_theme}}設定」按鈕，請點擊。這是我們的推薦設定。您可以在此之後更改轉場和預載入設定。
若沒有此按鈕，代表您的佈景主題不在我們的預設書中，需要手動調整。一般而言，您需要設定內容容器和選單選擇器，我們將逐一說明每個設定如何完成。
啟用 Ajax？
將此設定關閉，會停用外掛功能，因此務必保持啟用。只有在測試目的時才使用關閉。
內容選擇器
這是內容選擇器。如果您有基本的 HTML 知識，則輕鬆找到它。如果沒有，也不用擔心，我們將在下方說明如何設置。
提示！基本的 HTML / CSS 選擇器是 . 為類別，＃為 ID。首先我們需要前往前端，右擊內容中的元素，並點擊檢查元素
接著，DOM 樹會出現。我們需要盡可能找到從最高處開始涵蓋內容區域 ( 藍色區域 ) 的元素。
如果無法僅選取內容，而且標題也被選取了，我們可以使用「移動選單到內容頂部」選項將其從內容中刪除。
這是我們在樹狀結構中選取的元素。接著我們要再往上找。
這個元素看起來是很好的選擇。它涵蓋了整個內容區域。在這種情況下，我們可以透過所選取的 ID 輸入「內容選擇器」欄位中 — #content。或是透過所選取的類別輸入「內容選擇器」欄位中 — .site-content。在此情況下，兩者都會有相同的結果，但在其他情況下可能只有 ID 或只有類別存在，一般而言，較優先採用 ID。
如果我們在樹狀結構中再往上找一點，就會發現父元素包含了整個網站，這不是我們想要的，我們只想載入內容：
這就是「內容選擇器」欄位的全部設置。
選單選擇器
這是選單選擇器。我們需要按照相同步驟找到它。選取選單中的一個選項，並找到最高的選單父元素。在這個案例中，twentyfifteen 佈景主題的選項是 #site-navigation，應輸入在此欄位中。
將選單移動到內容頂部
如果沒有辦法只選取內容容器而不選取選單，您可以使用此選項將選單放在內容的上方。這在某些佈景主題上可以運作。
轉場
選擇「無轉場」、「淡出」、「縮小」或「滑動」。
「無轉場」和「淡出」是直接的轉場方式，兼容性最高。
「縮小」和「滑動」是較複雜的轉場，可能無法在所有佈景主題和外掛中正常運作。
我們無法保證與所有第三方外掛的相容性。只要第三方外掛編寫正確，它應該可以與此外掛一起正常運作，但是否則可能無法運作。
正確編寫的外掛應該透過 wp_enqueue 函數載入所有腳本，並且應該使用內聯腳本，像這樣針對唯一的類別提供功能：
[…]
jQuery(document).ready(function ($){ dzsap_init_functionality(“.ap_idx_2”,settings_ap); });
預載入設定
選擇「無預載入」、「進度條」或「全螢幕進度條」。
替換的額外項目
這些選擇器將在新的 Ajax 載入的內容中進行搜索，並按照同樣的順序在目前的頁面中進行替換。
新增的額外項目
這類似於「替換的額外項目」設定，但不同處於於它會在新載入的內容中添加元素。
原文外掛簡介
Demos – https://0.s3.envato.com/files/182575275/index.html
Setup is done in the admin page accessible from the WP Dashboard. Ajaxer Page.
If the button saying Install Default Settings for {{your_theme}}, is there , then you should click that. Those are our recommeded settings. You can change transition and preloader after.
If there is no such button, it means that your theme is not in our predefined books and require some manual adjustment. Generally, it means to primarely just set the content container and the menu selector, which we will show you how to do by explaining each setting.
Enable Ajax?
Setting this to off will disable the plugin functionality, so it’s mandatory that it’s left to ON. Use OFF only for testing purposes.
Content Selector
This is the content selector. If you have basic html knowledge, it’s easy to find out. If not, it’s no problem, we’ll explain below how to setup.
Tip! – the basic HTML / CSS selectors are . for class and # for id.
First we need to go to our frontend and right click on a element from the content and click Inspect.
Next, the DOM tree will appear. We need to go as high as possible and look for an element that covers the content area ( in the blue area ) .
if it’s not possible to select only the content, and the header gets selected too, we can remove it from the content with the Move Menu on Top of Content option
This is the element we selected in the tree. We need to go higher.
This element looks like a good match. It covers the whole content area. In this case, we can either select it by id and input in the Content Selector field – #content . Or select it by class and input in the Content Selector field – .site-content. It will be the same outcome in this case, but in other cases only the id or only the class might be present. Generally, id is prefered.
If we go a little higher in the tree we will see that the parent element contains all of the site which is not what we want, we want only the content to load:
This should be all the setup for the Content Selector field.
Menu Selector
This is the menu selector. We follow the same steps to find it out. We inspect a item in the menu and find the highest menu parent. In this case, the twentyfifteen theme it’s #site-navigation that should be entered in this field.
Move Menu on Top of Content
If there is no way to select the container without the menu, you can use this option to place the menu on top of the content. It can work in some themes.
Transition
Choose from No Transition, Fade, Scale Down or Slide.
No Transition and Fade are direct transitions. These provide maximum compatibility.
Scale Down and Slide are more complex transitions and might not work in all themes and with all plugins.
We cannot guarentee compatibility with all 3rd party plugins. As long as the 3d party plugin is properly coded, it should work with this plugin, but otherwise it might not.
A properly coded plugin should load all their scrips via wp_enqueue functions. And it should apply functionality via a inline scripts like this format targeting a unique class :
[…]
jQuery(document).ready(function ($){ dzsap_init_functionality(“.ap_idx_2”,settings_ap); });
Preloader
Choose from No Preloader, Bar or Fullscreen Bars.
Extra Items to be Replaced
These selectors will be searched in the new ajax loaded content and replaced in the current page accordingly, in the same order.
Extra Items to be Added
This is similar to the .. to be Replaced setting, but the difference is that each selector will be queried in the page. If it does not exist, then the element found in the ajax content will be added to the current page. If it is found, then the contents will be replaced.
This is useful for example for a footer player outside the content, like seen in the demo.
Scripts Execute after Ajax Call ?
Select this if javascript scripts in the page should execute after the ajax call is completed. This might increase 3rd party plugins compatibility.
Scripts to Reload
these scripts will be discarded and loaded again when the new page loads
If some scripts have some special initialization inside them you can choose to have them discarded and loaded again on page load. Demo input:
scripts.min.js,owl.slider.js
These will unload and reload on page load any scripts that contain scripts.min.js or slider.js
Script Call on Page Load
javascript call on page change . – warning
Only to be modified if you know what you are doing. – might break the change. – javascript call on each page load. Example input:
jQuery(‘.carousel-wrap .carousel-items,.blog-masonry .masonry-items .blog-item’).css(‘opacity’,1);
This will unhide the elements specified in the jQuery selector.
How to Ajaxify Search Form
Ajaxer tries to ajaxify the search form by default. First try to search something, and if the search is not done ajaxified, then proceed to this simple setup.
Right click the search field, click Inspect
Then you will need to search for the form element that contains it. In this case it’s .searchform . After you found it, you can just to Ajaxer Settings and input it in the Search Form Selector field.
How to Ajaxify Comments
Ajaxer tries to ajaxify the comments form by default. First try to comment something, and if the comment is not done ajaxified, then proceed to this simple setup.
Right click the search field, click Inspect
Then you will need to search for the form element that contains it. In this case it’s .comment-form . After you found it, you can just to Ajaxer Settings and input it in the Comment Form Selector field.
Developer Tips
Note: this is for advanced users only. Changes to any topic covered here can break the portal.
Recommended Programs
You can generally use any text editing software [ like notepad ] to edit content/code but this is what I recommend:
.js, .php, .scss – phpStorm
SASS
If you are a developer you will notice there are some .scss files included too. This is the language for a css preprocessor which makes a developer’s life easier. This is optional but if you want to try it here is the site.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「DZS Ajaxer Lite – Ajaxify Your WordPress Site and Comments」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
暫無相關外掛推薦。