帶有二十二十二主題的WordPress全站編輯

已發表: 2022-02-16

介紹

毫不奇怪, WordPress 全站編輯帶來了巨大的驚喜。 在 5.9 版中,WordPress 的新時代開始了,專注於將完整的網站編輯帶入生活的能力。

這一切都始於222 個 WordPress 主題

二十二十二個 WordPress 主題在某種意義上是通用的,您可以使用模板部分使用新頁面模板創建幾乎任何東西。 您還可以創建新的模板部件並在其他頁面模板中使用它們。

這一切都是為了允許用戶創建完整的體驗,而無需依賴繁重編碼的繁重頁面構建器(儘管 Gutenberg 插件是另一回事)。 您幾乎可以僅使用 2022 WordPress 主題來創建完整的體驗。

讓我們從二十二十二主題探討全站編輯方面。

內容隱藏
1簡介
2序言:WordPress 5.9 版簡介
2.1新的編輯方式
3塊模式
4模板和模板部件
4.1頁面模板
4.2模板部分
5塊二十二十二主題
5.1網站標誌塊
5.2導航塊
5.3 WordPress側邊欄注意事項
5.4優秀的圖庫塊
5.5塊功能
6用於 WordPress 完整站點編輯的大修列表視圖
7獎勵部分:222 WordPress 主題的兒童主題
7.1為什麼需要兒童主題?
7.2如何在二十二十二主題中手動創建子主題?
7.2.1步驟 1:安裝並設置文件夾到 localhost
7.2.2第二步:創建style.css和functions.php文件
7.2.3第 3 步:添加您的自定義代碼
8常見問題
8.1我在哪裡可以找到主題和插件文件編輯器?
8.2如何在 2222 WordPress 主題中自定義特定頁面?
8.3如何在最新的二十二十二塊主題中添加或自定義菜單?
8.4我應該適應古騰堡嗎?
8.5我可以將一個模板部分用於多個頁面嗎?
8.6 PostX 插件與 Gutenberg 兼容嗎?
9最後的想法

序言:WordPress 5.9 版簡介

使用新版 WordPress( 5.9-Joesphine 版),您首先會注意到的一件事是定制器的消失和基於塊的編輯的主導地位。

新的編輯方式

通過全新安裝的 WordPress,您現在可以獲得 222 個 WordPress 主題。 如果您從 WordPress 儀表板轉到外觀,那麼您會注意到只有一個選項稱為編輯器。 編輯器帶您編輯頁面模板。

WordPress 全站編輯的願景

不幸的是,由於Gutenberg 基於塊的編輯的主導地位,整個定製過程發生了變化。 這也消除了對複雜主題頁面的需求。

總體而言,對全站 WordPress 編輯有很大的推動作用。 Gutenberg 塊現在是在 5.9 版中設計 WordPress 網站的關鍵方式。 坦率地說,不再需要復雜的頁面自定義,因為您可以輕鬆地使用塊來創建很棒的網站。

注意:最新版本的 WordPress 很棒。 不幸的是,在將您的 WordPress 網站快速有效地提供給讀者時,仍然存在一些缺點。 您知道 PostX 可以幫助您嗎? PostX 允許您使用完全支持 Gutenberg 和新的 222 主題的入門包和佈局無縫展示您的內容。 請務必查看 PostX Gutenberg Blocks 插件的功能:

探索 POSTX

“全局樣式”的引入是朝著 WordPress 願景邁出的又一大步。 儘管當前全局設置中只有三個元素(您可以逐塊自定義這些設置),但未來幾天可能會出現更多選項。

如果您想了解有關全局樣式的更多信息,我們也有相應的資源。 確保探索它以了解有關全局樣式和模式的更多信息:

閱讀新的 WordPress 塊主題中的全局樣式和模式

全局設置中的三個元素是 a) Typography , b) Colors , c) Layout 。 您可以全局更改所有這些內容,也可以將其單獨設置為每個塊。

此外,塊、佈局、圖案,每樣東西都有不同的味道。 整體而言,定制部門有了明顯的發展。 讓我們一一探索這些變化。

塊模式

