WordPress: comment écrire un réponse à un commentaire en utilisant jQuery

Récemment Cristiano Up a publié un plugin utile pour WordPress qui peuvent Ajoute deux liens à chaque commentaire dans un post (peut-être vous avez installé un semblable, puisque dans le répertoire que je poutres WordPress.org un couple, mais étant un logiciel en italien serait le cas d'honorer l'excellent travail accompli par Christian). Ces liens (réponse et actions), de rencontrer et / ou de citer l'auteur d'un commentaire en effectuant la tâche fastidieuse d'insérer le signe arobase (@) pour indiquer à qui il est adressé. Dans ce tutoriel, je vais montrer - pour les moyennes et les utilisateurs expérimentés - la façon dont ces deux caractéristiques en y ajoutant "la main", sans recourir à l'installation de tous les plugins. Aussi exploiter les capacités de jQuery pour la partie JavaScript. La technique que je présente est le même que j'ai utilisé pour introduire cette fonctionnalité dans ce blog.

Note: L'utilisation d'un plugin est la meilleure solution pour ceux qui tendent à modifier fréquemment votre modèle de WordPress, ou tout au moins, a des plans pour mettre en œuvre. Ce tutoriel est seulement de montrer comment effectuer des interventions ciblées dans le code de WordPress et est dédié aux curieux.

Editez le fichier comments.php

Le premier changement que nous faisons est d'insérer le lien «Répondre» et «actions» dans chaque commentaire. Pour ce faire nous éditons le fichier comments.php trouve dans le dossier de notre thème. Ce fichier contient toutes les instructions qui s'affichent les commentaires à la fin d'un poste. La section que nous sommes concernés (qui peut varier légèrement d'un thème à) est la création de boucles à travers les commentaires, identifié par:

1
2
3
4
5
( $comments as $comment ) : ?> <PHP foreach ($ comments as $ comment):?>
?> "> <Li id = "comment-<? Php comment_id ()?>">
/ / ...
</ Li>
; /* end for each comment */ ?> <? Endforeach php / * fin de chaque commentaire * /?>

Dans une telle boucle autour d'une balise de commentaire unique est contenue dans li . , possiamo inserire i nostri link, racchiudendoli in un div e impostando alcune classi che ci saranno utili per definirne più avanti il layout: Immédiatement après la balise d'ouverture li , ou juste avant la balise fermante li , nous pouvons utiliser nos liens, les enfermant dans un div et la mise en certaines classes qui nous aidera à définir la disposition ci-dessous:

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 ()?>')"> Répondre </ a> <a href =? "Javascript: jqr2c_quote ('? Comment-<Php comment_id ()?>' ) "> Citer </ a>
</ Div>

Remarque: nous pouvons améliorer notre code en y ajoutant un contrôle sur l'état des commentaires (ouvert ou fermé) et le type de commentaire (pingbacks, trackbacks, etc ...). Par exemple, en entrant:

