Twenty Twenty是最新版本的WordPress 5.3附帶的新默認WordPress主題。與其前身Twenty Nineteen一樣，Twenty Twenty的設計特別關注古騰堡。但兩者之間存在很大差異：二十二十不是從頭開始建造的;它是基於WordPress社區的現有主題而設計的。
由於我們喜歡WordPress的所有內容，因此我們仔細研究了新的Twenty Twenty主題，窺視了函數文件，樣式表和模板。
即使Twenty Twenty遠沒有一點穩定 – 在撰寫本文時 – 許多問題仍未解決，今天我們將與您分享我們對新默認WordPress主題的初步想法。
厭倦了緩慢的WordPress主機和subpar支持？我們在Kinsta做不同的事情。查看我們的託管計劃
讓我們深入了解Twenty Twenty WordPress主題！
- 快速介紹二十二十
- 安裝二十二十
- Twenty Twenty的主題特色
- 定製二十二十的外觀
- 如何為二十二十主題創建一個兒童主題
Twenty Twenty WordPress主題預覽（圖片來源：製作WordPress核心版）
二十二十主題快速介紹
Twenty Twenty建立在Chaplin之上，AndersNorén是一個免費的WordPress主題，也是WordPress 5.3的默認主題設計主管。
Chaplin可以在WordPress.org存儲庫中下載，根據Anders的說法，它是用Block Editor構建的：
卓別林是一個功能豐富的WordPress主題，讓您可以完全控制您網站上的字體和顏色。它是從頭開始構建的，並考慮了新的塊編輯器，可以輕鬆地在帖子和頁面上創建外觀漂亮的布局。
卓別林WordPress主題
Twenty Twenty背後的理念是：靈活性，清晰度和可讀性是新主題的重點關鍵詞。
Twenty Twenty提供單列布局和三個帖子/頁面模板，旨在讓WordPress管理員和設計人員可以直接在塊編輯器中自由創建自定義布局，方法是利用列等元素的寬廣和完整對齊，圖像，以及Gutenberg 5.5引入的組塊。
正如安德斯所說：
Twenty Twenty的核心設計靈活。如果要將其用於組織或企業，可以將列，組和媒體與寬對齊和完全對齊組合，以創建動態布局以展示您的服務或產品。如果您想將它用於傳統博客，那麼居中的內容列也可以使其成為完美的。
除此之外，Twenty Twenty還帶有一個新的字體：Inter。它是由Rasmus Andersson設計的免費開源字體系列，專門用於混合大小寫和小寫文本的可讀性，特別是小字體。
Inter字體系列
Inter為大標題提供了更強的個性，但是當使用交替的文本大小時，您將從中獲得最大的收益，如WordPress.org博客文章中的主題預覽所示：
Twenty Twenty排版：影響和可讀性
Twenty Twenty不僅是一個功能齊全的主題，還是一個標誌著WordPress編輯UI未來發展的重要新步驟的主題。 Twenty Twenty基本上依賴於塊編輯器來編輯和布局內容，而主題定製器則依賴於頁眉，頁腳和其他自定義。
話雖如此，現在是我們安裝這個WordPress主題並運行它的時候了。
如何安裝Twenty Twenty
即將推出的默認主題將遵循WordPress 5.3發布計劃。這意味著，在撰寫本文時，Twenty Twenty仍然無法在WordPress主題目錄中下載，也不會發現它在WordPress 5.3 Core中合併了一段時間。
無論如何，您可以在GitHub上獲得正在進行的Twenty Twenty版本，並將其安裝在當前穩定版本的WordPress以及WordPress 5.3中。一旦主題合併到核心，Github存儲庫將被棄用。同時，您可能希望從WordPress 5.3發布計劃中保存以下日期：
- 2019年9月23日：Beta 1
- 2019年9月30日：Beta 2
- 2019年10月7日：Beta 3
- 2019年10月15日：候選人1
- 2019年10月22日：候選人2
- 2019年10月29日：候選人3
- 2019年11月5日：發布候選人4（如果需要）
- 2019年11月12日：WordPress 5.3發布的目標日期。
要開始使用Twenty Twenty，請按照以下步驟操作：
- 從GitHub獲取zip包。
- 將zip文件上載到WordPress儀錶板中的開發安裝或通過SFTP。
- 瀏覽到外觀→主題，然後單擊主題預覽圖像上的激活按鈕。
- 轉到外觀→自定義以配置Twenty Twenty。
就是這樣！您現在可以在登台網站或本地環境中開始運行測試。
重要
Twenty Twenty目前正在開發中，許多問題尚未解決。你不應該在生產中使用它。
GitHub上的一個未解決的問題
現在您已經準備好了，讓我們繼續前進並深入了解Twenty Twenty WordPress主題。
Twenty Twenty的主題特色
Twenty Twenty不是一個功能齊全的WordPress主題，而是一個精簡和最小的主題，旨在讓開發人員和網站管理員可以自由地為他們的帖子和頁面構建自定義內容布局。像Twenty Nineteen一樣，Twenty Twenty已經為Gutenberg建造，主要取決於Gutenberg的生命周期（更多關於這個主題的Matt Mullenweg在WCEU 2019年的視頻中）。
該主題支持許多主題功能，如內容寬度（580），自動提要鏈接，帖子縮略圖，標題標籤和一些HTML5元素（搜索表單，評論表單，評論列表，圖庫和標題）。
其他功能為Theme Customizer添加選項。這些包括自定義背景和自定義徽標。下面的代碼片段顯示了主題函數文件中啟用的這些功能：
//自定義背景顏色add_theme_support（'custom-background'，array（'default-color'=>'F5EFE0'））; //自定義徽標add_theme_support（'custom-logo'，數組（'height'=> 240，'width'=> 320，'flex-height'=> true，'flex-width'=> true，'header-text '=> array（'site-title'，'site-description'），））; 
二十二十年代的主題定製
Twenty Twenty還支持Gutenberg的一些特定功能。首先，主題支持寬和全寬對齊：
//添加對完整和寬對齊圖像的支持。 add_theme_support（'align-wide'）;
如果用戶在Customizer中設置了強調顏色（默認情況下啟用），則啟用編輯器調色板：
//如果我們有強調色，請將它們添加到塊編輯器調色板中（if editor_color_palette）{add_theme_support（'editor-color-palette'，$ editor_color_palette）; } 
主題定製器中的背景顏色和強調色
Twenty Twenty主題在塊編輯器中提供了四種編輯器字體大小：
// Gutenberg字體大小add_theme_support（'editor-font-sizes'，array（array（'name'=> _x（'Small'，'Gutenberg中小字體的名稱'，'twentytwenty'），'shortName'= > _x（'S'，'Gutenberg編輯器中小字體的短名稱。'，'二十二'），'size'=> 16，'slug'=>'small'，），數組（'name' => _x（'常規'，'Gutenberg常規字體大小的名稱'，'二十二'），'shortName'=> _x（'M'，'Gutenberg編輯器中常規字體大小的簡稱。'， 'twotwenty'），'size'=> 18，'slug'=>'regular'，），array（'name'=> _x（'Large'，'Gutenberg中大字體的名稱'，'二十二'' ），'shortName'=> _x（'L'，'Gutenberg編輯器中大字體的短名稱。'，'二十二'），'size'=> 24，'slug'=>'large'，） ，array（'name'=> _x（'較大'，'Gutenberg中較大字體的名稱'，'二十二'），'shortName'=> _x（'XL'，'較大的fon的短名稱在Gutenberg編輯器中的大小。'，'二十二'），'size'=> 32，'slug'=>'更大'，），））; 
編輯器的塊文本設置中的字體大小
就是這樣。主題在功能上也很小，但它可以通過兒童主題輕鬆擴展，我們將在一分鐘內深入研究。
如何定製二十二十的外觀
Twenty Twenty來自任何鈴聲和口哨，但與Gutenberg（或與良好的頁面構建器）一起使用時提供了極大的靈活性。
自定義二十二十主題
標題處理網站標題，網站描述，搜索按鈕和模式菜單。您可以在定製程序的「站點標識」和「站點標題」部分中啟用/禁用所有這些元素：
可以在主題定製器中啟用/禁用站點標題和標語
在右側，您將找到一個搜索按鈕和一個菜單模式框，您可以在「站點標題」部分中啟用/禁用它：
站點標題部分和搜索模式
「定製程序」的「封面模板」部分處理封面模板頁面模板的自定義設置。在那裡，你會發現：
- 用於在背景圖像上啟用視差效果的選項（固定背景圖像）。
- 顏色選擇器可為特色圖像疊加設置自定義背景顏色和文本顏色。
- 兩個下拉菜單，用於設置混合模式和不透明度值。
自定義程序中的封面模板部分
菜單部分有三個菜單位置：主菜單，頁腳菜單和社交菜單。默認情況下，主菜單顯示在您可以切換的模式框的標題中。通過禁用自定義程序中的菜單模式，主菜單顯示為常規導航菜單。
頁腳處理頁腳菜單和社交菜單位置以及兩個小部件區域。下圖顯示了主題的頁腳及其所有元素：
Twenty Twenty中的模板頁腳
最後，附加CSS部分允許您包含自定義樣式。下圖顯示了我們用於使用封面模板微調頁眉外觀的聲明：
額外的CSS
在帖子和頁面布局方面，您可以從三種不同的模板中進行選擇。除了默認模板，Twenty Twenty還提供了一個Cover模板和一個Full Width模板，您可以使用它來自定義內容的外觀。
Twenty Twenty中的單個帖子/頁面模板
Twenty Twenty中的塊編輯器
由於其最小的方法，Twenty Twenty的外觀主要依賴於塊編輯器。我們使用Gutenberg版本6.4.0在Twenty Twenty上運行測試。此版本提供了大量新功能，增強功能和錯誤修復，大大改善了編輯體驗。
一些塊派上用場，特別是在構建單頁網站時。像媒體和文本和封面這樣的模塊已得到改進，現在在展示產品和/或專業組合方面看起來很棒：
媒體和文本塊（完全對齊）
儘管如此，由於Gutenberg是一個正在進行的項目，你可能想看看一些最流行的插件，允許向編輯器添加更多的塊。
以下是可能值得一試的插件快速列表：
- 古騰堡街區
- CoBlocks
- 可堆疊
- 原子塊。
- 先進的古騰堡
主題定製器和塊編輯器在外觀和布局定製方面做得很好，但是子主題可以讓您更好地控制頁面的外觀。
如何為二十二十主題創建一個兒童主題
為WordPress構建子主題可能很有趣，也是一個開始職業生涯的好方法，作為WordPress主題開發人員和Twenty Twenty在WordPress中構建子主題時可能是一個很好的父主題。那麼，你為什麼不嘗試一下呢？ ?
如果您不知道從哪裡開始使用子主題，請務必查看我們關於如何在WordPress中創建子主題的擴展指南。
我們用WordPress增加了1,187％的流量。我們將告訴你如何。加入20,000多名其他人通過內部WordPress提示獲取我們的每周時事通訊！立即訂閱成功！感謝您的訂閱
您將在一周內收到下一期Kinsta時事通訊。
訂閱Kinsta時事通訊訂閱我同意條款和條件以及隱私政策
現在，讓我們為Twenty Twenty構建我們的第一個兒童主題！
在wp-content / themes下創建一個新目錄，並將其命名為二十二個孩子或任何你喜歡的東西。
瀏覽到wp-content / themes / twentytwenty-child並使用以下標題創建一個新的style.css文件：
/ *主題名稱：My Twenty Twenty Child主題主題URI：https：//example.com描述：Twenty Twenty的子主題。作者：您的姓名作者URI：https：//example.com/ Template：twentytwenty版本：1.0許可證：GNU通用公共許可證v2或更高版本許可證URI：https：//www.gnu.org/licenses/gpl-2.0.html * /
接下來，我們必須包含父主題的樣式表。在同一目錄中，創建以下functions.php文件：
<？php / *將來自父主題的腳本和樣式排隊* / function twentytwenty_styles（）{wp_enqueue_style（'parent'，get_template_directory_uri（）。'/ style.css'）; } add_action（'wp_enqueue_scripts'，'twentytwenty_styles'）;
現在轉到外觀→主題並激活您的兒童主題。您現在可以從自定義開始。
激活子主題
您可以在Twenty Twenty中更改幾乎任何內容，從添加自定義模板到添加自定義樣式或更改主題的默認樣式。
在這裡，我將向您展示如何為單個帖子和頁面創建新的自定義模板。
在Twenty Twenty中添加自定義帖子/頁面模板
到目前為止，我們已經為Twenty Twenty創建了一個子主題，並將父樣式附加到子主題的樣式表。在下面的示例中，我們將刪除頁眉和頁腳，為帖子/頁面模板文件中的頁面正文騰出空間。
第1步
將以下文件從父主題複製並粘貼到子主題的目錄中：
- 模板全width.php
- header.php文件
- footer.php
第2步
將template-full-width.php重命名為template-canvas.php（或任何你喜歡的）。打開文件，刪除當前內容，然後粘貼以下內容：
<？php / *模板名稱：Canvas模板模板帖子類型：post，page * / get_template_part（'singular'）;
模板名稱設置模板文件的名稱，您將在塊編輯器中看到它，而模板文件類型定義支持此模板文件的帖子類型。 get_template_part函數從父主題載入singular.php文件（我們的子主題中不需要此文件的副本）。
轉到WordPress儀錶板並創建一個新帖子。現在，您應該在「帖子屬性」部分中找到其他頁面模板。
Post Attributes中提供了一個新模板
第3步
現在是有趣的部分。在您喜歡的文本編輯器中打開header.php，並將header元素包裝在以下if語句中：
此代碼檢查當前頁面是否是單個帖子/頁面/自定義帖子類型，以及頁面模板是否不是template-canvas.php。如果頁面模板是template-canvas.php，那麼它將不包括站點標題和模式菜單。
同樣，當活動頁面模板是我們的畫布時，我們可以從帖子頁面中刪除頁腳。只需在footer.php中添加相同的條件，如下所示：