如何在Twenty第十七这样的定制器中添加UI按钮

时间:2017-02-13 作者:bagpipper

所以,我已经有好几天没有研究过这个问题了,但仍然没有找到在我自己的自定义主题中如何做的线索。我也看过this, 但什么都没有。我查看了2017年的定制程序,发现负责的代码是

$wp_customize->selective_refresh->add_partial( \'blogname\', array(
    \'selector\' => \'.site-title a\',
    \'render_callback\' => \'twentyseventeen_customize_partial_blogname\',
) );
在我的自定义主题中,我对我的自定义程序也感到厌倦,但它根本不起作用。

我的代码

$wp_customize->add_section( \'footer_section\', array(
    \'title\' => __( \'Footer Section\', \'healthtech\' ),
    \'panel\' => \'\',
) );
/*
* Settings for copyright text
*/
$wp_customize->add_section( \'footer_section\', array(
    \'title\' => __( \'Footer Section\', \'healthtech\' ),
    \'panel\' => \'\',
) );
/*
* Settings for copyright text
*/
$wp_customize->add_setting( \'copyright_text\', array(
    \'default\' => \'\',
) );
$wp_customize->add_control( new WP_Customize_Control(   $wp_customize,  \'copyright_text\',   array(
            \'label\'    => __( \'Copyright Text\', \'healthtech\' ),
            \'section\'  => \'footer_section\',
            \'settings\' => \'copyright_text\',
        )
    )
);
$wp_customize->selective_refresh->add_partial( \'copyright_text\', array(
    \'selector\' => \'span#copy-write\', // You can also select a css class
    \'render_callback\'     => \'check_copy_right_text\',
) );
render\\u回调函数

function check_copy_right_text(){
   echo get_theme_mod(\'copyright_text\');
 }

1 个回复
最合适的回答,由SO网友:David Lee 整理而成

您的代码很好,我认为您缺少前端部分,以下是完整的代码functions.php:

/* Customizer fields */

function your_customizer_settings($wp_customize) {
    $wp_customize->add_section(\'footer_section\', array(
        \'title\' => __(\'Footer Section\', \'healthtech\'),
        \'panel\' => \'\',
    ));
    /*
     * Settings for copyright text
     */
    $wp_customize->add_section(\'footer_section\', array(
        \'title\' => __(\'Footer Section\', \'healthtech\'),
        \'panel\' => \'\',
    ));
    /*
     * Settings for copyright text
     */
    $wp_customize->add_setting(\'copyright_text\', array(
        \'default\' => \'2342\',
        \'transport\' => \'postMessage\'
    ));
    $wp_customize->add_control(new WP_Customize_Control($wp_customize, \'copyright_text\', array(
        \'label\' => __(\'Copyright Text\', \'healthtech\'),
        \'section\' => \'footer_section\',
        \'settings\' => \'copyright_text\',
            )
            )
    );
    $wp_customize->selective_refresh->add_partial(\'copyright_text\', array(
        \'selector\' => \'span#copy-write\', // You can also select a css class
        \'render_callback\' => \'check_copy_right_text\',
    ));
}
// Customizer action
add_action(\'customize_register\', \'your_customizer_settings\');

function check_copy_right_text(){
   echo get_theme_mod(\'copyright_text\');
 }
把这个放在front-end 因为它是版权文本让我们假设footer.php:

<span id="copy-write"><?php check_copy_right_text(); ?></span>
如果转到customizer,您应该会看到Edit Shortcut Button 像这样:

enter image description here

如果没有,您将不得不添加一些CSS来更好地定位按钮,您可以将该CSS添加到style.css 或者创建一个CSS文件,仅用于更正按钮如果您有更多需要CSS的按钮,请记住使用add_action( \'customize_preview_init\', \'my_function_with_wp_enqueue_with_my_css_only_for_the_customizer\' );

我在您的设置中添加了一个额外值:

$wp_customize->add_setting(\'copyright_text\', array(
        \'default\' => \'2342\',
        \'transport\' => \'postMessage\' //this one
    ));
如果不设置transportpostMessage 整个预览将重新加载,因为它将默认为refresh, 这样,只有位置(即所谓的选择性刷新部分)才会更新。

我建议你阅读thisthis.

请不要犹豫,这是一项新功能,我正在添加Selective Refresh Partials 我所有的主题选项。

顺便说一下,对于呈现谷歌地图(或类似地图)的选项,您需要添加JavaSCript。

相关推荐