Recently Cristiano Up has released a useful Plugin for WordPress able to add two links for every comment in a post (maybe you have one installed similar, as in the directory WordPress.org I beamed a couple, but being an Italian software would the event to honor the excellent work done by Cristiano). These links (reply & share) allow you to answer and / or quoting the author of a commentary, performing the tedious operation to insert the at sign (@) to indicate to whom it is addressed. In this tutorial I want to explain - for medium-expert users - how to add these two features "by hand", without recourse to the installation of any Plugin. In addition sfrutterò capabilities jQuery for the part in Javascript. The technique I present 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 change frequently your WordPress template or, at least, is planning to do so. This tutorial just wants to show how to perform targeted interventions within the code WordPress and is dedicated to the most curious.
Edit your comments.php
The first change we make is to insert the link "reply" and "quote" within each comment. To do this, edit the file comments.php located in the folder of our theme. This file contains all the instructions that display the comments at the end of a post. The section that interests us (which may vary slightly from theme to theme) is the loop creating the various comments, recognizable by:
1 2 3 4 5 | ( $comments as $comment ) : ?> <? Php foreach ($ comments as $ comment):?> ?> "> <Li id = "comment-<? Php COMMENT_ID ()?>"> / / ... </ Li> ; /* end for each comment */ ?> <? Php endforeach; / * end for each comment * /?> |
In a loop of this type around a single comment is enclosed in tags li . , possiamo inserire i nostri link, racchiudendoli in un div e impostando alcune classi che ci saranno utili per definirne più avanti il layout: Immediately after the opening tag of li , or just before the closing tag li , we can use our links, enclosing them in a div and setting some classes that will help us to further define the layout:
1 2 3 | <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 by adding a check on the state of the comments (open or closed) and the type of comment (pingback, trackback, etc ...). For example inserting:
1 2 3 4 5 6 7 | ( 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}?> |
Changing the file header.php
e jqr2c_quote() . The links we have included in the file comments.php call Javascript two functions, in this case jqr2c_reply() and jqr2c_quote() . Let's go then to incorporate those features in the header of the page, defined in the file header.php . , ed inseriamo le seguenti righe di codice: We edit this file and posizioniamoci before the closing tag of the head or before the function call WordPress wp_header() , and insert the following lines of code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <? Php / ** * Insert style and script if we are viewing * A single post and comments are open * / is_single ( ) && comments_open ( ) ) { ?> if (is_single () && comments_open ()) {?> <style type="text/css"> / * _____________ Here we can define our styles * / div.jqr2c_ul {margin: 8px 30px 0 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 , that's all it takes! Otherwise you can add these lines to the previous code after if (is_single() && comments_open()) :
1 2 3 4 5 | is_single ( ) && comments_open ( ) ) { ?> if (is_single () && comments_open ()) {?> / / Include jQuery via Google Ajax API Library "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> / / ... the rest identical ... |
The two scripts include jQuery using the Google explained Google AJAX Library API: a turning point for developers
Great guide, as always!
@ Camu:
But why bother jQuery (with all the weight that entails, although minimum) when you can do everything by hand with a simple JS?
By the way here from you on Firefox 3.0.3 if the textarea has already "had" a focus on buttons do not work ..
@ Napolux:
It can be useful if, as in my case, already using jQuery for other reasons. However, it is true that you can make it through a "simple" Javascript, but it is always useful to exploit the existing frame-work (jQuery, prototype.js, Dojo, etc ...) more than anything else because they guarantee a cross-browser compatibility is not always easy to implement (not in this case).
@ Napolux:
To me, as I understand it, does not it ...? However, it could be a worm fixare
First of all I want to thank you for the review of the plugin that currently offers also the possibility to move between comments, in addition to the functionality of Units and Reply.
Unfortunately, although I have already recommended several times by others, I have not yet reported (along with others I've made) to the repository of WordPress.org.
I'll do it as soon as possible
With regard to the proposed solution is by far the best if you are already using jQuery, the only handicap is that it seems to me that does not allow to quote a partial selection of the text.
For those interested in an alternative solution using pure javascript I beg to report that the first article I wrote some time ago on similar subject and from which then (as a result of requests from many readers) was born the implementation of the plugin:
A procedure for automatically dimension the comments in a post
The procedure also allows the partial quoting the text and is cross-browser.
Greetings to Giovan Battista with whom I share not only a passion for computer science and programming (I am also father of twins
)
@ Christian: You're right on disability in the selection, deliberately avoided, because I had a goal, "teaching" and / or descriptive, not superseding of your great Plugin
I agree about the passion for programming and the "fatigue" to grow twins
If you have some ideas for a new WordPress Plugin I would like to cooperate with you, if you wish!
Greetings and see you soon
@ Napolux:
The problem is in the use of the method
text()in jQuery. This works as long as you do not enter a new content. Better to use the formattr('value')@ Giovan Battista Fazioli:
I guessed
The thing that would not make me a great pleasure; definitely take advantage of your preparation and expertise in
@ Cristiano: see jQuery reply to comment
@ Giovan Battista Fazioli:
I have already "seen" and "verified" by the referrer
I finally found the time to create me an account on the WordPress repository and to refer the plugin: I do not know how long it will take them to approve it
If it will not take much time, and then recommending the others who have already achieved.
WordPress: how to write a reply to comment using jQuery ...
Cristiano Until recently released a useful Plugin for WordPress able to add two links for every comment in a post (maybe you have one installed similar, as in the directory WordPress.org I beamed a couple, however being ...
Hello you are very good ... Excellent guide!
Congratulations
I anke me a blog ==> If you go visit it:
PanHack-Blog
I love those who write "anke"
just for that alone I will never visit your blog, my dear PanHack!
@ Camu:
Giovan Battista Sorry, I woke up a bit 'sour this morning
Excellent guide
Shame on me does not work ... in the sense that I post everything but I only generates a
a little help?