To be honest, when I saw that they write about this and advise newcomers on other sites, I was a little horrified and decided to file my note on this topic without a fatal flaw. Basically, I have seen long pieces of code that implement adding comments to the site. Usually, a form is created for this, its processing, saving, as well as selections for display are implemented. But the advantages of this approach the further, the less.

In this post, you will learn one of the easiest (but subjectively one of the most preferred) ways to add comments to a site - a simple example for newbies + options for more advanced webmasters.

Indeed, why reinvent the wheel and write a bunch of code that will still have to be supported, fixed, etc. in the future, if there are a bunch of ready-made solutions from third-party services (we are talking about in social networks + discus)?

But before we move on to the actual implementation, let's look at the advantages / disadvantages of using ready-made solutions. (If you forgot something - write in the comments - we will expand the list)

Benefits of third party solutions:

  • Ease of implementation.
  • Spam protection "out of the box" (in my solution, I would have to implement this additionally, so, theoretically, it is related to the previous paragraph).
  • Less prone to bugs, bugs, etc., since third-party solutions have been tested by millions of users (again related to the first: you can also write everything without bugs, but it will take extra time to debug).
  • As a rule, services provide a ready-made admin panel, statistics, notifications for admins, sometimes moderation, several admins, pre-moderation, etc., which can take months, if not years, for a webmaster, especially a beginner, to implement.
  • The user does not need to register, enter his name, etc. - it is assumed that he already has an account in the popular social network.
  • Most likely, it will withstand a large load due to the fact that the social. Platforms were originally designed for heavy loads.

Flaws:

As you can see, there are many more benefits. The inability to change the appearance is most likely done in order to recognize the style of the comment service, thus creating unobtrusive advertising. (As one of the options). As for indexing, is it really that important, because not all comments carry a semantic load.

But enough theory, let's move on to practice.

1. The simplest option- add comments using some selected social network.

For example vk. We look at the documentation. Copy the provided code and add it on the page (code pieces are taken from the docks by reference, may change in the future, so always copy from the documentation site. Here is just a possible example):

1) Add to :

2) Add in the place where we want to see the comments widget (for example, after the note, if we are talking about a blog):

2. Add widgets from multiple services. For example, as on this resource. Switch tabs:


We add to the markup (for correct work, twitter bootstrap must be connected!) in the place where you want to display comments widget:

  • Vkontakte

But this option is not the best, although the easiest. The problem is that with this approach, all widgets will be initialized when the page loads, regardless of whether the user needs them or not.

This can be avoided by implementing lazy initialization of comment widgets. First the whole code, then the explanation:

