WordPress 圖片編輯——對齊、尺寸與裁切

上傳到 WordPress 的照片常常有點歪、留白太多,或是放進文章後比例怪怪的。為了這點小調整另外開 Photoshop 或 Canva,再重新上傳一次,其實不太划算。WordPress 本身就內建一套基礎影像處理工具,裁切、旋轉、翻轉、縮放、對齊都能在後台直接完成,不必額外裝軟體。

只是這套工具散在兩個地方,操作邏輯也不一樣:一個是區塊編輯器裡點圖片就會跳出的工具列,另一個是媒體庫裡的完整影像編輯畫面。很多教學把兩者混為一談,結果讀者照著做卻找不到對應按鈕。這篇會把 WordPress 圖片編輯的兩條路徑拆開講清楚,包含對齊、尺寸控制、裁切與長寬比的差異,以及什麼情況該用哪一條,讓你每次調整都改對地方。

WordPress 的圖片編輯工具其實分成兩套,差別在改的是哪份檔案

先把最容易搞混的地方講在前面:WordPress 提供兩套位置不同、效果也不同的圖片編輯入口。

第一套是區塊編輯器內的影像處理。你在寫文章時插入「圖片區塊」,點一下圖片,上方會出現區塊工具列,裡面有裁切、對齊、長寬比這些功能。它調整的是「這張圖在這篇文章裡怎麼顯示」,多數情況下不會動到媒體庫的原始檔。

第二套是媒體庫內的完整影像編輯。從後台「媒體」進入媒體庫,點開某張圖片再按「編輯圖片」,會進到一個獨立的編輯畫面,有縮放、旋轉、翻轉、縮圖設定。它改的是「伺服器上這份圖片檔本身」,存檔後會在站內所有用到這張圖的地方一起更新。

兩者的核心差異是改動的對象。區塊內的調整偏向版面呈現,媒體庫內的編輯則會生成新的圖片檔。實務上的判斷很簡單:只想調整某篇文章裡這張圖怎麼擺,用區塊工具列;想永久修掉一張歪掉或太大的原圖,到媒體庫編輯。WordPress 在媒體庫編輯時會另存一份新檔、保留原圖,所以即使改錯也救得回來。

在區塊編輯器裡裁切、縮放與調整長寬比,動到的只是顯示效果

如果只是要讓圖片在文章中看起來剛好,最快的做法是在區塊編輯器裡直接處理,不用跑去媒體庫。

插入圖片區塊後,點選圖片,上方工具列會出現一個「裁切」圖示。按下去之後,編輯器會展開幾個調整選項:

  • 縮放(Zoom):拖動縮放滑桿可以放大圖片、把想保留的主體拉近,也能用滑鼠滾輪或觸控手勢操作。
  • 長寬比(Aspect Ratio):可以選正方形、16:9、4:3 等預設比例,或維持自由比例裁成任意形狀。
  • 旋轉:圖片如果是側躺的,可以在這裡轉正。

調整完按「套用」,圖片就會在區塊裡更新。要注意的是,WordPress 會把套用後的版本另存成一份新的圖片檔,所以媒體庫裡的原圖仍然保留。如果套用後不滿意,可以用編輯器左上角「+」旁邊的「復原」按鈕,或操作通知裡的「復原」回退。

除了工具列的裁切,右側「設定」面板裡還有一組「長寬比」與相關控制,效果跟工具列的裁切不太一樣。面板裡的長寬比改的是「圖片在頁面上呈現的形狀」,例如把橫幅顯示成正方形,但它不會真的裁掉原始檔的內容,只改變顯示方式。選了長寬比之後,通常會多出幾個欄位:

  • 寬度與高度:用來設定圖片的顯示尺寸。多數情況建議維持「自動」,需要縮放時只設定寬度、讓高度自動跟著算,比較不會在不同螢幕上失控。除非版面有特定需求,否則不建議鎖死固定高度。
  • 縮放方式(Scale):控制圖片怎麼填進選定的長寬比。「填滿(Cover)」會把整個顯示區塞滿,可能裁掉部分內容、不留空白;「包含(Contain)」會完整顯示整張圖,但形狀對不上時周圍會留空。
  • 焦點(Focal point):當縮放方式設成「填滿」、圖片被裁切時,用焦點選擇器指定要保留畫面的哪個區域。例如人像被裁成正方形時,把焦點移到臉部,避免主體被切掉。

