1

No sistema de comentários do Facebook/Disqus, quando clicamos para responder a um comentário, ele coloca automaticamente na textarea o nome de usuário do comentário que estamos respondendo. Gostaria de saber se seria possivel fazer o mesmo com o sistema de comentários do WordPress. Ou seja, ele já permite a réplica para um usuário especifico, o que quero agora é, que quando alguém for responder um comentário, clicando no Reply o nome do autor desse comentário fosse colocado na textarea.

Exemplo

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&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/a204be15ef2ea245de82edcb9798b1c1?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/03ea78c0884c9ac0f73e6af7b9649e90?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://2.gravatar.com/avatar/553b6227a81e80dcace42b5d8486c125?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/779a50702fdc4c3b6187643e101edfea?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&#038;d=mm&#038;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&#038;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 -->

16
  • @dvd Um formulário de comentário bastante comum. Nome, Email, URL e Textarea para o comentário. Cada comentário recebi uma numeração na LI <li id="comment-64"> Commented 9/03/2018 às 22:48
  • @dvd Uma solução em JS, para que o nome do usuário sendo passado para a Textarea já será o suficiente, o wordpress fará o resto. Commented 9/03/2018 às 22:49
  • Conhece algum site que tenha isso?
    – Sam
    Commented 9/03/2018 às 22:54
  • @dvd Não. Só o Facebook. Rsrsrs Commented 9/03/2018 às 23:08
  • veja se isso resolve: jsfiddle.net/vqLtnk2c
    – Sam
    Commented 9/03/2018 às 23:32

1 Resposta 1

1

Acredito que seria isto: pegar o nome do autor do post e o link, e concatenar no código e enviar para o textarea:

var nome_autor = '<span class="nome-na-textarea">'
+'<a href="'
+$(this)
.closest("article")
.find("a.url")
.attr("href")
+'">'
+$(this).attr("aria-label").replace("Reply to ","")
+'.</a><span>';

$("#respond")
.find("textarea")
.val(nome_autor);

Veja:

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 = '<span class="nome-na-textarea">'
   +'<a href="'
   +$(this)
   .closest("article")
   .find("a.url")
   .attr("href")
   +'">'
   +$(this).attr("aria-label").replace("Reply to ","")
   +'.</a><span>';

   $("#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&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/a204be15ef2ea245de82edcb9798b1c1?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/03ea78c0884c9ac0f73e6af7b9649e90?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://2.gravatar.com/avatar/553b6227a81e80dcace42b5d8486c125?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/779a50702fdc4c3b6187643e101edfea?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&#038;d=mm&#038;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&#038;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&#038;d=mm&#038;r=g' srcset='http://0.gravatar.com/avatar/6967f6786e2387d797a02faa2b759564?s=112&#038;d=mm&#038;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&#038;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 -->

7
  • solução magnifica. Se apenas pudesse não deixar a tag span e a não ficassem visível na textarea. Commented 15/03/2018 às 20:46
  • ixi, aí não tem como, porque o textarea não renderiza HTML
    – Sam
    Commented 15/03/2018 às 20:54
  • veja isso codepen.io/johnquimera/pen/RMNgpe Commented 15/03/2018 às 21:11
  • Isso é uma div editável, e não um textarea.
    – Sam
    Commented 15/03/2018 às 21:13
  • rsrsr compreendo, nem tinha percebido. Commented 15/03/2018 às 21:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .