使用 WordPress 圖像塊:如何在 WordPress 中添加圖像 [+秘密提示]

使用 WordPress 圖像塊:如何在 WordPress 中添加圖像 [+秘密提示]

對於許多用戶來說,處理圖像確實令人沮喪。選擇正確的寬高比或正確調整圖像大小以在整個佈局中看起來不錯並不總是那麼容易。

  1. 為什麼要使用 WordPress 圖像塊
  2. 如何使用 WordPress 圖像塊添加圖像
  3. 附加格式化圖像過程
  4. 我們在文章中提供的額外提示

較舊的 WordPress 版本(直到 v5.0)使用“+添加媒體”按鈕添加圖像。問題是,即使對圖像大小進行了最小的更改,您也需要重新上傳。這意味著浪費時間和多餘的點擊。

新的基於塊的編輯器 Gutenberg 改變了將圖像添加到 WordPress 中的方式,使最終用戶的此過程更加簡單。在本文中,我們將向您展示有關添加和編輯 WordPress 圖像塊的實用指南。此外,我們將解釋另一種粘貼圖像的選項 - 如何只需單擊幾下即可將圖像複製並粘貼到內容區域。我們還將向您介紹 WP 5.3 中新增的功能。

但首先我們來談談為什麼應該在帖子和頁面中使用圖像。

為什麼 WordPress 圖片塊是您網站的必備品

吸引眼球

圖像吸引網站訪問者的注意力。它們必須很有趣,才能讓訪問者在您的網站上停留更長時間。想像一下沒有圖片的博客文章。這只是一堆文字。乍一看,它並不是很有趣,儘管它可能很有價值並且充滿信息。此外,照片可以幫助更好地想像和描述您的主題。

因此,我們需要使用 WordPress 圖像塊來將注意力集中在重要的事情上。

2 個帶有或不帶有圖像的博客的示例
2 個帶有或不帶有圖像的博客的示例

說明性文本和上下文

圖像也是理解內容的重要組成部分,因為它們可以讓訪問者更好地理解文章的內容。借助信息圖表,您可以解釋複雜的聯繫並以簡單的方式講述事物。它可以幫助訪問者更好地了解您所談論的問題。

信息圖示例
信息圖提供更好的文字解釋

讓網站變得更好

此外,圖像很好地為整個網站設計做了最後的潤色。這不僅與網站佈局有關,還與可用性有關。正確選擇和放置圖像可以幫助訪問者更輕鬆地瀏覽您的網站。

如何在 WordPress 塊編輯器中添加圖像

要將圖像插入到帖子或頁面中,您需要添加核心塊 - 圖像塊。有幾種方法可以做到這一點:

– 在頂欄或編輯器中的任何位置使用“+”

單擊“+”添加圖像塊
單擊“+”添加 WordPress 圖像塊

– 使用斜杠“/”並在後面寫入單詞“image”

使用斜杠添加圖像塊
使用斜杠“/”添加圖像塊

將創建新塊,您可以在其中添加實際圖像。

將圖像上傳到 WordPress

如何將圖像放置在您想要的位置?

  • 使用上傳,然後從硬盤中選擇圖像
  • 使用媒體庫,您可以在其中選擇已上傳到您網站的圖像
  • 使用鼠標並拖放圖像
  • 插入圖片URL地址
上傳圖像的選項
上傳圖像的可用選項 - 其中之一是從文件夾中拖放圖像

添加 WordPress 圖片的鮮為人知的方法

除了前面提到的通過上傳窗口上傳圖像之外,還有另一種插入圖像的方法(而且這種方法非常快捷!)。借助改進的 WordPress 編輯器,您能夠:

  • 從任何內容複製圖像,或者
  • 只需用鼠標光標“拖動”圖像即可

然後將選定的圖像插入或移動(拖放)到內容區域中所需的位置。

將圖像從已發布的帖子拖放到內容區域
將選定的圖像拖放到您需要的位置(直接到 WordPress 編輯器)

如果您想粘貼從屏幕捕獲的圖像,也可以使用相同的技術。只需三個簡單的步驟。第一的, 你需要截圖 使用打印屏幕功能。例如,Windows 10 提供了名為 Snip & Sketch 的默認片段工具,也可以通過快捷方式使用該工具 - 只需同時按鍵盤上的 Win+Shift+S 鍵即可。然後選擇您要捕獲的圖像區域。最後一步是使用基本快捷鍵 Ctrl+V 將復制的圖像(或其一部分)粘貼到內容區域中。

