二十一十九拆解：使用新的WordPress默认主题

最新推荐文章于 2023-01-19 14:04:56 发布

cunjie3951

最新推荐文章于 2023-01-19 14:04:56 发布

阅读量958

点赞数

文章标签： python java css javascript 大数据 ViewUI

二十一十九是当前可用的最新WordPress默认主题，并且已包含在WordPress 5.0版本中。事实证明，它非常流行，迄今为止已有超过800,000个活动安装。

WordPress.com用户也可以使用它，从而进一步扩大了用户群。它被描述为最小且非通用的主题，具有简单但复杂的字体，并且支持多种语言，包括：

阿拉伯
中文
希腊语
希伯来语
日本
韩语
泰国

设计的目的是吸引各种不同类型的网站，例如照片博客，小型企业，非营利性或版式驱动的博客。

我个人喜欢该设计，并且可以肯定它将继续保持良好的状态。感觉轻巧，易于接近，令人愉悦，并受益于非常干净优雅的外观。

但是，极简主义设计可能会使一些希望从默认WordPress主题中寻求更多设计声明的用户感到两极分化。不过，这还处于初期，我相信随着有更多资源可用来帮助用户自定义“二十一岁”，这将有助于进一步的积极采用。

但是，如果您认为需要对其进行大量定制，那么从替代主题开始可能会少一些工作。我可以看到这个主题在文本较多的网站（即博客）上非常受欢迎。字体，间距和简约设计似乎非常适合该类型的网站。

对于主题开发人员

如果您开发WordPress主题，那么您可能会对“二十一十九”所包含的功能感兴趣，尤其是与WordPress 5.0所包含的新编辑器（代号为Gutenberg）一起使用时的功能。

经过精心设计，“二十一十九”可以与新编辑器无缝协作，并作为如何与之正确集成的演示。如果您选择不支持这种在主题中带有块的页面内容创建新方法，那么将来的吸引力将非常有限。短期内可能不会那么多，但我希望用户会Swift增长，期望紧密的编辑器集成成为主题的最低要求。

编辑体验非常流畅，并且将管理视图与前端视图尽可能地匹配。 WordPress 5.0随附的每个核心块都应用了自定义样式以匹配主题。在这方面做得很好。

通常，将主题保持在定期的开发周期中以使它们与现代主题中预期的最新功能和最佳实践保持最新是有益的。考虑到这一点，“二十十九”主题是比较主题的良好基准。

如果您熟悉流行的_s WordPress入门主题，那么您将拥有领先优势，因为“二十十九”部分基于该主题和另一个主题： Gutenberg入门主题。

功能一览

现在，让我们看一下“二十一十九”的一些杰出功能。但是在我们这样做之前，值得一提的是，我们用于本文的主题版本是v1.2。如果您使用的是更高版本，则与此同时某些主题功能可能已更改。

也许《二十一世纪》最明显的方面是缺少侧边栏支持。默认情况下，您只能在所有页面上使用单列布局。因此，如果您想开箱即用地使用多列布局，将会感到失望。

有位于下方的网站内容页脚小工具区域。有人可能会说这从技术上讲是一个侧边栏，但是它不能用来显示传统的列布局意义上的侧边栏-当然，除非您采用了一些自定义CSS向导！

可以将特色图像添加到帖子和页面中，建议使用2000 x 1200像素的尺寸，以获得最佳效果。定制器中甚至还有一个主题选项，可为所有特色图像着色。

您可以通过定制程序启用着色。只需打开它，然后单击“ 颜色”菜单。然后选中标有使用原色将滤镜应用于特色图像的框。

设置为特色图片的任何图片都会在页面加载时以100vh显示。此单位指定浏览器窗口内视口高度的百分比。

无论您使用的是哪种设备，或当前使用的浏览器窗口的高度如何，指定100vh都将始终导致浏览器视口的高度（即浏览器窗口的可见区域）非常有用。

相同的定制程序设置屏幕还可以用于通过新的滑块颜色选择器控件设置自定义主题强调颜色。这看起来很棒，并且拖动滑块手柄以实时更新颜色时，控件感觉非常漂亮。

但是，如果要设置特定的颜色值，则没有明显的方法可以这样做，这有点令人困惑。您可以通过使用左右箭头光标键微调滑块值来获得更精确的控制，但是滑块的步长值不足以覆盖所有可能的颜色值。同时显示文本输入控件以允许输入准确的颜色值会更有意义。

二十一十九支持的另一个功能是站点徽标，该徽标也可以通过定制程序进行配置。单击站点标识 ，然后选择徽标，显示WordPress媒体对话框。只需上传图像或从媒体库中选择一个现有图像作为新徽标。然后将其插入到定制器面板和预览窗口中。

徽标所用图像的大小无关紧要，但是我建议使用宽度和高度匹配的尺寸。但是，如果图像的纵横比不接近1：1，则可以选择在将图像插入到定制器中之前对其进行裁剪。

不过，您可能会发现徽标功能有一些限制，因为它仅在网站标题和标语的左侧呈现一个小的圆形徽标。当悬停在徽标图像周围时，还会在徽标图像周围绘制一个黑眼圈。

如果您想要一个更矩形的徽标，并且需要灵活的位置和大小，则需要应用自定义样式。还需要应用过滤器来更改默认正方形尺寸以匹配您的徽标。

