php - 如何在自定义主题中个性化 Wordpress 颜色？

Question

我在网站的某处找到了我需要做的一部分的代码。它添加了 1 个颜色选择器，但我尝试添加多个选择器，但找不到正确的方法。

function mytheme_customize_register( $wp_customize ) {
    //All our sections, settings, and controls will be added here
    $wp_customize->add_setting( 'header_textcolor' , array(
        'default'     => "#000000",
        'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'        => __( 'Header Color', 'mytheme' ),
        'section'    => 'colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

function mytheme_customize_css()
{
    ?>
    <style type="text/css">
        h2 { color: #<?php echo get_theme_mod('header_textcolor', "#000000"); ?>; }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

我试图找到做广告多重选择器的方法，一个用于 h1，一个用于 h2，一个用于链接，...例如。

有人知道如何以正确的方式进行吗？我尝试了几件事，我可以让它出现，但是它们不活跃，我不熟悉 WP 结构：/

这是我想要做的结构：

    /** OPTION COLOR LINK**/
function mytheme_customize_register_link( $wp_customize ) {
    //All our sections, settings, and controls will be added here
    $wp_customize->add_setting( 'header_textcolor' , array(
        'default'     => "#000000",
        'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'        => __( 'Link', 'mytheme' ),
        'section'    => 'colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register_link' );

function mytheme_customize_css_link()
{
    ?>
    <style type="text/css">
        a { color: #<?php echo get_theme_mod('header_textcolor', "#000000"); ?>; }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css_link');

/** OPTION COLOR LINK HOVER**/
function mytheme_customize_register_link_hover( $wp_customize ) {
    //All our sections, settings, and controls will be added here
    $wp_customize->add_setting( 'header_textcolor' , array(
        'default'     => "#000000",
        'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'        => __( 'Link Hover', 'mytheme' ),
        'section'    => 'colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register_link_hover' );

function mytheme_customize_css_link_hover()
{
    ?>
    <style type="text/css">
        a:hover, a:active { color: #<?php echo get_theme_mod('header_textcolor', "#000000"); ?>; }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css_link_hover');

但我知道这不是这里的东西，但不明白是什么。

标签： phpwordpresswordpress-themingthemes

Answer 1

嗨，我相信我迟到了几个月，可能你已经解决了这个问题，但这里有一个解决方案可以帮助有同样问题的人。

function mytheme_customize_register( $wp_customize ) {
    //All our sections, settings, and controls will be added here
    $wp_customize->add_setting( 'link-color' , array(
            'default'     => "#000000",
            'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link-color', array(
            'label'        => __( 'Link Color', 'mytheme' ),
            'section'    => 'colors',
    ) ) );

        //All our sections, settings, and controls will be added here
        $wp_customize->add_setting( 'link-hover' , array(
            'default'     => "#ffffff",
            'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link-hover', array(
            'label'        => __( 'Link Hover', 'mytheme' ),
            'section'    => 'colors',
    ) ) );

}

add_action( 'customize_register', 'mytheme_customize_register' );

function mytheme_customize_css() { 
    ?>
    <style type="text/css">
            /* link color style define !important if need*/
            a { color: <?php echo get_theme_mod('link-color', "#000000"); ?> !important; }
            /* link color hover effect style define !important if need*/
            a:hover { color: <?php echo get_theme_mod('link-hover', "#ffffff"); ?> !important; }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

我进行了测试，它的工作原理如下所示