WordPress 5.7 詳細更新內容及實測

Last Update at 2021 年 3 月 13 日
Likes

WordPress 5.7版本已經正式發佈一段時間,我們也嘗試了一段日子,筆者感覺5.7帶來了更多好東西。

重點更新的內容及懶人包:更多區塊編輯器功能、管理後台色彩更新、一鍵HTTP變為HTTPS、全新Robots API、簡單延遲載入 iframe及持續優化jQuery 3.5.1

現在我們來詳細說說到底今次WordPress 5.7更新了什麼及有什麼需要注意的地方。

目錄

  • 區塊編輯器
  • 全新Robots API
  • 一鍵HTTP變HTTPS
  • 簡單延遲載入 iframe
  • 後台色彩更新
  • 持續優化jQuery 3.5.1

區塊編輯器

拖拉區塊

首先WordPress 5.7的區塊編輯器終於能夠讓你"新增區塊"拖拉區塊到你的文章內容中,從而令您更輕鬆處理您的文章內容。

dragdropfrominserter 1
社交媒體圖示大小

WordPress 5.7將會允許您隨時更改社交媒體圖示的大小

image 4 1
WordPress 5.7 詳細更新內容及實測 6
開啟/關閉完整高度區塊

WordPress 5.7新增了開啟/關閉完整高度,有時候你們會喜歡用全幅寬度做封面設計,但好多時候也只是全寬如果想做全高就需要額外做其他麻煩設定。

現在只需要一鍵就能做到開啟/關閉完整高度 (就是CSS裹的height: 100vh)

fullheight 2
按鈕排版優化

WordPress 5.7於按鈕組區塊新增了垂直排列功能,您還能夠從預設的寬度百分比中進行調整。

image 5 2

全新Robots API

WordPress 5.7引入了新的Robots API功能,該API將允許開發人員以編程方式控制及更新網站上的Robots meta tag。

Robots meta tag將會通知搜索引擎如何對網站進行爬蟲及索引,您可以透過新增robots.txt到網站根目錄或使用robots meta tag來實現。

WordPress 5.7中新增了一個名為wp_robots的新功能,

function wporg_wp_robots_add_follow( $robots ) {
    $robots['follow'] = true;
    return $robots;
}
add_filter( 'wp_robots', 'wporg_wp_robots_add_follow' );

WordPress 5.7也將默認在robot meta tag中添加一個max-image-preview:large指令。這將允許搜索引擎在搜索結果中使用大圖片進行預覽。

以下是在您網站的源代碼中的樣子。

<!DOCTYPE html>
<html>
    <head>
        <meta name="robots" content="max-image-preview:large" />
    </head>

對於在設定 – 閱讀中關閉了搜索引擎可見度的網站,WordPress將會自動隱藏這個meta tag。

如果你想關閉這個功能,讓搜索引擎決定使用哪張圖片進行預覽,那麼你可以在你的主題或functions.php檔案新增以下代碼。 (如對程式碼沒太大認識請採用插件或於更改前執行一次檔案備份

remove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );

一鍵HTTP變HTTPS

以前當您將WordPress從HTTP轉移到HTTPS時,您必須手動更新內容中的URL。

WordPress 5.7將使您的網站更容易遷移到HTTPS。

現在你只需要到工具 – 網站狀態,只要您的網站是沒有HTTPS,你將會得到一個建議改進項目,只需點擊裹面的更新您的網站至HTTPS即會自動調整您的WordPress網站URL設定及內容裹的URL至HTTPS,無需再透過其他插件協助更改。

簡單延遲載入 iframe

WordPress 5.7將自動設定為iframe嵌入延遲載入(Lazy Load)。延遲載入是一種在頁面加載過程中將重要性低的資源延遲載入,屬於一種提高網站速度的技術。

從WordPress 5.5開始,WordPress已經默認對圖片使用了延遲載入。現在連您的iframe都能夠得到iframe

這意味著所有使用iframe的嵌入,例如YouTube,都能夠使用延遲載入來提高您的頁面加載速度。

後台色彩更新

在WordPress 5.7中,CSS中使用的所有顏色都被折疊為12種藍色、綠色、紅色和黃色、13種灰色、純黑色和純白色中的一種。

這個新的精簡調色板將過去WordPress源碼中的所有顏色折疊為7種核心顏色和56種色調範圍,滿足WCAG 2.0 AA推薦的與白色或黑色的對比度。

image 6 1

每個範圍內的顏色從淺到深在感知上是統一的,也就是說,它們從白色開始,每一步都以相同的數量變深。一半的範圍對黑色有4.5或更高的對比度,另一半對白色保持相同的對比度。

對這套顏色進行標準化,將有助於貢獻者做出一致的、無障礙的設計決策。我們鼓勵主題和插件開發者使用這個新的調色板,以使他們的產品和WordPress Core之間有更好的一致性。

使用現有CSS Core類的插件作者應該需要為全部設置為新的調色板,因為每個Core類都進行了相應的更新。

持續優化jQuery 3.5.1

WordPress核心正在從jQuery 1.12.4跳轉到jQuery 3.5.1! 這是一件大事,原因有很多種例如更現代化的功能、更好的DX和安全改進等等。

由於5.7版本後台所需的jQuery更少,所以於後台操作時稍微會有加快的感覺。

If you find this article helpful, please like it and share it on social media to let more people know about it!