Cross add comment comment. WordPress comments are the complete look and feel. Completely finished comment code
Hello, friends! Vladimir Savelyev is in touch. Today I will show you how to make, customize and beautifully design a WordPress comment form, with and without plugins... And we will analyze a very important question: Do comments affect blog ranking in search engines? But first things first...
In this article, I will address the following questions:
- How to customize the WordPress comment form for the needs of the audience;
- How to style comments nicely with CSS;
- How to highlight blog author comments without a plugin;
- How to make yourself a gravatar to display your photo when commenting on your own and other blogs;
- What important plugins to install for the comments module to add functionality;
- How to insert emoticons into the comment form and replace them with more original ones;
The fact is that recently I myself, on my blog, brought to mind the form of wordpress comments and in search of the necessary and correct information, it took me a lot of time. Now, if I came across such an article, where almost all the information is collected, I would save a lot of time, and would devote this time to more important issues, not technical ones!
By the way, congratulations on your first snow! I don’t know about you, but in our city it’s snowing all day today, anticipating the imminent New Year and the smell of tangerines =) I didn’t have time to enjoy the past summer, I was all the time in business and work, I didn’t notice how summer is and passed = (Well, okay, I’ll still have time to relax and rest. As my beloved wife says, I’ll rest in retirement!
Okay, now let's get back to the topic!
Let's start with how WordPress comments affect blog rankings in search engines?! The answer is obvious - this is the influence of PF, that is, behavioral factors!
Consider an example, there are two blogs, one of them has a wordpress comment form, the other does not! The visitor went to the blog, where he read an interesting article and that's it, he is unlikely to return to the page of the material again, do you agree with me?
And on the blog where there is commenting, after reading the article, the visitor will also read the comments, I wonder what other people write on this topic! And if the visitor also joins the discussion, then it will be generally gorgeous =) How many times will he go to this page to check if anyone answered him?!
By the way, I came across one resource where an experiment was set up with two blogs, there were comments on one blog, and not on the other. So, the blog that was commented on was successfully moving forward and attendance was growing, compared to another blog!
Thanks to comments, the time spent on the blog increases, as well as the number of direct visits, thereby improving the performance of the site or blog, and that's not all the pluses!
Enough theory, let's move on to the practical part!
How to Customize the WordPress Comment Form
In fact, setting up the comments module is very simple and will not take you much time. All you need to do is check the boxes where I did! Follow the instructions and you will succeed in the best possible way!
How to beautifully design the comment form
At this stage, you will need at least basic knowledge of css and html. If you do not have them, then do it at your own risk and do not forget to save the original code before editing.
To change the design of comments, you need to find it in the settings, Appearance - Editor - Style sheet (style.css), something like this code:
Commentlist div.comment(background:#f6f6f6;margin-bottom:15px;padding:10px 10px 10px 80px;position:relative;border: 1px solid #bbb; border-radius: 8px;)
In short, we are looking for all styles that start with comment, and change their value to your taste and color. Experimenting!
How to highlight author comments without a plugin
Why is this needed?! Well, first of all, it gives the visitor an idea of who the author of the blog is, among other commentators! It will also make it easier for the blog author to navigate!
The plugin will help solve this problem - Highlight Author Comments, but I'm not a supporter of plugins, since a large number of them negatively affect the blog! Therefore, whenever possible, I try to do everything in code, which I advise you to do!
To implement this feature with code without a plugin, you need to add a new style class with the blog administrator login in the settings: Appearance - Editor - Stylesheet (style.css).
In my case, the code looks like this:
Commentlist div.comment-author- Your login at the entrance to the admin panel(background-color:#f5f5e1!important;margin-bottom:15px;padding:10px 10px 10px 80px;position:relative;border: 1px solid #bbb; border-radius: 8px;)
And change the design, different from other comments! Everything is simple!
To prevent an attacker from knowing your real login, write the code in functions.php
function del_login_css($css) (
foreach ($css as $key => $class) (
if (strstr ($class, "YOUR REAL LOGIN")) (
$css[$key] = "COME WITH A FICTION"; ) )
return $css;
}
add_filter("comment_class", "del_login_css");
How to make your own gravatar (photo in comments)
If you want your photo to be displayed when commenting on your own or other blogs, and not an empty picture, then you need to do the following. Register on https://ru.gravatar.com
We fill in all the required fields and that's it! Now your photo will always be with you, where you specify the email to which the picture is attached! It is important to register with the email you usually enter when commenting.
Important WordPress Commenting Plugins
I will list the three main commenting plugins that I have on my blog. I recommend that you install them!
- Comment Redirect by Yoast - First Comment Thanks Plugin! First you need to create a thank you page and enter its path in the plugin settings!
- WordPress Zero Spam is an invisible captcha designed to protect against spam, it doesn't bother commentators to solve arithmetic examples, they just don't see it...
- - subscription to comments. Principle of operation: the visitor, having written a comment, can subscribe to their updates, as well as manage subscriptions.
Emoticons in wordpress comment form
Read the article on how to make, as well as how to replace standard emoticons with others.
That's all! I hope you managed to set everything up, if you did not find your question about the wordpress comment form, then feel free to write a comment and I will be happy to answer it! If you liked the article, subscribe to blog updates and recommend it to your friends by clicking the social network buttons below! I will be very grateful! See you soon in a new article!
Sincerely, Vladimir Saveliev
Premium lessons from the webformyself club
This is a new revolutionary product in the field of website building education! All the best video tutorials are collected in one place and divided into categories: WordPress, Joomla, PHP, HTML, CSS and JavaScript... The database is constantly updated and now there are more than 200 lessons in it! In just one year - you can become an experienced webmaster "from scratch"!More
It's time to get serious about styling WordPress comments. In almost all themes, they are configured by system files, which in turn limits the editing of individual functions. I think many people have come across this when they needed to make changes to the comments, but could not find exactly where it is located. Therefore, it will be better to transfer all the functionality to the current theme, which will give us complete freedom of control.
In this article, I've put together some cool features that will help improve comments. Still, they allow you to conduct dialogues, both with the site administrator and between users. Answer questions, start various discussions, in general, introduce full-fledged virtual communication. So it is necessary to pay attention to them and bring them into proper form.
Here's what we'll do:
- Full customization
- Appearance styling
- Comment numbering
- Post count per user
- Assign a status to each user
- And other little things
We will analyze each item separately, and at the end of the article all the functions will be fully assembled into one ready-made code.
Customizing comments
In WordPress, comments are displayed using the wp_list_comments function, usually in the comments.php file. And the formation of individual functions, just like the loop itself, is used from the template of the system file comment-template.php . But in rare cases, it happens that the setting can be located in the WordPress theme, functions.php file or comments.php file.
So, if your theme does not fall into a rare case and there is a need to make your own settings, then open the functions.php file and add the following code before the ?> sign:
If (! function_exists("my_comment")) : function my_comments($comment, $args, $depth) ( global $commentnumber; $GLOBALS["comment"] = $comment; switch ($comment->comment_type) : case " pingback" : case "trackback" : ?>
", ""); ?>
Then in the comments.php file add a call function:
-
"my_comments")); $commentnumber = 0; ?>
After these manipulations, your comments will be generated according to the template function from the functions.php file of the current theme.
Counting the comments of each user
Using the function below, we can display the total number of posts left next to the commentator. Thus, you can observe how active the user is, and even then, statistics are not superfluous, especially in this regard.
We open the functions.php file already familiar to us and writes the following code at the end before the sign?>:
//count user posts function bac_comment_count_per_user() ( global $wpdb; $comment_count = $wpdb->get_var("SELECT COUNT(comment_ID) FROM ". $wpdb->comments. " WHERE comment_author_email = "" . get_comment_author_email() ." " AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")"); if ($comment_count == 1) ( echo " 1 Post"; ) else ( echo " " . $comment_count . " Posts "; ) )
Now it remains to add the call function to the place you need:
Messages will be counted based on the user's e-mail, both registered and not. Comments are taken into account only confirmed by the site administrator, but not in standby mode and deleted.
We assign a status to each user depending on the number of comments
This is exactly the case where statistics definitely play an important role. Since the function is built on the basis of the number of messages, and as a result, the reached number gives the user the proper status. This, in theory, is used in every forum to show the authority of the user on this resource.
Open the functions.php file again and add the following code before the ?> sign:
//user status function get_author_class($comment_author_email,$user_id)( global $wpdb; $adminEmail = get_option("admin_email"); $author_count = count($wpdb->get_results("SELECT comment_ID as author_count FROM $wpdb->AdminUseR "; if($author_count>=1 && $author_count<50 && $comment_author_email !==$adminEmail) echo "Прохожий"; else if($author_count>=50 && $author_count<100 && $comment_author_email !==$adminEmail) echo "Новичок"; else if($author_count>=100 && $author_count<250 && $comment_author_email !==$adminEmail) echo "Знающий"; else if($author_count>=250 && $author_count<400 && $comment_author_email !==$adminEmail) echo "Опытный"; else if($author_count>=400 &&$author_count<800 && $comment_author_email !==$adminEmail) echo "Бывалый"; else if($author_count>=800 && $author_count<1200 && $comment_author_email !==$adminEmail) echo "СуперПупер"; else if($author_count>Professor"; )
And in the desired place we output the call function:
comment_author_email,$comment->user_id)?>
Explanation: the function, like the previous one, is associated with the user's e-mail. Only here the main task is not easy to count messages, but the number from and to depending on the set number. And as soon as the user reaches it, he gets a certain position. There are 7 statuses in total, plus an admin and an insignia for registered participants.
Completely finished comment code
Here we have come to the end of this article. Here I was not too lazy, collecting all the functions, including setting up comments in one ready-made code. I added my own appearance styles and the result was something like a mini-forum.
Open the functions.php file and at the end before the sign?> add the following code:
//count user posts function bac_comment_count_per_user() ( global $wpdb; $comment_count = $wpdb->get_var("SELECT COUNT(comment_ID) FROM ". $wpdb->comments. " WHERE comment_author_email = "" . get_comment_author_email() ." " AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")"); if ($comment_count == 1) ( echo " 1 Post"; ) else ( echo " " . $comment_count . " Posts "; ) ) //user status function get_author_class($comment_author_email,$user_id)( global $wpdb; $adminEmail = get_option("admin_email"); $author_count = count($wpdb->get_results("SELECT comment_ID as author_count FROM $ wpdb->comments WHERE comment_author_email = "$comment_author_email" ")); if($comment_author_email ==$adminEmail) echo "Admin"; if($user_id!=0 && $comment_author_email !=$adminEmail) echo "UseR"; if ($author_count>=1 && $author_count<50 && $comment_author_email !==$adminEmail) echo "Прохожий"; else if($author_count>=50 && $author_count<100 && $comment_author_email !==$adminEmail) echo "Новичок"; else if($author_count>=100 && $author_count<250 && $comment_author_email !==$adminEmail) echo "Знающий"; else if($author_count>=250 && $author_count<400 && $comment_author_email !==$adminEmail) echo "Опытный"; else if($author_count>=400 &&$author_count<800 && $comment_author_email !==$adminEmail) echo "Бывалый"; else if($author_count>=800 && $author_count<1200 && $comment_author_email !==$adminEmail) echo "СуперПупер"; else if($author_count>=1200 && $comment_author_email !==$adminEmail) echo "Professor"; ) // customizing comments if (! function_exists("wordsmall_comment")) : function wordsmall_comment($comment, $args, $depth) ( global $commentnumber; $GLOBALS["comment"] = $comment; switch ($comment- >comment_type) : case "pingback" : case "trackback" : ?>
Now open the comments.php file, we find the function for calling comments in it. Looks like this:
Change to this one:
-
"wordsmall_comment")); ?>
Final step. Open the style.css file and add the following styles at the end:
My_commentlist( border-top:none; ) .my_commentlist .comment( padding:0 0 15px 0; border:none; ) .my_commentlist .pingback( padding:0 0 15px 0; border:none; ) .my_commentlist .comment .children ( list-style-type: none; padding:0px; margin-left:0px;/*if you need padding for tree com.set it to 15px*/ ) .my_commentlist .comment .children .comment( margin:15px 0 0 0; border: none; padding: 0; ) #comments ( background: #fff; ) #comments .my_commentlist ( margin: 10px 0; padding: 0; list-style:none; background: #ebf0f3; padding: 5px; ) #comments .my_commentlist .comment ( margin:0; padding: 0 0 10px; background: #fff; ) #comments .my_commentlist .my_comment-author ( display: inline; border-right: 1px solid #e0e0e0; width: 100px; float: left; margin : 0px 15px 10px 0; ) #comments .my_commentlist .commentmetadata ( float:left; ) #comments .my_commentlist p ( clear:none; color: #555; font: 14px arial; line-height: 23px; ) #comments .my_commentlist .comment-conte nt(margin-left: 116px; padding-right: 10px; ) #comments .my_commentlist .reply ( text-align:right; ) #comments .my_commentlist .reply a( background: #f5f5f5; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 2px; color : #515456; display: inline-block; font-size: 13px; font-weight: normal; line-height: 30px; margin-right: 15px; min-height: 30px; padding: 0 12px; text-align: center ; text-decoration: none; ) .my_commentlist .avatar( border: medium none; border-radius: 50%; float: none; margin: 5px auto; padding: 0px; display: table; ) .my_commentlist .comment-header( height: 30px; background: #DEE5EB; margin-bottom: 15px; ) .my_commentlist cite.fn( color: #444; font: bold 13px/30px arial; padding-left: 10px; ) .my_commentlist .com_date ( color: # 8ca0b5; font: normal 13px/30px arial; float: right; padding-right: 15px; ) .my_commentlist .comment-body ( overflow: hidden; position: relative; background:#fff; ) .my_commentlist .rep-authorcom ( color: #25394e; font-size: 13px; line-height: 30px; ) .my_commentlist .edit-link a ( background: none !important; border: none !important; border-radius: 0 !important; color: #999!important; display: inline-block; font-size: 11px !important; font-weight: normal; line-height: 30px; margin-right: 5px !important; min-height: 30px ; padding: 0 !important; text-align: center; text-decoration: none; ) .com_per ( border: medium none; color: #666; display: block; font-size: 11px; text-align: center; ) .vip1, .vip, .vp, .vip2, .vip3, .vip4, .vip5, .vip6, .vip7 ( border: medium none; font: bold 13px arial; display: block; text-align: center; margin- bottom: 5px; text-decoration: none; ) .vp (color: #e82e24;) .vip1 (color: #348be8;) .vip2 (color: #BE005E;) .vip3 (color: #2e517e;) .vip4 ( color: #658a18;) .vip5 (color: #00A56D;) .vip6 (color: #e35d28;) .vip7 (color: #99A400;) .vip (color: #4c5176; font-size: 11px; margin: 0 ;)
The code is fully working and does not cause errors, but minor changes in CSS styles may be needed.
Hello!
Today's article is about outputting WordPress comments. We will consider in which files and functions the code responsible for displaying comments is located. What you need to do to be able to make changes to this WordPress blog block.
To begin with, each WordPress template (theme) has a file comments.php, Full path to it from the root directory: /wp-content/themes/template_folder/comments.php
Exactly comments.php generally responsible for the comment block in a particular WordPress theme.
What is most often contained in comments.php:
– check password protection of comments
– check if comments are allowed on the article
– checking for comments and displaying the corresponding text (“No comments …” or “N comments left”)
– calling the comment output function - wp_list_comments()
– output of navigation (paging) when placing comments on multiple pages
– displaying the form for leaving comments on the article
It is clear here that you can set your own classes or change properties in style.css for already existing classes. Thus, you can change the appearance of the form for leaving comments and texts before the list of comments and after this list or form. But the output styles of the comments themselves in comments.php cannot be changed.
When I listed the content of the file comments.php, he specifically emphasized that in comments.php there is only a call to the function for displaying comments wp_list_comments(), but not the output itself. Those. V comments.php you will not find (at least in the latest versions of WordPress and with the right approach to developing templates): displaying the name of the author of the message and a link to his site, displaying the author’s profile picture, displaying the date and time of the comment, the comment itself and the “reply” link.
How to change the styles in the comments list?
First you need to find out if your template uses a custom function to display comments.
Calling the wp_list_comments() function is possible without a callback (callback is a callback function) and with a callback.
1. Calling wp_list_comments without a callback:
Those. in the function parameters (what is in parentheses, after the name), there is no parameter with the name 'callback' anywhere.
If in comment.php your template is such a situation, then this means that this topic does not have its own (custom) function for displaying comments and for this, a standard template is used (a template from the core of WordPress). It is located in the file. And since , then in this case, changing the display styles of comments will not work until we move on to the second option.
2. Call wp_list_comments with a callback:
"type=comment&avatar_size=48&callback=custom_comment") ; ?> |
callback=custom_comment indicates that to display comments we have a custom function custom_comment , the code of which, roughly speaking, we pass as a parameter for execution to the standard function wp_list_comments. But we are no longer interested in the technical side of this issue, but in the presence in the template of its own function for displaying comments. The code for this function is located in .
That's it in this custom function custom_comment and the code responsible for the appearance of a separate comment, and therefore all comments as a whole, is located.
The user function code is intuitive. It typically uses the following standard WordPress features:
get_comment_author_link()– receives an html link to the site of the author of the current comment;
get_comment_date()– gets the date of the comment;
get_comment_time()– gets the time of the comment;
comment_text()- displays the text of the comment;
You can find snippets with these functions in the code and change the appearance of certain elements by wrapping them in divs or spans and assigning certain style classes.
For example, in the code of the custom function, a fragment of the avatar output:
< div class = "comment-author" >
< / div > |
Now left in style.css set the desired properties to the class comment-author. I will consider specific examples of changing styles in more detail in one of the following articles.
Now you may be wondering: What if my template doesn't have a custom function to display comments?”
Answer: you need to create it.
The easiest option is to copy the code of a standard WordPress function comment().
Instructions for creating a custom function for displaying comments:
1. Open the file /wp-includes/comment-template.php and find the function in it comment().
Here is the beginning of her description
/** * @since 3.6 * @access protected * * @param object $comment Comment to display. * @param int $depth Depth of comment. * @param array $args Optional args. */ protected function comment($comment, $depth, $args) (
* @since 3.6 * @access protected * @param object $comment Comment to display. * @param int $depth Depth of comment. * @param array $args Optional args. protected function comment ($comment , $depth , $args ) ( |
2. Copy the entire body of the function comment().
You need to copy the code fragment from the beginning of the description shown in paragraph 1 to the closing curly brace } followed by a similar description of another function
This name does not interfere with many, but sometimes the question arises how to change add a comment to leave a review or the like. In this case, this article will help you. As I wrote above, I will show a couple of ways.
Method number 1
For the first method, you must find the file in the folder with the theme that is installed on your site. comments.php. If there is one, open it and look in it for an array responsible for setting up and displaying the content of the comment form. It looks something like this:
$args = array("comment_notes_before" => "
", "comment_field" => " ", "id_submit" => "comm_subm", "label_submit" =>So, to this array, you need to add a new parameter with the desired value and that's it. In our case, this is:
"title_reply" => "Leave your own review",
How do you understand - Leave your review, this is the new name instead of - Add a comment. You can add such a parameter to the end or to the beginning of the array. It will turn out something like this:
$args = array("title_reply" => "Leave your comment", "comment_notes_before" => "
Fill in the fields below. Your e-mail will not be published. Required fields are marked *
", "comment_field" => " ", "id_submit" => "comm_subm", "label_submit" => "Submit",); comment_form($args);Added to the beginning and now, on the pages of entries, a line will be displayed - Leave your review. This method is not complicated and requires minimal effort, the main thing is to correctly define the array. But sometimes it happens that there is no comments.php file inside the theme or there is no array in it and you don’t know how to add it there correctly, then the second method will help you.
Method number 2
The essence of the second method is to add a new function, which will make the replacement of the name. To do this, in the folder with the active theme, you need to find the file functions.php with custom functions and in a convenient place, if you don't know this, then at the very end before the PHP closing tag - ?> , if there is none, then just at the very end, add the following code:
Function wph_change_submit_label($defaults) ( $defaults["title_reply"] = "Submit Your Feedback"; return $defaults; ) add_filter("comment_form_defaults", "wph_change_submit_label");
Bonus
This is the same, in fact, what was done in the first method, simply, there we embedded directly into the array, and here through the filter. After these steps, you will see a change in the title. As in the first method, you can change the text - Leave your review to the one you like. This text is provided as an example.
I also want to suggest and pay attention to the declension of the word Comments. If you have a line in the form - 1 comment or Comments: 10 posted. You can use the Function from the article. If you are already using it, then I recommend in line with an array:
Array("comment","comments","comments")
Change the titles to review,review,reviews if you used that word in the methods above. thus, everything will be the same for you, and not in a scatter, there are reviews, and there are comments.
This is the information I would like to share with you today. Perhaps it will be useful to someone.
That's all, thanks for your attention. 🙂
Loading...