這幾項都屬於「顯示層」的調整,改的是這篇文章裡這張圖的呈現,不會動到媒體庫原檔,跟下一段講的媒體庫永久編輯要分清楚。

圖片對齊與文繞圖,決定圖片在頁面上的位置

對齊是 WordPress 圖片編輯裡最常用、也最容易上手的一項,它決定圖片相對於其他內容會落在頁面的哪個位置。要設定對齊,得先把圖片插入文章或頁面。

插入圖片區塊後,點選圖片,在上方工具列按「變更對齊方式」圖示,可以選:

  • :維持區塊目前的尺寸與位置。
  • 靠左、置中、靠右:把圖片對齊到左側、中央或右側。
  • 寬版(Wide width):讓圖片超出文章內文的寬度。
  • 滿版(Full width):把圖片延伸到整個螢幕寬度。

其中「寬版」與「滿版」只有在你的佈景主題支援時才會出現,不是每個主題都有這兩個選項。

對齊還有一個常被忽略的用法是文繞圖,也就是讓文字環繞在圖片旁邊。做法是把圖片放在某段文字的正上方,選取圖片後先把它縮小一點,再從工具列選「靠左」或「靠右」,下方的段落文字就會繞著圖片排。這個效果在小張圖片上最好看;圖片太大時文字會被擠得很難讀,行動裝置上尤其明顯,所以文繞圖建議搭配縮小過的圖片使用。

在媒體庫裡縮放、旋轉與翻轉,改的是伺服器上的原始檔

當你要永久修正一張圖片本身,例如一張拍歪的照片、或一張尺寸過大拖慢頁面的原圖,就該到媒體庫的完整編輯畫面處理。

進入方式是從後台側邊欄點「媒體 → 媒體庫」,找到要編輯的圖片點開,再按圖片下方的「編輯圖片」。畫面上方會出現一排工具按鈕,右側則有縮放與縮圖相關的設定。

縮放圖片指的是在保持長寬比例的前提下,把整張圖的像素尺寸縮小,不會裁掉任何內容。在右側「縮放圖片」欄位輸入新的寬度或高度其中一個值,WordPress 會自動算出另一個值。舉例來說,一張 2000×1000 像素的圖,把寬度縮成 1000,高度會自動變成 500。這裡有兩個重點:第一、WordPress 只能把圖片縮小、不能放大,因為放大會讓圖片變得模糊失真;第二、若同一張圖既要縮放又要裁切,建議先縮放再裁切,比較容易維持原本的比例。

工具列上的其他按鈕負責旋轉與翻轉:

  • 向左旋轉、向右旋轉:每按一次轉 90 度,要轉 180 度就按兩次。
  • 垂直翻轉、水平翻轉:垂直翻轉會讓圖片上下顛倒,水平翻轉則做出鏡像效果。
  • 復原、重做:編輯過程中按錯了,可以用這兩個按鈕逐步回退或重做。

媒體庫裡的裁切操作跟區塊工具列略有不同:要先在圖片上按住並拖曳,框選出想保留的範圍,「裁切」按鈕才會變成可按的狀態。如果發現裁切鈕是灰色的、按不下去,多半就是還沒框選範圍。如果想裁成固定形狀,可以先在右側設定「長寬比」,這個選項只在裁切時生效。

調整都滿意後按「儲存」,WordPress 會套用變更並在伺服器上另外產生一份新的圖片檔。這裡要特別留意:媒體庫的儲存會更新站內所有用到這張圖的位置,影響範圍比區塊內的調整大得多,動手前最好先想清楚這張圖還用在哪些頁面。

縮圖設定與還原原圖,是媒體庫編輯特有的兩個控制

媒體庫編輯畫面右側還藏著兩個區塊工具列沒有的功能,一個管縮圖、一個管反悔。

