二〇二一

二〇二一（Twenty Twenty-One）是WordPress 5.6的新默认主题。

WordPress新的默认主题的截图，Twenty Twenty-One。

Twenty Twenty-One是您创意的空白画布，其区块编辑器就是您最出色的画笔。凭借新的区块模式，您可以在几秒钟内创建一个漂亮的布局，本主题的柔和色彩和醒目但永恒的设计将让您的工作熠熠生辉。快来体验吧！了解Twenty Twenty-One如何提升您的作品集、商业网站或个人博客的体验。

规格概述

  • 需要最低WordPress 5.3版本
  • 需要最低PHP 5.6版本
  • On a 1440px laptop screen, the main column width is up to 1240px wide. The “Wide” block width is also up to 1240px wide, and the “Full” block width extends the entire width of the screen.
  • The recommended Featured Image size is 610px wide or larger.
  • The recommended size of the logo is at least 300px wide, or at least 100px tall.
  • Twenty Twenty-One has one widget area that displays below the site content and above the footer. Each widget takes up one third of the available space, to a maximum of 380px wide.

无障碍特性

  • 跳转到内容链接
  • 带有标记的HTML语义
  • 支持高对比度模式和黑暗模式
  • 支持键盘导航

入门内容

Twenty Twenty-One带有入门内容，说明了如何使用主题的区块模式和样式。您只能在没有任何页面和文章的全新安装站点上激活入门内容。 要激活，请转到“定制器”，然后单击“发布”。

完全支持区块编辑器

Twenty Twenty-One的设计和开发充分利用了区块编辑器所带来的创造性自由。我们对列区块给予了额外的重视，因此您可以通过复杂的区块布局来创建令人印象深刻的首页面。Twenty Twenty-One包含了区块编辑器的样式，因此您在编辑器中看到的几乎与最终结果完全一致。

区块模式

超大文本

A screenshot of the large text block pattern, with the text: A new portfolio default theme for WordPress.
A heading with a 144px text size

链接区块

The links area block pattern has a large text followed by social links and an email address. The section has a thin border on all four sides.
For your social links and call-to-action

联系信息

The contact information pattern has 3 columns that contains email and phone number, address and social media links with icons.
How to get in touch with you

媒体及文字文章标题

The media & text article title has a left aligned image combined with text section. The section has a thin border on all four sides.
Highlight your best image and include a summary at the beginning of your article

重叠图像

The overlapping images block pattern displays 3 images in two columns. The left column has two vertically placed images. The right hand column contains one mage and overlaps the left column.
Place images in a beautiful column pattern

两张图片

The two images block pattern has two horizontally placed images. The images have different sizes and one image has a frame.
Showcase images next to each other with different sizes and borders

重叠的图像和文本

The overlapping images and text pattern uses 3 columns. The two outer columns contains images. The middle column contains a paragraph with a border around it, and overlaps the left most column.
Mix images and text content in columns

作品集列表

The portfolio list pattern has a vertical list of links and miniature images. The image is displayed to the right of the link text. Each portfolio item is separated by a bottom border.
Display links to your portfolio items together with miniature images

进一步了解关于区块模式以及如何添加其

区块样式

在编辑器中的区块设置侧栏中选择区块样式。

社交链接：除了默认的样式外，您还可以选择深灰色的图标颜色

分隔符：除了默认的样式外，您还可以选择一个额外的粗分隔符。

边框

在 Twenty Twenty-One 中，可将边框添加到以下区块中：

  • 媒体和文字
  • 最新文章-边框和分隔线样式
  • 图像-边框和边框样式
  • 封面
  • 分组

重叠列

列区块有一个可选的样式，称为重叠，其中每隔一列的内容与前一列重叠：

A screenshot of a columns block with the overlapping style applied. The first column has a white background. The second column has a black background and overlaps the bottom right corner of the first column.

调色板

主题提供了几种推荐的颜色，配合主题的设计。在背景色设置和编辑器中选择颜色。及相匹配的渐变色

Black

White

Dark Grey

Grey

Green

Blue

Purple

Red

Orange

Yellow

自定义背景色

Twenty Twenty 包含了更改您站点背景颜色的选项。

要更改背景颜色，请导航到 “定制器”→”颜色和amp;黑暗模式”

添加您自己的自定义颜色，或从调色板中选择一种颜色

您网站上元素的颜色将根据您选择的背景颜色自动计算。这可确保色彩对比度始终保持在足够高的水平，以便所有访问者都能很好访问

站点 Logo

Twenty Twenty-One包含有站点logo设置，可用来显示企业的logo或自己的图像。您可以通过进入 “定制器”→”占点logo “来设置您的 Logo。

建议Logo的大小设置为，宽度至少300px，高度至少100px。 Logo在页眉和页脚可见。


网站头部的Logo是居中的。如果您想隐藏站点标题和附标题， Logo将被放置在菜单的左侧：

摘要设置

在 “定制器 “中，您会发现一个名为 “摘要设置 “的面板。在这里，您可以选择 归档页面是否应显示完整内容或仅显示摘要。搜索结果页面仅会显示摘要。

菜单