至于导航菜单，“二十十九”注册了三个单独的位置，您可以在以下位置显示各个菜单项：

主
页脚菜单
社交链接菜单

“ 主菜单 ”和“ 页脚菜单”菜单位置是标准菜单，您可以按常规方式添加菜单项。主菜单还支持子菜单项，但默认情况下， 页脚菜单不支持。

在这里，您可以看到用于“ 页脚菜单”的菜单 ，这次仅输出平面链接列表。

另一方面，“ 社交链接菜单”希望您将链接添加到社交媒体资料中。在定制器菜单编辑器中，为要显示的每个社交媒体配置文件添加定制URL。如果链接与受支持的社交媒体网站之一匹配，则它将在菜单中由与指定社交媒体域匹配的图标替换。

当将特色图像应用于页面时， Social Links Media图标的颜色将反转。

支持的社交媒体链接包括：

脸书
的GitHub
Instagram的
领英
Pinterest的
推特
YouTube等

编辑支持

如前所述，“二十十九”与新的WordPress 5 Gutenberg编辑器集成得很好。通过显式声明通过add_theme_support()函数支持哪些核心编辑器功能来完成此操作。有几个调用该函数在二十九中的functions.php，它位于根主题文件夹。

与块支持有关的add_theme_support()调用是：

add_theme_support( 'wp-block-styles' )
add_theme_support( 'align-wide' )
add_theme_support( 'editor-styles' )
add_theme_support( 'editor-font-sizes' )
add_theme_support( 'editor-color-palette' )

这些都代表了新编辑器的特定功能。让我们依次看看每个。

块样式主题支持

在编辑器中，所有核心块均应用了默认样式，以使它们易于使用。但是，这些默认块样式默认情况下不会应用于前端，除非您将其添加到主题中：

add_theme_support( 'wp-block-styles' );

当然，您可以根据需要覆盖任何核心默认样式，但是最好包括对它们的支持，因此您只需要覆盖所需的样式即可，而不必从头开始定义所有内容。

调整广泛的主题支持

启用此功能后，您现在在编辑器中有两个附加的对齐选项：宽对齐和全对齐。

这些选项并非适用于所有块，但是大多数块都支持它们，包括图像块，图库块和表块。

实施此功能的实际样式alignwide您，因为WordPress仅将alignwide或alignfull CSS类添加到相关的块包装HTML元素中。不过，请放心，“二十十九”包含宽和全角内容所需的所有必要样式，因此默认情况下您无需执行任何其他操作。

编辑器样式主题支持

这是神奇的地方，可以完成将后期编辑体验与前端进行匹配的实际工作。所有需要的是：

add_theme_support( 'editor-styles' );

不幸的是，这还不是那么简单。您还需要将WordPress指向要用于覆盖编辑器样式以匹配前端样式的样式表。

add_editor_style( 'style-editor.css' );

二十九岁使用位于主题根文件夹中的style-editor.css文件执行此操作。

编辑器字体大小主题支持

某些段落（例如，段落段落）允许您从预设的字体大小列表中进行选择。可以通过add_theme_support( 'editor-font-sizes' )进行自定义。为此，将数组作为包含新字体选择的第二个参数传递。

二十十九增加了四个独特的字体大小，如下所示：

add_theme_support('editor-font-sizes', array(
    array(
		'name' => __('Small', 'twentynineteen') ,
		'shortName' => __('S', 'twentynineteen') ,
		'size' => 19.5,
		'slug' => 'small',
	) ,
	array(
		'name' => __('Normal', 'twentynineteen') ,
		'shortName' => __('M', 'twentynineteen') ,
		'size' => 22,
		'slug' => 'normal',
	) ,
	array(
		'name' => __('Large', 'twentynineteen') ,
		'shortName' => __('L', 'twentynineteen') ,
		'size' => 36.5,
		'slug' => 'large',
	) ,
	array(
		'name' => __('Huge', 'twentynineteen') ,
		'shortName' => __('XL', 'twentynineteen') ,
		'size' => 49.5,
		'slug' => 'huge',
	) ,
));

编辑器调色板主题支持

WordPress编辑器实现了可用于样式核心块的默认调色板。而且，您可能已经猜到过，可以自定义这些颜色。

二十十九实现其自己的块调色板为：

add_theme_support('editor-color-palette', array(
    array(
		'name' => __('Primary', 'twentynineteen') ,
		'slug' => 'primary',
		'color' => twentynineteen_hsl_hex('default' === get_theme_mod('primary_color') ? 199 : get_theme_mod('primary_color_hue', 199) , 100, 33) ,
	) ,
	array(
		'name' => __('Secondary', 'twentynineteen') ,
		'slug' => 'secondary',
		'color' => twentynineteen_hsl_hex('default' === get_theme_mod('primary_color') ? 199 : get_theme_mod('primary_color_hue', 199) , 100, 23) ,
	) ,
	array(
		'name' => __('Dark Gray', 'twentynineteen') ,
		'slug' => 'dark-gray',
		'color' => '#111',
	) ,
	array(
		'name' => __('Light Gray', 'twentynineteen') ,
		'slug' => 'light-gray',
		'color' => '#767676',
	) ,
	array(
		'name' => __('White', 'twentynineteen') ,
		'slug' => 'white',
		'color' => '#FFF',
	) ,
));

这会将五种独特的颜色添加到自定义调色板中：