您粘貼到編輯器中的 WordPress 圖像會發生什麼情況?嗯,它會自動添加到媒體庫中,您可以在其中編輯該圖像。

圖像元數據選項有限

在圖像編輯中,您可以設置其標題、說明文字、描述和替代文本。不幸的是,您無法更改圖像文件名 - 它將保留其自動生成的名稱,例如 圖片-1.png 等等。由於與文件命名建議衝突,這種類型的文件名在 SEO 優化方面可能有點不利。因此,在將 WordPress 圖像移動到內容區域之前,您需要考慮這一方面。

圖像對齊

圖像對齊是主要功能之一。無論您是否將 WordPress 圖像塊添加到帖子或頁面中,您都應該始終根據網站設計考慮放置位置。基於該圖像對齊可以在其上方的工具欄中選擇。默認情況下,您可以將圖像左對齊、右對齊或居中對齊。一些 WordPress 主題允許圖像以寬或全寬居中。這實際上取決於主題功能,因為並非所有主題都支持它。

圖像對齊設置
圖像對齊選項

調整圖像大小

WordPress 編輯器中圖像塊的革命性功能是實用的大小調整。只需拖動圖像的一側即可使其變小或變大。這樣您就可以根據內容中的文本調整圖像大小。編輯器會自動保持圖像比例,這意味著您不必擔心變形。

調整圖像大小
通過抓住其手柄來平滑調整圖像大小

將圖像轉換為圓形的新塊樣式

如果您使用的是最新版本的 WordPress,您可能已經註意到可用於圖像的新圓形裁剪樣式。通過單擊第一個“更改塊類型或樣式”圖標,可以通過頂部工具欄更改圖像的形狀。默認(矩形)形狀將被剪切為圓形。

圖像的圓形
適合您圖像的新圓形風格設計

WordPress 圖片塊中的新功能(在 WP 5.3 中添加)

支持高分辨率圖像

WP 5.3 的最大亮點之一是改進了 WordPress 平台上的圖像處理。處理圖像現在有兩個主要功能:

  1. 恢復上傳 – 如果您正在上傳高分辨率照片並且互聯網連接失敗,上傳過程將從中斷點自動繼續
  2. 自動圖像旋轉 – 最新發布的 WP 版本可確保錯誤旋轉的圖像在上傳時自動旋轉到正確的位置

檢查器中的設置

要配置確切的尺寸,您可以使用編輯器右側邊欄上的檢查器。圖像尺寸設置提供隨時可用的格式,例如縮略圖、中尺寸、大尺寸或全尺寸。當然,您可以以像素或百分比為單位設置寬度和高度。

可用的圖像尺寸設置
圖像尺寸設置

它非常快速且實用,因為您可以在 WordPress 圖像塊內完成所有圖像大小調整更改,並在塊編輯器中的一處進行所有操作。

其他圖像塊設置

如何添加URL地址

圖像可以用作靜態圖像,也可以單擊並鏈接到:

  •   媒體文件
  •   附件頁
  •   自定義網址
圖片鏈接設置
可用的圖像鏈接設置

如何在WordPress圖像塊中編輯圖片

單擊鉛筆圖標後可以編輯每個圖像。帶有媒體庫的模態窗口將打開,您可以在其中編寫替代文本、標題、說明文字和說明。與您已經習慣在舊版 WordPress 版本中使用經典編輯器執行此操作的方式相同。

用於 SEO 目的的圖像詳細信息
您應該填寫的圖像詳細信息以改善您的網站 SEO

為什麼填寫這些文本很重要?

如果訪問者單擊圖像以查看更大的圖像,他們會看到圖像標題(例如 Citadela 主頁)而不是圖像文件名。此外,如果加載圖像時出現任何問題,您的網站上將顯示替代文本。

額外提示

除了 WordPress 圖片塊的所有這些原因和設置之外,還有最重要的一點。您可以使用圖像吸引更多訪問者訪問您的網站。那麼如何獲得它們呢?

現在的人都懶得讀書了。他們更喜歡向下滾動圖片來尋找答案。你的照片和圖片怎麼能排名?文字就是答案。對於 SEO 優化來說非常重要的是完美的圖片標題和描述。不要忘記填寫替代文本。然後谷歌可以更好地理解圖像。因此,您將有更高的機會在圖像搜索結果中對其進行排名。

添加圖像標題的 2 種方法

