WordPress 6.8新功能:安全升級、效能提升、編輯器增強等!

WordPress 6.8新功能:安全升級、效能提升、編輯器增強等!

WordPress 6.8 將於 2025 年 4 月 15 日釋出。下一個版本不會引入太多新功能;相反,它主要側重於完善現有功能

新版本帶來了編輯器和可用性方面的改進,例如增加了在塊編輯器中管理資料檢視的更簡便選項,以及在查詢迴圈中忽略固定文章的功能;設計和主題方面的改進,例如改進了樣式表;效能和安全性方面的改進,引入了推測載入和用於密碼雜湊的“bcrypt”。

這些新增功能旨在改善使用者體驗,尤其是使用經典主題的使用者,並提高網站效能。

編輯器改進

WordPress 6.8 帶來了多項更新,增強了內容建立和管理體驗。從新的預覽選項到資料檢視的改進,這些更新將簡化“文章”和“網站編輯器”中的工作流程。

1. 在預覽下拉選單中切換顯示模板

在“文章編輯器”頂部工具欄的預覽下拉選單中新增了 Show template 切換按鈕。

編輯器頂部邊欄新增了“顯示模板”切換按鈕

編輯器頂部邊欄新增了“顯示模板”切換按鈕

以前,您只能在文章側邊欄中訪問模板選項。雖然這是一個重複,但也是一個值得注意的改進,因為將該選項放在工具欄下拉選單中,可以更直接、更快速地在內容和模板檢視之間切換。

在 WordPress 中啟用顯示模板選項

在 WordPress 中啟用顯示模板選項

2. 改進的資料檢視

資料檢視是網站編輯器中的一個強大工具,它首次在 WordPress 6.5 中引入,允許使用者以有組織的方式檢視和管理頁面、模板、模板部分和模式。

隨著 WordPress 6.8 的釋出,資料檢視將繼續發展,在網站編輯器中提供更直觀、靈活和高效的編輯體驗。重點是提高可用性和增加自定義選項。

頁面檢視可以自定義更多屬性,包括預覽、Slug、父節點、討論、模板和密碼。預覽還可用於模式和模板。

WordPress 6.8 中的頁面檢視

WordPress 6.8 中的頁面檢視

WordPress 6.8 還為表格佈局引入了新的密度控制,允許使用者調整每一行所佔的空間。透過舒適、平衡和緊湊三個選項,使用者可以根據自己的喜好自定義顯示方式,使管理體驗更加多樣化。

新的 Density 控制元件

WordPress 6.8 在表格檢視中引入了新的 Density 控制元件

新的和改進的區塊

WordPress 6.8 引入了一個全新的區塊,並對現有區塊進行了多項更新。

1. 新的總查詢區塊

新的總查詢區塊顯示與查詢相關的資訊,如查詢結果總數或當前顯示的結果範圍。

WordPress 6.8 中的新總查詢區塊

WordPress 6.8 中的新總查詢區塊

您可以在查詢迴圈中新增新區塊,以顯示分頁結果中的結果數或範圍。

總查詢區塊中的結果範圍

總查詢區塊中的結果範圍

2. 查詢迴圈區塊的更新

在 WordPress 6.8 之前,“查詢”區塊提供的選項數量有限,包括

  • 包含– 在文章列表中預置置頂文章
  • 排除– 完全排除置頂文章
  • –僅包括置頂文章

這組選項中缺少忽略置頂文章的功能,即把它們視為普通文章。WP_Query 已經支援該選項(ignore_sticky_posts => true),但在區塊側邊欄中卻沒有該選項。

查詢迴圈的忽略置頂文章選項

查詢迴圈的忽略置頂文章選項

WordPress 6.8 引入了 忽略”置頂文章狀態的選項。這意味著開發人員和使用者現在可以防止置頂文章自動出現在結果集的頂部,使它們的位置與查詢固有的排序邏輯保持一致。

這一更新增強了WordPress核心查詢行為的靈活性和一致性,使查詢塊在塊編輯器中的內容管理方面更具通用性。

