The method of realizing nested reply effect by non plug-in in WordPress

Time:2020-2-11

Blog bar reprints the wordpress blog’s nested reply tutorial of album 0.

Working principle of built-in nesting function:

The working principle of WordPress nested reply is that there is a column of comment “parent in the table of WP” comments “in the database of WP, that is to say, you can specify the parent of comment to achieve the purpose of nesting.

Non plug-in nested reply tutorial:

1. Disable the WordPress thread comment plug-in in the list of installed plug-ins in the blog background. In the background of the blog, click the “discussion” option in the “Settings” tab to enter the configuration page and open “allow nesting of x-layer comments”.

2. Log in the blog background, click the “Edit” option under the “appearance” tab to enter the theme editing page, select the theme (here, take WP’s own classic theme as an example), edit the header file header.php, and in the WP function

<?php wp_head(); ?>

Add code before

<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>

This code calls the JavaScript file of the nested reply on the article / page

3. Open the comments.php comment template of the topic. The original template code is as follows:

<?php if ( $comments ) : ?>
<ol id=”commentlist”>
<?php foreach ($comments as $comment) : ?>
<li>

<?php comment_text() ?>

</li>
<?php endforeach; ?>
</ol>
<?php else : // If there are no comments yet ?>
<p><?php _e(‘No comments yet.’); ?></p>
<?php endif; ?>

Now with the wp_list_comments(); function, you can easily complete these tasks. Replace the above code with:

<?php if ( $comments ) : ?>
<ol class=”commentlist”>
<?php wp_list_comments();?>
</ol>
<?php else : // If there are no comments yet ?>
<p><?php _e(‘No comments yet.’); ?></p>
<?php endif; ?>

Note that the original judgment of leaving a message, taking it out and displaying it can be replaced by a WP ﹣ list ﹣ comments(). The original ol (ordered list) id = “commentlist” is changed to class = “commentlist”, because it may conflict with other CSS definitions later.

4. Find a textarea in comment template comments.php, name = comment, which is the text field for visitors to enter comments. See if there is an id = comment in this textarea. If so, remove the id = comment (not the textarea, but the defined ID).

5. Find the code in comments.php:

<input type=”hidden” name=”comment_post_ID” value=”<?php echo $id; ?>” />

Replace the code with:

<?php comment_id_fields(); ?>

This is the definition of a reply box to support nested replies.

6. Find the code in comments.php:

from

<h2 id=”postcomment”><?php _e(‘Leave a comment’); ?></h2>

to

<?php endif; // If registration required and not logged in ?>

The outside of is wrapped with a div with ID of “responded”

<div id=”respond”>
……
</div>

This is to click “reply” next to the commenter to move the comment box to the comment area as a whole when nesting replies.

7. Add code under “leave a reply” in comments.php:

<div id=”cancel-comment-reply”>
<small><?php cancel_comment_reply_link() ?></small>
</div>

This is a link to cancel the comment. In general, the link does not display, only for someone to comment, and do not want to comment, you can click the link to reset the comment box.

8. Next is the definition of CSS. Chris Harrison, a foreign netizen, provided several color schemes for CSS.

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li div.comment-author {}
ol.commentlist li div.vcard { font:normal 16px georgia,times,serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url {}
ol.commentlist li div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font-size:9px; }
ol.commentlist li div.comment-meta a { color:#ccc; }
ol.commentlist li p { font-size:11px; margin:0 0 1em; }
ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li div.reply { font-size:11px; }
ol.commentlist li div.reply a { font-weight:bold; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li {}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { border-left:5px solid #111; }
ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

When the blog bar tests, it is found that the font of this CSS style is a little smaller and a little larger, so it is modified as follows (of course, the blogger can also modify this CSS style again):

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li div.comment-author {}
ol.commentlist li div.vcard { font:normal 12px georgia,times,serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url {}
ol.commentlist li div.vcard img.avatar { border:1px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font-size:10px; }
ol.commentlist li div.comment-meta a { color:#ccc; }
ol.commentlist li p { font-size:13px; margin:0 0 1em; }
ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li div.reply { font-size:12px; }
ol.commentlist li div.reply a { font-weight:bold;}
ol.commentlist li #cancel-comment-reply {font-size:15px;}
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li {}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { border-left:5px solid #111; }
ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Add this section of CSS to the style.css file, and the effect of nested reply will really show up. If you don’t add this section of CSS style, look at it for yourself.

9. The following is the effect of rbcss, the theme of wordpress blog, through this tutorial:

Click reply effect: