前言介紹
- 這款 WordPress 外掛「Customizer Browser History」是 2016-07-14 上架。
- 目前有 10 個安裝啟用數。
- 上一次更新是 2017-11-09，距離現在已有 2733 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.7 以上版本才可以安裝。
- 有 2 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
xwp | westonruter |
外掛標籤
customize | customizer |
內容簡介
這是一個功能外掛，旨在實現 #28536：為 Customizer 預覽中的導航添加瀏覽器歷史記錄和深度鏈接。此外掛將瀏覽器 URL 更新為當前預覽的 URL，作為 url 查詢參數和當前展開的面板/部分/控制作為 autofocus 參數。這樣可以收藏書籤，還能重新加載和回到相同的視圖（對開發者來說非常有用），包括預覽的設備（桌面、平板電腦或手機）。不僅 URL 與當前的自定義器用戶界面同步，還會在預覽中瀏覽網站時添加新的瀏覽器歷史記錄項目（通過 history.pushState()），允許您在使用自定義器之外瀏覽時正常使用返回/前進按鈕。每個預覽的 URL 的滾動位置也被跟蹤，因此當您返回/前進時，滾動位置將被恢復，就像在自定義器預覽之外瀏覽站點時一樣。當重新加載自定義器時，還會恢復滾動位置，因為位置在 scroll 查詢參數中得到保存：這對開發者來說非常有用。
此外掛與 Customize Snapshots 外掛很搭配，允許您在帶有關聯 UUID 的快照/更改集中保存自定義器狀態，並將其添加到自定義器中的瀏覽器 URL 中。
例如，如果您載入自定義器，然後點擊“站點標識”部分，URL 將被替換為添加 autofocus[section]=title_tagline。
如果您進入導航菜單面板，打開一個菜單部分，然後展開導航菜單項目控件，則 URL 將添加這些 autofocus 參數：
autofocus[panel]=nav_menus&autofocus[section]=nav_menu[87]&autofocus[control]=nav_menu_item[5123]
而且，當在瀏覽器預覽中導航到另一個頁面時，url 參數也會被替換以反映新的預覽 URL。
請注意，url 參數將進行 URL 編碼。因此，典型的自定義器 URL 將被更新為：
http://example.com/wp-admin/customize.php?url=http%3A%2F%2Fexample.com%2Fsample-page%2F&autofocus[panel]=widgets&autofocus[section]=sidebar-widgets-sidebar-1&autofocus[control]=widget_text[10]&device=mobile&scroll=200
此外掛還會將來自前端的滾動位置保存到自定義器預覽框架中，以便在前端管理欄中單擊“自定義”鏈接後能快速開始編輯當前正在查看的內容，使自定義器從前端更無縫地加載。
此外，當您在自定義器預覽中導航時，自定義器控制面板中的關閉鏈接也會不斷更新，以指向您正在預覽的相同 URL，同時保持滾動位置。以這種方式，每當您通過此鏈接關閉自定義器時，用戶體驗就像是自定義器側欄被刪除一樣，就像他們點擊側欄底部的“隱藏控制”鏈接一樣。如果用戶是從管理員點擊 Customize，則行為不會啟用，Close 鏈接將保持鏈接到他們來自的管理員頁面。請注意，對於 Twenty Seventeen 等響應式主題，前端和後端之間同步的滾動位置不總是看起來很無縫，這是正常現象。
原文外掛簡介
This is a feature plugin intended to implement #28536: Add browser history and deep linking for navigation in Customizer preview
This plugin keeps the Customizer URL in the browser updated with current previewed URL as the url query param and current expanded panel/section/control as autofocus params. This allows for bookmarking and also the ability to reload and return go the same view (which is great for developers), including which device you are previewing (desktop, tablet, or mobile). Not only will the URL be kept in sync with the current customizer UI, but new browser history entries will be added as you navigate around the site in the preview (via history.pushState()), allowing you to use the back/forward buttons as you would normally when browsing the site outside the customizer. The scroll position for each previewed URL is tracked as well, so that when you navigate back/forward the scroll position will be restored, just as happens when browsing the site outside the customizer preview. Restoring the scroll position also works when reloading the customizer, as the position is persisted in a scroll query parameter: again, this is extremely useful during development.
This plugin complements well the Customize Snapshots plugin which allows you to save your Customizer state in a shapshot/changeset with an associated UUID that also gets added to the browser URL in the Customizer.
For example, if you load the Customizer and then click the “Site Identity” section, the URL will be replaced to add autofocus[section]=title_tagline.
If you navigate into the nav menus panel, open a menu section, and then expand a nav menu item control, then the URL will have these autofocus params added:
autofocus[panel]=nav_menus&autofocus[section]=nav_menu[87]&autofocus[control]=nav_menu_item[5123]
And while these changes to the autofocus params are being made in the browser’s URL as the Customizer UI is interacted with, if you navigate to another page in the preview the url parameter will also be replaced to reflect the new preview URL.
Note that the url param will be URL-encoded. So a typical Customizer URL would get updated to look like:
http://example.com/wp-admin/customize.php?url=http%3A%2F%2Fexample.com%2Fsample-page%2F&autofocus[panel]=widgets&autofocus[section]=sidebar-widgets-sidebar-1&autofocus[control]=widget_text[10]&device=mobile&scroll=200
The plugin will also persist the scroll position from the frontend to preview frame in the Customizer after clicking the “Customize” link in the frontend admin bar. This ensures you can quickly start editing whatever you were looking at the moment you clicked Customize, and it makes the Customizer load from the frontend in a more seamless way.
Additionally, as you navigate around the Customizer preview, the close link in the Customizer controls pane will keep updating to point to the same URL that you are previewing, along with persisting the scroll position. In this way, whenever you close the Customizer via this link the user experience is that the Customizer sidebar is just removed, similar to as if they clicked the “Hide Controls” link at the bottom of the sidebar. This behavior is only active if the user had clicked the Customize link from the frontend. If they clicked Customize from the admin, then the Close link will remain linking back to the admin page they came from. Note that for responsive themes like Twenty Seventeen, the synced scroll position between the frontend and backend won’t always appear seamless since the Customizer controls panel being expanded causes the element dimensions in the preview to change.
Development of this plugin is done on GitHub. Pull requests welcome. Please see issues reported there before going to the plugin forum.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Customizer Browser History」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
0.1.0 | 0.1.1 | 0.2.0 | 0.3.0 | 0.4.0 | 0.4.1 | 0.4.2 | 0.4.3 | 0.4.4 | 0.4.5 | 0.4.6 | 0.4.7 | 0.5.0 | 0.5.1 | 0.5.2 | trunk |
延伸相關外掛（你可能也想知道）
Custom Product Tabs for WooCommerce 》此外掛擴充了 WooCommerce 功能，允許商店擁有者針對產品添加自訂選項卡。這些選項卡顯示在每個產品頁面上，出現在預設的「描述」選項卡右側。, 個別產品選項...。
Theme My Login 》曾經希望您的 WordPress 登入頁面與網站的其餘部分相匹配嗎？現在您的願望成真了！「Theme My Login」讓您可以繞過預設的 WordPress 標誌登入頁面，該頁面與...。
Visual CSS Style Editor 》Style your WordPress site visually. Discover the most popular front-end design plugin! Try live demo., , Visual CSS Editor, The plugin allows you t...。
Login Logo 》這個外掛可以讓您自訂 WordPress 登入畫面上的標誌。此外掛完全不需要設定，您只需要將標誌檔案放入 WordPress 內容目錄，並將其命名為login-logo.png，此外...。
WP Custom Admin Interface 》WP Custom Admin Interface 可以輕鬆地自訂 WordPress 後台功能表、工具列和管理介面。此插件不僅提供完全免費的超棒後台自訂功能，還提供了很多其他插件需要...。
Remove "Powered by WordPress" 》移除「Proudly powered by WordPress」外掛, 此外掛針對想要使用預設主題建立網站，但又不希望每個人都知道使用了 WordPress 來建構的人，可將「Proudly powe...。
Microthemer Lite – Visual Editor to Customize CSS 》Microthemer是一個輕量級且功能強大的視覺編輯器，可以自訂網站的CSS樣式，從Google字體到響應式佈局，它適用於程式開發人員和非程式開發人員，並與Elementor...。
Styles 》WordPress擁有許多漂亮的佈景主題，但個性化設計可能會很困難且耗時。Styles外掛能改變這點，提供一致的使用者介面－WordPress佈景主題自訂器。Styles能讓你...。
Options for Twenty Seventeen 》Twenty Seventeen 的選項, 本外掛適用於 Twenty Seventeen 主題，請查看我們針對 Twenty Nineteen、Twenty Twenty 和 Twenty Twenty-One 的其他外掛。, , 本...。
WooCommerce HookMeUp 》HookMeUp 是一個 WordPress 外掛，可協助非開發人員在任何 WooCommerce 主題的關鍵區域插入額外內容、橫幅和短碼，而不需要更改主題的程式碼。探索和使用頁面...。
SysBasics Customize My Account for WooCommerce 》Customize My Account for WooCommerce, 自訂你的預設「我的帳戶」(My Account) 頁面。重新排序它們，隱藏現有的核心端點 (endpoints)，還能更改預設端點。, ...。
Customizer Reset 》一鍵重設 WordPress 客製化 (Customizer) 的佈景主題設定。適用於 99％ 的佈景主題，包括WPZOOM佈景主題以及知名的佈景主題，如Divi、Astra。, 此外掛可移除...。
Options for Twenty Twenty-One 》Twenty Twenty-One 的選項, 此外掛適用於 Twenty Twenty-One 主題，請參見我們針對 Twenty Seventeen、Twenty Nineteen 和 Twenty Twenty 的其他外掛程式。, ...。
Styles: TwentyFourteen 》這個外掛可以在 Twenty Fourteen 主題中，為 Styles 外掛 添加支援。, 此外掛的功能包括：, , 即時預覽, 文字大小, Google 字型, 文字顏色, 邊框顏色, 背景顏...。
Customize Login Image 》此外掛允許您自訂 WordPress 登入畫面的圖像和外觀。您可以更改: 徽標、徽標的鏈接和背景顏色。, 這裡有三個我們喜歡的功能:, 1) 如果沒有上傳徽標，預設的 W...。