如何在定制器中添加用户设置的样式

时间:2018-10-10 作者:ManuAlvarado22

我希望我的主题是非常可定制的,到目前为止,我已经提供了更改文本和链接到正文的颜色的可能性,以及默认情况下的背景色(我正在使用下划线起始模板:https://underscores.me/) 以及导航栏的背景色和链接色。

我实现这一点的方法是使用WordPress提供的wp\\u add\\u inline\\u样式,这是我在本优秀教程中学习到的:https://www.cssigniter.com/how-to-create-a-custom-color-scheme-for-your-wordpress-theme-using-the-customizer/

这是我迄今为止的代码(警告,未遵循WP编码标准):

自定义程序。php:

function _s_customize_register($wp_customize) {
    // $wp_customize->add_setting(\'navigation_logo\');
    // $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, \'navigation_logo\', [
    //  \'label\' => \'Kindly\',
    //  \'section\' => \'title_tagline\',
    //  \'settings\' => \'navigation_logo\'
    // ]));

    $wp_customize->add_section(\'header_navigation\', [
        \'title\'          => __(\'Header Navigation\'),
        \'description\'    => __(\'Customize your header navigation\'),
        \'priority\'       => 50
    ]);

    $wp_customize->add_setting(\'header_navigation_background_color\', [
        \'default\'   => \'#000\',
        \'transport\' => \'refresh\',
        \'sanitize_callback\' => \'sanitize_hex_color\'
    ]);
    $wp_customize->add_setting(\'header_navigation_link_color\', [
        \'default\'   => \'#fff\',
        \'transport\' => \'refresh\',
        \'sanitize_callback\' => \'sanitize_hex_color\'
    ]);
    $wp_customize->add_setting(\'text_color\', [
        \'default\'   => \'#000\',
        \'transport\' => \'refresh\',
        \'sanitize_callback\' => \'sanitize_hex_color\'
    ]);
    $wp_customize->add_setting(\'link_color\', [
        \'default\'   => \'\',
        \'transport\' => \'refresh\',
        \'sanitize_callback\' => \'sanitize_hex_color\'
    ]);

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, \'header_navigation_background_color\', [
            \'section\' => \'header_navigation\',
            \'label\'   => esc_html__(\'Background color\')
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, \'header_navigation_link_color\', [
            \'section\' => \'header_navigation\',
            \'label\'   => esc_html__(\'Link color\')
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, \'background_color\', [
            \'section\'  => \'widgets\',
            \'label\'    => esc_html__(\'Stuff color\')
            // \'settings\' => \'\'
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, \'text_color\', [
            \'section\' => \'colors\',
            \'label\'   => esc_html__(\'Text color\')
        ]
    ));
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, \'link_color\', [
            \'section\' => \'colors\',
            \'label\'   => esc_html__(\'Link Color\')
        ]
    ));

    // This is underscores code from here:
    $wp_customize->get_setting(\'blogname\')->transport         = \'postMessage\';
    $wp_customize->get_setting(\'blogdescription\')->transport  = \'postMessage\';
    $wp_customize->get_setting(\'header_textcolor\')->transport = \'postMessage\';

    if (isset($wp_customize->selective_refresh)) {
        $wp_customize->selective_refresh->add_partial(\'blogname\', [
            \'selector\'        => \'.site-title a\',
            \'render_callback\' => \'_s_customize_partial_blogname\',
        ]);
        $wp_customize->selective_refresh->add_partial(\'blogdescription\', [
            \'selector\'        => \'.site-description\',
            \'render_callback\' => \'_s_customize_partial_blogdescription\',
        ]);
    }
}
add_action(\'customize_register\', \'_s_customize_register\');
功能。php:

function theme_get_customizer_css()
{
    $modificationsAndStyles = [
        \'text_color\' => [
            \'body\' => [
                \'color\'
            ]
        ],
        \'link_color\' => [
            \'a\' => [
                \'color\'
            ]
        ],
        \'header_navigation_background_color\' => [
            \'.navigation\' => [
                \'background-color\'
            ]
        ],
        \'header_navigation_link_color\' => [
            \'.menu-item a\' => [
                \'color\'
            ]
        ]
    ];
    $css = \'\';
    $indentation = str_repeat(\' \', 4);

    foreach ($modificationsAndStyles as $modification => $styles)
    {
        $themeModification = sanitize_hex_color(get_theme_mod($modification));

        if (!empty($themeModification))
        {
            foreach ($styles as $selector => $properties)
            {
                $css .= "$selector {\\n";

                foreach ($properties as $property)
                {
                    $css .= "$indentation$property: $themeModification;\\n";
                }

                $css .= "}\\n";
            }
        }
    }

    return $css;
}

