古騰堡(Gutenberg)編輯器可以為段落等區塊設置文本顏色和背景色等,而且調色板中提供了12種默認顏色:
但是這些顏色可能不一定適配我們的主題,雖然也支持自定義設置,但是如果我們將這些默認顏色選項統一修改了,用戶只需直接點擊即可應用,對用戶來說那就極為便利了。
自定義古騰堡顏色調色板
要實現上圖右邊的自定義配色方案,可以使用下面的代碼:
<?php/*** change_gutenberg_color_palette.** Add theme support for editor-color-palette,* and set colours for the gutenberg colour pallete.** @see https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/** @uses add_theme_support() https://developer.wordpress.org/reference/functions/add_theme_support/* @uses __() https://developer.wordpress.org/reference/functions/__/* @uses array() https://www.php.net/manual/en/function.array.php** @return void*/function change_gutenberg_color_palette() {add_theme_support( 'editor-color-palette', array(array('name' => __('Blackish', 'your-textdomain'),'slug' => 'blackish','color' => '#323232',),array('name' => __('Whiteish', 'your-textdomain'),'slug' => 'white','color' => '#eeeeee',),array('name' => __('White', 'your-textdomain'),'slug' => 'white','color' => '#ffffff',),array('name' => __('Dark blue', 'your-textdomain'),'slug' => 'dark-blue','color' => '#1d2735',),array('name' => __('Blue', 'your-textdomain'),'slug' => 'blue','color' => '#00659b',),array('name' => __('Light blue', 'your-textdomain'),'slug' => 'light-blue','color' => '#4999ca',),));}/*** Hook: after_setup_theme.** @uses add_action() https://developer.wordpress.org/reference/functions/add_action/* @uses after_setup_theme https://developer.wordpress.org/reference/hooks/after_setup_theme/*/add_action( 'after_setup_theme' , 'change_gutenberg_color_palette' );使用上面的代碼,我們將一個操作添加到after_setup_theme鉤子中,並註冊一個名為change_gutenberg_color_palette的回調函數。
在change_gutenberg_color_palette函數中,我們使用add_theme_support函數來啟用editor-color-palette主題支持。然後在第二個參數,傳遞一個包含定義自定義顏色的數組的數組。
每個子數組包含三個鍵/值對。即:
$name: 我們要在編輯器中顯示的名稱。請注意,我們使用__()函數使這些名稱可翻譯。$slug: 一個唯一的 slug 別名,我們可以在CSS中使用它來更改實際顏色。$color: 十六進位顏色值。添加自定義CSS樣式代碼
為了使顏色真正在我們的主題中起作用,我們必須為每種顏色添加一些CSS,如下所示:
// Blackish.has-blackish-background-color { background-color: #323232;} .has-blackish-color { color: #323232;}// Whiteish.has-whiteish-background-color { background-color: #eeeeee;} .has-whiteish-color { color: #eeeeee;}// 等等...禁用自定義顏色選擇器
上面的代碼可以使我們的用戶能夠使用自定義顏色選擇器製作自己的顏色。如果你希望用戶只能從上面的默認顏色中選擇,不可以自定義顏色,可以通過下面的代碼實現:
<?php/*** disable_custom_color_picler.** Disable the custom color selector of the gutenberg color palette,** @see https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/** @uses add_theme_support https://developer.wordpress.org/reference/functions/add_theme_support/*/function disable_custom_color_picker(){add_theme_support('disable-custom-colors');}/*** Hook: after_setup_theme.** @uses add_action() https://developer.wordpress.org/reference/functions/add_action/* @uses after_setup_theme https://developer.wordpress.org/reference/hooks/after_setup_theme/*/add_action('after_setup_theme', 'disable_custom_color_picker');使用上面的代碼,我們向after_setup_theme鉤子添加了另一個操作,並註冊了一個名為disable_custom_color_picker的回調函數。
在disable_custom_color_picker函數內部,我們再次使用add_theme_support函數,但這一次我們添加了對disable-custom-colors的支持。
如下圖所示,這會從面板上刪除「自定義顏色」連結。
內容參考:https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/