1
2
3
4
5
6
7
( comments_open ( ) && <? Php if (comments_open () & &
comment_type != "trackback" && $ Commentaire -> comment_type = "trackback" & &
comment_type != "pingback" ) { ?> Commentaire $ -!?> 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 ()?>')"> Répondre </ a> <a href =? "Javascript: jqr2c_quote ('? Comment-<Php comment_id ()?>' ) "> Citer </ a>
</ Div>
?> <? Php}?>

Editez le fichier header.php

e jqr2c_quote() . Les liens que nous avons le mettre dans votre comments.php appeler deux fonctions JavaScript, dans ce cas jqr2c_reply() et jqr2c_quote() . Partons alors de mettre ces fonctions sur la tête de la page, définie dans le fichier header.php . , ed inseriamo le seguenti righe di codice: Voyons éditer ce fichier et posizioniamoci avant la balise fermante de l' head ou le premier appel à la WordPress wp_header() , et insérer les lignes de code suivante:

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
/ **
* Insérez le style et l'écriture si nous sommes visualisation
* Un seul poste et les commentaires sont ouverts
* /
is_single ( ) && comments_open ( ) ) { ?> if (is_single () & & comments_open ()) {?>
<style type="text/css">
/ * Ici, nous définissons notre _____________ styles * /
div.jqr2c_ul {margin: 0 30px 400px 8px}
/ * Etc ... * /
</ Style>
<script type="text/javascript">
<!--//
Fonction jqr2c_reply (id) {
Auto var = jQuery (id 'li #' +) enfants ('cite') text ()..;
jQuery ('# comment textarea') texte («<b> @ '+ Auto +" </ b >:'). focus ().;
}
Fonction jqr2c_quote (id) {
Auto var = jQuery (id 'li #' +) enfants ('cite') text ()..;
var c = jQuery (id 'li #' +) enfants ('p') text ()..;
.. jQuery ('# comment textarea') texte («<b> @ '+ Auto +" </ b>: \ n blockquote' c + + "</ blockquote> \ n") focus ();
}
//-->
</ Script>
?> <? Php}?>

Si votre blog, comme dans mon cas, utilise déjà jQuery , tout cela est qu'il vous faut! Sinon, vous pouvez ajouter ces lignes dans le code précédent après if (is_single() && comments_open()) :

1
2
3
4
5
is_single ( ) && comments_open ( ) ) { ?> if (is_single () & & comments_open ()) {?>
/ / Inclure le jQuery Ajax Library API Google
"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. Charge ("jquery", "1.2.6") </ script>
/ / ... même que le reste ...

Les deux scripts inclure jQuery expliqué via le Google API Google AJAX Library: un tournant pour les développeurs

19 commentaires pour "WordPress: comment écrire un réponse à un commentaire en utilisant jQuery"

  1. 3 octobre 2008 camu :

    Excellent guide, comme toujours!

  2. 3 octobre 2008 Napolux :

    Mais pourquoi s'embêter jQuery (avec tout le poids impliqués, bien que moins) quand vous pouvez tout faire à la main avec JS simple?

  3. 3 octobre 2008 Napolux :

    Par ici, la façon de vous sur Firefox 3.0.3 lorsque le textarea a déjà "eu" un accent sur les boutons ne fonctionnent pas ..

  4. 3 octobre 2008 Giovambattista Fazioli :

    @ Napolux:

    Mais pourquoi s'embêter jQuery (avec tout le poids impliqués, bien que moins) quand vous pouvez tout faire à la main avec JS simple?

    Il peut être utile si, comme moi, déjà l'utilisation de jQuery pour d'autres raisons. Cependant, il est vrai que vous pouvez y parvenir grâce à une «simple» JavaScript, mais il est toujours utile d'exploiter l'actuel cadre de travail (jquery, prototype.js, dojo, etc ...) plus qu'autre chose, car elle assure une compatibilité cross-browser n'est pas toujours facile à mettre en œuvre (pas dans ce cas).

  5. 3 octobre 2008 Giovambattista Fazioli :

    @ Napolux:

    Par ici, la façon de vous sur Firefox 3.0.3 lorsque le textarea a déjà "eu" un accent sur les boutons ne fonctionnent pas ..

    Pour moi, si je comprends bien, ce n'est pas ...? Toutefois, il pourrait être un ver fixare : D

  6. 4 octobre 2008 Christian :

    D'abord je tiens à vous remercier beaucoup pour la révision de la plugins qui offre actuellement la possibilité de se déplacer entre les commentaires, en plus de la fonctionnalité de devis et de réponse.
    Malheureusement, bien que j'ai été informé à plusieurs reprises par d'autres, je n'ai pas encore été signalés (avec d'autres que j'ai fait) pour le référentiel de WordPress.org.
    Je vais faire dès que possible ;-)

    En ce qui concerne la solution proposée est certainement la meilleure si vous utilisez déjà jQuery, le seul handicap est qu'il me semble que ne permet pas une sélection partielle du texte de cote.

    Pour ceux qui s'intéressent à une solution de rechange en utilisant javascript pur, je tiens à souligner le premier article que j'ai écrit il ya quelque temps sur le même sujet et qui alors (à la suite de demandes de nombreux lecteurs) venu avec la mise en oeuvre du plugin:

    Une procédure pour automatiquement citer les commentaires dans un message

    La procédure permet également citant partielle, des textes et est multi-navigateur.

    Meilleurs vœux à Giovambattista avec qui je partage non seulement une passion pour l'informatique et la programmation (je suis aussi le père de jumeaux :-) )

  7. 6 octobre 2008 Giovambattista Fazioli :

    @ Christian: tu as raison sur le handicap dans la sélection, intentionnellement évité, comme je l'avais un but "éducatif" et / ou descriptive, et non remplacer fonctionnement de votre plugin grande : D
    Je suis d'accord avec la passion pour la programmation et le «dur» de croître jumeaux : D: D
    Si vous avez des idées pour un nouveau plugin WordPress Je voudrais travailler avec vous, si vous le souhaitez!
    Salutations et à bientôt

  8. 6 octobre 2008 Giovambattista Fazioli :

    @ Napolux:

    Par ici, la façon de vous sur Firefox 3.0.3 lorsque le textarea a déjà "eu" un accent sur les boutons ne fonctionnent pas ..

    Le problème est l'utilisation de la méthode text() de jQuery. Cela fonctionne tant qu'il n'y nouveau contenu ajouté. Mieux vaut utiliser le formulaire attr('value')

  9. 6 octobre 2008 Christian :

    @ Giovambattista Fazioli:

    J'avais un objectif "pédagogique" et / ou une description et non de remplacer le fonctionnement de votre plugin grande

    J'ai senti ;-)

    Si vous avez des idées pour un nouveau plugin WordPress Je voudrais travailler avec vous, si vous le souhaitez!

    Que ne pouvait-vous me faire un grand plaisir; absolument profiter de votre préparation et d'expertise dans :-)

  10. 6 octobre 2008 Christian :

    @ Giovambattista Fazioli:
    J'ai déjà «vu» et «vérifiées» par le référent :-)
    J'ai finalement trouvé le temps de me créer un compte sur le référentiel de WordPress et de renvoyer le plugin: Je ne sais pas combien de temps il leur faudra pour l'approuver ;-)
    Si elle ne prend pas beaucoup de temps, alors le signaler aux autres que j'ai fait.

  11. 9 octobre 2008 Leonaut.com:

    WordPress: comment écrire un réponse à un commentaire en utilisant jQuery ...

    Jusqu'à récemment, Christian a sorti un plugin pour WordPress utiles qui peuvent Ajoute deux liens à chaque commentaire dans un post (peut-être vous avez installé un semblable, puisque dans le répertoire que je poutres WordPress.org un couple, mais étant ...

  12. 14 décembre 2008 PanHack :

    Bonjour vous êtes très bon ... très bon guide!

    Compliments ;)

    J'ai un blogue Anke ==> Si vous devez visiter ce site:

    PanHack-Blog

  13. 15 décembre 2008 camu :

    J'aime les gens qui écrivent "Anke" :) seulement pour ce que je n'irai jamais à visiter votre blog, mon PanHack cher!

  14. 15 décembre 2008 Giovambattista Fazioli :

    @ Camu:

    J'aime les gens qui écrivent "Anke" juste pour que je n'aurai jamais aller visiter votre blog, mon PanHack cher!

    :)

  15. 15 décembre 2008 camu :

    Giovambattista Désolé, je me suis réveillé un acide «peu ce matin : D

  16. 9 juin 2010 MiniMAC:

    Merde ... Je ne travaille pas dans le sens que je poste tout, mais je ne génère un

    1
    <b> @ </ b>

    un peu d'aide? :)

Laisser un commentaire

XHTML TAG PERMIS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> CODE D'INSERTION:
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL 


Arrêtez SOPA