WordPress 5.9 版中,塊模式感覺更加精緻。 如果您轉到編輯器頁面並單擊模式,您會發現一個廣泛的選項庫,這些選項很容易部署。

這些模式是基於塊的,這意味著它們是完全可定制的。 您也可以從 wordpress.org 找到各種模式。 您所要做的就是將任何模式複制並粘貼到您的WordPress 站點。 它會自動出現在您的網站上。

塊模式只是教育自己使用 WordPress 編輯完整網站的方法之一。 模板和模板部分使最新的 WordPress 更新如此有前途。

請務必查看以下視頻,以在 222 個 WordPress 主題中創建自定義頁面模板。 您所要做的就是創建模板部件和頁面模板來創建您的自定義頁面:

在二十二十二主題中創建自定義頁面模板

為了了解更多關於使用頁面模板和模板部分的信息,您可以查看以下博客資源:

閱讀有關創建自定義頁面模板的信息

模板和模板部件

頁面模板

WordPress 5.9之前,您可以使用常規塊來創建頁面佈局。 您可以使用古騰堡塊(當時不是很流行)或使用頁面構建器來創建特定頁面。

現在,您可以使用模板為多個頁面創建相同的佈局,反之亦然。 如果要在 5.9 版中創建新頁面,則需要為該特定頁面創建模板。 如果您希望新頁面繼承設計,您可以為該頁面選擇特定模板並發布它。

這個新頁面現在將具有相同的佈局。

您可以在二十二十二主題編輯器中創建新模板,也可以在頁面本身上創建它們。 您需要做的就是確保您的頁面找到正確的模板。

Page templates and template parts in the twenty twenty-two theme
二十二十二主題中的頁面模板和模板部分

模板零件

模板部分是使頁面模板完整的部分。

通常,您在二十二十二個 WordP 主題中有一些現成的頁面模板可供使用。 儘管如此,如果您需要創建一個新的頁面模板,您可以添加各種模板部分來創建一個全新的頁面模板。

您不僅限於默認附帶 2022 主題的現成模板部分。 在 WordPress 5.9 版中,您可以創建自己的模板部分(該過程幾乎類似於創建新頁面模板)。

如果您想使用新的 222 主題創建自定義主頁,我們建議您花一些時間觀看視頻:

在 WordPress 5.9 版中創建自定義主頁

您所要做的就是通過命名來保存您的新模板部分。 您可以添加各種塊來創建自己的模板部分。 如果您保存模板部分,您可以使用和重複使用模板部分。

模板部件的有用之處在於,您可以以一種非常有效的方式創建模板部件,然後在頁面模板中根據需要多次使用它。 這為在 WordPress 中進行全站點編輯鋪平了道路。

在以更快的方式創建自己的個人博客時,模板部分是節省時間的好方法。 當您開始構建您的 WordPress 網站時,您應該看看它。

二十二十二主題積木

二十二十二主題有很多積木。 我們只會討論 5.9 版中超級重要的那些(從我們的角度來看)。 特別是有4 個塊對於提供完整的站點編輯體驗非常重要。

網站標誌塊

請務必查看相關視頻以了解有關在最新的 WordPress 塊主題中添加網站圖標的更多信息:

如何在二十二十二個 WordPress 主題中添加/更改站點圖標

站點徽標塊是展示您身份的關鍵塊之一。 這裡要記住的關鍵事情之一是添加或更改站點圖標不再相同。 您將需要從站點徽標設置訪問站點圖標設置。

導航塊

“導航”是 222 個 WordPress 主題中的另一個關鍵塊,對於創建導航菜單非常有用。 是的,關於如何在 222 個 WordPress 主題中添加菜單的方式發生了變化。

導航菜單是任何 WordPress 網站的重要組成部分。 我們有適當的資源供您學習和了解最新版本 5.9 中的菜單創建過程:

最新版 WordPress 中的菜單自定義

關於 WordPress 側邊欄的注意事項

如果要在二十二十二WordPress主題中創建側邊欄,則需要創建側邊欄作為模板部分(這是最有效的方式)。 由於您不再擁有小部件,因此您需要添加單獨的元素來創建自己的側邊欄。

