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

Récemment Cristiano Up a publié un plugin utile pour WordPress en mesure d'ajouter deux liens pour chaque commentaire dans un post (peut-être que vous avez une installation similaire, comme dans le répertoire WordPress.org je souriais un couple, mais étant un logiciel en italien souhaitez l'événement en l'honneur de l'excellent travail accompli par Cristiano). Ces liens (réponse et action) vous permettent de répondre et / ou de citer l'auteur d'un commentaire, d'effectuer l'opération fastidieuse pour insérer le signe arobase (@) pour indiquer à qui il est adressé. Dans ce tutoriel, je tiens à expliquer - pour les utilisateurs à moyen experts - comment ajouter ces deux fonctions "à la main", sans avoir recours à l'installation d'un plugin. En outre sfrutterò fonctionnalités jQuery pour la partie en Javascript. La technique que je présente est la 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 ont tendance à changer fréquemment votre modèle WordPress ou, au moins, envisage de le faire. Ce tutoriel veut juste montrer comment effectuer des interventions ciblées dans le code WordPress et est dédié aux plus curieux.

Modifier votre comments.php

Le premier changement que nous faisons est d'insérer le lien «réponse» et «citation» au sein de chaque commentaire. Pour ce faire, éditez le fichier comments.php situé dans le dossier de notre thème. Ce fichier contient toutes les instructions qui affichent les commentaires à la fin d'un poste. La section que nous (qui peut varier légèrement d'un thème à) des intérêts est la boucle en créant les divers commentaires, reconnaissables par:

1
2
3
4
5
( $comments as $comment ) : ?> <? Php foreach ($ commentaires que $ comment):>
?> "> <Li id = "comment-<? Php COMMENT_ID ()?>">
/ / ...
</ Li>
; /* end for each comment */ ?> <Php endforeach;? / * Fin pour chaque commentaire * />

Dans une boucle de ce type autour d'un seul commentaire est enfermé dans des balises 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 d' li , ou juste avant la balise fermante li , nous pouvons utiliser nos liens, les enfermant dans un div et fixer quelques classes qui nous aideront à mieux définir la mise en page:

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:'?? Comment-<Php COMMENT_ID ()> 'jqr2c_quote ( ) "> Share </ a>
</ Div>

Note: 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 (pingback, trackback, etc ...). Par exemple en écrivant:

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:'?? Comment-<Php COMMENT_ID ()> 'jqr2c_quote ( ) "> Share </ a>
</ Div>
?> <? Php}?>

Modification des header.php de fichiers

