Как настроить цвет WordPress в разделе пользовательской темы?

#php #wordpress #wordpress-theming #themes

#php #wordpress #wordpress-тематизация #темы

Вопрос:

Я нахожу где-то на сайте код, который выполняет часть того, что мне нужно сделать. Он добавляет 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');
  

Но я знаю, что здесь что-то не так, но не могу понять, что.

Ответ №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');
  

Я протестировал, и это сработало, см. Ниже, Как это выглядит

введите описание изображения здесь