(function(global, $) ( "use strict"; $(function() ( var $tabToggler, initComments, initialized; initialized = ( "#vk-comments": false, "#disqus_thread": false ); initComments = function (type) ( var discussUserName, disqus_config, pageUrl; if (initialized) ( return; ) pageUrl = "page_url"; switch (type) ( case "#disqus_thread": // You need to set this params using your platform"s appropriate way discussUserName = "discussUserName"; disqus_config = function() ( this.page.url = pageUrl; return this.page.identifier = "page_identifier"; ); (function() ( var d, s; ​​d = document; s = d.createElement("script"); s.src = "//" + discussUserName + ".disqus.com/embed.js"; s.setAttribute("data-timestamp", +new Date()); return ( d.head || d.body).appendChild(s); ))(); break; case "#vk-comments": VK.Widgets.Comments("vk-comments", ( limit: 5, attach: " *", pageUrl: pageUrl )); break; default: return; ) initialized = true; ); $tabToggler = $(".comments-wrapper a" ); $tabToggler.on("shown.bs.tab", function(e) ( initComments($(e.target).attr("href")); )); initComments($tabToggler.closest(".active").find("a").attr("href")); )); ))(window, jQuery);

Pay attention to the variables whose value you must prepare using the methods provided by your platform.

First we create a type mapping comment widgets, variable initialized. Next, the function initComments(type) allows initialize comment widget, and it does nothing if it has already been initialized.

And the final touch - initialize the default comments widget so that it is displayed immediately after the page loads.

Ready script on and coffeescript on gist. An example of work is below (code examples are taken from this site)

Hi all! Today I want to tell you about how to get readers of your blog to leave comments on your own blog. Of course, I don’t want to say that my blog is literally “teeming” with comments, but still, there is still something.

A little bit about yourself.

Having created the first blog, the second (this one -) I suffered from a lack of comments on them. Let's take a look at this blog. In my opinion, he wrote well, usefully, but there are still no comments and no. I remember, after I finished writing, I thought that there would be all sorts of thanks, etc., they say a lot of new blogs were created, but there were still no comments ...

Several weeks passed, but still few people responded, there were a few who created blogs on my lessons. But I stubbornly moved on, continued and continue to write, because I like it, I love my blogs, my readers, write new lessons and just communicate with them on twitter, vkontakte, icq, facebook, mail, skype and etc.

But still, how to get the reader to leave a comment?

To begin with, I analyzed my readership and I realized that, in general, my readers are new to the Internet, new to creating a blog, etc. I remembered myself, my behavior when I was still completely green: honestly, I was scared write comments because I knew that my words would be seen by a lot of people, and what if I say something stupid, then everyone will laugh at me or think badly of me.

Therefore, I thought that it was sometimes better to remain silent, to “score” on my problem, although I did not find the answer to my question in Google, in Yandex. I thought that no one would respond to my problems, answer my questions.

Putting myself in the place of the reader, I realized that you need to make it clear, ask questions - this is not stupidity, everyone was once a beginner. And at the end of the articles, I asked to leave comments on. And he made it clear that there is no need to be afraid of this.

As a result, after all my actions, I see comments, I see the activity of readers, and this pleases me. Therefore, I will give a few points below, how to increase the quantity blog comments.

Dear readers, if I didn’t even respond to your thanks, you know, I didn’t leave them without attention, honestly, I’m really very pleased ...

How to get a reader to leave a comment on a blog

  1. You need to understand what kind of readership you have and gain confidence in it. To do this, you can create an “About the Author” page, post your photo, give links to your contacts on icq, skype, twitter, Vkontakte, facebook, etc., so that your readers really know that you are a living person, the same as the reader himself.
  2. You can, sometimes, publish posts of a personal nature, for example, how did you spend your summer, etc. Such articles “bring together” the blog author and readers. But do not exaggerate. You don't need to deviate from the subject of your blog too often, thereby you will alienate the target audience.
  3. At the end of the article, ask readers to leave a comment. This is an inefficient way. It is more effective to ask a question at the end of the post.
  4. The article itself does not reveal the full meaning. Let the feeling remain that you allegedly missed natural things, the reader will want to supplement your article himself.
  5. Gather some discussion. For example, posts of the following nature gain a lot of comments: “Apple VS Nokia”, “WordPress or Joomla”, etc. Fans of one side will prove their own, and the opposite side will prove the opposite.
  6. Make a captcha (spam protection for leaving comments) as easy as possible. Of course, ideally, there is a complete absence of captcha, but spam bots “take out the brain and the blog” :).
    For example, I NEVER leave comments where the captcha code is used in pictures, if it is also long, then that's it, it's just the end of the world. I'm just too lazy, I don't have enough time to rewrite this set of letters.
    Therefore, to protect against spam, install plugins like those that only require you to tick the box that you are not a robot, or solve a simple mathematical problem. By the way, I talked about the last plugin in detail in .
  7. Before commenting, instead of the standard text “Unfortunately, there are no comments yet”, place something “forcing” to leave comments, like “Leave a comment, YOUR opinion is important to us” (the first thing that came to mind 🙂). This text can be changed in the comments.php file.
  8. Leave comments on other blogs. At first, this helps a lot. But then there is not enough time for this either ... You need to leave a comment meaningfully and on the topic. I immediately remembered my comment left on seogramota.ru, thanks to which I got a lot of new readers, subscribers and a free link from the blog with 110 Tits and PR 2 (what is tick and pr and how to raise them I will soon tell in one of my lessons).
    Leave comments with your unique avatar (it doesn't have to be your photo). To have an avatar when leaving a comment, you need to “attach” your email (which is indicated when commenting) to the picture. To do this, you just need to register on gravatar.com, and then, what to do, you will understand everything yourself, I'm sure.
  9. Remove the ability to leave comments only to registered users! Only units will register just to leave a comment.
    To do this, go to WordPress admin area –> Settings –> Discussion and uncheck the box “Users must be registered and authorized to comment”:


  10. You can arrange all sorts of contests that will “force” your readers to leave comments. At one time, the competition that I held (I remind you, it was called “”) helped me a lot. A certain “backbone”, “skeleton” of comments appeared. That is, readers saw that other users leave comments, so everything is fine, you can leave your contribution to them. Overcome some fear.
    Of course, not everyone wants to arrange all sorts of contests: someone feels sorry for the money for prizes, for someone the contests seem like a crazy idea, but you take note, they are very effective.
    In turn, I ask you to comment on just one article (I will be grateful to you), here

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 new parameter with the right 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 new feature, 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. 🙂

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 is generally responsible for the block of comments 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. in comments.php you will not find (at least in latest versions WordPress and at right approach to the development of 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 function callback) 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 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. More concrete examples Style changes will be discussed 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

WordPress has several types of content such as posts, pages, comments. WordPress is a very flexible platform that allows you to customize the main types of content to suit your site. You can change the look and feel. In this tutorial, we'll show you how to change the behavior and appearance of comments on a WordPress site.

Step 1. Understanding the function comment_form and its arguments

Consider the WordPress comment_form function. It is responsible for displaying the comment form that is displayed on the page or post. The call to this function can mainly be found in the file comments.php in the theme folder. This file included in various places, for example in files single.php and page.php, directly or through a call to the comments_template function.

A description of the feature can be found in the WordPress codex.

If you use the comment_form function to render a form, it will be rendered using the default parameters and will contain fields such as name, email (both fields are required), website, and comment content. In the default Twenty Eleven theme, the form will look like this.

Some important arguments to the comment_form function:

  • fields - with its help you can control the output of fields in the comment form.
  • comment_notes_before and comment_notes_after are used to display information before and after the form.
  • title_reply - used to change the title of the response, which defaults to 'Leave a Reply'.
  • label_submit - used to change the text on the comment submit button.

Step 2. Customize the comment form using the function comment_form

Now let's customize our comment form by passing arguments to the comment_form function.

In case we need to customize the fields in the comment form, we need to pass a list of them to the comment_form function. By default, the function uses the following list of fields:

$fields = array("author" => "

" . "" . ($req ? " *" : "") . "

", "email" => " ", "url" => "

" . "

",);

If we need to remove a field, say website , we just need to exclude it from the array and pass the array to the comment_form function.

$commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("author" => "

" . "" . ($req ? " *" : "") . "

", "email" => " ",); $comments_args = array("fields" => $fields); comment_form($comments_args);

In addition, we will also change the name of the form to ‘Please give us your valuable comment’ and the label on the button to ‘Send My Comment’.

To complete the task, we pass the following arguments to the comment_form function:

$commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("author" => "

" . "" . ($req ? " *" : "") . "

", "email" => " ",); $comments_args = array("fields" => $fields, "title_reply"=>"Please give us your valuable comment", "label_submit" => "Send My Comment"); comment_form($comments_args);

The comment form will now look like this:

Step 3 Removing fields from a form with a hook

Also form WordPress comments can be modified with hooks and filters. This setup can be especially useful when working with a plugin when you need to tweak a few elements but not change the theme files. Filter to add or remove form fields - ' comment_form_default_fields '

Let's remove the URL address field using a filter. The above code can be used in a plugin or in a file functions.php active topic.

Function remove_comment_fields($fields) ( unset($fields["url"]); return $fields; ) add_filter("comment_form_default_fields","remove_comment_fields");

Step 4: Adding Data to the Comment Form with a Hook

We can add fields to the form using the ' comment_form_default_fields ' filter. Let's add the author's age field using a filter and save this field with additional data and display it in the comments.

Add a field like this:

Function add_comment_fields($fields) ( $fields["age"] = "

" . "

"; return $fields; ) add_filter("comment_form_default_fields","add_comment_fields");

#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-age label, #respond .comment-form-comment label ( background: #eee; -webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); -moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); box-shadow: 1px 2px 2px rgba(204,204,204, 0.8); color: #555; display: inline-block; font-size: 13px; left: 4px; min-width: 60px; padding: 4px 10px; position: relative; top: 40px; z-index: 1; )

Now our comment form will look like this:

Now the age is stored as Additional Information. You need to use a hook in ' comment_post ':

Function add_comment_meta_values($comment_id) ( if(isset($_POST["age"])) ( $age = wp_filter_nohtml_kses($_POST["age"]); add_comment_meta($comment_id, "age", $age, false); ) ) add_action("comment_post", "add_comment_meta_values", 1);

Once the data is saved, it can be displayed in a comment like this:

comment_ID, "age", true); ?>

Step 5 Setting comments for specific post types

Sometimes you want to use fields in comments only for certain types of posts. Let's change the code to display the age field only for the record type book :

Function add_comment_fields($fields) ( if(is_singular("books")) ( $fields["age"] = "

" . "

"; ) return $fields; ) add_filter("comment_form_default_fields","add_comment_fields");

Step 6. Create a return function for displaying comments

The wp_list_comments function is used to display comments in posts. The WordPress codex describes the feature in detail.

wp_list_comments has a ' callback ' argument which can be used to define a function that is called when a comment is displayed.

In the Twenty Eleven theme in the file comments.php you can find the line:

wp_list_comments(array("callback" => "twentyeleven_comment"));

Let's change it to:

wp_list_comments(array("callback" => "my_comments_callback"));

The my_comments_callback function will be called for every post.

Step 7 Styling the Comments

Now we will change the style of the comment a bit. We will simply display the content of the post and the age field that we added earlier. We will also change the background color for comments.

Function code ‘ my_comments_callback ’:

Function my_comments_callback($comment, $args, $depth) ( $GLOBALS["comment"] = $comment; ?>

  • id="li-comment-">

    comment_ID, "age", true); ?>

    __("Reply ↓", "twentyeleven"), "depth" => $depth, "max_depth" => $args["max_depth"]))); ?>

    • Change the background color like this:

    Commentlist > li.comment ( background: #99ccff; border: 3px solid #ddd; -moz-border-radius: 3px; border-radius: 3px; margin: 0 0 1.625em; padding: 1.625em; position: relative; )