主题定制器不显示wp_head中的保存值(Css)

时间:2013-08-18 作者:MegaMan

我一直在学习如何在主题中添加主题定制器功能。使用很少的代码和帮助来源,但最终选择了Codex。

我使用的是抄本本身的一个片段,稍加修改以添加更多设置。

我所做的唯一一件事就是添加了更多的颜色选项。我还使用Java脚本来显示实时更改。

问题:调用设置保存的值并将新值添加到标题中的样式部分的函数不起作用:/

似乎它不会使用“get\\u theme\\u mod”提取保存的值(甚至是默认值)

有人能看看代码并给我指出正确的方向吗??

这是我的功能。php文件。

<?php

class UnReady_Customize {

   public static function register ( $wp_customize ) {
      //1. Define a new section (if desired) to the Theme Customizer
      $wp_customize->add_section( \'mytheme_options\',
         array(
            \'title\' => __( \'MyTheme Options\', \'mytheme\' ), //Visible title of section
            \'priority\' => 35, //Determines what order this appears in
            \'capability\' => \'edit_theme_options\', //Capability needed to tweak
            \'description\' => __(\'Allows you to customize some example settings for MyTheme.\', \'mytheme\'), //Descriptive tooltip
         )
      );

      //2. Register new settings to the WP database...
      $wp_customize->add_setting( \'mytheme_options[body_background]\', //Give it a SERIALIZED name (so all theme settings can live under one db record)
         array(
            \'default\' => \'#FFFFFF\', //Default setting/value to save
            \'type\' => \'option\', //Is this an \'option\' or a \'theme_mod\'?
            \'capability\' => \'edit_theme_options\', //Optional. Special permissions for accessing this setting.
            \'transport\' => \'postMessage\', //What triggers a refresh of the setting? \'refresh\' or \'postMessage\' (instant)?
         )
      );

           $wp_customize->add_setting( \'mytheme_options[site_title]\', //Give it a SERIALIZED name (so all theme settings can live under one db record)
         array(
            \'default\' => \'#000000\', //Default setting/value to save
            \'type\' => \'option\', //Is this an \'option\' or a \'theme_mod\'?
            \'capability\' => \'edit_theme_options\', //Optional. Special permissions for accessing this setting.
            \'transport\' => \'postMessage\', //What triggers a refresh of the setting? \'refresh\' or \'postMessage\' (instant)?
         )
      );

           $wp_customize->add_setting( \'mytheme_options[site_description]\', //Give it a SERIALIZED name (so all theme settings can live under one db record)
         array(
            \'default\' => \'#000000\', //Default setting/value to save
            \'type\' => \'option\', //Is this an \'option\' or a \'theme_mod\'?
            \'capability\' => \'edit_theme_options\', //Optional. Special permissions for accessing this setting.
            \'transport\' => \'postMessage\', //What triggers a refresh of the setting? \'refresh\' or \'postMessage\' (instant)?
         )
      );


          $wp_customize->add_setting( \'mytheme_options[link_textcolor]\', //Give it a SERIALIZED name (so all theme settings can live under one db record)
         array(
            \'default\' => \'#0076d1\', //Default setting/value to save
            \'type\' => \'option\', //Is this an \'option\' or a \'theme_mod\'?
            \'capability\' => \'edit_theme_options\', //Optional. Special permissions for accessing this setting.
            \'transport\' => \'postMessage\', //What triggers a refresh of the setting? \'refresh\' or \'postMessage\' (instant)?
         )
      );      

          $wp_customize->add_setting( \'mytheme_options[link_hover_textcolor]\', //Give it a SERIALIZED name (so all theme settings can live under one db record)
         array(
            \'default\' => \'#0066d1\', //Default setting/value to save
            \'type\' => \'option\', //Is this an \'option\' or a \'theme_mod\'?
            \'capability\' => \'edit_theme_options\', //Optional. Special permissions for accessing this setting.
            \'transport\' => \'postMessage\', //What triggers a refresh of the setting? \'refresh\' or \'postMessage\' (instant)?
         )
      );

      //3. Finally, we define the control itself (which links a setting to a section and renders the HTML controls)...
      $wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class
         $wp_customize, //Pass the $wp_customize object (required)
         \'mytheme_bg_color\', //Set a unique ID for the control
         array(
            \'label\' => __( \'Background Color\', \'mytheme\' ), //Admin-visible name of the control
            \'section\' => \'colors\', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
            \'settings\' => \'mytheme_options[body_background]\', //Which setting to load and manipulate (serialized is okay)
            \'priority\' => 10, //Determines the order this control appears in for the specified section
         )
      ) );

      $wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class
         $wp_customize, //Pass the $wp_customize object (required)
         \'mytheme_site_title_color\', //Set a unique ID for the control
         array(
            \'label\' => __( \'Site Title Color\', \'mytheme\' ), //Admin-visible name of the control
            \'section\' => \'colors\', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
            \'settings\' => \'mytheme_options[site_title]\', //Which setting to load and manipulate (serialized is okay)
            \'priority\' => 11, //Determines the order this control appears in for the specified section
         )
      ) );

      $wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class
         $wp_customize, //Pass the $wp_customize object (required)
         \'mytheme_site_description_color\', //Set a unique ID for the control
         array(
            \'label\' => __( \'Site Description Color\', \'mytheme\' ), //Admin-visible name of the control
            \'section\' => \'colors\', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
            \'settings\' => \'mytheme_options[site_description]\', //Which setting to load and manipulate (serialized is okay)
            \'priority\' => 12, //Determines the order this control appears in for the specified section
         )
      ) );       
      $wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class
         $wp_customize, //Pass the $wp_customize object (required)
         \'mytheme_link_textcolor\', //Set a unique ID for the control
         array(
            \'label\' => __( \'Link Color\', \'mytheme\' ), //Admin-visible name of the control
            \'section\' => \'colors\', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
            \'settings\' => \'mytheme_options[link_textcolor]\', //Which setting to load and manipulate (serialized is okay)
            \'priority\' => 13, //Determines the order this control appears in for the specified section
         )
      ) );

      $wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class
         $wp_customize, //Pass the $wp_customize object (required)
         \'mytheme_link_hover_textcolor\', //Set a unique ID for the control
         array(
            \'label\' => __( \'Link Hover Color\', \'mytheme\' ), //Admin-visible name of the control
            \'section\' => \'colors\', //ID of the section this control should render in (can be one of yours, or a WordPress default section)
            \'settings\' => \'mytheme_options[link_hover_textcolor]\', //Which setting to load and manipulate (serialized is okay)
            \'priority\' => 14, //Determines the order this control appears in for the specified section
         )
      ) );


   }

   /**
    * This will output the custom WordPress settings to the live theme\'s WP head.
    *
    * Used by hook: \'wp_head\'
    *
    * @see add_action(\'wp_head\',$func)
    * @since MyTheme 1.0
    */

   public static function header_output() {
      ?>
      <!--Customizer CSS-->
      <style type="text/css">

                         body { color:<?php echo get_theme_mod(\'mytheme_options[body_background]\'); ?>; }
             .site-title { color:<?php echo get_theme_mod(\'mytheme_options[site_title]\'); ?>; }
                         .site-description { color:<?php echo get_theme_mod(\'mytheme_options[site_description]\'); ?>; }
                         #content a { color:<?php echo get_theme_mod(\'mytheme_options[link_textcolor]\'); ?>; }
                         #content a:hover { color:<?php echo get_theme_mod(\'mytheme_options[link_hover_textcolor]\'); ?>; }
      </style>
      <!--/Customizer CSS-->
      <?php
   }

   /**
    * This outputs the javascript needed to automate the live settings preview.
    * Also keep in mind that this function isn\'t necessary unless your settings
    * are using \'transport\'=>\'postMessage\' instead of the default \'transport\'
    * => \'refresh\'
    *
    * Used by hook: \'customize_preview_init\'
    *
    * @see add_action(\'customize_preview_init\',$func)
    * @since MyTheme 1.0
    */
   public static function live_preview() {
      wp_enqueue_script(
           \'mytheme-themecustomizer\', // Give the script a unique ID
           get_template_directory_uri() . \'/js/theme-customizer.js\', // Define the path to the JS file
           array(  \'jquery\', \'customize-preview\' ), // Define dependencies
           \'\', // Define a version (optional)
           true // Specify whether to put in footer (leave this true)
      );
   }

    /**
     * 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);
      if ( ! empty( $mod ) ) {
         $return = sprintf(\'%s { %s:%s; }\',
            $selector,
            $style,
            $prefix.$mod.$postfix
         );
         if ( $echo ) {
            echo $return;
         }
      }
      return $return;
    }
}

// Setup the Theme Customizer settings and controls...
add_action( \'customize_register\' , array( \'UnReady_Customize\' , \'register\' ) );

// Enqueue live preview javascript in Theme Customizer admin screen
add_action( \'customize_preview_init\' , array( \'UnReady_Customize\' , \'live_preview\' ) );

// Output custom CSS to live site
add_action( \'wp_head\' , array( \'UnReady_Customize\' , \'header_output\' ) );
谢谢,皮普斯:)

1 个回复
SO网友:joschi81

我的回答对你来说可能有点晚,但由于我今天遇到了同样的问题,我发现如下:

1) 首先,如果你\'type\' => \'option\' 对于自定义设置,应使用get_option() 函数检索值。如果您设置\'type\' => \'theme_mod\' (或者根本不设置类型,因为它默认为theme\\u mod),可以使用get_theme_mod()

2) 然后,如果您在如下数组中设置选项my_theme_option[my_option_value], 必须执行以下操作才能输出值:

$options = get_option(\'my_theme_option\');
echo $options[\'my_option_value\'];
因此,对于CSS输出,请执行以下操作:

   public static function header_output() {
      $options = get_option($mytheme_options);
      ?>
      <!--Customizer CSS-->
      <style type="text/css">
          body { color:<?php echo $options[\'body_background\']; ?>; }
          .site-title { color:<?php echo $options[\'site_title\']; ?>; }
          .site-description { color:<?php echo $options[\'site_description\']; ?>; }
          #content a { color:<?php echo $options[\'link_textcolor\']; ?>; }
          #content a:hover { color:<?php echo $options[\'link_hover_textcolor\']; ?>; }
      </style>
      <!--/Customizer CSS-->
      <?php
   }
我希望这有帮助。

结束