使用javascript将"title_reply“重写为"title_reply_to”

Question

我使用标准的“comment -REPLAY.js”将评论形式移动到回复评论下面。它在我的自定义主题中工作正常。我只需要做一件事:将"title_reply“重写为"title_reply_to”。

我默认的"title_reply“是"Ask your question”。当用户单击“回复按钮”时，我需要将“向您提问”重写为“您对%s的回复”。

我试着把

$("#reply-title").text("Your reply to %s")

在“comment-REPLAY.js”中，但没有运气。

编辑:这是Wordpress生成的代码：

<h3 id="reply-title" class="comment-reply-title">Ask yout question: <small><a rel="nofollow" id="cancel-comment-reply-link" href="/lekarna_u_hygie/poradny/%e2%80%a2-on-line-poradna/#respond" style="">Cancel reply</a></small></h3>

注意“询问你的问题”部分，我想重写为“你对%s的回复”。

下面是Wordpress附带的标准"comment-reply.js“：

addComment = {
    moveForm : function(commId, parentId, respondId, postId) {
        var t = this, div, comm = t.I(commId), respond = t.I(respondId), cancel = t.I('cancel-comment-reply-link'), parent = t.I('comment_parent'), post = t.I('comment_post_ID');

        if ( ! comm || ! respond || ! cancel || ! parent )
            return;

        t.respondId = respondId;
        postId = postId || false;

        if ( ! t.I('wp-temp-form-div') ) {
            div = document.createElement('div');
            div.id = 'wp-temp-form-div';
            div.style.display = 'none';
            respond.parentNode.insertBefore(div, respond);
        }

        comm.parentNode.insertBefore(respond, comm.nextSibling);
        if ( post && postId )
            post.value = postId;
        parent.value = parentId;
        cancel.style.display = '';

        cancel.onclick = function() {
            var t = addComment, temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId);

            if ( ! temp || ! respond )
                return;

            t.I('comment_parent').value = '0';
            temp.parentNode.insertBefore(respond, temp);
            temp.parentNode.removeChild(temp);
            this.style.display = 'none';
            this.onclick = null;
            return false;
        }

        try { t.I('comment').focus(); }
        catch(e) {}

        return false;
    },

    I : function(e) {
        return document.getElementById(e);
    }
}

Answer 1

我想我已经通过向原始JavaScript文件添加两行代码解决了这个问题。

下面是js文件现在的样子：

var addComment = {
    moveForm : function(commId, parentId, respondId, postId) {
        var t = this, div, comm = t.I(commId), respond = t.I(respondId), cancel = t.I('cancel-comment-reply-link'), parent = t.I('comment_parent'), post = t.I('comment_post_ID');

        if ( ! comm || ! respond || ! cancel || ! parent )
            return;

        t.respondId = respondId;
        postId = postId || false;

        if ( ! t.I('wp-temp-form-div') ) {
            div = document.createElement('div');
            div.id = 'wp-temp-form-div';
            div.style.display = 'none';
            respond.parentNode.insertBefore(div, respond);
        }

        comm.parentNode.insertBefore(respond, comm.nextSibling);
        if ( post && postId )
            post.value = postId;
        parent.value = parentId;
        cancel.style.display = '';
        // Added.
        jQuery('#reply-title').contents()[0].textContent = "Respond";

        cancel.onclick = function() {
            var t = addComment, temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId);

            if ( ! temp || ! respond )
                return;

            t.I('comment_parent').value = '0';
            temp.parentNode.insertBefore(respond, temp);
            temp.parentNode.removeChild(temp);
            this.style.display = 'none';
            this.onclick = null;
            // Added
            jQuery('#reply-title').contents()[0].textContent = "Leave a Reply";
            return false;
        };

        try { t.I('comment').focus(); }
        catch(e) {}

        return false;
    },

    I : function(e) {
        return document.getElementById(e);
    }
};

当您单击回复链接时，标题将更改为“回复”；当您取消回复时，标题将更改回“留下回复”。

希望它能有所帮助;)

Answer 2

我认为有一个更好的解决方案，不需要改变Wordpress的核心文件。首先将注释表单默认标题更改为：

$default['title_reply'] = __( '<span class="title-text">Leave a comment</span>' );

并回复取消链接到：

$default['cancel_reply_link'] = __( '<span class="close-comment">Cancel reply</span>' );

添加一些jQuery：

$('.comment-reply-link').on('click', function(){
    $('.comment-reply-title .title-text').html('Reply to comment')
})
$('.close-comment').on('click', function(){
    $('.comment-reply-title .title-text').html('Leave a comment')
})

测试一下，给自己来个击掌！

Answer 3

我在WP 5.2.2上尝试过@Wally code，它需要一些修复。以下是在我的案例中起作用的方法：

$('.comment-reply-link').on('click', function () {
        // get old title
        let old_text = $('#reply-title').html();
        // split by title and 'cancel reply' link
        let splited = old_text.split(/<small>(.*?)<\/small>/);
        // add the new title in span (for styling purposes)
        let replyTo = `<span class="replay-to-text">${$(this).attr('aria-label')}</span>`;
        let newText = old_text.replace(splited[0], replyTo);
        $('#reply-title').html(newText);
        // add this line if the 'cansel reply' link is hidden
        $('#cancel-comment-reply-link').show();
    })

重放文本保存在名为aria-label的“回复”链接的属性中。所以我基本上只是替换了原始评论标题中的标题部分。我还使用了这个正则表达式，因为“取消重放”文本与标题在同一个html元素中，所以我必须保留它，因为替换也会删除它。

我不会说这是正确的方式。在documentation中，它清楚地表明有title_reply_to属性应该处理这个问题，但它在我的例子中不起作用(我猜是主题问题)。因此，把上面的代码看作是一个老生常谈的把戏，然后是标准的工作方式。