1
On the Facebook/Disqus feedback system, when we click to reply to a comment, it automatically puts it on textarea the username of the comment we are responding to. I wonder if it would be possible to do the same with the Wordpress comments system. That is, it already allows the replica for a specific user, what I want now is, when someone is going to answer a comment by clicking on Reply the name of the author of that comment was placed on textarea.
Example
var addComment={moveForm:function(a,b,c,d){var e,f,g,h,i=this,j=i.I(a),k=i.I(c),l=i.I("cancel-comment-reply-link"),m=i.I("comment_parent"),n=i.I("comment_post_ID"),o=k.getElementsByTagName("form")[0];if(j&&k&&l&&m&&o){i.respondId=c,d=d||!1,i.I("wp-temp-form-div")||(e=document.createElement("div"),e.id="wp-temp-form-div",e.style.display="none",k.parentNode.insertBefore(e,k)),j.parentNode.insertBefore(k,j.nextSibling),n&&d&&(n.value=d),m.value=b,l.style.display="",l.onclick=function(){var a=addComment,b=a.I("wp-temp-form-div"),c=a.I(a.respondId);if(b&&c)return a.I("comment_parent").value="0",b.parentNode.insertBefore(c,b),b.parentNode.removeChild(b),this.style.display="none",this.onclick=null,!1};try{for(var p=0;p<o.elements.length;p++)if(f=o.elements[p],h=!1,"getComputedStyle"in window?g=window.getComputedStyle(f):document.documentElement.currentStyle&&(g=f.currentStyle),(f.offsetWidth<=0&&f.offsetHeight<=0||"hidden"===g.visibility)&&(h=!0),"hidden"!==f.type&&!f.disabled&&!h){f.focus();break}}catch(q){}return!1}},I:function(a){return document.getElementById(a)}};
$("a.comment-reply-link").click(function(){
var nome_autor = $(this).attr("aria-label").replace("Reply to ","");
$("#respond").find("textarea").val(nome_autor);
});/**
* 12.3 Comments
*/
.comments-area {
background-color: #fff;
border-top: 1px solid #eaeaea;
border-top: 1px solid rgba(51, 51, 51, 0.1);
padding: 1.6923%;
}
.comments-area > :last-child {
margin-bottom: 0;
}
.comment-list + .comment-respond {
border-top: 1px solid #eaeaea;
border-top: 1px solid rgba(51, 51, 51, 0.1);
}
.comment-list + .comment-respond,
.comment-navigation + .comment-respond {
padding-top: 1.6em;
}
.comments-title,
.comment-reply-title {
font-family: "Noto Serif", serif;
font-size: 18px;
font-size: 1.8rem;
line-height: 1.3333;
}
.comments-title {
}
.comment-list {
list-style: none;
margin: 0;
}
.comment-list article,
.comment-list .pingback,
.comment-list .trackback {
border-top: 1px solid #eaeaea;
border-top: 1px solid rgba(51, 51, 51, 0.1);
padding: 1.6em 0;
}
.comment-list .children {
list-style: none;
margin: 0;
}
.comment-list .children > li {
padding-left: 0.8em;
}
.comment-author {
color: #707070;
color: rgba(51, 51, 51, 0.7);
margin-bottom: 0.4em;
}
.comment-author a:hover {
border-bottom: 1px solid #707070;
border-bottom: 1px solid rgba(51, 51, 51, 0.7);
}
.comment-author .avatar {
float: left;
height: 24px;
margin-right: 0.8em;
width: 24px;
}
.bypostauthor > article .fn:after {
content: "\f304";
position: relative;
top: 5px;
left: 3px;
}
.comment-metadata,
.pingback .edit-link {
color: #707070;
color: rgba(51, 51, 51, 0.7);
font-family: "Noto Sans", sans-serif;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.5;
}
.comment-metadata a,
.pingback .edit-link a {
color: #707070;
color: rgba(51, 51, 51, 0.7);
}
.comment-metadata a:hover,
.pingback .edit-link a:hover {
border-bottom: 1px solid #333;
}
.comment-metadata a:hover,
.comment-metadata a:focus,
.pingback .edit-link a:hover,
.pingback .edit-link a:focus {
color: #333;
}
.comment-metadata {
margin-bottom: 1.6em;
}
.comment-metadata .edit-link {
margin-left: 1em;
}
.pingback .edit-link {
margin-left: 1em;
}
.pingback .edit-link:before {
top: 5px;
}
.comment-content ul,
.comment-content ol {
margin: 0 0 1.6em 1.3333em;
}
.comment-content li > ul,
.comment-content li > ol {
margin-bottom: 0;
}
.comment-content > :last-child {
margin-bottom: 0;
}
.comment-list .reply {
font-size: 12px;
font-size: 1.2rem;
}
.comment-list .reply a {
border: 1px solid #eaeaea;
border: 1px solid rgba(51, 51, 51, 0.1);
color: #707070;
color: rgba(51, 51, 51, 0.7);
display: inline-block;
font-family: "Noto Sans", sans-serif;
font-weight: 700;
line-height: 1;
margin-top: 2em;
padding: 0.4167em 0.8333em;
text-transform: uppercase;
}
.comment-list .reply a:hover,
.comment-list .reply a:focus {
border-color: #333;
color: #333;
outline: 0;
}
.comment-form {
padding-top: 1.6em;
}
.comment-form label {
color: #707070;
color: rgba(51, 51, 51, 0.7);
font-family: "Noto Sans", sans-serif;
font-size: 12px;
font-size: 1.2rem;
font-weight: 700;
display: block;
letter-spacing: 0.04em;
line-height: 1.5;
text-transform: uppercase;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form input[type="submit"] {
width: 100%;
}
.comment-notes,
.comment-awaiting-moderation,
.logged-in-as,
.form-allowed-tags {
color: #707070;
color: rgba(51, 51, 51, 0.7);
font-family: "Noto Sans", sans-serif;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.5;
margin-bottom: 2em;
}
.logged-in-as a:hover {
border-bottom: 1px solid #333;
}
.no-comments {
border-top: 1px solid #eaeaea;
border-top: 1px solid rgba(51, 51, 51, 0.1);
color: #707070;
color: rgba(51, 51, 51, 0.7);
font-family: "Noto Sans", sans-serif;
font-weight: 700;
padding-top: 1.6em;
}
.comment-navigation + .no-comments {
border-top: 0;
}
.form-allowed-tags code {
font-family: Inconsolata, monospace;
}
.form-submit {
margin-bottom: 0;
}
.required {
color: #c0392b;
}
.comment-reply-title small {
font-size: 100%;
}
.comment-reply-title small a {
border: 0;
height: 32px;
overflow: hidden;
width: 26px;
}
.comment-reply-title small a:before {
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="comments" class="comments-area">
<ol class="comment-list">
<li id="comment-56" class="comment even thread-even depth-1 parent">
<article id="div-comment-56" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt='' src='http://1.gravatar.com/avatar/a204be15ef2ea245de82edcb9798b1c1?s=56&d=mm&r=g' srcset='http://1.gravatar.com/avatar/a204be15ef2ea245de82edcb9798b1c1?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' /> <b class="fn"><a href='https://wordpress.org/' rel='external nofollow' class='url'>Donald Allbright</a></b> <span class="says">says:</span> </div><!-- .comment-author -->
<div class="comment-metadata">
<a href="http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/#comment-56">
<time datetime="2017-10-13T19:38:42+00:00">
October 13, 2017 at 7:38 pm </time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="http://localhost/wp/wp-admin/comment.php?action=editcomment&c=56">Edit</a></span> </div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Hi, this is a comment.<br />
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.</p>
</div><!-- .comment-content -->
<div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/?replytocom=56#respond' onclick='return addComment.moveForm( "div-comment-56", "56", "respond", "1001" )' aria-label='Reply to Donald Allbright'>Reply</a></div> </article><!-- .comment-body -->
<ol class="children">
<li id="comment-63" class="comment byuser comment-author-admin bypostauthor odd alt depth-2 parent">
<article id="div-comment-63" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt='' src='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=56&d=mm&r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' /> <b class="fn"><a href='http://www.bing.com' rel='external nofollow' class='url'>John Doe</a></b> <span class="says">says:</span> </div><!-- .comment-author -->
<div class="comment-metadata">
<a href="http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/#comment-63">
<time datetime="2018-03-06T20:20:27+00:00">
March 6, 2018 at 8:20 pm </time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="http://localhost/wp/wp-admin/comment.php?action=editcomment&c=63">Edit</a></span> </div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Pellentesque convallis enim at massa mattis accumsan. Suspendisse non venenatis ligula, id molestie dolor.</p>
</div><!-- .comment-content -->
<div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/?replytocom=63#respond' onclick='return addComment.moveForm( "div-comment-63", "63", "respond", "1001" )' aria-label='Reply to John Doe'>Reply</a></div> </article><!-- .comment-body -->
<ol class="children">
<li id="comment-67" class="comment even depth-3 parent">
<article id="div-comment-67" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt='' src='http://0.gravatar.com/avatar/03ea78c0884c9ac0f73e6af7b9649e90?s=56&d=mm&r=g' srcset='http://0.gravatar.com/avatar/03ea78c0884c9ac0f73e6af7b9649e90?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' /> <b class="fn"><a href='http://www.google.com' rel='external nofollow' class='url'>Michael</a></b> <span class="says">says:</span> </div><!-- .comment-author -->
<div class="comment-metadata">
<a href="http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/#comment-67">
<time datetime="2018-03-09T14:29:48+00:00">
March 9, 2018 at 2:29 pm </time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="http://localhost/wp/wp-admin/comment.php?action=editcomment&c=67">Edit</a></span> </div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Integer at mauris vel tortor maximus lacinia rutrum sit amet tellus. Ut sit amet orci egestas, molestie sem eget, luctus nulla.</p>
</div><!-- .comment-content -->
<div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/?replytocom=67#respond' onclick='return addComment.moveForm( "div-comment-67", "67", "respond", "1001" )' aria-label='Reply to Michael'>Reply</a></div> </article><!-- .comment-body -->
<ol class="children">
<li id="comment-68" class="comment odd alt depth-4 parent">
<article id="div-comment-68" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt='' src='http://2.gravatar.com/avatar/553b6227a81e80dcace42b5d8486c125?s=56&d=mm&r=g' srcset='http://2.gravatar.com/avatar/553b6227a81e80dcace42b5d8486c125?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' /> <b class="fn">Katia</b> <span class="says">says:</span> </div><!-- .comment-author -->
<div class="comment-metadata">
<a href="http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/#comment-68">
<time datetime="2018-03-09T14:30:20+00:00">
March 9, 2018 at 2:30 pm </time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="http://localhost/wp/wp-admin/comment.php?action=editcomment&c=68">Edit</a></span> </div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Aliquam rutrum nibh quis magna accumsan lobortis.</p>
</div><!-- .comment-content -->
<div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/?replytocom=68#respond' onclick='return addComment.moveForm( "div-comment-68", "68", "respond", "1001" )' aria-label='Reply to Katia'>Reply</a></div> </article><!-- .comment-body -->
<ol class="children">
<li id="comment-69" class="comment even depth-5">
<article id="div-comment-69" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt='' src='http://1.gravatar.com/avatar/779a50702fdc4c3b6187643e101edfea?s=56&d=mm&r=g' srcset='http://1.gravatar.com/avatar/779a50702fdc4c3b6187643e101edfea?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' /> <b class="fn"><a href='http://www.exemple.com' rel='external nofollow' class='url'>Nietzsche</a></b> <span class="says">says:</span> </div><!-- .comment-author -->
<div class="comment-metadata">
<a href="http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/#comment-69">
<time datetime="2018-03-09T14:30:48+00:00">
March 9, 2018 at 2:30 pm </time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="http://localhost/wp/wp-admin/comment.php?action=editcomment&c=69">Edit</a></span> </div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Praesent imperdiet eros at volutpat ullamcorper.</p>
</div><!-- .comment-content -->
</article><!-- .comment-body -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li id="comment-66" class="comment byuser comment-author-admin bypostauthor odd alt depth-2">
<article id="div-comment-66" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt='' src='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=56&d=mm&r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' /> <b class="fn">Schopenhauer</b> <span class="says">says:</span> </div><!-- .comment-author -->
<div class="comment-metadata">
<a href="http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/#comment-66">
<time datetime="2018-03-06T20:21:05+00:00">
March 6, 2018 at 8:21 pm </time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="http://localhost/wp/wp-admin/comment.php?action=editcomment&c=66">Edit</a></span> </div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>In sed suscipit justo, sed efficitur nibh. Donec imperdiet cursus sem, et convallis justo. Ut ornare rhoncus leo, ut sodales augue elementum nec.</p>
</div><!-- .comment-content -->
<div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/?replytocom=66#respond' onclick='return addComment.moveForm( "div-comment-66", "66", "respond", "1001" )' aria-label='Reply to Schopenhauer'>Reply</a></div> </article><!-- .comment-body -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li id="comment-64" class="comment byuser comment-author-admin bypostauthor even thread-odd thread-alt depth-1">
<article id="div-comment-64" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt='' src='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=56&d=mm&r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' /> <b class="fn"><a href='http://www.wikipedia.org' rel='external nofollow' class='url'>Gogol</a></b> <span class="says">says:</span> </div><!-- .comment-author -->
<div class="comment-metadata">
<a href="http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/#comment-64">
<time datetime="2018-03-06T20:20:39+00:00">
March 6, 2018 at 8:20 pm </time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="http://localhost/wp/wp-admin/comment.php?action=editcomment&c=64">Edit</a></span> </div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Maecenas fermentum enim a eros efficitur, id rutrum magna consequat.</p>
</div><!-- .comment-content -->
<div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/?replytocom=64#respond' onclick='return addComment.moveForm( "div-comment-64", "64", "respond", "1001" )' aria-label='Reply to Gogol'>Reply</a></div> </article><!-- .comment-body -->
</li><!-- #comment-## -->
<li id="comment-65" class="comment byuser comment-author-admin bypostauthor odd alt thread-even depth-1">
<article id="div-comment-65" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt='' src='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=56&d=mm&r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' /> <b class="fn"><a href='http://www.wikipedia.org' rel='external nofollow' class='url'>Karamazov</a></b> <span class="says">says:</span> </div><!-- .comment-author -->
<div class="comment-metadata">
<a href="http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/#comment-65">
<time datetime="2018-03-06T20:20:51+00:00">
March 6, 2018 at 8:20 pm </time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="http://localhost/wp/wp-admin/comment.php?action=editcomment&c=65">Edit</a></span> </div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Proin non mattis purus. Proin id orci ut nibh faucibus sagittis ac varius nulla.</p>
</div><!-- .comment-content -->
<div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://localhost/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/?replytocom=65#respond' onclick='return addComment.moveForm( "div-comment-65", "65", "respond", "1001" )' aria-label='Reply to Karamazov'>Reply</a></div> </article><!-- .comment-body -->
</li><!-- #comment-## -->
</ol><!-- .comment-list -->
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/wp/2017/10/13/spieth-in-danger-of-missing-cut-2/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="http://localhost/wp/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate>
<p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='1001' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment_disabled" value="72edf53d48" /><script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script>
</form>
</div><!-- #respond -->
</div><!-- .comments-area -->
@dvd A very common comment form. Name, Email, URL and Textarea for the comment. Each comment received a numbering in LI
<li id="comment-64">– John Quimera
@dvd A solution in JS, so that the user name being passed to the Textarea will already be enough, wordpress will do the rest.
– John Quimera
Know any site that has this?
– Sam
@dvd No. Only Facebook. Rsrs
– John Quimera
see if this resolves: https://jsfiddle.net/vqLtnk2c/
– Sam
@dvd Did not work, I put a full example of the comment system in the question.
– John Quimera
It worked. I added the code to your question. Run the snippet for you to see.
– Sam
It’s just here, or all the buttons appear
admin?– Hebert Lima
@Hebertdelima was also happening here, I made a modification in the example by adding different names to see. There’s also another thing that’s the question of the links that are in the names, I want to see if it works.
– John Quimera
@dvd worked even, I made a change in the example, put other names and with links. I wanted to see if it would be possible to pass the names to the textarea with the links, if they have... and also with a tag. span or any other.
<span class="nome-na-textarea"><a href="#link-do-usuario-respondido">João Ninguém.</a><span>– John Quimera
@dvd Wordpress comments support tags. If I type
<span class="nome-na-textarea"><a href="#link-do-usuario-respondido">João Ninguém.</a><span>will work as waiting when the comment is posted.– John Quimera
That "name-na-textarea" would be?
– Sam
@dvd anything, it’s just a class for control, something to stylize and highlight the user name, etc.
– John Quimera
Let’s settle this? rs
– Sam
@Opa dvd, yes, let’s go. rsrs.
– John Quimera
@dvd let’s do it.
– John Quimera