在WordPress中,定制器div仍然显示,即使我用javascript隐藏了它

时间:2021-08-04 作者:sabbir ahmed

我在我的单曲中加入了一个div。php基于自定义程序中的设置。正如预期的那样,它在前端工作得很好。但在自定义程序中,即使之前未选中该设置,div仍会显示。但问题只是第一次出现。如果选中该复选框并再次取消选中,div将按预期隐藏。first time I load the customizer, the  is shown, even if it\'s previously unchecked

现在,在我选中复选框两次后显示另一个屏幕截图:the div hides after I check the checkbox twice

我希望问题现在已经清楚了。以下是相关代码:

我正在单曲中显示作者信息。php与

<?php if ( isset($GLOBALS[\'wp_customize\']) || get_theme_mod( \'_themename_display_author_info\', true) ) :
    get_template_part( \'/template-parts/single/post-navigation\' );
endif;?>
我有必要的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\' );
my/lib/customizer。php文件:

$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;
}
我的自定义预览。js公司:

wp.customize( \'_themename_display_author_info\', (value) => {
    value.bind( (to) => {
        if(to) {
            $(\'#author-info\').show();
        } else {
            $(\'#author-info\').hide();
        }
    } )
})
最后是my/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; ?>

1 个回复
SO网友:sabbir ahmed

如果将来有人会遇到这样的问题:多亏了@SallyCJ,我才能够通过向customize\\u preview\\u init hook添加css样式来解决这个问题。以下是代码:

add_action( \'customize_preview_init\', function() {

    wp_enqueue_script( \'cutomizer-preview\', get_template_directory_uri() . \'/dist/assets/js/customize-preview.js\', array(\'customize-preview\', \'jquery\'), time() , true );

    if ( !get_theme_mod( \'_themename_display_author_info\', true ) ) :
        add_action( \'wp_head\', function() {
            echo \'<style>#author-info{display:none;}</style>\';
        }  );
    endif;

} );

相关推荐