古騰堡編輯器教程:如何使用WordPress圖片區塊

古騰堡編輯器教程:如何使用WordPress圖片區塊-1

使用影象是豐富WordPress頁面和文章內容的最簡單但最有效的方法之一。不過,如果你第一次使用WordPress的區塊編輯器,你可能會感到困惑。

其實上,插入和使用圖片區塊非常容易。瞭解其各種設定將使您能夠在整個網站中更無縫地新增影象,並根據自己的喜好自定義它們。在這篇教程中,我們將解釋圖片區塊及其工作原理,帶您瞭解它的每個選項,並提供一些使用技巧。

如何將圖片區塊新增到文章或頁面

圖片區塊將圖片新增到WordPress的文章和網頁十分簡單。首先從WordPress儀表盤導航到任何文章或頁面。

接下來,在古騰堡編輯器中,在要插入影象的任何位置單擊“新增區塊”按鈕(由加號圖示標記)。然後選擇圖片區塊:

古騰堡編輯器教程:如何使用WordPress圖片區塊-2 如果它沒有立即出現,您也可以在搜尋欄中輸入“圖片”。

新增區塊後,下一步是選擇要使用的影象。從那裡,您有三個選擇。您可以選擇上傳、媒體庫從URL插入

古騰堡編輯器教程:如何使用WordPress圖片區塊-3

如果選擇上傳,則可以選擇儲存在計算機上的影象。對於您已經上傳到WordPress網站的圖片,您可以導航到媒體庫。要從複製的連結插入影象,請單擊從 URL 插入

對於我們的示例,我們將上傳一張圖片:

古騰堡編輯器教程:如何使用WordPress圖片區塊-4

如您所見,一旦您插入影象,就會出現一個帶有各種選項的工具欄。您還可以在螢幕右側選擇一些設定。讓我們更詳細地探討這些選項。

圖片區塊設定和選項

插入影象後,您可以通過在“新增標題”欄位中鍵入來在其下方新增標題。然後在塊工具欄中,您將找到可用於調整影象的各種設定和控制元件。我們將從左到右遍歷它們。

圖片區塊工具欄設定

工具欄上的第一個選項可讓您切換到不同型別的區塊。接下來,如果您單擊應用雙色調過濾器圖示,您可以從雙色調集合中進行選擇以應用於您的影象:

古騰堡編輯器教程:如何使用WordPress圖片區塊-5

此選項還允許您修改影象中的陰影和高光,以更改其顯示方式。如果您想恢復到原始影象,可以單擊“清除”

接下來,您可以通過選擇更改對齊方式來調整頁面上影象的對齊方式

古騰堡編輯器教程:如何使用WordPress圖片區塊-6

預設情況下,WordPress會將您的影象設定為左對齊。但是,您可以通過選擇居中對齊、右對齊等來更改此設定。您還可以選擇使影象成為寬幅全幅。後者可用於將影象擴充套件到當前主題的標準內容區域之外。

要超連結您的影象,您可以單擊連結圖示並選擇 媒體檔案 或 附件頁面

古騰堡編輯器教程:如何使用WordPress圖片區塊-7

如果要修剪影象,可以單擊“裁剪”圖示。執行此操作後,工具欄將展開以提供另外三個選項:

古騰堡編輯器教程:如何使用WordPress圖片區塊-8

以下是每個圖示含義的快速備忘單:

  1. 放大鏡可讓您放大影象,範圍從 0% 到 300%。
  2. 縱橫比讓您選擇影象的比例,包括縱向橫向選項。
  3. 箭頭圖示可讓您旋轉影象。

進行調整後,您可以單擊“應用”按鈕儲存更改。

最後,最後一個圖示可讓您在影象上新增文字:

古騰堡編輯器教程:如何使用WordPress圖片區塊-9

與常規文字編輯器一樣,影象上方會出現一個迷你工具欄。您可以使用這些控制元件來加粗、斜體或連結文字,並調整其對齊方式。

