wp_customize-自定义设置不保存

• Z时代
• 2024-01-10
• 分类：问答

我刚开始使用WordPress，并试图添加一些控件到我的后端来自定义我的网站。我添加的第一个控件 - 图像选择器 - 工作得很好，但第二个setting-background-size-不保存该值，因此在刷新页面后，图像会从style.css文件返回到默认值。所有设置都会正确应用，直到我刷新。wp_customize-自定义设置不保存

这里是我到目前为止的代码同时与背景图像和背景大小：

的style.css：

section#banner { 
background-image: url(images/banner.jpg); 
background-size: auto; 
background-repeat: no-repeat; 
background-position: left top; 
} 

的functions.php：

/** 
* Customizer Options for #banner 
* Theme Options Customizer Implementation. 
* 
* @param WP_Customize_Manager $wp_customize Object that holds the customizer data. 
*/ 
function pf_banner_customizer($wp_customize){ 
/* 
* Failsafe is safe 
*/ 
if (! isset($wp_customize)) { 
    return; 
} 
/** 
* Add '#banner' Section. 
*/ 
$wp_customize->add_section(
    // $id 
    'pf_section_banner', 
    // $args 
    array(
     'title'   => __('#banner', 'theme-slug'), 
     'active_callback' => 'is_front_page', 
     'priority' => 1, 
    ) 
); 
/** 
* Add 'Backgrounds Background Image' Setting. 
*/ 
$wp_customize->add_setting(
    // $id 
    'pf_banner_background_image', 
    // $args 
    array(
     'default'  => get_stylesheet_directory_uri() . '/images/welcome-background.jpg', 
     'sanitize_callback' => 'esc_url_raw', 
     'transport'  => 'postMessage' 
    ) 
); 
/** 
* Add 'Backgrounds Background Image' image upload Control. 
*/ 
$wp_customize->add_control(
    new WP_Customize_Image_Control(
     // $wp_customize object 
     $wp_customize, 
     // $id 
     'pf_banner_background_image', 
     // $args 
     array(
      'settings'  => 'pf_banner_background_image', 
      'section'  => 'pf_section_banner', 
      'label'   => __('Backgrounds Background Image', 'theme-slug'), 
     ) 
    ) 
); 
$wp_customize->add_setting(
    // $id 
    'pf_banner_scaling', 
    // $args 
    array(
     'default'  => 'Auto', 
     'sanitize_callback' => 'esc_url_raw', 
     'transport'  => 'postMessage' 
    ) 
); 
$wp_customize->add_control(
    new WP_Customize_Control(
      // $wp_customize object 
      $wp_customize, 
      // $id 
      'pf_banner_scaling', 
      // $args 
      array(
       'label'    => __('Banner Scaling Options', 'theme-slug'), 
       'description' => __('Options for Scaling the background image'), 
       'settings'  => 'pf_banner_scaling', 
       'priority'  => 10, 
       'section'   => 'pf_section_banner', 
       'type'    => 'select', 
       'choices'   => array(
        'auto'  => 'Auto', 
        'cover'  => 'Cover', 
        'contain' => 'Contain', 
        'custom' => 'Custom', 
       ) 
      ) 
    ) 
); 
} 
// Settings API options initilization and validation. 
add_action('customize_register', 'pf_banner_customizer'); 
/** 
* Writes the Backgrounds background image out to the 'head' element of the document 
* by reading the value from the theme mod value in the options table. 
*/ 
function pf_change_background_img() { 
?> 
<style type="text/css"> 
    <?php 
     if (get_theme_mod('pf_banner_background_image')) { 
      $banner_background_image_url = get_theme_mod('pf_banner_background_image'); 
     } else { 
      $banner_background_image_url = get_stylesheet_directory_uri() . '/images/welcome-background.jpg'; 
     } 
     section#banner { 
      background-image: url(<?php echo $banner_background_image_url; ?>); 
     } 
    <?php // } // end if ?> 
</style> 
<?php 
} // end pf_customizer_css 
add_action('wp_head', 'pf_change_background_img'); 
function pf_change_background_size() { 
?> 
<style type="text/css"> 
<?php 
    $bg_size = get_theme_mod('pf_banner_scaling'); 
     ?> 
     section#banner { 
      background-size: <?php echo $bg_size; ?>; 
      background-color: '#00ffff' 
     } 
     ?> 
</style>; 
<?php 
} 
add_action('wp_head', 'pf_change_background_size'); 
/** 
* Registers the Theme Customizer Preview with WordPress. 
* 
* @package sk 
* @since  0.3.0 
* @version 0.3.0 
*/ 
function pf_customizer_live_preview() { 
wp_enqueue_script(
    'pf-theme-customizer', 
    get_stylesheet_directory_uri() . '/js/theme-customizer.js', 
    array('customize-preview'), 
    '0.1.0', 
    true 
); 
} // end pf_customizer_live_preview 
add_action('customize_preview_init', 'pf_customizer_live_preview'); 

JS /主题 - customizer.js：

(function($) { 
    "use strict"; 
    // Image Control for section#banner 
    wp.customize('pf_banner_background_image', function(value) { 
     value.bind(function(to) { 
      $('#banner').css('background-image', 'url(' + to + ')'); 
     }); 
    }); 
})(jQuery); 
(function($) { 
    "use strict"; 
    // Image Scaling Option for section#banner 
    wp.customize('pf_banner_scaling', function(value) { 
     value.bind(function(to) { 
      $('#banner').css('background-size', to); 
     }); 
    }); 
})(jQuery); 

对不起，代码的墙。

下面是一个相关的问题：

我刷新后，下拉控件是空的。我希望它显示当前值或默认值，都是'自动'。

任何指针非常感谢！

回答：

以上是 wp_customize-自定义设置不保存 的全部内容， 来源链接： utcz.com/qa/265085.html