WordPress移动端评论回复与取消按钮显示异常问题求助

我修改了WordPress产品详情页的评论回复按钮与取消回复按钮显示样式，桌面端显示正常，但移动端仍呈现WordPress默认样式。目前的代码如下，能确定是和WordPress自带的/wp-includes/js/comment-reply.min.js文件冲突导致的。

现有代码 #

PHP代码 #

function customize_wp_enqueue_scripts() {
    if ( get_post_type() === 'product' && is_singular() ) {
        wp_enqueue_script( 'comment-reply-', get_stylesheet_directory_uri() . '/assets/js/comment-reply.min.js', array(), null, true );
    }
}
add_action( 'wp_enqueue_scripts', 'customize_wp_enqueue_scripts' );

JavaScript代码 #

jQuery( function( $ ) {
    var replyClicked = false;
    $( '.comment-reply-link' ).on( 'click', function() {
        var Comment_Container = $( this ).closest( '.comment_container' );
        if ( ! replyClicked ) {
            Comment_Container.find( '.comment-reply-link' ).hide();
            replyClicked = true;
        } else {
            $( '#cancel-comment-reply-link' ).parent().find( '.comment-reply-link' ).show();
            Comment_Container.find( '.comment-reply-link' ).hide();
        }
        $( '#cancel-comment-reply-link' ).insertAfter( this ).show();
    } );
    $( '#cancel-comment-reply-link' ).on( 'click', function() {
        var Comment_Container = $( this ).closest( '.comment_container' );
        Comment_Container.find( '.comment-reply-link' ).show();
        Comment_Container.find( '#cancel-comment-reply-link' ).insertAfter( this ).hide();
    } );
} );

问题原因 #

1. 自带的comment-reply脚本与自定义脚本同时运行，逻辑冲突覆盖了自定义样式
2. 自定义脚本使用全局变量replyClicked，导致多个按钮状态混乱，移动端布局下问题更明显
3. 移动端响应式布局可能改变DOM结构，导致选择器无法正确定位元素
4. 自定义CSS未覆盖移动端的默认样式

解决步骤 #

1. 禁用自带评论回复脚本，避免冲突 #

修改PHP代码，先取消注册WordPress自带的评论回复脚本，再加载自定义脚本，同时修正脚本ID的命名问题：

function customize_wp_enqueue_scripts() {
    if ( get_post_type() === 'product' && is_singular() ) {
        // 取消注册自带的评论回复脚本
        wp_deregister_script( 'comment-reply' );
        // 加载自定义脚本，ID不要带无效字符
        wp_enqueue_script( 'custom-comment-reply', get_stylesheet_directory_uri() . '/assets/js/comment-reply.min.js', array('jquery'), null, true );
    }
}
add_action( 'wp_enqueue_scripts', 'customize_wp_enqueue_scripts' );

2. 优化JavaScript逻辑，适配移动端 #

改用事件委托绑定点击事件，给每个回复按钮独立存储状态，阻止默认行为避免自带脚本干扰：

jQuery( function( $ ) {
    // 给每个回复按钮初始化独立状态
    $( '.comment-reply-link' ).each(function() {
        $(this).data('replyClicked', false);
    });

    // 用事件委托绑定，适配动态生成的元素和移动端布局
    $( document ).on( 'click', '.comment-reply-link', function( e ) {
        e.preventDefault(); // 阻止默认行为，避免自带逻辑干扰
        var $btn = $( this );
        var $container = $btn.closest( '.comment_container' );
        var isClicked = $btn.data('replyClicked');

        if ( !isClicked ) {
            $container.find( '.comment-reply-link' ).hide();
            $btn.data('replyClicked', true);
        } else {
            $( '#cancel-comment-reply-link' ).closest('.comment_container').find( '.comment-reply-link' ).show();
            $container.find( '.comment-reply-link' ).hide();
        }
        $( '#cancel-comment-reply-link' ).insertAfter( $btn ).show();
    });

    $( document ).on( 'click', '#cancel-comment-reply-link', function( e ) {
        e.preventDefault();
        var $btn = $( this );
        var $container = $btn.closest( '.comment_container' );
        
        $container.find( '.comment-reply-link' ).show();
        $btn.hide();
        // 重置当前容器内回复按钮的状态
        $container.find('.comment-reply-link').data('replyClicked', false);
    });
});

3. 补充移动端CSS样式覆盖 #

确保自定义CSS在移动端媒体查询中也覆盖默认样式：

/* 基础自定义样式 */
.comment-reply-link, #cancel-comment-reply-link {
    padding: 8px 16px;
    background-color: #2c3e50;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}

/* 移动端适配（屏幕宽度≤768px） */
@media (max-width: 768px) {
    .comment-reply-link, #cancel-comment-reply-link {
        padding: 6px 12px;
        font-size: 14px;
    }
    /* 强制覆盖WordPress默认样式 */
    .comment-reply-link:link, .comment-reply-link:visited,
    #cancel-comment-reply-link:link, #cancel-comment-reply-link:visited {
        background-color: #2c3e50 !important;
        color: #fff !important;
        border: none !important;
    }
}

内容的提问来源于stack exchange，提问作者widkoinflm