Twenty Twenty-One包含两个菜单位置：

  • 位于网站顶部的传统响应式水平菜单，支持下拉菜单。
  • 位于屏幕底部的小工具区域和页脚之间的水平菜单，仅支持一级导航。
    • /ol

    您可以通过 “外观”→”菜单 “来选择菜单位置，在这里您可以将菜单分配给 “主导航 “或 “页脚导航”。如果您喜欢，也可以同时使用两个菜单位置。

    添加社交图标

    有两种方案可以在您的站点上添加社交图标：

    • 使用编辑器中的“社交图标”区块。
    • 在页脚菜单中添加指向社交媒体网站的链接。

    当您创建社交菜单时，您提供的文本标签将被隐藏，并在其位置上显示一个图标。如果您不熟悉此功能，请查看 来自Twenty Fifteen的文档。

    Twenty Twenty-One 提供了以下社交媒体服务的图标:

    • 500px
    • Amazon
    • Bandcamp
    • Behance
    • Codepen
    • DeviantArt
    • Dribbble
    • Dropbox
    • Etsy
    • Facebook
    • Feed
    • Flickr
    • Foursquare
    • GitHub
    • GitLab
    • Goodreads
    • Google
    • Instagram
    • Kickstarter
    • JSFiddle
    • Last.fm
    • LinkedIn
    • Mail
    • Mastadom
    • Medium
    • Meetup
    • Pinterest
    • Pocket
    • Reddit
    • Skype
    • Snapchat
    • SoundCloud
    • Spotify
    • TikTok
    • Tumblr
    • Twitch
    • Twitter
    • Vimeo
    • VK
    • WhatsApp
    • WordPress
    • Yelp
    • YouTube

    Additional icons can be added following the steps under “Adding icons in Twenty Twenty” at Themes field guide: WordPress 5.5.

    小工具

    Twenty Twenty-One支持一个小工具区域，位于每个页面的最底部。每个小工具列的宽度为网站宽度的33%，最大可达380px。

    The footer widget area has 3 columns. Below the widget area is a site information section with the site title or logo, and a ink to WordPress.org with the link text "Proudly powered by WordPress"

    文章形式

    Twenty Twenty-One支持文章形式。
    文章形式可在编辑器设置侧栏中选择→文章→状态&可见性。

    • 标准
    • 旁白
    • 图集
    • 链接
    • 图片
    • 报价
    • 状态
    • 视频
    • 音频
    • 聊天

    语言支持

    Twenty Twenty-One 包含了 RTL 语言的样式

    该主题使用了原生系统字体集。此字体集提供了对大量语言的支持。

    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
    展开此列表以查看用于非拉丁语言的字体。
    • ar, ary, azb, ckb, fa-IR, haz, ps: Tahoma, Arial, sans-serif.
    • zh-CN: PingFang SC, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
    • zh-TW: PingFang TC, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
    • zh-HK: PingFang HK, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
    • bel, bg-BG, kk, mk-MK, mn, ru-RU, sah, sr-RS, tt-RU, uk: Helvetica Neue, Helvetica, Segoe UI, Arial, sans-serif.
    • bn-BD, hi-IN, mr, ne-NP: Arial, sans-serif.
    • el: Helvetica Neue, Helvetica, Arial, sans-serif.
    • gu: Arial, sans-serif.
    • he-IL: Arial Hebrew, Arial, sans-serif.
    • ja: sans-serif.
    • ko-KR: Apple SD Gothic Neo, Malgun Gothit, Nanum Gothic, Dotum, sans-serif.
    • th: Sukhumvit Set, Helvetica Neue, Helvetica, Arial, sans-serif.
    • vi: Libre Franklin, sans-serif.

    支持黑暗模式

    Twenty Twenty-One主题的无障碍辅助功能支持访问者在其操作系统或浏览器设置中的颜色方案偏好。该功能是可选的，并支持大多数操作系统，包括Android、iOS、OSX、Windows 10以及大多数Linux发行版。

    如果您启用了 “黑暗模式”，则您的站点将使用浅色或深色的配色方案显示给访问者，并尊重其操作系统偏好。根据他们的照明条件或个人偏好，他们可以选择使用网站右下角的专用按钮（或左下角的 RTL 语言）来切换颜色方案。

    通过定制器启用黑暗模式

    要激活 “黑暗模式支持”，您可以进入 “定制器 “中的 “颜色和amp；黑暗模式 “部分。如果您为网站的背景选择了浅色，您将能够看到并激活Dark Mode Support设置。您选择的背景颜色将被应用于浅色模式，而暗色模式的颜色会自动优化。您可以使用预览见面底部的 “黑暗模式开/关 “按钮在您的预览中的暗色和亮色方案之间进行切换。

    编辑器中的黑暗模式

    默认情况下，编辑器将遵循您的操作系统的配色方案设置。如果您在占点的前端选择了不同的方案（使用了 “黑暗模式 “开/关按钮），那么编辑器将使用您的首选方案。

    基于区块的主题

    Twenty Twenty-One 也正在构建一个实验性的 基于区块的主题。您可以通过GitHub来跟进开发、贡献和测试主题。

    支持和资源

    在Twenty Twenty-One支持论坛中获取社区帮助

    您也可以阅读主题的更新日志.

此文章对你有帮助吗？需如何改进呢？