這是關於在 WordPress 網站中創建側邊欄主題的另一個快速資源。 在這裡,您將了解為什麼創建模板部件更容易:

WordPress二十二十二主題中的WordPress側邊欄編輯

優秀的圖片庫塊

圖片庫塊比以往任何時候都更加增強。 除了引入高度可操作的拖放功能外,圖像塊得到了更多增強,並提供了一種更好的方式來創建功能性圖像庫。

Image gallery for WordPress full site editing
用於 WordPress 完整站點編輯的圖片庫

塊功能

總的來說,塊庫在二十二十二主題中感覺功能更多。 控制能力比以往任何時候都多。 此外,當您在頁面模板上使用這些塊或創建新的模板部件時,它們會感覺更流暢。

用於 WordPress 完整站點編輯的大修列表視圖

新 WordPress 主題中的列表視圖更加通用。 您可以輕鬆拖放元素以根據需要重新定位它們。 元素控件非常簡單。 您所要做的就是單擊元素並將其向上或向下拖動以重新定位。 這裡的所有都是它的。

WordPress Twenty Twenty-two Theme List View Demo
WordPress 二十二十二主題列表查看演示

獎勵部分:222 WordPress 主題的兒童主題

為最新的WordPress 塊主題創建子主題也有點令人困惑。 事實上,在 2022 年,許多人可能會阻止您首先創建兒童主題。 所以,在進入“如何創建子主題”的過程之前,讓我們討論一下“為什麼”你需要一個:

為什麼需要兒童主題?

子主題繼承了原始主題(父主題)的功能。 它採用父主題的樣式和其他功能。 對於快速定制,這是必要的,因為您不必對父主題進行任何更改。

您可以自定義子主題,而無需對父主題進行任何更改。 這就是子主題的優點,因為開發人員可以對子主題進行更改,而無需更改父主題中的任何內容。

兒童主題的另一個好處是您可以輕鬆地將 WordPress 更新到最新版本,並且設計設置將保持不變。

即使您更新到最新版本的 WordPress,您的子主題也會保留您的設計。

子主題非常適合設計和開發人員,因為開發人員可以輕鬆添加自己的功能。 這也減少了開發人員的整體開發時間

如何在二十二十二主題中手動創建子主題?

雖然現在創建和維護子主題的想法不是很流行,但我們認為值得了解如何創建 222 個 WordPress 主題的子主題。 以下是您可以遵循的步驟:

第 1 步:將文件夾安裝並設置到 localhost

我們將使用 Ampps 作為我們的本地主機來運行 WordPress。 首先,您需要在本地計算機上安裝 Ampps 並設置本地環境。

一旦您安裝了最新版本的 WordPress 並將其安裝到 localhost,您就可以為222 主題創建子主題了。

現在,轉到Ampps>www>“您的本地站點”>wp-content> 主題。

您需要使用子主題名稱創建一個文件夾(您可能需要使用“ twentytwochild ”或類似名稱以提高可用性)。 在文件夾中,您需要創建 style.css 和 functions.php 文件。

第 2 步:創建 style.css 和 functions.php 文件

現在在文件夾中打開一個代碼編輯器。 在編輯器中粘貼以下代碼:

 Theme Name: Twenty Twenty-two Child-1 Theme URI: https://www.wpxpo.com/ Description: A Twenty Twenty-two child theme Author: WPXPO Author URI: https://www.wpxpo.com Template: twentytwentytwo Version: 1.0.0 Text Domain: twentytwentytwochild

最後,將文件保存為“style.css”。 您還可以使用代碼編輯器並將文件保存為“style.css”文件。 它是 WordPress 子主題的主要 CSS 樣式文件。

現在,在下一步中,您需要在同一文件夾中打開不同的文件。 粘貼以下代碼:

 <?php /* enqueue scripts and style from parent theme */ function twentytwenttwo_styles() { wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'twenty-twenty-two-style' ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'twentytwentytwo_styles'); // get_template_part('/Parts/navbar.html', 'navbar'); ?>

