為WordPress 古騰堡塊打造專屬自定義樣式教程

介紹

WordPress 古騰堡塊是從WordPress 5.0 版本引入的編輯器功能，使內容編輯變得模塊化和高效。對於開發者而言，古騰堡塊不僅方便使用，還支持通過自定義樣式和腳本來調整塊的外觀和交互效果。本文將一步步指導你如何為古騰堡塊創建個性化樣式，提升網站的專業感和用戶體驗。

步驟

第一步：準備工作

開始之前，請確認你使用的是WordPress 5.0 或以上版本，同時具備基本的CSS 和JavaScript 知識，這將有助於你更好地理解和應用自定義樣式。

第二步：創建自定義樣式

自定義樣式的關鍵在於修改主題的functions.php 文件，向編輯器加載新的CSS 文件。打開functions.php，在文件末尾添加如下代碼：

 function my_custom_block_style() {
  wp_enqueue_style(
    'my-custom-block-style', // 樣式名稱
    get_stylesheet_directory_uri() . '/css/my-block-style.css', // 樣式文件路徑
    array( 'wp-blocks' ),
    filemtime( get_stylesheet_directory() . '/css/my-block-style.css' ) // 自動刷新緩存
  );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_style' );

其中，“my-custom-block-style”是樣式的標識名，你可以根據需要修改。樣式文件假設放置在主題目錄下的css 文件夾，文件名為my-block-style.css。 filemtime 函數確保每次樣式文件更新時，瀏覽器自動加載最新版本，避免緩存問題。

接著，在主題的css 文件夾中創建“my-block-style.css”，所有自定義樣式均寫入該文件。

第三步：選擇塊並添加樣式

準備好樣式文件後，打開WordPress 編輯器，新增或選擇你想要定制的塊。在“塊”設置中找到“添加自定義樣式”功能，輸入對應塊的CSS 選擇器。

例如，要修改段落塊的文字顏色，可以寫入：

 .wp-block-paragraph {
  color: red;
}

“.wp-block-paragraph” 是段落塊的默認CSS 類名。若需為多個塊設置樣式，可在選擇器框中同時輸入多個選擇器，樣式將應用於所有對應塊。

第四步：保存更改

完成樣式輸入後，點擊“添加樣式”按鈕保存。刷新編輯器，即可見所選塊已應用自定義樣式，網站外觀隨之煥然一新。

總結

通過在主題文件中引入自定義CSS 並針對具體塊設置樣式，WordPress 古騰堡塊的定制變得靈活且強大。掌握以上技巧，你可以輕鬆打造獨具風格的內容模塊，提升網站的專業度和用戶體驗。希望本文對你設計古騰堡塊的樣式有所幫助。