在使用 WordPress 的 Gutenberg 編輯器時，預設的區塊寬度可能不符合特定網站設計需求，尤其是針對文章（post）類型。這段程式碼示範如何透過後台樣式調整，限制文章區塊的最大寬度，讓編輯介面更貼近前端顯示效果，適合想優化編輯體驗的開發者與自學者。

為什麼要調整 Gutenberg 編輯器的區塊寬度？

Gutenberg 編輯器的區塊寬度預設較寬，可能導致編輯時排版與前端顯示不一致，影響內容編輯的直觀感受。透過限制最大寬度，可以讓編輯時的視覺效果更接近實際網站呈現，減少排版錯誤。

程式碼解析

1. 透過 admin_head 動作掛載自訂樣式

add_action( 'admin_head', 'custom_post_gutenberg_editor_width' );

這行程式碼將自訂函式掛載到 WordPress 後台的 head 區塊，確保樣式只在後台生效。

2. 目標限定為文章(post)類型的區塊

.post-type-post .wp-block {
    max-width: 600px !important;
}

這段 CSS 限制所有文章類型的區塊最大寬度為 600px，避免編輯器區塊過寬。

3. 調整 “wide” 對齊方式的寬度

.post-type-post .wp-block[data-align="wide"] {
    max-width: 600px !important;
}

將 “wide” 對齊的區塊同樣限制在 600px，避免因預設寬度過寬而影響排版。

4. 保留 “full” 對齊的全寬效果

.post-type-post .wp-block[data-align="full"] {
    max-width: none !important;
}

讓 “full” 對齊的區塊維持編輯器全寬，符合使用者預期的全屏展示。

實務應用與延伸

• 可依需求調整 max-width 數值，配合網站前端設計寬度。
• 若需針對其他自訂文章類型，也可複製此函式並修改 .post-type-post 選擇器。
• 若想更細緻控制不同區塊類型寬度，可增加更多 CSS 選擇器與規則。

常見問題與注意事項

• 使用 !important 是為了覆蓋 Gutenberg 預設樣式，避免無效。
• 此方法只影響後台編輯器，不會改變前端顯示。
• 若有快取或 CSS 優先權問題，請清除快取或調整掛載優先順序。

完整程式碼

<?php
function custom_post_gutenberg_editor_width() {
    echo '
<style>
        /* Target ONLY the standard "post" post type in the editor */
        .post-type-post .wp-block {
            max-width: 600px !important; 
        }

        /* Optionally, set the "wide" alignment to the same narrow width */
        .post-type-post .wp-block[data-align="wide"] {
            max-width: 600px !important; 
        }

        /* Ensure "full" alignment still goes full width of the editor screen */
        .post-type-post .wp-block[data-align="full"] {
            max-width: none !important;
        }
    </style>';
}
add_action( 'admin_head', 'custom_post_gutenberg_editor_width' );

在開發 WordPress 網站時，常常需要加入自定義的 CSS 和 JavaScript 來調整樣式或增加互動效果。直接在主題的 functions.php 檔案中註冊並載入這些檔案，是一種方便且易於維護的做法，適合本地開發與版本控管。

在 functions.php 中載入自定義 CSS 和 JS

WordPress 提供了 wp_enqueue_style 和 wp_enqueue_script 兩個函式，分別用來載入 CSS 和 JS 檔案。通常會將這些載入動作放在一個自訂函式中，並透過 add_action 掛載到 wp_enqueue_scripts 鉤子。

以下是範例程式碼片段：

add_action( 'wp_enqueue_scripts', 'custom_style_scripts' );

/**
 * Enqueue scripts and styles.
 */
function custom_style_scripts() {
    // CSS 檔案放在子主題的 css 資料夾中
    wp_enqueue_style( 'main_css', get_stylesheet_directory_uri() . '/css/main.css' );

    // JS 檔案放在子主題的 js 資料夾中，依賴 jQuery，並放置於頁面底部
    wp_enqueue_script( 'main_js', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'), false, true );
}

實務應用與注意事項

• 建議將 CSS 和 JS 分別放在子主題的 css 和 js 資料夾中，方便管理與版本控制。
• 在本地開發時，可以搭配 Gulp 或其他前端工具編譯 SCSS，並自動更新這些檔案。
• wp_enqueue_script 的最後一個參數設為 true，確保 JS 載入於頁面底部，提升頁面載入效能。
• 若有多個腳本或樣式檔案，依照需求分別註冊並載入，避免重複或衝突。

相關官方文件

• wp_enqueue_script
• wp_enqueue_style

完整程式碼

add_action( 'wp_enqueue_scripts', 'custom_style_scripts' );

/**
 * Enqueue scripts and styles.
 */
function custom_style_scripts() {
    //目錄可自行在子主題下面建立路徑像是css都放到css資料夾中，js就放到js資料夾中
    //載入CSS
    wp_enqueue_style( 'main_css', get_stylesheet_directory_uri() . '/css/main.css' );
    //載入JS
    wp_enqueue_script( 'main_js', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'), false, true );
}

在網頁設計或 EDM 製作中，常會遇到將多張圖片並排時，中間出現不必要的空白白線問題。這種白線通常是因為圖片元素的默認行內行為導致的空格，對於需要精確拼接圖片的場景非常困擾。

問題說明

當兩個 <img> 標籤並排時，瀏覽器會將它們視為行內元素，並在圖片間插入空白字元，導致中間出現白線。這在視覺上會破壞圖片的連續性。

解決方案

最簡單有效的方法是將 <img> 標籤的 CSS 屬性 display 設為 block，使圖片變成區塊元素，消除行內元素間的空白。

img {
  display: block;
}

這樣設定後，圖片間的空白白線就會消失，圖片可以無縫拼接。

實際應用

在實務中，只要在 CSS 中加入上述設定，或直接在圖片元素上加上 style="display:block;"，即可快速解決問題。這對於 EDM 或需要精準排版的網頁設計非常實用。

常見坑

• 直接刪除 HTML 中的空白字元不一定有效，因為瀏覽器仍會將行內元素間的空白視為間距。
• 使用 float 或 flex 也能解決，但相對複雜且可能影響其他排版。

完整程式碼

<img src="圖片路徑" style="display:block;" />