查詢迴圈區塊的另一項更新是將點選塊工具欄中的替換按鈕時出現的選擇樣板模態替換下拉按鈕。該按鈕現在顯示“更改設計”。

查詢迴圈區塊新增“更改設計”下拉選單

查詢迴圈區塊新增“更改設計”下拉選單

3. 從影像區塊工具欄將影像設定為特色影像

新增一個選項,允許您從圖塊工具欄選項下拉選單中將圖片設定為特色圖片。如果文章已經設定了特色圖片,使用者也可以透過區塊工具欄進行更改。

從區塊工具欄下拉選單中將圖片設定為特色圖片

從區塊工具欄下拉選單中將圖片設定為特色圖片

4. 導航區塊的更新

導航區塊的幾處小改進提高了其可用性和整體功能。

  • 導航區塊現在會在導航文字旁邊顯示選單名稱(PR#68466 )。
  • 導航區塊的顏色選擇器中新增了“清除”選項(PR#68454)
  • 導航連結和子選單區塊中允許使用所有非互動式格式(PR#67585)

有關 WordPress 6.8 中導航區塊改進的更全面列表,請檢視此開發說明

非互動式格式

在導航連結和子選單區塊中提供非互動式格式

設計和主題改進

WordPress 6.8 對網站編輯體驗進行了重大改進。全域性樣式介面經過了改進,訪問和即時定製更加方便。同時,“樣式手冊”還將其功能擴充套件到了經典主題,縮小了現代和傳統 WordPress 工作流程之間的差距。

1. 網站編輯器側邊欄上的全域性樣式

從 6.8 版開始,全域性樣式介面現在可以從網站編輯器的主選單中訪問。單擊“樣式”選單項可彈出“全域性樣式”面板,其中包含所有排版、顏色、背景、陰影和佈局選項。

全域性樣式面板

WordPress 6.8 中網站編輯器主選單中的全域性樣式面板

點選眼睛圖示可顯示樣式手冊,其中即時顯示樣式設定的更改。點選全域性樣式面板上的某個特定部分後,就會立即跳轉到樣式手冊的相應部分。

更輕鬆、更快速地瀏覽樣式表

在 WordPress 6.8 中,您可以更輕鬆、更快速地瀏覽樣式表

這一更改將使您更方便、更快捷地定製網站樣式,從而顯著改善設計工作流程。

請比較 WordPress 6.7 和 6.8 中的樣式介面,以找出不同之處。

WordPress 6.7 中的樣式面板

WordPress 6.7 中的樣式面板

WordPress 6.8 也為經典主題帶來了這一改進。

2. 經典主題中新增了樣式表

WordPress 6.2 起就適用於塊主題。在 WordPress 6.8 中,透過 add_theme_support( 'editor-styles' ) 支援編輯器樣式或擁有 theme.json 檔案的經典主題也可以使用樣式表。

該功能在 Gutenberg 19.9 中首次推出。如果您不使用 Gutenberg,從 WordPress 6.8 開始,您可以透過“外觀”>“設計”>樣式”訪問經典主題中的“全域性樣式”和 “樣式書”。

下面的圖片顯示了 WordPress 6.7 中的“樣式”部分與 WordPress 6.8 中的“樣式書”(安裝了二〇二〇主題)之間的區別。

WordPress 6.8 中經典主題中的樣式表

WordPress 6.8 中經典主題中的樣式表

為了給網站編輯器中的“樣式手冊”騰出空間,樣板已被移至“設計”螢幕的一個單獨部分。

以下圖片顯示了 WordPress 6.8 中經典主題 Twenty Twenty-One 樣式手冊中的排版和顏色預覽。

使用二〇二一主題的樣式表中的排版預覽

使用二〇二一主題的樣式表中的排版預覽

二〇二一主題樣式手冊中的顏色預覽

二〇二一主題樣式手冊中的顏色預覽

經典主題樣式簿的推出標誌著向更大程度地整合區塊樣式編輯功能邁出了一步。

效能和安全性

WordPress 6.8 在效能和安全性方面有了重大改進。有了新的猜測規則 API,WordPress 頁面可以透過預測使用者操作來加快載入速度。同時,改用 bcrypt 演算法進行密碼保護使系統更安全地抵禦網路攻擊。讓我們深入瞭解一下。

1. WordPress 6.8中的推測載入

推測載入是一種網站效能最佳化技術,它允許在使用者訪問頁面或資源之前對其進行預取或預呈現,從而縮短載入時間並改善使用者體驗。

推測載入基於推測規則 API,這是一個實驗性 API,允許開發人員透過 JSON 定義的介面,根據預期的使用者互動,指定預取或預渲染 URL 的規則。

目前支援 Speculation Rules API 的瀏覽器數量有限,主要是基於 Chromium 121+ 的瀏覽器,如較新版本的 Chrome、Edge 和 Opera。

如果網站使用了推測載入規則,目前不支援推測規則 API 的瀏覽器(Firefox 和 Safari)的使用者不會受到懲罰。它們只是無法受益於 API 帶來的效能提升。

推測規則 API 瀏覽器支援

推測規則 API 瀏覽器支援(來源:caniuse)

預取預渲染之間有一些重要的區別:

  • 預取<script type="speculationrules"> 元素或 Speculation-Rules 標頭中的 prefetch 規則會強制瀏覽器下載指定頁面的響應體,但不會渲染這些頁面。預取不包括載入子資源和執行 JavaScript。結果儲存在指定的快取中,當使用者離開頁面時,快取就會清空。如果使用者在未訪問預取頁面的情況下離開,則會造成一定的資源浪費,但浪費程度仍低於預渲染。
  • 預渲染<script type="speculationrules"> 元素或 Speculation-Rules 標頭中的 Speculation-Rules 規則會強制瀏覽器獲取、渲染並將內容載入到一個不可見的標籤頁中,並儲存在每個文件的記憶體快取中。使用預渲染時,會載入所有子資源,並執行所有 JavaScript 程式碼。結果儲存在專用快取中,當使用者離開頁面時,快取會清空,但使用者導航到的頁面除外。預渲染在效能方面有相當大的優勢,但會佔用記憶體和網路頻寬,並可能耗費大量資源。

投機規則可以放在內嵌的  <script type="speculationrules"> 元素中,也可以放在由 Speculation-Rules HTTP 標頭引用的外部檔案中。下面是一個在 script 標籤中使用的示例:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"prefetch": [
{
"source": "list",
"urls": ["firstpage.html", "secondpage.html"]
}
]
}
{ "prefetch": [ { "source": "list", "urls": ["firstpage.html", "secondpage.html"] } ] }
{
"prefetch": [
{
"source": "list",
"urls": ["firstpage.html", "secondpage.html"]
}
]
}

在 6.8 之前,WordPress 使用者如果想在自己的 WordPress 網站上新增推測載入,可以使用 WordPress 效能團隊提供的 Speculative Loading 外掛。該外掛透過自動預載入或預渲染 WordPress 前端 URL,提供了“推測規則 API”的效能優勢。

Speculative Loading 外掛預設設定

Speculative Loading 外掛預設設定

隨著 6.8 版本的釋出,WordPress 核心新增了兩個函式、一個過濾器和一個操作:

新的 wp_get_speculation_rules_configuration() 函式會返回當前的推測規則配置(modeprefetch/prerender– 和 eagernessconservative/moderate/eager )。預設值為 prefetch 和 conservative,以儘量減少資源消耗和防止不良影響。根據開發說明,“這與 Cloudflare 在其推測性載入功能中使用的配置一致,它最大限度地減少了在沒有後續導航到 URL 的情況下進行任何推測性載入的機會”。

以下程式碼是如何使用 wp_get_speculation_rules_configuration() 函式的示例,您可以將該函式新增到外掛或活動主題的函式檔案中:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_action( 'wp_footer', function() {
$config = wp_get_speculation_rules_configuration();
echo '<pre>';
print_r( $config );
echo '</pre>';
} );
add_action( 'wp_footer', function() { $config = wp_get_speculation_rules_configuration(); echo '<pre>'; print_r( $config ); echo '</pre>'; } );
add_action( 'wp_footer', function() {
$config = wp_get_speculation_rules_configuration();
echo '<pre>';
print_r( $config );
echo '</pre>';
} );

WordPress 的核心實現在所有網站的前端啟用了 Speculative loading 功能,但使用者登入或停用固定連結時除外

我們在 WordPress 6.8 中測試了推測載入,結果如下:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"prefetch": [
{
"source": "document",
"where": {
"and": [
{
"href_matches": "\/*"
},
{
"not": {
"href_matches": [
"\/wp-*.php",
"\/wp-admin\/*",
"\/wp-content\/uploads\/*",
"\/wp-content\/*",
"\/wp-content\/plugins\/*",
"\/wp-content\/themes\/twentytwentyfive\/*",
"\/*\\?(.+)"
]
}
},
{
"not": {
"selector_matches": "a[rel~=\"nofollow\"]"
}
},
{
"not": {
"selector_matches": ".no-prefetch, .no-prefetch a"
}
}
]
},
"eagerness": "conservative"
}
]
}
{ "prefetch": [ { "source": "document", "where": { "and": [ { "href_matches": "\/*" }, { "not": { "href_matches": [ "\/wp-*.php", "\/wp-admin\/*", "\/wp-content\/uploads\/*", "\/wp-content\/*", "\/wp-content\/plugins\/*", "\/wp-content\/themes\/twentytwentyfive\/*", "\/*\\?(.+)" ] } }, { "not": { "selector_matches": "a[rel~=\"nofollow\"]" } }, { "not": { "selector_matches": ".no-prefetch, .no-prefetch a" } } ] }, "eagerness": "conservative" } ] }
{
"prefetch": [
{
"source": "document",
"where": {
"and": [
{
"href_matches": "\/*"
},
{
"not": {
"href_matches": [
"\/wp-*.php",
"\/wp-admin\/*",
"\/wp-content\/uploads\/*",
"\/wp-content\/*",
"\/wp-content\/plugins\/*",
"\/wp-content\/themes\/twentytwentyfive\/*",
"\/*\\?(.+)"
]
}
},
{
"not": {
"selector_matches": "a[rel~=\"nofollow\"]"
}
},
{
"not": {
"selector_matches": ".no-prefetch, .no-prefetch a"
}
}
]
},
"eagerness": "conservative"
}
]
}

wp_get_speculation_rules() 函式會根據配置生成整個“推測規則”的 JSON 物件。

您可以在下面的示例中使用該函式:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_action( 'wp_footer', function() {
if ( function_exists( 'wp_get_speculation_rules' ) ) {
$rules = wp_get_speculation_rules();
if ( ! empty( $rules ) ) {
echo '<h4>Speculation rules:</h4>';
echo '<pre>';
echo esc_html( json_encode( $rules, JSON_PRETTY_PRINT ) );
echo '</pre>';
} else {
echo '<p>Speculation rules are empty or invalid.</p>';
}
} else {
echo '<p>wp_get_speculation_rules() not available.</p>';
}
});
add_action( 'wp_footer', function() { if ( function_exists( 'wp_get_speculation_rules' ) ) { $rules = wp_get_speculation_rules(); if ( ! empty( $rules ) ) { echo '<h4>Speculation rules:</h4>'; echo '<pre>'; echo esc_html( json_encode( $rules, JSON_PRETTY_PRINT ) ); echo '</pre>'; } else { echo '<p>Speculation rules are empty or invalid.</p>'; } } else { echo '<p>wp_get_speculation_rules() not available.</p>'; } });
add_action( 'wp_footer', function() {
if ( function_exists( 'wp_get_speculation_rules' ) ) {
$rules = wp_get_speculation_rules();
if ( ! empty( $rules ) ) {
echo '<h4>Speculation rules:</h4>';
echo '<pre>';
echo esc_html( json_encode( $rules, JSON_PRETTY_PRINT ) );
echo '</pre>';
} else {
echo '<p>Speculation rules are empty or invalid.</p>';
}
} else {
echo '<p>wp_get_speculation_rules() not available.</p>';
}
});

您可以使用新的 wp_speculation_rules_configuration 過濾器來更改預設配置,例如將“eagerness”改為 moderate 或 eager ,或強制執行特定行為。

你可以使用 wp_speculation_rules_configuration 過濾器,透過新增一個 URL 列表,用source=list 代替 document,只對相關文章進行預渲染,如下例所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter('wp_speculation_rules_configuration', function( $config ) {
$config['mode'] = 'prerender';
$config['eagerness'] = 'eager';
$config['urls'] = [
'source' => 'list',
'urls' => [
home_url('/page-1/'),
home_url('/page-2/')
]
];
return $config;
}
add_filter('wp_speculation_rules_configuration', function( $config ) { $config['mode'] = 'prerender'; $config['eagerness'] = 'eager'; $config['urls'] = [ 'source' => 'list', 'urls' => [ home_url('/page-1/'), home_url('/page-2/') ] ]; return $config; }
add_filter('wp_speculation_rules_configuration', function( $config ) {
$config['mode'] = 'prerender';
$config['eagerness'] = 'eager';
$config['urls'] = [
'source' => 'list',
'urls' => [
home_url('/page-1/'),
home_url('/page-2/')
]
];
return $config;
}

透過 wp_load_speculation_rules 動作,您可以在主核心推測規則之外新增自定義規則,而透過 wp_speculation_rules_href_exclude_paths 過濾器,您可以將其他路徑排除在推測載入之外。

根據開發說明,啟用推測載入後,網站的最大內容頁面(LCP)中位數提高了 1.9%。考慮到這只是一次新增的結果,這是一個值得注意的結果。

有關推測載入的深入分析,請檢視我們的深入教程 。關於 WordPress 6.8 中投機載入的全部細節和使用示例,請參見跟蹤工單 #62503和官方開發說明。另請參閱 Felix Arntz 撰寫的《WordPress中的推測載入》。

2. WordPress 6.8中用於密碼雜湊的Bcrypt

WordPress 6.8 將改變用於保護使用者密碼的演算法。WordPress 目前使用的是 phpass,它在現代安全性方面並不被認為是最好的。WordPress 6.8 將改用更安全的 bcrypt 加密演算法。

主要區別在於 bcrypt 需要更多的時間和資源來破解,因此網路攻擊的效果較差。

此外,應用程式密碼、使用者密碼重置金鑰、個人資料請求金鑰和恢復模式金鑰將從 phpass 切換到更安全、更快速的 BLAKE2b 雜湊演算法。

實施這一更改無需使用者操作:

使用者在更新後首次登入時,或下次更改密碼時,其密碼將自動使用 bcrypt 重新雜湊,並重新儲存在資料庫中。應用程式密碼和安全金鑰不會自動重寫,但如果現有雜湊值是在 WordPress 6.8 之前生成並在過期前使用的,則將繼續有效。

文章密碼目前將繼續使用 phpass,但將來可能會改變。

如果您想更近距離地瞭解 WordPress 6.8 採用 bcrypt 的情況,併為開發人員提供更深入的分析,請不要錯過 John Blackbourn 的開發說明

針對開發人員的更新

WordPress 6.8 還為開發人員帶來了有趣的更新。這些更新使建立和管理區塊變得更容易,改善了使用者介面並提高了網站效能。以下是新功能的詳細介紹,以及如何幫助簡化開發工作流程。

1. WordPress 6.8 中的多區塊型別註冊

WordPress 6.8 透過新函式 wp_register_block_types_from_metadata_collection() 引入了更高效的區塊型別註冊。該函式允許開發人員同時註冊多個區塊型別,從而提高效能並簡化區塊開發。

它基於 WordPress 6.7 中引入的區塊型別註冊 API,尤其適用於透過單次呼叫註冊多個區塊型別的外掛,與單獨註冊每個區塊相比,它提供了一種更高效、更簡單的區塊註冊方法。

它的主要優點是,你無需為你在外掛中註冊的每個區塊型別重複呼叫 register_block_type()。現在,您只需建立一個區塊型別資料夾,就可以在現有外掛中新增新的區塊型別,而且無需在外掛的 PHP 程式碼庫中註冊區塊型別,因為所有區塊型別都會被自動識別和註冊。

要使用這一強大功能,您需要為所有區塊型別建立一個清單。清單是一個 PHP 檔案,包含來自專案中所有 block.json 檔案的區塊後設資料,您可以使用@wordpress/scripts NPM 包中的 build-blocks-manifest 命令生成清單。

生成清單後,只需呼叫一次函式,就能註冊所有區塊型別:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
wp_register_block_types_from_metadata_collection(
plugin_dir_path( __FILE__ ) . 'dist',
plugin_dir_path( __FILE__ ) . 'dist/blocks-manifest.php'
);
wp_register_block_types_from_metadata_collection( plugin_dir_path( __FILE__ ) . 'dist', plugin_dir_path( __FILE__ ) . 'dist/blocks-manifest.php' );
wp_register_block_types_from_metadata_collection(
plugin_dir_path( __FILE__ ) . 'dist',
plugin_dir_path( __FILE__ ) . 'dist/blocks-manifest.php'
);

如需進一步瞭解新的 wp_register_block_types_from_metadata_collection() 函式,請檢視開發說明build-block-manifest命令文件

2. 6.8版本使用者介面元件的若干更新

WordPress 6.8 對區塊編輯器中的使用者介面元件引入了多項更改,並進行了多項棄用和更新。一些值得注意的變化包括

  • Navigation 元件已被棄用Navigation 元件(及其所有子元件)已被棄用,並計劃在 WordPress 7.1 中硬性刪除。Navigator 元件將取而代之。
  • Navigator 元件已穩定:來自 __experimentalUseNavigator 鉤子的 __experimentalNavigatorToParentButton 和 goToParent 方法已被棄用,取而代之的是__experimentalNavigatorBackButtongoBack
  • RadioGroup 元件已被棄用RadioGroup 元件已被棄用。您可以使用 RadioControlToggleGroupControl 代替。

有關 6.8 中使用者介面元件變更的完整列表,請參閱開發說明

3. 互動式API更新

互動性 API 得到了多項改進。在WordPress 6.8之前,當有人與頁面進行互動時,所有相關任務都會同時進行,如果互動時間超過50毫秒之類,速度就會變慢。為了解決這個問題,WordPress 6.8 引入了非同步處理程序,允許預設以非同步方式執行這些任務。這將有助於改善 INP(Interaction to Next Paint),它是衡量網站對使用者互動響應速度的一個指標。

這一變更正在為 WordPress 6.8 做準備,但尚未完全實施。開發人員需要遵循新的最佳實踐,以避免警告並跟上這些改進(如使用非同步方法)。引入的新功能是向更快、更可靠的互動式 API 邁出的中間一步。

如需更深入地瞭解新的互動式 API 最佳實踐,請檢視 Felix Arntz 的開發說明

4. 針對開發人員的效能警告

useSelect 鉤子有助於在塊編輯器中獲取和管理資料,但如果使用不慎,可能會降低網站的執行速度。

從 WordPress 6.8 開始,如果 useSelect 被呼叫得太頻繁或效率太低,在啟用 SCRIPT_DEBUG 後,開發者控制檯中將出現一個新的警告。更具體地說,如果每次元件呈現(更新)時都觸發 useSelect 而沒有進行適當的最佳化,就會顯示警告。

新警告可幫助開發人員識別可能存在的效能瓶頸。更多詳情請參見開發說明

WordPress 6.8 中的區塊插入器概述

WordPress 6.8 中的區塊插入器概述

小結

WordPress 6.8 的重點是完善現有功能和提高效能。主要增強功能包括編輯器可用性的改進、設計升級、全域性樣式介面的改進以及對經典主題的樣式書支援。它還透過“推測規則 API”的推測載入功能提高了效能,同時使用 bcrypt 密碼雜湊加強了安全性。

但這還不是全部。有關 WordPress 6.8 的改進和新增功能的更全面列表,請檢視 WordPress 官方部落格上的 WordPress 6.8 Field Guide面向開發者的其他變更

現在輪到您了。您安裝 WordPress 6.8 了嗎?您的第一印象如何?歡迎在下面的評論區分享您的想法。

評論留言