4.0中的自定义改进

在向自定义程序自定义程序 该工具内置于WordPress核心,可与大多数现代主题挂钩。您可以使用它预览和修改站点的许多外观设置。在3.9,和我的GSoC菜单定制程序项目@威斯顿鲁特@海洋90我一直在为4.0进行一系列自定义程序改进。在这篇文章中,我将总结我们之前想要进行的更改和建议的更改贝塔贝塔 一种预先发布的软件,分发给一大群用户在真实条件下进行试用。Beta版已经在内部进行了alpha测试,在外观、感觉和功能上与最终产品相当接近;然而,设计更改经常作为过程的一部分发生。。带星号(*)的任何内容仍需要提交,但有一个补丁补丁 一种特殊的文本文件,通过标识添加、删除和更改的文件和行来描述代码的更改。它也可以称为差异。补丁可以是应用到代码库进行测试。。请记住,在4.0发布之前,这里的一切都可能发生变化。

我们目前有八个增强和功能请求需要在beta版之前完成,但其中一半已经标记为提交,并且都有补丁。如果您有兴趣帮助完成这些更改,我们仍然可以使用帮助来检查和测试其中的许多更改(尤其是用户界面用户界面 用户界面/用户体验用户体验 用户体验). 非常感谢迄今为止为本周期提供帮助的所有人。

术语注释

我们最近重命名了外观trac公司Trac公司 Edgewall Software的一个开源项目,用作WordPress的错误跟踪和项目管理工具。要自定义的组件。我想澄清一些有关用于描述定制程序的术语的事项:

  • 我们正在转向使用“Customizer”而不是“Theme Customize”,因为它不一定是特定于主题的(尽管它目前的大多数用途都是)。
  • “定制”是行动,“定制”就是事情。大多数UI元素使用“自定义”或“自定义”,但大多数文档可能应该使用“自定义程序”。如果你想知道该用哪一个,考虑一下你要找的是名词还是动词,然后相应地选择。随意改变动词形式(例如“定制”)。
  • “定制”可以指任何东西。这就是重点;它可以用来定制站点的任何部分。Customizer可以用于任何用途,我们鼓励对Customize的不同用途进行更多的实验。

UI更改

