定制颜色实用程序:如何向主题添加更多可配置的颜色

时间:2015-08-31 作者:Nobody

最近Wordpress安装,默认主题。有三种颜色可以从管理gui自定义,但网站上至少还有三种其他颜色无法从那里自定义:

文章/页面背景中的文本颜色和搜索字段中的背景颜色我假设可以修改主题,允许从cutomize colors管理界面配置这些内容。我该怎么做?如果你知道我在哪里可以找到关于这方面的文档,或者可以告诉我这是为已经可用的三种颜色实现的文件/函数,这可能也是一个很好的答案。

1 个回复
最合适的回答,由SO网友:Nobody 整理而成

所以我写下了我自己找到答案的整个过程,希望它对其他人有用(假设有基本的unix和编程技能)。

查找定义当前颜色选项的位置:

grep -ir \'Header and Sidebar Text Color\' .
./wp-content/themes/twentyfifteen/inc/customizer.php:   // Add custom header and sidebar text color setting and control.
./wp-content/themes/twentyfifteen/inc/customizer.php:       \'label\'       => __( \'Header and Sidebar Text Color\', \'twentyfifteen\' ),
./wp-content/themes/twentyfifteen/languages/twentyfifteen.pot:msgid "Header and Sidebar Text Color"
所以它应该在wp内容/主题/二十点十五/公司/定制器中。php。pot文件用于翻译,这很好,但现在并不重要。

在wp content/themes/Twenty15/inc/customizer中。php有一条评论解释了配色方案中有6种颜色是什么:

颜色数组中的颜色顺序:

主背景色在这条评论下面有一些代码,可能可以编辑这些代码来添加更多配色方案或更改默认配色方案。

在文件的下方有:

\'background_color\'            => $color_scheme[0],
\'header_background_color\'     => $color_scheme[1],
\'box_background_color\'        => $color_scheme[2],
\'textcolor\'                   => $color_scheme[3],
\'secondary_textcolor\'         => vsprintf( \'rgba( %1$s, %2$s, %3$s, 0.7)\', $color_textcolor_rgb ),
\'border_color\'                => vsprintf( \'rgba( %1$s, %2$s, %3$s, 0.1)\', $color_textcolor_rgb ),
\'border_focus_color\'          => vsprintf( \'rgba( %1$s, %2$s, %3$s, 0.3)\', $color_textcolor_rgb ),
\'sidebar_textcolor\'           => $color_scheme[4],
\'sidebar_border_color\'        => vsprintf( \'rgba( %1$s, %2$s, %3$s, 0.1)\', $color_sidebar_textcolor_rgb ),
\'sidebar_border_focus_color\'  => vsprintf( \'rgba( %1$s, %2$s, %3$s, 0.3)\', $color_sidebar_textcolor_rgb ),
\'secondary_sidebar_textcolor\' => vsprintf( \'rgba( %1$s, %2$s, %3$s, 0.7)\', $color_sidebar_textcolor_rgb ),
\'meta_box_background_color\'   => $color_scheme[5],
这表明,这6种可变颜色产生了额外的颜色。也可以对其进行修改,使其可以直接配置。

现在我需要了解如何在系统中注册前6种颜色,以便我可以自定义它们。

对于系统提供的两个,代码似乎是这样的:

// Add custom header and sidebar text color setting and control.
$wp_customize->add_setting( \'sidebar_textcolor\', array(
    \'default\'           => $color_scheme[4],
    \'sanitize_callback\' => \'sanitize_hex_color\',
    \'transport\'         => \'postMessage\',
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, \'sidebar_textcolor\', array(
    \'label\'       => __( \'Header and Sidebar Text Color\', \'twentyfifteen\' ),
    \'description\' => __( \'Applied to the header on small screens and the sidebar on wide screens.\', \'twentyfifteen\' ),
    \'section\'     => \'colors\',
) ) );
我由此推断:

"$color_scheme[1]" is "Header and Sidebar Background Color"
"$color_scheme[4]" is "Header and Sidebar Text Color"
我还没有找到密码,但可能

"$color_scheme[0]" is "Background Color"
因为在前面的评论中,该颜色被标记为“主背景色”。

因此,我将尝试为其他条目之一添加一个类似的节。我补充道:

// Add "Box Background Color" color setting and control.
$wp_customize->add_setting( \'box_background_color\', array(
    \'default\'           => $color_scheme[2],
    \'sanitize_callback\' => \'sanitize_hex_color\',
    \'transport\'         => \'postMessage\',
) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, \'box_background_color\', array(
    \'label\'       => __( \'Box Background Color\', \'twentyfifteen\' ),
    \'description\' => __( \'I don\\\'t know, maybe the background color of posts/pages?.\', \'twentyfifteen\' ),
    \'section\'     => \'colors\',
) ) );
“box\\u background\\u color”和$color\\u scheme[]索引来自我上面引用的数组,此行:

\'box_background_color\'        => $color_scheme[2]
我从描述$color\\u scheme[]的注释和我编造的描述中获取的标签。这会添加控件,但使用控件没有效果。因此,必须有更多的代码。在wp content/themes/Twenty15/inc/customizer中。php我找不到更多,所以我比较了

grep -ir \'box_background_color\' .
对于其中几个颜色变量。那些可配置的似乎在wp内容/主题/二十一五/js/配色方案控制中有更多点击率。js,因此我将查看该文件:

/**
 * Add a listener to the Color Scheme control to update other color controls to new values/defaults.
 * Also trigger an update of the Color Scheme CSS when a color is changed.
 */
这似乎是对的,这正是我们所缺少的。该文件在两个位置有三个已经工作的颜色选择器的条目:

    colorSettings = [
        \'background_color\',
        \'header_background_color\',
        \'sidebar_textcolor\'
    ];
这里:

                // Update Background Color.
                api( \'background_color\' ).set( colorScheme[value].colors[0] );
                api.control( \'background_color\' ).container.find( \'.color-picker-hex\' )
                    .data( \'data-default-color\', colorScheme[value].colors[0] )
                    .wpColorPicker( \'defaultColor\', colorScheme[value].colors[0] );
(其他两项略)

因此,我在数组中添加了“box\\u background\\u color”:

    colorSettings = [
        \'background_color\',
        \'header_background_color\',
        \'box_background_color\',
        \'sidebar_textcolor\'
    ];
并复制了另一部分,只需更改颜色变量名称和颜色方案数组索引:

                // Update Box Background Color Color.
                api( \'box_background_color\' ).set( colorScheme[value].colors[2] );
                api.control( \'box_background_color\' ).container.find( \'.color-picker-hex\' )
                    .data( \'data-default-color\', colorScheme[value].colors[2] )
                    .wpColorPicker( \'defaultColor\', colorScheme[value].colors[2] );
就是这样。工程.:-)

相关推荐

About wordpress child themes

我对WordPress和儿童主题有一些问题。据我所知,如果我不想在更新主题时失去任何东西,使用子主题是很重要的。我是WordPress的初学者,到目前为止,我一直在使用PageBuilder(管理面板上的板载自定义选项)自定义我的网站,并在“附加CSS”选项中加入几行CSS。所有这些都是在主主题上完成的(只是玩转尝试学习),现在我想开始使用一个儿童主题。问题如下:我不知道我是否可以像通过管理界面设计父主题那样设计我的子主题,或者我是否必须通过文本编辑器(在我的计算机上,然后通过FTP等方式上传)对所有内容