无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

WordPress自定古腾堡编写器的色调调色板

时间:2021-02-20 01:48来源:未知 作者:jianzhan 点击:
古腾堡(Gutenberg)编写器能够为段落等区块设定文字色调和情况色等,并且调色板中出示了12种默认设置色调:

古腾堡(Gutenberg)编写器能够为段落等区块设定文字色调和情况色等,并且调色板中出示了12种默认设置色调:

可是这些色调将会不1定兼容大家的主题,尽管也适用自定设定,可是假如大家将这些默认设置色调选项统1改动了,客户只需立即点一下便可运用,对客户来讲那就极其便捷了。

自定古腾堡色调调色板

要完成上图右侧的自定配色计划方案,可使用下面的编码:

<?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' );应用上面的编码,大家将1个实际操作加上到after_setup_theme钩子中,并申请注册1个名为change_gutenberg_color_palette的回调函数涵数。

在change_gutenberg_color_palette涵数中,大家应用add_theme_support涵数来开启editor-color-palette主题适用。随后在第2个主要参数,传送1个包括界定自定色调的数字能量数组的数字能量数组。

每一个子数字能量数组包括3个键/值对。即:

$name: 大家要在编写器中显示信息的名字。请留意,大家应用__()涵数使这些名字可汉语翻译。$slug: 1个唯1的 slug 别称,大家能够在CSS中应用它来变更具体色调。$color: 106进制色调值。加上自定CSS款式编码

以便使色调真实在大家的主题中起功效,大家务必为每种色调加上1些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钩子加上了另外一个实际操作,并申请注册了1个名为disable_custom_color_picker的回调函数涵数。

在disable_custom_color_picker涵数內部,大家再度应用add_theme_support涵数,但这1次大家加上了对disable-custom-colors的适用。

以下图所示,这会从面板上删掉“自定色调”连接。

內容参照:https://since1979.dev/wp-snippet-002-changing-the-gutenberg-color-palette/

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信