php - 用于背景图像的 WordPress 定制器 CSS

标签 php css wordpress

我使用下面的代码通过 WordPress Customizer 的设置将一些 CSS 添加到页面的头部:

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
}

除了背景图像外一切正常,因为它输出:

#wrapper-1 { background-image:filename.jpg; }

代替:

#wrapper-1 { background-image: url("filename.jpg"); }

有谁知道修改下面的 php 行以在图像周围包含 url("") 的正确方法?

<?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 函数扩展主题自定义类:

/**
 * 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;
}

关于php - 用于背景图像的 WordPress 定制器 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40773977/

相关文章:

javascript - JQuery Sortable : Making sortable elements non-draggable, 还可以排序

php - WooCommerce 为重新计算按钮添加订单管理 Hook

PHP 数组分页

php - 变量中的 If 逻辑(谓词表达式)

php - 多个插入不适用于SQLite 3

css - 使用 'ghost element' 在其容器内垂直对齐宽度为 100% 的内联 block 元素

html - 表格居中并在屏幕上响应

php - 使用 PHP 或 Javascript 连接 HTML 字符串

php - 标题中显示的高级自定义字段简码

javascript - Uncaught ReferenceError : postscribe is not defined at ctkvidinit ((index):3258)