0%

正威網路行銷工作室,專注於基隆、台北與全台客製化網頁設計,提供專業 RWD 響應式、SEO 搜尋引擎優化、品牌形象設計與網站維護託管服務。

搜尋文章
聯絡資訊
地址基隆市仁二路 220 號 5 樓
追蹤我們

WordPress 插入圖片的預設對齊、連結與尺寸:用程式碼設定一次就好

桌上的筆電與網頁設計草圖

在 WordPress 文章裡插入圖片時,常常每一張都要重新選一次:要置中、不要連結、用大尺寸……圖片一多就很花時間。

其實 WordPress 有三個設定專門記錄「插入圖片時的預設值」,只是後台沒有地方可以直接修改。用幾行程式碼設定一次,之後插入的圖片就會自動套用。

三個設定與可以用的值

  • image_default_align(對齊):left(靠左)、center(置中)、right(靠右)、none(無)。
  • image_default_link_type(連結):none(不連結)、file(連到圖片檔案)、post(連到附件頁面)。
  • image_default_size(尺寸):thumbnail(縮圖)、medium(中型)、large(大型)、full(原始尺寸),或主題另外註冊的尺寸名稱。

縮圖、中型、大型各是多大,可以在「設定 → 媒體」調整。

程式碼

加到子主題的 functions.php,或用 Code Snippets 外掛新增:

PHP
// 插入圖片的預設值:置中、不連結、大型尺寸
add_filter( 'pre_option_image_default_align', function () {
    return 'center';
} );

add_filter( 'pre_option_image_default_link_type', function () {
    return 'none';
} );

add_filter( 'pre_option_image_default_size', function () {
    return 'large';
} );

pre_option_設定名稱 這種篩選器的意思是「讀取這個設定時,直接回傳我指定的值」,不會寫進資料庫。想恢復原本的行為,把程式碼刪掉就好。三個設定不一定要全部加,只需要其中一兩個也可以。

跟舊版寫法的差別

舊版文章是在 after_setup_theme 裡呼叫 update_option(),等於每載入一次頁面,就去檢查、改寫一次資料庫裡的設定。效果雖然一樣,但沒必要每次都做;而且刪掉程式碼之後,設定值還會留在資料庫裡,之後很難察覺是哪裡改的。用上面的寫法比較乾淨。

區塊編輯器也有效嗎?

這三個設定原本是給傳統編輯器(Classic Editor)的「新增媒體」視窗使用的。在區塊編輯器裡:

  • 尺寸:新插入的圖片區塊,預設尺寸會使用 image_default_size。
  • 連結:新插入的圖片區塊,預設連結也會參考 image_default_link_type(file 對應連到媒體檔案,post 對應連到附件頁面)。
  • 對齊:區塊編輯器的對齊方式,通常還是要在圖片區塊的工具列自己選。

設定好之後,實際插入一張圖片測試,確認在你的 WordPress 版本與主題上的效果。

建議怎麼設定?

  • 尺寸用 large,不要用 full:full 會插入原始大小的圖片,手機拍的照片可能就有好幾 MB。選 large 時,WordPress 會自動輸出 srcset,讓瀏覽器依螢幕大小挑選合適的圖檔,高解析度螢幕一樣清楚。
  • 連結用 none:大部分文章圖片不需要點開。如果網站有使用圖片燈箱(點圖片放大),才改成 file,做法請看WordPress 圖片燈箱效果。
  • 不要用 post(附件頁面):附件頁面只有一張圖,內容很單薄,對訪客與搜尋引擎都沒有幫助。WordPress 6.4 起,新安裝的網站預設已經關閉附件頁面。
  • 對齊依版型決定:內文欄位不寬的版型,置中通常最整齊。

常見問題

設定之後,舊文章的圖片會改變嗎?

不會。這些只是「插入圖片時的預設值」,已經插入文章的圖片維持原樣,要改只能一張一張調整。

選了置中,前台的圖片卻沒有置中?

傳統編輯器插入的置中圖片,會加上 aligncenter 這個 class,要靠主題的 CSS 才會真的置中。比較舊或自己寫的主題可能沒有這段樣式,可以到「外觀 → 自訂 → 附加的 CSS」補上:

CSS
.aligncenter {
  display: block;
  margin-inline: auto;
}

更多置中的寫法,可以參考CSS div 置中完整整理。

延伸閱讀

發文的流程越順手,網站越容易持續更新。正威網路行銷是 25 年經驗的基隆網頁設計工作室,提供客製化網頁設計與 RWD 響應式網站,歡迎來聊聊。

分享這篇文章

返回文章列表更多「Wordpress代碼教學」文章

發表留言

還沒有人留言,歡迎第一個分享你的想法或問題。留言經審核後才會顯示,Email 不會公開。

讓我們一起打造
您的專屬網站!