e jqr2c_quote() . Les liens que nous avons inclus dans le fichier comments.php appel JavaScript deux fonctions, dans ce cas jqr2c_reply() et jqr2c_quote() . Passons ensuite à intégrer ces fonctions dans l'en-tête de la page, définie dans le fichier header.php . , ed inseriamo le seguenti righe di codice: Nous éditer ce fichier et posizioniamoci avant la balise de fermeture de la head ou avant l'appel de fonction WordPress wp_header() et insérez les lignes de code suivantes:

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 regardons
* Un seul poste et les commentaires sont ouverts
* /
is_single ( ) && comments_open ( ) ) { ?> if (is_single () && comments_open ()) {?>
<style type="text/css">
/ * _____________ Ici, nous pouvons définir nos styles * /
div.jqr2c_ul {margin: 30px 8px 0 400px}
/ *, Etc ... * /
</ Style>
<script type="text/javascript">
<! - / /
fonction jqr2c_reply (id) {
aut. var = jQuery ('li #' + id) enfants («citer») de texte ().;
jQuery ('textarea # comment ») du texte.. (' <b> @ '+ aut +' </ b>: ') focus ();
}
fonction jqr2c_quote (id) {
aut. var = jQuery ('li #' + id) enfants («citer») de texte ().;
var c = jQuery ('li #' + id) enfants ('p') de texte ()..;
jQuery ('textarea # comment') texte ('<b> @' + aut + '</ b>: \ n <blockquote>' + c + '</ blockquote> \ n').. focus ();
}
/ / ->
</ Script>
?> <? Php}?>

Si votre blog, comme dans mon cas, utilise déjà jQuery , c'est tout ce qu'il 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 ()) {?>
/ / JQuery via Google Ajax Library API Inclure
"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>
/ / ... le reste identique ...

Les deux scripts comprennent jQuery en utilisant le expliquée Google Google AJAX API Library: un tournant pour les développeurs

20 commentaires à ""

  1. 3 octobre 2008 camu :

    Grande-guide, comme toujours!

  2. 3 octobre 2008 Napolux :

    Mais pourquoi s'embêter jQuery (avec tout le poids que cela entraîne, bien que minimale) quand vous pouvez tout faire à la main avec un simple JS?

  3. 3 octobre 2008 Napolux :

    Par ailleurs ici de vous sur Firefox 3.0.3 si le textarea a déjà "eu" un accent sur les boutons ne fonctionnent pas ..

  4. 3 octobre 2008 Giovan Battista Fazioli :

    @ Napolux:

    Mais pourquoi s'embêter jQuery (avec tout le poids que cela entraîne, bien que minimale) quand vous pouvez tout faire à la main avec un simple JS?

    Il peut être utile si, comme dans mon cas, déjà l'utilisation de jQuery pour d'autres raisons. Cependant, il est vrai que vous pouvez le faire à travers un Javascript "simple", mais il est toujours utile d'exploiter le cadre plus qu'autre chose existante (jQuery, prototype.js, Dojo, etc ...) car elles garantissent une compatibilité cross-browser n'est pas toujours facile à mettre en œuvre (pas dans ce cas).

  5. 3 octobre 2008 Giovan Battista Fazioli :

    @ Napolux:

    Par ailleurs ici de vous sur Firefox 3.0.3 si le textarea a déjà "eu" un accent sur les boutons ne fonctionnent pas ..

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

  6. 4 octobre 2008 Christian :

    Tout d'abord je tiens à vous remercier pour l'examen du plugin qui offre actuellement la possibilité de se déplacer entre les commentaires, en plus de la fonctionnalité de parts et d'abord répondre.
    Malheureusement, même si je l'ai déjà recommandé à plusieurs reprises par d'autres, je n'ai pas encore publié (avec d'autres que j'ai fait) pour le dépôt de WordPress.org.
    Je le ferai dès que possible ;-)

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

    Pour ceux qui s'intéressent à une solution de rechange à l'aide pur javascript je me permets de signaler que le premier article que j'ai écrit il ya quelque temps sur le sujet similaire et dont ensuite (à la suite de demandes de nombreux lecteurs) est né la mise en œuvre du plugin:

    Une procédure de dimension automatiquement les commentaires dans un message

    La procédure permet également citer la partielle du texte et cross-browser.

    Salutations à Giovan Battista avec qui je partage non seulement une passion pour la science et la programmation informatique (je suis aussi père de jumeaux :-) )

  7. 6 octobre 2008 Giovan Battista Fazioli :

    @ Christian: Vous avez raison sur le handicap dans la sélection, a évité délibérément, parce que j'avais un objectif, «enseignement» et / ou descriptive, ne remplaçant de votre grand Plugin : D
    Je suis d'accord sur la passion pour la programmation et la "fatigue" de croître jumeaux : D: D
    Si vous avez des idées pour un nouveau plugin WordPress Je voudrais coopérer avec vous, si vous le souhaitez!
    Salutations et à bientôt

  8. 6 octobre 2008 Giovan Battista Fazioli :

    @ Napolux:

    Par ailleurs ici de vous sur Firefox 3.0.3 si le textarea a déjà "eu" un accent sur les boutons ne fonctionnent pas ..

    Le problème réside dans l'utilisation de la méthode text() en jQuery. Cela fonctionne aussi longtemps que vous ne saisissez pas de nouveau contenu. Mieux vaut utiliser la forme attr('value')

  9. 6 octobre 2008 Christian :

    @ Giovan Battista Fazioli:

    J'avais un objectif, «enseignement» et / ou descriptive, ne remplaçant de votre grand Plugin

    Je devinais ;-)

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

    La seule chose qui ne me faire un grand plaisir; certainement profiter de votre préparation et d'expertise dans :-)

  10. 6 octobre 2008 Christian :

    @ Giovan Battista Fazioli:
    J'ai déjà «vu» et «vérifié» par le référent :-)
    J'ai enfin trouvé le temps de me créer un compte sur le référentiel WordPress et de renvoyer le plugin: Je ne sais pas combien de temps il leur faudra pour approuver ;-)
    Si cela ne prendra pas beaucoup de temps, et ensuite recommander les autres qui ont déjà obtenus.

  11. 9 octobre 2008 Leonaut.com:

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

    Cristiano Jusqu'à récemment publié un plugin utile pour WordPress en mesure d'ajouter deux liens pour chaque commentaire dans un post (peut-être que vous avez une installation similaire, comme dans le répertoire WordPress.org je souriais un couple, mais étant ...

  12. 14 décembre 2008 PanHack :

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

    Félicitations ;)

    Je me Anke un blog ==> Si vous allez visiter:

    PanHack-Blog

  13. 15 décembre 2008 camu :

    J'aime ceux qui écrivent "Anke" :) juste pour ça que je ne serai jamais visiter votre blog, mon cher PanHack!

  14. 15 décembre 2008 Giovan Battista Fazioli :

    @ Camu:

    J'aime ceux qui écrivent "Anke" juste pour ça que je ne serai jamais visiter votre blog, mon cher PanHack!

    :)

  15. 15 décembre 2008 camu :

    Giovan Battista Désolé, je me suis réveillé un peu aigre ce matin : D

  16. 9 juin 2010 Minimac:

    Honte sur moi ne fonctionne pas ... dans le sens que je poste tout mais je ne génère qu'un

    1
    <b> @ </ b>

    un peu d'aide? :)

  17. 24 janvier 2013 http://furnacecincinn.livejournal.com :

    Salut, Je pense que votre site peut-être avoir des problèmes de compatibilité du navigateur.
    Quand je regarde votre site dans Firefox, il semble bien
    Mais quand l'ouverture dans Internet Explorer, il a un certain chevauchement.
    Je voulais juste vous donner un heads up rapide! Alors que d'autres, blog incroyable!

Laisser un commentaire

TAG XHTML PERMIS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> entrée du code:
 <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