如何使用 WordPress 圖像塊

已發表: 2021-08-08

使用圖像是增強 WordPress 頁面和帖子的最簡單但最有效的方法之一。 但是,如果您不熟悉 WordPress 塊編輯器,您可能會對如何正確使用Image塊感到有些困惑。

幸運的是,插入和使用Image塊非常容易。 了解其各種設置將使您能夠更無縫地在整個網站中添加圖像,並根據自己的喜好自定義它們。 在這篇文章中,我們將解釋Image塊及其工作原理,帶您了解它的每個選項,並提供一些使用技巧。

讓我們直接跳進去!

如何將圖像塊添加到您的帖子或頁面

圖像塊使向 WordPress 帖子和頁面添加媒體盡可能簡單明了。 為此,首先從 WordPress 儀表板導航到任何帖子或頁面。

接下來,在編輯器中,在要插入圖像的任何位置單擊“添加塊”按鈕(由加號圖標標記)。 然後選擇圖像塊:

在 WordPress 中添加圖像塊。
如果它沒有立即出現,您也可以在搜索欄中輸入“圖像”。

添加塊後,下一步是選擇要使用的圖像。 從那裡,您有三個選擇。 您可以選擇UploadMedia LibraryInsert from URL

通過圖像塊插入 WordPress 圖像的選項。

如果選擇上傳,則可以選擇保存在計算機上的圖像。 對於您已經上傳到 WordPress 網站的圖片,您可以導航到媒體庫。 要從復制的鏈接插入圖像,請單擊從 URL 插入

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

通過 WordPress 中的圖像塊上傳的圖像。

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

圖像塊設置和選項

插入圖像後,您可以通過在“添加標題”字段中鍵入來在其下方添加標題。 然後在塊工具欄中,您將找到可用於調整圖像的各種設置和控件。 我們將從左到右遍歷它們。

圖像塊工具欄設置

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

在 WordPress 圖像塊中應用雙色調過濾器的選項。

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

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

在 WordPress 編輯器中更改圖像對齊的選項。

默認情況下,WordPress 會將您的圖像設置為Align Left 。 但是,您可以通過選擇Align centerAlign right等來更改此設置。您還可以選擇使圖像成為WideFull width 。 後者可用於將圖像擴展到當前主題的標準內容區域之外。

要超鏈接您的圖像,您可以單擊鏈接圖標並選擇媒體文件附件頁面

鏈接 WordPress 圖像塊的選項。

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

WordPress 中的圖像塊裁剪設置。

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

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

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

最後,最後一個圖標可讓您在圖像上添加文本:

通過圖像塊在圖像上添加文本的選項。

與常規文本編輯器一樣,圖像上方會出現一個迷你工具欄。 您可以使用這些控件來加粗、斜體或鏈接文本,並調整其對齊方式。

附加圖像塊選項

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

  • 複製圖像
  • 將圖像編輯為 HTML
  • 將圖像添加到可重用塊
  • Image塊之前或之後插入一個新塊

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

  1. 默認
  2. 圓角
  3. 邊框
  4. 框架

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

圖像塊樣式選項。
接下來,在Image settings 下,您可以找到用於輸入Alt 文本和 (1) 更改圖像尺寸(2) 的字段:

WordPress 圖像設置。

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

在該選項下方,您可以調整圖像的大小。 您可以從下拉菜單中選擇預設尺寸,或在寬度高度字段中輸入自定義值。

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

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

首先,我們始終建議優化您的圖像。 您可以通過在上傳圖像之前壓縮圖像來實現此目的,以提高頁面加載時間和整體網站性能。 之後,優化文件名和替代文本可以幫助提高您的 SEO。

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

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

關於圖像塊的常見問題

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

我在哪裡可以找到 WordPress 中的圖像塊?

導航到 WordPress 帖子或頁面後,您可以通過幾種不同的方式找到圖像塊。 第一個選項是在文本字段中輸入“/image”。 第二個選項是單擊“添加按鈕”塊或加號圖標 (+),然後在搜索字段中輸入“圖像”。

圖像塊有什麼作用?

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

我可以在 WordPress 的任何地方添加圖像嗎?

您可以在許多不同的地方將圖片添加到 WordPress 網站。 您的選項將根據您使用的主題而有所不同。 但是,通過使用圖像塊,您可以將它們插入頁面、帖子和 WordPress 小部件區域。

結論

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

感謝 WordPress圖像塊,向您的頁面和帖子添加媒體比以往更簡單。 通過從編輯器中選擇相關塊,然後配置各種樣式選項以對其進行個性化,您可以快速將圖像插入到您的內容中。

您對使用 WordPress圖像塊有任何疑問嗎? 在下面的評論部分讓我們知道!

特色圖片來自 TarikVision/shutterstock