使用塊編輯器添加圖像標題非常容易。在圖像的正下方有一個可以寫文字的空間。這是第一種方式 - 將標題寫入給定子頁面上的該確切圖像。

圖片說明
標題直接寫在圖像下方

第二種方法是使用媒體庫中的鉛筆圖標(編輯圖像)編寫圖像標題。通過這種方式,您可以在整個網站中全局添加圖像標題。這意味著如果您在三個不同的地方使用相同的圖像,它將始終使用此標題。

在媒體庫中添加圖像標題
通過媒體庫添加的圖像標題

您喜歡在 WordPress 圖像塊中添加圖像是多麼簡單嗎?自己嘗試一下吧!

了解有關我們全新 Citadela WordPress 主題及其定制佈局包的更多信息。它們是專門為不同類型的企業設計和開發的,並且還支持通過 WordPress 塊編輯器編輯內容的新方式。

7 對“Working with WordPress Image block: How to add images in WordPress [+Secret tip]”的思考

  1. 事實上,古騰堡編輯器之前/之後並沒有真正的變化。所有這些選項都已經到位。事實上,gutenberg 編輯器完全是一場災難,這就是 elementor、divi 和 Visual Composer 如此受歡迎的原因。我真心希望您的下一個版本將與這些構建器 100% 兼容,因為沒有人使用 WordPress 編輯器😀

    1. 你好,

      感謝您的評論。是的,該模板將與根據 WordPress Codex 和標準編寫的所有 WordPress 插件兼容。

      乾杯!
      茲拉特科

    1. 你好呀,

      謝謝你的詢問。我們的每一款產品定期保持最新狀態是我們的核心業務。
      如果您對從城市指南升級到與 WordPress 古騰堡編輯器完全兼容的 Citadela 主題的選項感興趣,答案是:是的,我們打算發布該插件,通過該插件您將能夠管理從城市的遷移將主題引導為 Citadela 主題,並使用 Citadela 目錄插件擴展(第一個插件應該很快發布)。

      真摯地!
      艾特團隊

  2. 我注意到可以將圖像直接粘貼到古騰堡編輯器中。這將導致添加到媒體庫中的圖像稱為 image-1、image-2 等......

    我沒有在本頁上閱讀過一項功能,因此也許是一個不錯的添加功能。

    當使用 Windows 片段工具 (Win+shift+S) 截取圖像時,這特別有用。然後可以將其直接粘貼到文章中光標所在的位置。

    這種方法最大的缺點是我還沒有找到在粘貼期間或之後編輯文件名的方法。所以它對 SEO 不太友好。

  3. 你好
    我在將圖像添加到“多作者博客”主題時遇到問題。似乎不可能將第二張或第三張圖像添加到每篇博客文章頂部的旋轉滑塊中。這意味著滑塊在幾秒鐘後為空,就好像它在等待第二張圖像一樣。
    請問可以修復嗎?
    或者:一個問題——“多作者博客”對於 Archnetwork 很重要(我們在斯洛伐克有一個合作夥伴),因為我們將其用作 Nature 項目參與者的“報告”平台。您的庫中是否有我們可以以相同方式使用的替代主題?
    Blair Urquhart(終身訂閱 - IT 部門 Archnetwork)

    1. 你好呀,

      感謝您的來信。首先,如果可以的話,請檢查您的主題/插件版本是否為最新版本:我們建議免費使用 AIT Updater 插件 -> https://www.ait-themes.club/wordpress-plugins/ ait-updater/ ,(或如何設置插件的文檔:https://www.ait-themes.club/doc/updater-plugin-documentation/
      有關產品激活的說明,您可以在以下位置找到:https://www.ait-themes.club/doc/theme-activation/

      如果您的問題仍然存在,請向我們提供一些圖像,或者請通過支持論壇與我們聯繫並提供 AIT SysInfo 報告:https://www.ait-themes.club/wordpress-plugins/ait-sysinfo/。我們的技術人員已準備好幫助您解決任何與主題相關的問題:在歐洲中部時間工作日上午 8 點至下午 5 點提供客戶支持,因為我無法重現您的問題。革命滑塊工作正常。

      第二,
      Citadela產品包中添加了一些有趣的功能,請查看比較表:https://www.ait-themes.club/next- Generation-directorypro/

      如果還有什麼我們可以幫助您的,請聯繫我們。

      親切的問候!
      茲拉特科
      艾特團隊

評論被關閉。