[wordpress插件] Customizer Browser History定制器浏览器历史记录

wordpress 插件 文章 2020-04-10 20:20 429 0 全屏看文

AI助手支持GPT4.0

评分
100
描述

This is a feature plugin intended to implement #28536: Add browser

这是一个功能插件,旨在实现#28536 :添加浏览器

history and deep linking for navigation in Customizer preview

历史记录和深度链接以在Customizer预览中导航

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.

此插件可将浏览器中的定制程序URL更新为当前预览URL作为 url 查询参数,将当前扩展的面板/部分/控件更新为 autofocus 参数。

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

该URL不仅将与当前的定制程序UI保持同步,而且当您在预览中浏览站点时(通过 history.pushState())将添加新的浏览器历史记录条目,从而使您可以

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.

还跟踪每个预览URL的滚动位置,因此,当您向后/向前导航时,将恢复滚动位置,就像在定制程序预览之外浏览网站时一样。

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.

重新加载定制程序时,恢复滚动位置也可行,因为该位置将保留在 scroll 查询参数中:同样,这在开发期间非常有用。

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.

在具有关联的UUID的快照/变更集中,该UUID也被添加到定制程序的浏览器URL中。

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.

例如,如果您加载定制程序,然后单击“站点标识”部分,则将替换URL以添加 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:

如果导航到导航菜单面板,打开菜单部分,然后展开导航菜单项控件,则URL将添加以下 autofocus 参数:

autofocus[panel]=nav_menus&autofocus[section]=nav_menu[87]&autofocus[control]=nav_menu_item[5123]

自动对焦[面板] = nav_menus&自动对焦[section] = nav_menu [87]&自动对焦[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

在与Customizer UI交互时,在浏览器的URL中对 autofocus 参数进行了这些更改时,如果您在预览中导航到 url

> parameter will also be replaced to reflect the new preview URL.

>参数也将被替换以反映新的预览URL。

Note that the url param will be URL-encoded.

请注意, url 参数将进行URL编码。

So a typical Customizer URL would get updated to look like:

因此,典型的Customizer 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[

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

控制] = 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.

这样可以确保您可以在单击“自定义”的那一刻起快速开始编辑任何内容,并使Customizer以更无缝的方式从前端加载。

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.

此外,当您在Customizer预览中导航时,Customizer控件窗格中的关闭链接将不断更新以指向您正在预览的URL,并保持滚动位置。

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.

这样,每当您通过此链接关闭Customizer时,用户体验就是Customizer侧边栏将被删除,就像他们单击侧边栏底部的“隐藏控件”链接一样。

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.

此插件的开发在GitHub上完成。

Pull requests welcome.

拉请求欢迎。

Please see issues reported there before going to the 问题,然后再转到

://wordpress.org/support/plugin/customizer-browser-history">plugin forum.

://wordpress.org/support/plugin/customizer-browser-history“>插件论坛。

下载地址
https://downloads.wordpress.org/plugin/customizer-browser-history.0.5.2.zip
-EOF-

AI助手支持GPT4.0