用于背景图像的WordPress Customizer CSS [英] WordPress Customizer CSS for Background Image
本文介绍了用于背景图像的WordPress Customizer CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用下面的代码通过WordPress Customizer中的设置将一些CSS添加到页面的顶部:
I'm using the code below to add some CSS to the head of the page with settings from the WordPress Customizer:
public static function header_output() {
?>
<!--Customizer CSS-->
<style type="text/css">
<?php self::generate_css('#site-title a', 'color', 'header_textcolor', '#'); ?>
<?php self::generate_css('body', 'background-color', 'background_color', '#'); ?>
<?php self::generate_css('a', 'color', 'link_textcolor'); ?>
<?php self::generate_css('#wrapper-1', 'background-color', 'section_1_background_color'); ?>
<?php self::generate_css('#wrapper-1', 'background-image', 'section_1_background_image'); ?>
</style>
<!--/Customizer CSS-->
<?php
}
除背景图像外,其他所有东西都可以正常工作,因为它可以输出:
Everything works fine except the background-image because it outputs:
#wrapper-1 { background-image:filename.jpg; }
代替:
#wrapper-1 { background-image: url("filename.jpg"); }
有人知道正确的方法来修改下面的php行以在图像周围包含url(")吗?
Does anyone know the proper way to modify the line of php below to include url(" ") around the image?
<?php self::generate_css('#wrapper-1', 'background-image', 'section_1_background_image'); ?>
推荐答案
引用 https://codex.wordpress.org/Theme_Customization_API#Sample_Theme_Customization_Class ...
使用如下的generate_css函数扩展主题自定义类:
Expand the theme customization class with a generate_css function like this:
/**
* This will generate a line of CSS for use in header output. If the setting
* ($mod_name) has no defined value, the CSS will not be output.
*
* @uses get_theme_mod()
* @param string $selector CSS selector
* @param string $style The name of the CSS *property* to modify
* @param string $mod_name The name of the 'theme_mod' option to fetch
* @param string $prefix Optional. Anything that needs to be output before the CSS property
* @param string $postfix Optional. Anything that needs to be output after the CSS property
* @param bool $echo Optional. Whether to print directly to the page (default: true).
* @return string Returns a single line of CSS with selectors and a property.
* @since MyTheme 1.0
*/
public static function generate_css( $selector, $style, $mod_name, $prefix='', $postfix='', $echo=true ) {
$return = '';
$mod = get_theme_mod($mod_name);
// fix the issue here:
if ($style=='background-image' && !empty($mod)) {
$mod = 'url("'.$mod.'")';
}
if ( ! empty( $mod ) ) {
$return = sprintf('%s { %s:%s; }',
$selector,
$style,
$prefix.$mod.$postfix
);
if ( $echo ) {
echo $return;
}
}
return $return;
}
这篇关于用于背景图像的WordPress Customizer CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文