完成後,將文件保存為“functions.php”。 同樣,您可以使用記事本代替代碼編輯器。

您現在應該能夠在 WordPress 網站的主題部分看到子主題:

第 3 步:添加您的自定義代碼

在我們開始向我們的新子主題添加自定義代碼之前,您需要在wp-content>themes>child theme folder下創建 2 個單獨的文件夾。 一個是“零件” ,另一個是“模板” 。 為了演示,我們將向您展示如何添加您的自定義代碼並帶來以下輸出,您可以將其用作模板部分

Custom template part creation
自定義模板部件創建

創建自定義模板部分的代碼如下:

 <?php /** * Hello World * * This pattern is used only to preference a dynamic image URL. * It does not appear in the inserter */ return array( 'title' => ('Heading and bird image', 'twentytwentytwo'), 'inserter' => false, 'categories'=> array ('header'), 'blocktypes'=> array ('core/template-part/header'), 'content' => <!-- wp:paragraph {"align":"left"} --> <p class ="has-text-align-left"> sprintf( /* Translator: WordPress link. */ esc_html_( 'Hello %s World', 'twentytwentytwo' ), '' ). '</p> <!-- /wp:paragraph --> <!-- wp:navigation {"layout":{"flex", "setCascadingProperties":true, "justifyContent":"space-between"} } --> <!--wp:page-list /--> ' , );

編寫此代碼後,您必須將其包含在庫中。

Including custom code in the library
在庫中包含自定義代碼

一旦完成,你所要做的就是調用它,你的模板部分就準備好了。 只需確保將代碼保存在孩子的部件文件夾中,以便您可以使用它。

Calling the custom function
調用自定義函數

這是代碼:

 <!-- wp:pattern {"slug": 'twentytwentytwo/hello-world"} /-->

您的自定義模板部分已準備就緒。 您現在將在模板零件庫中找到它並使用它:

Custom template part ready for use
自定義模板部分可供使用

常問問題

以下是一些常見問題的解答:

我在哪裡可以找到主題和插件文件編輯器?

您可以在 WordPress 儀表板的“設置”菜單下找到主題和插件文件編輯器。 您將不再在最新更新的主題菜單中找到它們。

如何在 2222 WordPress 主題中自定義特定頁面?

為了自定義特定頁面,您需要自定義頁面模板。 轉到您要編輯的頁面。 在設置菜單中,您將找到頁面模板設置。 您可以創建新頁面模板或從下拉列表中選擇現有模板。

如何在最新的二十二十二塊主題中添加或自定義菜單?

您必須使用塊菜單中的導航塊在頁面中創建菜單。 您還可以將菜單創建為模板部件並直接使用它們。 您可能想查看我們關於如何在 222 塊主題中自定義菜單的內容。

我應該適應古騰堡嗎?

當涉及到全站點編輯時,適應古騰堡編輯器。 因為古騰堡很有可能能夠進行全站點編輯。 您還應該查看 Gutenberg SEO 以保持領先地位。 Gutenberg 非常適合讓您的網站保持高速,因為您不必依賴太多插件。

我可以將一個模板部分用於多個頁面嗎?

是的,一旦您創建了一個新的模板部件並保存它,您就可以使用該模板部件塊並在其他頁面中重複使用它。 創建模板部件是在創建自定義頁面時減少工作量的好方法。

PostX 插件與 Gutenberg 兼容嗎?

是的。 事實上,PostX 是一個基於 Gutenberg 的插件。 它與 222 個 WordPress 塊主題完全兼容。 它完全支持最新版本的 WordPress。 請查看 PostX 的推薦主題,您會發現 222 個主題是一個潛在的選擇。

最後的想法

WordPress 全站編輯即將到來。 您可以期望 WordPress 成為一個完全可操作的解決方案,您不必再依賴​​繁重的頁面構建器。

5.9 版中的最新塊主題就說明了這一點。 儘管有一些明顯的缺點,但古騰堡的未來很可能成為一個成功的獨立選擇。

你喜歡這樣的博客文章嗎? 在下面的評論中發出聲音,分享您的想法和建議。 乾杯!