內容簡介
如果你需要讓你的網站更快且不需要重新載入頁面，Ajax Press 就是適合你的工具。使用 Ajax Press 外掛可以使你的網站的速度更快，呈現效果也更令人印象深刻。Ajax Press 使用 Ajax (XmlHttpRequest) 與 pushState，為你的網站使用者提供快速的瀏覽體驗。它可以完全改變標準網站的使用者體驗，讓使用者感覺像是在使用應用程式，特別適合低頻寬連接的使用者。不再需要完整頁面重新載入，不再需要多個 HTTP 請求。
Ajax Press 功能：
- Ajax Page Load - 在不刷新頁面的情況下使用 Ajax 載入你的網站
- Ajax 搜尋 - 使用者可以在不刷新頁面的情況下進行搜尋
- Ajax 評論 - 使用者可以在不刷新頁面的情況下發表評論
- Ajax 登入 - 使用者可以在不刷新頁面的情況下登入網站
- Ajax 表單 - 你可以讓網站上的任何表單具有 Ajax 功能
- 頁面轉場動畫 - 多個頁面轉場動畫可使頁面切換更具吸引力
- 預載器 - 可顯示多個預載器，以在 Ajax 載入頁面之前顯示
- 自訂 JavaScript - 可以在每次 Ajax 載入頁面後執行自訂 JavaScript
- 多個內容選取器 - 可以替換頁面上的多個內容部分/選取器
基本使用方法：
啟用插件後，你必須從「Ajax Press > 設定」頁面設定 Ajax Press 設定。如果你的佈景主題列在預定義列表中，你將看到帶有按鈕的管理員通知，以安裝你的佈景主題的預設設定。如果你的佈景主題不在預定義列表中，則必須在「Ajax Press > 設定」頁面上手動設置佈景主題的設置。通常，你必須設置主要內容容器選取器（不包括頁首導航），以在每次頁面更改時替換它。你必須在「主要內容選取器」的輸入框中設置主要內容選取器。輸入框中可以使用任何有效的 CSS 選擇器 (ID、類)。例如：#content、#main 和 .site-content 等。
開發人員提示：
1. 當 Ajax 請求完成時，vanilla js DOMContentLoaded 和 jQuery ready 事件會執行。
2. 當 Ajax 請求開始時，會觸發 javascript pjax:send 事件。你可以使用此事件在 Ajax 請求開始時執行 javascript。例如：document.addEventListener('pjax:send', function(){...your codes});
3. 當 Ajax 請求完成時，會觸發 javascript pjax:complete 事件。你可以使用此事件在 Ajax 請求完成時執行 javascript。例如：document.addEventListener('pjax:complete', function(){...your codes});
4. 使用 jQuery ready 事件而不是 ready 函式來初始化 jQuery 代碼。例如：$(document).ready(function(){...your codes}); ，而非 $(document).ready(...your codes);。
外掛標籤
開發者團隊
② 後台搜尋「Ajax Press – Easily Enable Fast Ajax Navigation」→ 直接安裝（推薦）
原文外掛簡介
If you need to load your site faster and without any page reloads, then Ajax Press is the right tool for you. Your site will appear faster and more impressively using the Ajax Press plugin.
Ajax Press uses Ajax (XmlHttpRequest) and pushState deliver a fast browsing experience to your site users.
It allows you to completely transform the user experience of standard websites to make users feel like they are browsing an app, especially for those with low bandwidth connections.
No more full page reloads. No more multiple HTTP requests.
Ajax Press Features
Ajax Page Load – Loads your site using AJAX without any page refresh.
Ajax Search – Users can search your site without any page reload.
Ajax Comments – Users can post comments on your site without any page reloads.
Ajax Login – Users can login to your site without any page reloads.
Ajaxify Forms – You can make any form ajaxify on your site that has an internal action link.
Page Transition Animatio – Multiple page transition animation is available to add a more attractive page switching mode.
Preloader – Multiple preloader available to show before the ajax page is loaded.
Custom JavaScripts – You can execute custom JavaScripts, after every ajax page is loaded.
Multiple Content Selectors – You can replace multiple content parts/ selectors of your page.
Basic Usage
After activating the plugin, you have to configure the Ajax Press settings from the Ajax Press > Settings page.
If your theme is listed on our predefined list, then you will see an admin notice with a button to install the default settings for your theme.
If your theme is not listed on our predefined list, then you have to set the settings manually for your theme on the Ajax Press > Settings page.
Generally, you have to set the main content container selectors (not header navigation) which will be replaced on every page change. You have to set the main content selector in the Main content selector input box. You can use any valid CSS selector (ID, Class) in the input box.
Example: – #content, #main and .site-content etc.
Developer Tips
The vanilla js DOMContentLoaded and jQuery ready event runs every time the ajax request is completed.
When the ajax request is start the javascript pjax:send event is fired. You can use this event to execute javascript at the start of the ajax request.
Example : document.addEventListener('pjax:send', function(){...your codes});
When the ajax request is completed the javascript pjax:complete event is fired. You can use this event to execute javascript when the ajax request is completed.
Example : document.addEventListener('pjax:complete', function(){...your codes});
Use jQuery ready event instead of the ready function to initialize your jQuery codes.
Example : $(document).ready(function(){...your codes});
Not: $(document).ready(...your codes);
