這篇文章最後更新日期:2022 年 7 月 5 日
作者: Mack Chan
一般閱讀的文章是由標題和段落文字組成,如果是長篇內容,容易讓讀者感到沉悶。這時候你可以試試適當加入不同的 多媒體 (Multimedia) 來豐富你的內容,最常見就是我們這次介紹的圖片區塊元素,因為相對於動畫或影片,圖片的製作相對輕鬆和容易,也是各種內容最傳統的表現方式之一。WordPress 區塊編輯器 提供不少的選項供你調整和修改,適當設定圖片和部署也有利於網站的 SEO 評分。
Youtube 教學影片:
影片長度: | 13 分鐘 |
語言: | 國語 |
字幕: | 繁體中文 |
如何新增圖片區塊 Image Block (方法一)?
步驟一:
步驟二:
如何新增圖片區塊 Image Block (方法二)?
步驟一:
步驟二:
步驟三:
新增「圖片 Image」和設定
新增圖片的方法其實有很多種,但 WordPress 預設是透過以下 3 種方式,是把圖片置入網站的標準流程和步驟。
步驟一:上傳圖片
步驟二:從媒體庫選取圖片
步驟三: 從外部圖片連結匯入圖片
從「電腦硬碟」上傳至「WordPress 網站」
這跟一般我們玩的 Facebook 社交平台操作相同,點擊「上傳」按鈕後會彈出上傳視窗,不過要注意圖片格式的支援和檔案大小。
套用媒體庫或現成的圖片資源
步驟一:點擊「選擇圖片 / Select Image」
步驟二:從 WordPress 媒體庫取用資源
步驟三: 從 Google 雲端硬碟 / Google Photos 取用資源
步驟四: 從線上免費圖庫 Pexels Free Photos 取用資源
從「媒體庫」裡挑選合適的圖片素材
WordPress 的媒體庫在不同版本之下會略有差異,一般都像電腦裡的圖片資料夾,提供簡單的管理功能,方便使用者整理圖片資源。
步驟一:選取合適的圖片
步驟二:按下「選取」即可套用圖片
連結 Google Photos / 圖片庫提取外部圖片
Google 一直都有提供讓使用免費者存放圖片的雲端硬碟,不過常常改版和變換名稱,現在最新應該是 Google Photos。WordPress 允許站長連結兩者,完成之後就能從 Google Photos 裡的圖片庫取用自己的資源,也可以作為第二備份圖片之用。
從免費素材網站「Pexels Free Photos」置入外部圖片
早前分享過《可商用免費圖庫網站》的介紹裡有提到 Pexels 這個國外知名的圖片素材網站,現在你在 WordPress 後台或《區塊編輯器》裡就能直接取用這些由專業攝影師製作的圖片資源。
步驟一:輸入圖片的關鍵字
步驟二:從圖片預覽裡作最終選擇
從外部圖床 / 外連圖片網址至網站
關於「圖片分離」和「圖床」是額外的複雜課題,不在這篇教學範疇裡,我們往後會製作獨立的教學篇章詳盡解釋。
步驟一:選取「從網址插入媒體」按鈕
步驟二:貼上或輸入網址
推薦延伸閱讀:
什麼是 WordPress 媒體庫? | 新增、編輯和管理
身為專業的網站管理員,他們都對負責管理網站裡的所有「圖片 Image」、「影片 Video」、「音訊 Audio」和「文件 Documents」資源非常重視,整齊有序的圖片管理是成功的關鍵之一。
圖片的對齊方式
圖片預設的對齊是寬度 100%,填滿左右兩邊的空間,這符合基礎的現代美學和實用性。
步驟一:選取「對齊圖示」
步驟二:圖片對齊模式
推薦延伸閱讀:
如何在文章建立文字圍繞圖片 (文繞圖) 的效果?
不論在辦公室軟體或設計排版工具,文繞圖都是非常常見的設計方式,圖片和段落會緊湊地相連在一起,你在報章雜誌裡也不難發現這種排版方式,而在我們常用的區塊編輯器裡,要製作這效果非常簡單。
在圖片插入「超連結」網址
在長篇文章和頁面裡的圖片插入「超連結」是很常見的做法,在 WordPress 編輯器裡的步驟很簡單和直觀。
步驟一:點擊「鎖鏈」按鈕
步驟二:從進階的頁面設定
圖片的重新剪裁、放大縮小和旋轉
雖然 WordPress 提供簡單的圖片編輯功能,但如果希望成為專業的網站站長,建議花點時間學習 Adobe Photoshop 和 Adobe Illustration 等的專業工具,而非透過網絡上的線上工具編輯,一般精準度和細節是不怎理想。利用 WordPress 的圖片編輯工具,應該是迫於無奈之下的選擇,但我們這次仍然會介紹相關的功能。
步驟一:選取「對角線」的按鈕
步驟二:提供圖片改變尺寸、旋轉和放大效果
隨意改動圖片的大小尺寸
每當你點選圖片時,圖片的右方和下方會出現一個「小白點」,你可以隨意拖動,就能輕鬆改變圖片的大小尺寸。不過如果希望得到精準的尺寸,建議在右方的「圖片區塊」設定裡調整。
為圖片加上覆疊 (Overlay) 效果
有時候我們希望在圖片之上「加上文字」和「強調字句」,但往往圖片和文字的對比度不足,文字又顯得不清晰。現在 WordPress 的圖片屬性裡提供覆疊 (Overlay) 效果,允許在圖片的上方壓上一層「深色的色塊」,然後再補上需要強調的文字,不過新手可能需要多設定數次才能熟悉這個功能的進階應用。
步驟一:點擊「在圖片上新增文字」的按鈕
步驟二:提供數種調色工具
套用圖片的「雙色調濾鏡」效果
關於 WordPress 雙色調濾鏡 (Duotone Filter) 的功能 的應用,我們製作了完整的獨立專題教學文章,你可以在下方的延伸閱讀瞭解更多這個複雜的功能。
推薦延伸閱讀:
什麼是 WordPress 雙色調濾鏡 (Duotone Filter) 的功能?指定兩種色彩圖片風格
這是 WordPress 近期的新功能,允許使用者挑選兩種色彩,作為圖片的參考色彩,常見於配合公司品牌色彩和推廣計劃。操作也不難,就是選擇「深色色彩」和「淺色色彩」即可以達成這個效果。
圖片預設的外觀樣式
簡單來說,暫時 WordPress 提供的圖片外觀樣式只有兩種,分別是標準預設的「方型圖片」和「圓角圖片」,這有待官方在往後強化,暫時沒有更多的補充。但從前一般站長是透過調整 CSS 來達成圓角的特效,現在也算是補足這個缺口。
步驟一:選擇圖片的外觀樣式
步驟二:調整預設的外觀樣式
替代文字 (Alt Text) 和圖片尺寸設定
步驟一:替代文字 (Alt Text)
步驟二:圖片尺寸設定
圖片標題屬性、HTML 錨點和附加的 CSS 類別
在進階設定頁面,這裡資料並非必須要填寫,站長可以自行衡量需求。
步驟一: 圖片標題屬性
步驟二:HTML 錨點
步驟三:附加的 CSS 類別
常見問題 FAQ
我需要多大的圖片儲存空間才足夠?
如果圖片經過合理的壓縮處理,短期內是不需要擔心這個問題,新手記得最少要使用一些免費的「圖片壓縮」工具,像是知名的 ShortPixel、Jetpack、Optimizilla 或 TinyPNG 都能快速方便解決這類問題,當然技術良好必然是推薦 Adobe Photoshop。
圖片區塊無法滿足我的需求?
WordPress 區塊編輯器 一直不停改進之中,你可以發現更多愈來愈強的功能加入進這個工具之中。如果希望探索更多圖片的可能性和應用,你可以前往研究 WordPress 頁面編輯器 的應用和教學。
參考資料和引用文獻:
- Image Block | WordPress.org
- Image Block – Support – WordPress.com
- 維基百科:WordPress 是什麼?
- Using Images
- Using Image and File Attachments
- Inserting Images into Posts and Pages
- Media Library Screen
- Elegant Themes:How to Use the WordPress Image Block
- WPBeginner:How to Add and Align Images in WordPress Block Editor (Gutenberg)
- Kinsta:The Complete Guide to the WordPress Media Library (4 Handy Media Library Hacks Included)
- iThemes Media:Using the WordPress Media Library
- HubSpot:11 WordPress Media Library Plugins to Get Your Content Under Control
- WPBeginner:What is: Media
- W3techs:Usage statistics of image file formats for websites
- Web Accessibility Tutorials:An alt Decision Tree
- 網站迷谷:如何管理、組織和分類您的 WordPress 媒體庫
- WordPress/gutenberg · GitHub
- 網站迷谷:透過 WordPress 寫文章
- 網站迷谷:WordPress 官方的區塊編輯器
- 網站迷谷:什麼是 WordPress 可重複使用區塊的應用?
- 網站迷谷:認識《WordPress 區塊小工具》
我們提供市場上最新的網站架設
新聞、教學和相關知識,我們不會向用戶
發送垃圾和推廣內容,而你可以隨時「取消訂閱」。
WordPress 學員人數
15,000+ 人 (持續增加之中)
在〈WordPress 圖片區塊 | 輔助描述段落說明〉中有 3 則留言