附加圖片區塊選項

如果您單擊圖片區塊工具欄末尾的三個垂直點,您會發現各種附加選項。這包括以下設定:

  • 複製影象
  • 將影象編輯為HTML
  • 將影象新增到可重用塊
  • 圖片區塊之前或之後插入一個新塊

現在,讓我們轉到側欄中的區塊設定。在這裡您可以選擇四種風格:

  1. 預設
  2. 圓角
  3. 邊框
  4. 框架

以下是每種樣式的外觀示例:

古騰堡編輯器教程:如何使用WordPress圖片區塊-10 接下來,在圖片設定下,您可以找到用於輸入Alt 文字 和 (1) 更改影象尺寸(2)的欄位:

古騰堡編輯器教程:如何使用WordPress圖片區塊-11

請注意,輸入替代文字對於搜尋引擎優化 (SEO)和可訪問性目的都很重要

在該選項下方,您可以調整影象的大小。您可以從下拉選單中選擇預設尺寸,或在寬度高度欄位中輸入自定義值。

有效使用圖片區塊的技巧和最佳實踐

一旦您學習瞭如何在WordPress頁面和文章中插入影象,您可能會對學習如何有效使用它們感興趣。如果是這樣,您需要牢記一些提示和技巧。

首先,我們始終建議優化您的影象。您可以通過在上傳影象之前壓縮影象來實現此目的,以提高頁面載入時間和整體網站效能。之後,優化檔名和替代文字可以幫助提高您的SEO(可以使用Smart SEO Tool外掛對WordPress上傳的圖片進行標題及Alt文字優化)。

另一個充分利用 WordPress圖片區塊的技巧是花一些時間瞭解不同的調整大小和裁剪設定。能夠直接在編輯器中裁剪影象(而不必轉到媒體庫)可以為您節省大量時間。瞭解如何使用這些控制元件可以幫助您快速無縫地增強頁面以及影象在其中的顯示方式。

最後,除了使用替代文字外,我們還建議在圖片下方新增說明文字。這樣做可以幫助您的使用者更好地理解照片或螢幕截圖的內容。這也是一個很好的地方,可以正確地將功勞歸於您使用的第三方影象的原始來源。

關於圖片區塊的常見問題

此時,您應該對如何在您的 WordPress 網站上使用此塊有一個深入的瞭解。但是,讓我們快速回顧一些最常見的問題,以確保我們已涵蓋所有要點。

如何插入WordPress圖片區塊?

導航到WordPress文章或頁面後,您可以通過幾種不同的方式找到圖片區塊。第一個選項是在文字欄位中輸入“/image”。第二個選項是單擊“新增按鈕”塊或加號圖示 (+),然後在搜尋欄位中輸入“圖片”。

圖片區塊有什麼作用?

簡而言之,圖片區塊可讓您將照片插入WordPress頁面或釋出,然後對其進行自定義。此塊使您能夠調整其外觀的大小和外觀,並直接在編輯器中顯示它。您還可以使用圖片區塊通過計算機上傳影象、從WordPress媒體庫插入影象或從URL新增影象。

可以在WordPress的任何地方新增影象嗎?

您可以在許多不同的地方將圖片新增到WordPress網站。您的選項將根據您使用的主題而有所不同。但是,通過使用圖片區塊,您可以將它們插入到頁面、文章和WordPress小工具區域中。

小結

在整個站點中新增影象是為您的內容增添趣味的最簡單、最強大的方法之一。照片和螢幕截圖不僅可以讓您的內容更美觀,還可以幫助提升整體使用者體驗 (UX)。

有了WordPress圖片區塊,在頁面和文章新增媒體比以往更簡單。通過從古騰堡編輯器中選擇相關塊,然後配置各種樣式選項以對其進行個性化,您可以快速將影象插入到您的內容中。

評論留言