Formatting the Comments Area in WordPress. Formatting the comment area in WordPress Disabling the display of pings from the admin panel
The background to writing this article is typical: I decided to highlight my comments with a separate style... Fortunately, I have been shredding style.php for several days now and I know the basic rules of CSS syntax. And, of course, this innocent idea turned into a slight embarrassment, a search for a solution... In the end, everything worked out. And now I want to tell you what magical passes I used to decorate my own comments.
The point of all the manipulations described below is to highlight your comments and responses to readers. If you don’t go overboard with the styles, it will turn out quite elegant. Of course, this is not a vital necessity. Anyone who decided to view your comments will be able to do so by nickname. But the idea of beauty is also important to many bloggers.
In addition, if we pay attention to how the author’s answers are formatted on many large and well-thought-out sites (for example, smashingmagazine), we will see a separate style for them. Obviously this will help improve usability.
It is especially important to use a separate style for author comments on blogs where tree-like comments with a fairly deep degree of nesting are allowed. Simply put, where the user can reply to comments, reply to replies, and so on.
Let's look at the comment styles that are already in use
Don’t be surprised that I suggest, as it were, starting from the end. But for users who do not feel completely comfortable editing WordPress themes, this is the most visual and obvious way.
So, select a post on your blog that has comments. Of course, we need your answers to be here as well. Having opened such a page, right-click on it and select “View page code” (in Google Chrome and Firefox browsers there is definitely such an option).
Don't be scared when you see a sheet of code. In fact, there is nothing complicated or secret here. Scroll down the page and you will notice that the general information about the post is displayed first, then the text with formatting. Below is finally the code related to comments. You can simply type Ctrl+F and enter in the window that appears commentlist and press Enter - you will immediately be “thrown” to the desired line, where the searched word will be brightly highlighted.
Now let's look at how our comment styles are marked. For clarity, the code is from my theme. Of course, yours may look and be structured a little differently, but the main meaning of individual parts of the code should be clear:
COMMENT TEXT
- id="li-comment-">
comment_approved == "0") : ?>Please note that we are not closing the tag$depth,"max_depth" => $args["max_depth"]))); ?>
- , because WordPress will automatically create closing tags based on the markup of nested comments.
Once posted, this function will be called when comments are generated and allows you to make any necessary edits. The trick is that we did everything we needed using the standard and fairly limited settings wp_list_comments()
Now let’s go back to the old ways - together with wp_list_comments we’ll put a foreach loop
This use will allow the template to be backwards compatible with older versions of WordPress.
Now that we know how to set up a comment loop, let's modify it to suit our needs and apply some cool tricks.
Implementing page-by-page comments
No one knows in advance that the content on the site can attract hundreds of comments. What I'm getting at is that we are all superstars and success can come unexpectedly. A post with hundreds of comments can be insanely long to watch and rewind. In general, we are certainly not afraid of vertical scrolling (unlike horizontal scrolling), but everything should have borders. A typical post with 60 comments can be up to 20k pixels tall!
A great way to keep things organized is to paginate your comment feed and display them page by page.
Once you enable pagination, don't forget to add functions to your comments.php file to display "Before" and "Later" links.
These links will automatically appear and break the sheet of comments when the specified number of comments per page is exceeded. If there are fewer comments than this number, the links will not be displayed.
And there is one catch here. The well-known SEO problem of duplicating content with page-by-page comments arises. This happens because the same URLs are created for each comment page.
- https://yoursite.com/ghost-dad-rocked/
- https://yoursite.com/ghost-dad-rocked/comments-page-1/
- https://yoursite.com/ghost-dad-rocked/comments-page-2/
- https://yoursite.com/ghost-dad-rocked/comments-page-3/
It is clear that only the comments on these pages will be different. What makes the overall picture even worse is that each comment has its own unique link with the time of publication, which also adds a bunch of duplicates. Therefore, the search bot will find the same content under a huge number of different links.
To avoid duplication, there are several solutions:
- Don't use page comments
- Use meta tags to create canonical URLs for each post
- Use plugin
If your site is super popular or is going to become so, then of course it is better to use canonical URLs. If heated discussions are not planned, then it is easier to use traditional comment sheets without pagination.
SEO for Paged Comments takes an even more radical approach - removing the content of the post from the comment pages and replacing it with a quote or a shortened version of the post.
Implementing nested comments
Nested tree comments allow visitors to write a response to a selected existing comment, creating a rich discussion dialogue. After activating this feature in the settings, a “Reply” link will appear next to each comment, allowing you to speak on a specific comment.
Before this possibility appeared, there was a style of responding to the selected author, using his name and the @ sign in the comment text, like “@Vasya you’re wrong!” With some transformation, this method has taken root in many applications on the Internet and still lives, for example, on Twitter. And in modern versions of WordPress such a mention does not need to be used.
Now you just need to click on the appropriate “Reply” link and speak out. Once the comment text is approved, it will appear immediately below the comment it was written about.
If your template doesn't support this type of commenting, there is an easy way to add it:
- We make backup copies of files, which in theory should already become a habit
- Enable nested comments in settings Options→Discussion Settings→Allow Tree Comments
- Add the following code to header.php immediately before wp_head()
- Add to comments.php just before the closing tag
- Let's check that
Actually, we only need to find comments with your nickname (for example, on this blog I write and respond under the nickname Katyaru). And just above the required line, which begins like this:
Thank you, you have a great site!