首页 > 解决方案 > 定制器 api (postMessage) 中的复选框无法正常工作

问题描述

我在 single.php 中显示作者信息

<?php if ( get_theme_mod( '_themename_display_author_info', true) ) :
    get_template_part( '/template-parts/single/author-info' );
endif;?>

我在定制器和 postMessage 方法中使用了一个复选框,我有必要的 js 文件包含在

function _themename_customize_preview_js () {
    wp_enqueue_script( '_themename-cutomize-preview', get_template_directory_uri() . '/dist/assets/js/customize-preview.js', array('customize-preview', 'jquery'), '1.0.0' , true );

}

add_action( 'customize_preview_init', '_themename_customize_preview_js' );

之前在定制器中检查时,它工作正常。但是,如果我取消选中它(不显示模板部分),发布然后刷新页面,即使我选中复选框,它也不会显示模板部分。如果我选中复选框,发布,然后刷新页面, postMessage 方法再次正常工作。我找不到关于我做错了什么的答案,希望你们中的一些人能给我指路。这是我的定制器设置:

$wp_customize->add_section('_themename_single_blog_options', array(
        'title' => esc_html__( 'Single Blog Options', '_themename' ),
        'description' => esc_html__( 'You can change single blog options from here.', '_themename' ),
        'active_callback' => '_themename_show_single_blog_section'
    ));

    //Author Info

    $wp_customize->add_setting('_themename_display_author_info', array(
        'default' => true,
        'transport' => 'postMessage',
        'sanitize_callback' => '_themename_sanitize_checkbox'
    ));

    $wp_customize->add_control('_themename_display_author_info', array(
        'type' => 'checkbox',
        'label' => esc_html__( 'Show Author Info', '_themename' ),
        'section' => '_themename_single_blog_options'
    ));
function _themename_sanitize_checkbox( $checked ) {
    return (isset($checked) && $checked === true) ? true : false;
}

我的customize-preview.js:

wp.customize( '_themename_display_author_info', (value) => {
    value.bind( (to) => {
        if(to) {
            $('#author-info').show();
        } else {
            $('#author-info').hide();
        }
    } )
})

我在 single.php 中调用模板部分的部分:

if( get_theme_mod( '_themename_display_author_info', true) ) :
   get_template_part( '/template-parts/single/author' );
endif;

最后是我的 /template-parts/single/author.php 文件:

<?php
/**
 * Let's get author information first
 */
$author_id = get_the_author_meta('ID');
$author_posts_number = get_the_author_posts();
$author_dispay = get_the_author();
$author_posts_url = get_author_posts_url($author_id);
$author_description = get_the_author_meta('user_description');
$author_website = get_the_author_meta('user_url');
?>

<div id="author-info">

    <h2 class="screen-reader-text">
        <?php esc_attr_e( 'About the Author', '_themename'); ?>
    </h2>

    <div id="author-avatar">
        <?php echo get_avatar( $author_id, 100 ); //100 is the size of the avatar, in this case it's 100x100px ?>
    </div><!-- # avatar -->

    <div id="author-content">
        <!-- author name and url -->
        <?php if( $author_website) : ?>
            <h3>
                <a href="<?php echo esc_url( $author_website ); ?>" target="_blank"><?php echo esc_html( $author_dispay ); ?></a>
            </h3>
        <?php else: ?>
            <h3>
                <?php echo esc_html( $author_dispay ); ?>
            </h3>
        <?php endif; ?>

        <!-- author posts in the website -->
        <a href="<?php echo esc_url($author_posts_url) ?>">
            <?php
                printf(esc_html(_n('%s post', '%s posts', $author_posts_number, '_themename')), number_format_i18n( $author_posts_number ))
            ?>
        </a>

        <!-- author description -->
        <p>
            <?php echo esc_html( $author_description ); ?>
        </p>
        
    </div><!-- # author-content -->


</div><!-- author -->

我希望我能把这个问题告诉你。谢谢阅读。

标签: wordpresswordpress-themingtheme-customizer

解决方案


推荐阅读