function _s_scripts() 
{
    wp_enqueue_style(\'_s-style\', get_stylesheet_uri());
    // Custom modifications for the theme
    // Got this code from this nicely nice tutorial:
    // https://www.cssigniter.com/how-to-create-a-custom-color-scheme-for-your-wordpress-theme-using-the-customizer/
    // $custom_css = theme_get_customizer_css($modificationsAndStyles);
    $custom_css = theme_get_customizer_css();
    wp_add_inline_style(\'_s-style\', trim($custom_css));

    wp_enqueue_script(\'_s-navigation\', get_template_directory_uri() . \'/js/navigation.js\', [], \'20151215\', true);

    wp_enqueue_script(\'_s-skip-link-focus-fix\', get_template_directory_uri() . \'/js/skip-link-focus-fix.js\', [], \'20151215\', true);

    wp_enqueue_script(\'scrolling-behaviors\', get_template_directory_uri() . \'/js/scrolling-behaviors.js\');

    wp_enqueue_script(\'interactions\', get_template_directory_uri() . \'/js/interactions.js\');

    if (is_singular() && comments_open() && get_option(\'thread_comments\')) 
    {
        wp_enqueue_script(\'comment-reply\');
    }
}
add_action(\'wp_enqueue_scripts\', \'_s_scripts\');
它工作得很好。但是,从长远来看,我不太确定是否要将这些样式添加为内联样式。

我还找到了另一种方法:https://code.tutsplus.com/tutorials/settings-and-controls-for-a-color-scheme-in-the-theme-customizer--cms-21350

它看起来很漂亮,它用wp\\U头钩为主题的头部添加了样式。然而,我也不确定这是否是最好的选择。

我可以通过哪些方式允许用户通过定制器更改主题的样式?最好的方法是什么?

1 个回复
SO网友:ManuAlvarado22

我还没有阐明应用定制器样式的最佳方法是什么。但是,这是我现在正在使用的函数(不再使用前一个函数,因此,您可以删除wp\\U add\\U inline\\U样式部分):

// I like this way so much more that i\'m going to cry.
// Thanks to:
// https://code.tutsplus.com/tutorials/settings-and-controls-for-a-color-scheme-in-the-theme-customizer--cms-21350
// https://code.tutsplus.com/tutorials/adding-the-css-for-a-color-scheme-in-the-theme-customizer--cms-21351
function theme_customizer_styles()
{
    $textColor = get_theme_mod(\'text_color\');
    $linkColor = get_theme_mod(\'link_color\');
    $headerNavigationBackgroundColor = get_theme_mod(\'header_navigation_background_color\');
    $headerNavigationLinkColor = get_theme_mod(\'header_navigation_link_color\');

    ob_start();
?>

    <style>
        body {
            color: <?php echo $textColor; ?>;
        }

        a {
            color: <?php echo $linkColor; ?>;
        }

        .navigation {
            background-color: <?php echo $headerNavigationBackgroundColor; ?>;
        }

        .menu-item a {
            color: <?php echo $headerNavigationLinkColor; ?>;
        }
    </style>

<?php
    ob_flush();
}
add_action(\'wp_head\', \'theme_customizer_styles\');
当然,还有很大的改进空间,请随意添加此方法,或为我们提供更好的方法,或您喜欢的方法。

结束

相关推荐

css media query question

我想这是一个新手问题,但在这里。我一直在编辑一个子主题CSS,并试图更改此特定代码@media (min-width: 769px) #carousel-hestia-generic span.sub-title { font-size: 24px; } 这是我从铬合金中看到的。当我把它添加到我的风格中时。css在我的孩子的主题,使字体大小,让我们说36px,它不会改变。实际上,Chrome显示了删除线。。。the element I w