在4.0中,大多数Customizer UI更改是针对Customize本身的;自定义程序中的用户体验。我希望在未来的版本中关注访问和导航Customizer的体验。在4.0中:

  • 小装置小装置 WordPress小工具是一个执行特定功能的小程序块。您可以在侧边栏中添加这些小部件,也称为网页上的小部件就绪区域。WordPress小部件最初是为了提供一种简单易用的方式,为用户提供WordPres主题的设计和结构控制。所有区域都被分组到一个“小部件”上下文中,通过新的“面板”实现美国石油学会美国石油学会 API或应用程序编程接口是一种软件中介,允许程序相互交互并以有限的、明确定义的方式共享数据。。面板是一种对自定义程序节进行分组的方法,就像节是对控件进行分组的方式一样。面板滑动到侧面,而不是向下展开,并包含垂直展开的子部分。这可能需要在UI/UX方面做更多的工作,请参阅#27406年了解详细信息。
  • 当Customizer预览非活动主题时,仅显示“You are previewing/[theme name]”和主题详细信息和屏幕截图部分。否则,显示“You are customizing/[site title]”(您正在自定义/[网站标题]),并简要描述自定义程序。这与显示为“You are customizing/[panel title]”的面板标题相匹配,面板描述作为该标题部分的内容。#28550
  • 将Customizer关闭按钮替换为“X”图标。这更适合用于退出面板的箭头图标,使Customizer控件更像是一个与站点前端相关的模式/面板,而不是混淆了管理员管理员 (和超级管理员)和前端。我们还将用图标替换主题安装预览器(看起来像Customizer)中乱七八糟的按钮,并将其四处移动。#28655
  • 通过使用是的如果他们试图关闭自定义程序,但有未保存的更改#25439
  • 始终返回到在管理员中打开Customizer的屏幕,就像在前端一样。今后在这里寻找更多工作#25457
  • 全部核心核心 核心是运行WordPress所需的一组软件。核心开发团队构建WordPress。自定义控件现在支持描述(#27981),补充了向节和面板添加描述的功能。如果需要,我们可能会向一些核心控件添加描述,可能希望对核心Customizer控件和/或用户测试进行UI/UX审计。

以下是演示这些UI更改的屏幕广播:

API添加和改进

自定义面板

Customizer现在包含了一种将选项组合在一起的新方法:面板。就像节是控件的容器一样,面板也是节的容器。这是在年实施的#27406。Panels API易于使用,其工作原理与现有自定义部分API几乎相同。customize_reregister(自定义寄存器)操作:

$wp_customize->add_panel(“panel_id”,数组(“优先级”=>10,“功能”=>“edit_theme_options”,'theme_supports'=>'','title'=>'','描述'=>'',) );

一如既往,只在不使用默认值的地方使用参数。请注意,面板将除非为其分配了节,否则将显示。要将节添加到面板,只需使用新的面板id面板参数:

$wp_customize->add_section(“section_id”,数组(“优先级”=>10,“功能”=>“edit_theme_options”,“theme_supports”=>“”,“标题”=>“”,“描述”=>“”,“panel”=>“panel_id”,) );

你可能会注意到$wp_customize->add_panel($wp_自定义->添加面板)$wp_customize->add_section具有相同的参数(当然,除了面板)。这是因为面板是一种特殊类型的截面;从技术上讲,WP_自定义面板 延伸 WP_自定义_部分。您的节是向后兼容的:您可以将面板参数添加到现有节中,而不会出现问题。然而,您确实需要检查WP_自定义管理器->add_panel()如果您要保持4.0之前的兼容性。与自定义部分一样,您可以通过以下方式访问和修改面板:

  • $wp_customize->get_panel($id);
  • $wp_customize->remove_panel($id);

新的内置自定义控件

WordPress核心现在支持更广泛的Customizer控件。于实施#28477,这些更改消除了为大多数常见用例创建自定义控件的需要。这个文本区域类型现在在核心中得到支持。对于使用输入元素的任何类型的输入,您可以简单地指定类型属性,使用类型的参数$wp_customize->add_control()
下面是一个示例:

$wp_customize->add_control(“setting_id”,数组(“type”=>“url”,“优先级”=>10,“section”=>“title_tagline”,“label”=>“URL字段”,) );

这会在Customizer中生成以下标记:

<li id=“customize-control-setting_id”class=“customise-control-customize-contol-url”><标签>URL字段</span><input type=“url”value=“”data-customize-setting-link=“setting_id”></label></li>

这非常强大,因为您现在可以使用内置WP_自定义_控制而不是创建自定义控件。但是输入类型怎么样范围需要其他属性,如最小值最大值、和

新的内置自定义控制参数

首先,所有内置的Customizer控件(包括自定义控件,如WP_客户_颜色_控制)现在支持描述,就像Customizer部分有描述一样(请参见#27981). 这是非常需要的,并且允许在控件级别使用内联帮助文本。

更有趣的是,为了补充对任意输入类型的新支持输入属性参数允许您将属性添加到输入元素(也在中实现#28477). 这不仅仅是使用最小值最大值、和对于范围,以便能够向输入元素添加自定义类、占位符、模式属性和任何其他需要的内容。下面是一个示例:

$wp_customize->add_control(“setting_id”,数组(“type”=>“range”,“优先级”=>10,“section”=>“title_tagline”,“label”=>“Range”,'description'=>'这是范围控件的描述。','input_attrs'=>数组(“最小”=>0,“最大值”=>10,“步骤”=>2,“class”=>“test-class test”,“style”=>“color:#0a0”,),) );

这会在Customizer中生成以下标记:

<li id=“customize-control-setting_id”class=“customise-control-customize-contol-range”><标签>范围</span><strong><span class=“description customize-control-description”>这是范围控制说明</span></strong><input type=“range”min=“0”max=“10”step=“2”class=“test-class test”style=“color:#0a0;”value=“”data-customize-setting-link=“setting_id”></label></li>

显示如下(在Chrome 35中):

自定义-4.0范围控制

如果需要使用CSS公司CSS公司 级联样式表。JS公司JS公司 JavaScript是一种通常在浏览器中执行的web脚本语言。通常用于高级用户界面和行为。,但您不需要任何特殊标记。我在菜单名称字段的菜单自定义程序中使用了这个选项,这只是一个具有特殊设置类型的普通文本控件。

上下文控件

现在可以根据自定义程序的预览上下文显示或隐藏自定义程序控件。例如,只有当用户在Customizer中预览其首页时,才可以显示仅与首页相关的选项(请参阅#27993). 这已经在Widgets的核心中实现了;小部件总是根据其在预览中的可见性在上下文中淡出和显示/隐藏,但此功能现在是基于核心构建的活动回调两者中的API菲律宾比索菲律宾比索 WordPress主要使用的web脚本语言。WordPress需要PHP 5.6.20或更高版本和JS。有三种不同的方法可以指定给定控件是否只应显示在特定上下文中。第一个也是最简单的方法是使用活动回调中的参数$wp_customize->add_control()

$wp_customize->add_control('front_page_greeting',数组('标签'=>__('问候'),“section”=>“title_tagline”,“active_callback”=>“is_front_page”,) );

请注意,您可以使用内置条件函数或自定义函数。如果您有一个自定义控件(通过WP_自定义_控制)和自定义回调函数,您可以跳过活动回调参数并重写活动回调方法:

类WP_Greeting_Control扩展了WP_Customize_Control{// ...函数active_callback(){返回is_front_page();}}

最后自定义control_active 滤波器过滤器 过滤器是两种挂钩之一https://codex.wordpress.org/Plugin_API/挂钩。它们为函数修改其他函数的数据提供了一种方法。它们是Actions的对应物。与Actions不同,过滤器是以孤立的方式工作的,不应该有副作用,例如影响全局变量和输出。将覆盖所有其他活动回调选项,在某些情况下可能是更好的解决方案(请注意,此特定示例在未来扩展Customizer的JS API时可以避免,并且不会隐藏标题_标记节中的控件):

函数title_tagline_control_filter($active,$control){if('title_tagline'===$control->section){$活动=is_front_page();}返回$active;}add_filter('自定义控件_活动','标题_标签_控件_过滤器',10,2);

除了上下文控件的PHP API之外,您还可以在JS端覆盖control-visibility-toggle函数。默认情况下,控件将向上滑动向下滑动当导航自定义器预览时,它们变为可见或隐藏。如果您熟悉Customizer控件JS API(请参阅wp-admin/js/customize-controls.js、和wp.定制。控制),自定义切换函数的Widgets实现就是一个很好的示例:

api。小工具。WidgetControl=api。控制扩展({// .../***更新小部件控件以指示当前是否呈现它。**覆盖api。控件.toggle()**@param{Boolean}活动*/切换:功能(活动){this.container.toggleClass('widget-rendered',active);},// ...) };/***使用widget_form的控件构造函数扩展wp.customize.controlConstructor。*/$.extend(api.controlConstructor{widget_form:api。小工具。控件控件,} );

对customize_update_和customize_preview_操作的更改

您可能已经知道Customizer支持选项和theme_mod类型的设置。但您知道可以注册任意类型吗?由于这通常是没有文档记录的,我将展示它是如何工作的(这一点从3.4开始就存在了):

$wp_customize->add_setting(“setting_id”,数组(“type”=>“custom_type”,“功能”=>“edit_theme_options”,“theme_supports”=>“”,“默认”=>“”,“传输”=>“刷新”,“sanitize_callback”=>“”,“sanitize_js_callback”=>“”,) );

您可以使用一些操作来处理自定义类型的保存和预览(选项主题_模式自动处理)。也就是说,自定义更新$类型自定义预览$type在这里很有用。以前,设置的值被传递给这些操作,但没有上下文。在4.0中,通过#27979,的WP_自定义设置实例传递给这些操作,从而允许更高级的保存和预览操作。以下是我的菜单自定义程序项目中的一个示例:

函数menu_customizer_update_menu_name($value,$setting){...//使用新的$值更新菜单名称。wp_update_nav_menu_object($setting->menu_id,数组('menu-name'=>trim(esc_html($value)));}add_action('自定义更新菜单名称','菜单自定义更新菜单名');

Customizer API的这一部分有点太复杂,无法在这里完全解释,因为它的大部分已经存在,但可以说,向这些操作添加设置实例大大扩展了在Customize中使用自定义设置类型的可能性。

新的“定制” 元是指组内部工作的术语。对我们来说,这是一个在WordCamp Central和Make WordPress等内部WordPres网站上工作的团队。能力

Customizer与编辑主题选项赞成定制元功能(映射到 编辑主题选项默认情况下),默认情况下仅分配给管理员。这允许更广泛地使用Customizer的广泛功能访问选项,这些选项内置于面板、部分和设置中。此外,这还允许非管理员使用自定义程序,例如,自定义帖子此更改是向扩展自定义程序的范围超出主题迈出的重要一步。请参见#28605

函数allow_users_who_can_edit_posts_to_customize($caps,$cap,$user_id){$required_cap='edit_posts';if(“自定义”===$cap&&user_can($userid,$required_cap)){$caps=数组($required_cap);}返回$caps;}添加过滤器('map_meta_cap','allow_users_who_can_edit_posts_to_customize',10,3);

自定义条件函数

新的is_customize_preview()条件函数可用于检查前端是否显示在Customizer中。命名源于这样一个事实,即术语“预览”适用于主题预览和在保存之前预览更改。请参见#23509对于来自的一些示例用例WordPress.com网站WordPress.com网站 WordPress代码的在线实现,允许您立即访问新的WordPres环境来发布内容。WordPress.com是Automatic旗下的一家私人公司,拥有世界上最大的多网站。如果你以前从未接触过WordPress,那么这里无疑是开始写博客的最佳地点。https://wordpress.com/

未来的工作

4.0中的大多数更改都集中在自定义程序的PHP API和自定义程序中的用户体验上。在接下来的几个版本中,我们可能会将重点转移到构建Customizer JS API上(#2008年)并致力于通过自定义程序访问和导航的用户体验(可能使用以下内容#28602以及相关内容),以及改善手机体验(#28784). Customizer目前速度可能很慢,但我们正在探索提高性能的方法;例如,一旦有了更完整的JS API,就可以按需动态加载控件(#28580). 我们将致力于改进自定义背景图像,并可能最终在Customizer中添加菜单和/或主题切换。我们还想解决如何处理Customizer有效替换的屏幕(标题和背景,可能最终是小部件、菜单和主题)。查看未来版本自定义组件票证了解更多想法。

再次感谢所有在4.0中帮助过Customizer的人。如果这里有任何未完成的项目激起您的兴趣,请随时加入trac!

 

更新:已提交所有UI更改。在测试期间,将进行其他工作来改进焦点样式,请参阅#28267

更新2:除了自定义功能外,这里的所有内容都在WordPress 4.0 beta 1中。该功能很可能是作为元功能实现的,而不是原始功能,请参阅#28605了解详细信息。

更新3:定制元功能现已推出大旅行箱大旅行箱 Subversion中的一个目录,包含为下一个主要发布周期做准备的最新开发代码。如果您运行的是“trunk”,那么您使用的是最新版本。,将在4.0 beta 2中。添加了用法示例。

#4-0#应用程序编程接口#定制#开发说明