定制器图像控件默认值显示在定制器中,但不在前端

时间:2016-11-22 作者:maheshwaghmare

我使用WP_Customize_Image_Control 添加图像。

但是default 值可在中访问Customizer 只有前端It返回empty.

如何复制

复制下面的代码片段并粘贴到主题中functions.php.

访问URLhttp://YOUR_SITE/wp-admin/customize.php?autofocus[section]=section-test_option 打开节的步骤Test Section

add_action( \'customize_register\', \'test_1234_customize_register\' );
add_action( \'wp_head\', \'test_1234_customizer_ouput_debug\' );

function test_1234_customizer_ouput_debug() {

    // $options = get_theme_mod( \'this-is-the-test-option\' );
    $options = get_option( \'this-is-the-test-option\' );
    echo \'<pre style="background: #fff;">Default Image URL: \';
    print_r( $options );
    echo \'</pre>\';
}

function test_1234_customize_register( $wp_customize ) {

    /**
     * Test Section
     */
    $wp_customize->add_section( \'section-test_option\', array(
        \'title\' => __( \'Test Option\', \'next\' ),
    ) );

    /**
     * Test Option - 1
     */
    $wp_customize->add_setting( \'this-is-the-test-option\', array(
        \'default\' => \'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png\',
        \'type\'    => \'option\',  // Comment this parameter to use \'get_theme_mod\'
    ) );
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, \'this-is-the-test-option\', array(
        \'section\'        => \'section-test_option\',
        \'label\'          => __( \'Test\', \'next\' ),
        \'settings\'       => \'this-is-the-test-option\',
        \'library_filter\' => array( \'gif\', \'jpg\', \'jpeg\', \'png\', \'ico\' ),
    ) ) );
}
在Customizer窗口预览中输出

http://bsf.io/net4f

<前端的ol start=“2”>
  • (也在匿名窗口中签入)
    1. http://bsf.io/u59cm


      根据上述示例,我可以使用:get_option( \'this-is-the-test-option\', \'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png\' ) 获取默认图像。

      但是,如果我将选项存储在数组中,它将失败。E、 g。

      $wp_customize->add_setting( \'this-is-the-test-option[option1]\', array(
      ...
      
      $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, \'this-is-the-test-option[option1]\', array(
      ...
      
      在上述情况下,最好的解决方案是合并默认值。我在年找到了westonruter建议的解决方案gist.

      但是,问题是:

      为什么可以在中访问默认值Customizer Preview window? (根据上述代码片段。)

    2. default 控件的参数WP_Customize_Image_Control 是否有用

    3 个回复
    SO网友:Felipe Rodrigues

    在图像上设置的默认值add_setting 仅当图像控件上有一个名为“重置为默认值”的任意选项时,才会应用该选项。此参数不会向页面输出任何默认值。

    函数的第二个参数get_option( \'option_name\', $default ). 这个$default 参数will not submit anything to the DB. 它仅在选项不存在时返回。e、 g:当用户安装主题时,徽标(或在页面上显示任何内容的选项)不得为空。但如果他保存该选项,该选项将存在于db上,即使为空。那么该默认值将不再适用。它像占位符一样工作。

    如果需要默认值,即使保存选项并返回空字符串,也可以执行以下操作:

    $option = get_option( \'option_name\', $default )
    echo ( empty( $option ) ? \'default\' : $option );
    
    函数的作用是:检查返回的值是空字符串还是表示空的任何内容(布尔值、整数、null等)。您可以在此处阅读更多内容:http://php.net/manual/pt_BR/function.empty.php

    这样,如果该选项存在,将始终应用默认值。

    注意:这是一种最佳实践\'type\' => \'theme_mod\' 为主题创建mod时,不\'type\' => \'option\'. 如果省略此参数,默认值将为theme\\u mod。

    SO网友:maheshwaghmare

    感谢@Felipe的解释@westonruter在gist.

    解决方案:创建defaults 阵列并在Customizer中使用它;在前端上。

    Step-1: 注册主题默认值数组。

    if ( ! function_exists( \'my_theme_defaults\' ) ) {
    
        function my_theme_defaults() {
    
            return array(
                        \'option-1\' => 1,
                        \'option-2\' => \'author\',
                        \'option-3\' => \'#3a3a3a\',
                        \'option-4\' => \'ALL RIGHT RESERVED\'
                        \'option-5\' => get_template_directory_uri() . \'/assets/images/logo-black.png\'
                    );
        }
    }
    
    <小时/>Setp-2: 在Customizer中访问(&A);前端。

    在Customizer中访问

    //  Get theme default values
    $theme_defaults = my_theme_defaults();
    
    ...
    $wp_customize->add_setting( \'my-theme-options[option-1]\', array(
        \'default\' => $theme_defaults[\'option-1\'],
        ...
    ) );
    ...
    $wp_customize->add_setting( \'my-theme-options[option-2]\', array(
        \'default\' => $theme_defaults[\'option-2\'],
        ...
    ) );
    ...
    
    前端通道
    //  Get theme stored values
    // Note: I use the `\'type\' => \'option\',` for all the options. So, Getting stored values of option \'my-theme-options\' using `get_option()`. You can use `get_theme_mod()` if you use it for `add_settings()`.
    $theme_stored   = get_option( \'my-theme-options\' );
    
    //  Get theme default values
    $theme_defaults = my_theme_defaults();
    
    //  Merge both
    $theme_options = wp_parse_args( $theme_stored, $theme_defaults );
    
    //  Access option value    
    //  e.g.
    echo $theme_options[\'option-1\'];
    echo $theme_options[\'option-2\'];
    echo $theme_options[\'option-3\'];
    
    <小时/>

    NOTE: Don\'t forget to use filters where ever possible to extend in future. Also, Add text translations.

    SO网友:Jilani A

    非常简单的解决方案,请尝试。希望它能帮助你。

    只需在前端使用此代码即可。

    From your own directory-

    <img src="<?php echo esc_url(get_theme_mod(\'this-is-the-test-option\',\'\'.get_template_directory_uri().\'/images/logo.png\')); ?>" alt="Google"/>
    

    From online link-

    <img src="<?php echo esc_url(get_theme_mod(\'this-is-the-test-option\',\'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png\')); ?>" alt="Google"/>
    

    相关推荐

    Images with overlay

    我有一些图片在一个容器中,我想添加一个覆盖和图标。这不是现成的,但我找到了一些有用的代码:HTML:<div class=\"main\"> <span class=\"featured\"><img src=\"http://joshrodg.com/IMG_001-258x258.jpg\" title=\"\" alt=\"\"></span> </div> CSS:.featured {