我希望我的主题是非常可定制的,到目前为止,我已经提供了更改文本和链接到正文的颜色的可能性,以及默认情况下的背景色(我正在使用下划线起始模板: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头钩为主题的头部添加了样式。然而,我也不确定这是否是最好的选择。
我可以通过哪些方式允许用户通过定制器更改主题的样式?最好的方法是什么?