WordPress 每次上傳圖片時,會自動生成好幾種尺寸,其中縮圖通常是一張較小、預設裁成正方形的版本,預設大小是 150×150 像素(可以在「設定 → 媒體」裡調整)。在影像編輯畫面右側的「縮圖設定」裡,你可以選擇這次的編輯要套用到哪些尺寸:

  • 所有圖片尺寸:包含主圖與各種衍生尺寸全部一起改。
  • 僅縮圖:只改縮圖,主圖維持不動。
  • 縮圖以外的所有尺寸:改主圖與其他尺寸,但保留原本的縮圖。

這個設定的用處在於,有時候自動裁出來的方形縮圖剛好把主體切掉,這時可以只針對縮圖重新裁切,不影響文章裡用到的主圖。

另一個是還原原圖。如果編輯後不滿意,重新打開這張圖的「編輯媒體」頁面,會多出一個「還原原始圖片」的區塊,展開後按「還原圖片」,就能把圖片退回最初上傳的版本。要注意這顆按鈕只有在你先前編輯過這張圖之後才會出現,沒編輯過的圖看不到。也因為 WordPress 在編輯時會保留原始檔,這個還原機制才有東西可以退回。

圖片編輯做不動時,多半卡在三個常見原因

如果照著步驟做卻沒反應,先別急著重裝外掛,多數情況是下面三種狀況之一。

裁切按鈕是灰色的、按不下去:這通常代表你還沒在圖片上框選要保留的範圍。把游標移到想開始裁切的左上角,按住並往右下拖曳,放開滑鼠選定範圍後,裁切鈕就會變成可按。

圖片沒辦法放大:WordPress 的縮放只能往下縮、不能往上放,因為放大會讓圖片模糊。比較好的做法是上傳時就用解析度足夠的原圖(拍攝時建議寬度落在 2000 到 3000 像素),之後要小就縮小、要大也還有餘裕。

想批次縮小大量舊圖:WordPress 預設沒有內建的批次縮放功能,但可以靠外掛補上,例如 Imsanity 這類免費工具能在上傳時自動把超過設定尺寸的圖縮小。批次處理會大幅改動圖片與版面,動手前務必先完整備份整站,避免改壞了沒得救。另外也可以到「設定 → 媒體」調整預設的圖片尺寸,這項只影響之後新上傳的圖,不會回頭動到舊圖。

WooCommerce 商品圖的尺寸設定走的是另一套邏輯

如果你經營的是 WooCommerce 商店,商品圖的尺寸控制跟一般文章圖片不太一樣,是另一個獨立的設定區。

WooCommerce 的商品圖尺寸多半在「外觀 → 自訂 → WooCommerce → 商品圖片」裡調整,可以設定商品主圖與縮圖的寬度,並選擇要正方形裁切、自訂尺寸,或維持原圖不裁切。這套設定是為了讓商店列表頁的商品圖整齊一致,跟前面講的單張圖片編輯是兩回事。

對熟悉程式的使用者來說,WooCommerce 也提供以 hook 控制圖片尺寸的方式,可以更細緻地定義各處圖片的呈現規則。一般使用者用自訂器的圖形介面調整就夠了,這裡只是讓你知道商品圖另有專屬入口,不必在媒體庫裡硬調。商品圖牽涉到的是商店呈現與顧客信任,調整邏輯偏向版面一致性,跟單純修一張歪照片的需求要分開看待。

改對地方,比改得漂亮更重要

WordPress 圖片編輯的關鍵,不在於工具多強,而在於每次都改到對的那一層。要調的是某篇文章裡這張圖怎麼擺,就用區塊編輯器的工具列與設定面板,動的是顯示效果,不傷原檔;要永久修正一張圖片本身,就進媒體庫的完整編輯畫面,記得它會影響站內所有用到這張圖的位置。

下次插入圖片前,先問自己一句:我要改的是「這篇文章的版面」還是「這張圖的檔案」。答案會直接告訴你該打開哪個入口。先把對齊與顯示比例在區塊裡調順,真的需要動原圖時再進媒體庫,並善用還原原圖這道保險,基礎影像處理在 WordPress 後台就能俐落收尾,不必再為了一點小修改另開繪圖軟體。

相關文章
標籤: 區塊編輯器, 媒體庫, 圖片裁切, 圖片對齊, 長寬比