Wordpress: how to write a reply to comment using jQuery
Friday, October 3rd, 2008Recently Cristiano Up has released a useful plugin for Wordpress that can add two links to each comment in a post (maybe you have something similar installed, as in the directory, I trussed it Wordpress.org a couple, but as an Italian software would the event to honor the excellent work done by Christian). These links (reply & quote), meet and / or quote the author of a comment by performing the boring operation to insert the at sign (@) to indicate to whom they target. In this tutorial I will show - for the average user-experts - how to add these two features by hand, without resorting to installing any of Plugin. Also exploit the capabilities of jQuery to the party in Javascript. The technique I am raising is the same that I used to introduce this feature in this blog.
Note: The use of a plugin is the best solution for those who tend to frequently change their WordPress template or, at least, has in anticipation of doing so. This tutorial will only show how to perform targeted interventions within the code Wordpress and is dedicated to the most curious.
Edit the comments.php
The first change we make is to put the link "reply" and "units" within each comment. To do this edit the file comments.php in the root folder of our theme. This file contains all the instructions that allow you to view the comments at the end of a post. The section we are concerned (which may vary slightly from theme to theme) is the loop of creating various comments, identified by:
- ( $comments as $comment ) : ?> <? php foreach ($ comments as $ comment):?>
- ?> "> <li id = "comment-<? php comment_ID ()?>">
- / / ...
- </ li>
- ; /* end for each comment */ ?> <? endforeach php / * end for each comment * /?>
In such a loop around a single comment tag is enclosed in li Immediately after the opening tag li or immediately before the closing tag li we can use our links, enclosing it in a div and set some classes that will help us to further define the layout:
- <div class="jqr2c_ul">
- ?> ')">Rispondi</a> <a href="javascript:jqr2c_quote('comment- <?php comment_ID ( ) ?> ')">Quota</a> <a href = "javascript: jqr2c_reply ( 'comment-<? php comment_ID ()?>')"> Reply </ a> <a href = "javascript: jqr2c_quote ( 'comment-<? php comment_ID ()?>' ) "> Share </ a>
- </ div>
Note: we can improve our code also adding a check on the status of entries (open or closed) and on the type of comment (pingback, trackback, etc ...). For example entering:
- ( comments_open ( ) && <? php if (comments_open () & &
- comment_type != "trackback" && $ comment -> comment_type! = "trackback" & &
- comment_type != "pingback" ) { ?> $ comment -> comment_type! = "pingback") (?>
- <div class="jqr2c_ul">
- ?> ')">Rispondi</a> <a href="javascript:jqr2c_quote('comment- <?php comment_ID ( ) ?> ')">Quota</a> <a href = "javascript: jqr2c_reply ( 'comment-<? php comment_ID ()?>')"> Reply </ a> <a href = "javascript: jqr2c_quote ( 'comment-<? php comment_ID ()?>' ) "> Share </ a>
- </ div>
- ?> <? php)?>
Edit the header.php
The links we put it in your comments.php called two JavaScript functions, in this case jqr2c_reply() and jqr2c_quote() We shall therefore include these functions in the header of the page, defined in the file header.php Edit this file and posizioniamoci before closing the tag head or before the call to WordPress wp_header() and insert the following lines of code:
- <? php
- / **
- * Insert style and script only if we are viewing
- * A single post and the comments are open
- * /
- is_single ( ) && comments_open ( ) ) { ?> if (is_single () & & comments_open ()) (?>
- <style type="text/css">
- / * _____________ Here we define our styles * /
- div.jqr2c_ul (margin: 8px 0 30px 400px)
- / * Etc ... * /
- </ style>
- <script type="text/javascript">
- <!--//
- jqr2c_reply function (id) (
- aut var = jQuery ( 'li #' + id). children ( 'cite'). text ();
- jQuery ( 'textarea # comment'). text ( '<b> @' + aut + '</ b>:'). focus ();
- )
- jqr2c_quote function (id) (
- aut var = jQuery ( 'li #' + id). children ( 'cite'). text ();
- var c = jQuery ( 'li #' + id). children ( 'p'). text ();
- jQuery ( 'textarea # comment'). text ( '<b> @' + aut + '</ b>: \ n <blockquote>' + c + '</ blockquote> \ n'). focus ();
- )
- //-->
- </ script>
- ?> <? php)?>
If your blog, as in my case, already uses jQuery, this is all you need! Otherwise you can add these lines to the previous code after if (is_single() && comments_open())
- is_single ( ) && comments_open ( ) ) { ?> if (is_single () & & comments_open ()) (?>
- / / Include jQuery through the Google Ajax Library API
- "text/javascript" src = "http://www.google.com/jsapi" ></ script > <Script type = "text / javascript" src = "http://www.google.com/jsapi"> </ script>
- "text/javascript" > google . load ( "jquery" , "1.2.6" ) </script> <Script type = "text / javascript"> google. Load ( "jquery", "1.2.6") </ script>
- / / ... otherwise identical ...
The two scripts include jQuery through the Google service explained in Google AJAX API Library: a turning point for developers
Related Post
Loading ... 
Excellent guide, as always!
@ camu:
But why trouble jQuery (with all the weight that entails, although a minimum) when you can do everything by hand with simple JS?
Among other things here from you about Firefox 3.0.3 if the textarea has already "had" a focus buttons do not work ..
@ Napolux:
May be useful if, as in my case already using jQuery for other reasons. However, it is true that you can achieve it through a "simple" Javascript, but it is always useful to exploit the existing frame-work (jQuery, Prototype.js, Dojo, etc ...) mainly because ensure cross-browser compatibility is not always easy to implement (not in this case).
@ Napolux:
To me, if I understand correctly, he does not ... ? However it could be a worm fixare
First I want to thank you very much for the review of the plugin which now also offers the possibility to move between comments, in addition to the features of Quote and Reply.
Unfortunately, although I have been advised several times by others, I have not yet been reported (along with others that I realized) the repository of WordPress.org.
I will do as soon
Regarding the proposed solution is definitely the best if you already are using jQuery, the only handicap is that it seems to me that does not allow to list a partial selection of the text.
For those interested in an alternative solution using pure javascript I would point out the first article I wrote recently on related subjects, and from which then (after many requests for readers) came up with the implementation of the plugin:
A procedure for automatically quoted comments in a post
The procedure also allows the partial quoting the text and is cross-browser.
A warm greeting to Giovambattista with whom I share not only the passion for computing and programming (I too am the father of twins
)
@ Christian: you're right on handicap in the selection, intentionally avoided, because I had a purpose, "teaching" and / or descriptive and not replace operation of your great plugin
Agree on a passion for programming and "difficult" to grow twins
If you have any idea for a new Wordpress plugin I'd like to work with you if you wish!
Greetings and see you soon
@ Napolux:
The problem is the use of the method
text()to jQuery. This works until there is added new content. Better to use the formattr('value')@ Giovambattista Fazioli:
I guessed
The thing could only give me an immense pleasure, definitely take advantage of your skills and knowledge in
@ Christian: See jQuery reply to comment
@ Giovambattista Fazioli:
I have already "seen" and "verified" by the referrer
I finally found time to create me an account on the repository and submit the WordPress plugin: I do not know what it will take to approve
If it will not take much time, then others also suggest that I have already achieved.
Wordpress: how to write a reply to comment using jQuery ...
Cristiano Until recently released a useful plugin for Wordpress that can add two links to each comment in a post (maybe you have something similar installed, as in the directory, I trussed it Wordpress.org a couple, but as ...
Hello you are very good ... excellent guides!
Congratulations
I have a blog I anke ==> If you go Visitagao:
PanHack-Blog
love people who write "Anke"
only just for that I'll never go to visit your blog, my dear PanHack!
@ camu:
Sorry Giovambattista, I woke up a bit 'acid this morning
Excellent guide