Wordpress: comment écrire une réponse à un commentaire en utilisant jQuery
Vendredi, Octobre 3rd, 2008Récemment, même le Christ a publié un plug-in utile pour Wordpress qui peut ajouter deux liens vers chaque commentaire dans un post (peut-être que vous avez installé quelque chose de similaire, comme dans le répertoire, je ficelé il Wordpress.org un couple, mais comme un logiciel en italien serait l'événement à l'honneur l'excellent travail accompli par Christian). Ces liens (réponse & cite), rencontrer et / ou une citation de l'auteur d'un commentaire en effectuant l'opération ennuyeuse pour insérer le signe arobase (@) pour indiquer à qui ils s'adressent. Dans ce tutoriel, je vais montrer - pour l'utilisateur moyen-experts - comment ajouter ces deux caractéristiques à la main, sans recourir à l'installation de l'un des Plugin. Également exploiter les capacités de jQuery pour la partie en Javascript. La technique que je soulève 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 leur WordPress modèle ou, au moins, a, en prévision de le faire. Ce tutoriel va montrer seulement comment pratiquer des interventions ciblées dans le code de Wordpress et est dédié aux plus curieux.
Modifier le comments.php
Le premier changement que nous faisons est de mettre le lien «Répondre» et «unités» au sein de chaque commentaire. Pour ce faire, éditez le comments.php fichier dans le dossier racine de notre thème. Ce fichier contient toutes les instructions qui vous permettent d'afficher les commentaires à la fin d'un poste. La section qui nous concerne (ce qui mai varier légèrement d'un thème à thème) est la boucle de créer différentes observations, identifié par:
- ( $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 * /?>
Dans une telle boucle autour d'une balise de commentaire unique est enfermé dans li Immédiatement après la balise d'ouverture li ou immédiatement avant la balise de clôture li nous pouvons utiliser nos liens, l'enfermant dans un div et définir certaines classes qui nous aidera à définir plus précisément la mise en page:
- <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-<? ()?>' comment_ID php ) "> Partager </ a>
- </ Div>
Note: nous pouvons améliorer notre code également d'ajouter un contrôle sur l'état des entrées (ouvert ou fermé) et le type de commentaire (Pingback, trackback, etc ...). Par exemple la saisie:
- ( 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-<? ()?>' comment_ID php ) "> Partager </ a>
- </ Div>
- ?> <? Php)?>
Modifier le header.php
Les liens que nous mettre dans votre comments.php appelé deux fonctions JavaScript, dans ce jqr2c_reply() cas jqr2c_reply() et jqr2c_quote() Nous allons donc inclure ces fonctions dans l'en-tête de la page, défini dans le header.php Modifiez ce fichier et posizioniamoci avant de fermer la head tag ou avant l'appel à wp_header() WordPress wp_header() et insérer les lignes de code suivantes:
- <? Php
- / **
- * Insérer le style et le script que si nous voyez
- * Un seul poste et les commentaires sont ouverts
- * /
- is_single ( ) && comments_open ( ) ) { ?> if (is_single () & & comments_open ()) (?>
- <style type="text/css">
- / * _____________ Nous pouvons définir nos styles ici * /
- div.jqr2c_ul (margin: 8px 0 30px 400px)
- / * Etc ... * /
- </ Style>
- <script type="text/javascript">
- <!--//
- jqr2c_reply function (id) (
- aut var = jQuery ( 'li #' + id). enfants ( «Cité»). text ();
- ( 'textarea jQuery # comment »). text (' <b> @ '+ aut +' </ b >:'). focus ();
- )
- jqr2c_quote function (id) (
- aut var = jQuery ( 'li #' + id). enfants ( «Cité»). text ();
- var c = jQuery ( 'li #' + id). enfants ( 'p'). text ();
- ( 'textarea jQuery # comment »). text (' <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 vous faut! Sinon, vous pouvez ajouter ces lignes au code précédent après if (is_single() && comments_open())
- is_single ( ) && comments_open ( ) ) { ?> if (is_single () & & comments_open ()) (?>
- / / JQuery Inclure via l'API Google Ajax Library la
- "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>
- / / ... par ailleurs identiques ...
Les deux scripts include jQuery par l'intermédiaire du service Google expliqué dans Google AJAX API Bibliothèque: un tournant pour les développeurs
Related Post
Chargement ... 
Excellent guide, comme toujours!
@ Camu:
Mais pourquoi jQuery Trouble (avec leur poids, même si un minimum) quand vous pouvez tout faire à la main avec JS simple?
Entre autres choses ici de vous à propos de Firefox 3.0.3, si la zone de texte «a déjà eu« un accent boutons ne fonctionnent pas ..
@ Napolux:
Mai être utile si, comme dans mon cas qui utilisent déjà jQuery pour d'autres raisons. Toutefois, il est vrai que vous pouvez y parvenir grâce à un «simple» Javascript, mais il est toujours utile d'exploiter les cadres existants de travail (jQuery, Prototype.js, Dojo, etc ...) en raison principalement d'assurer la compatibilité cross-browser n'est pas toujours facile à mettre en oeuvre (pas dans ce cas).
@ Napolux:
Pour moi, si je comprends bien, il ne fait pas ... ? Toutefois, il pourrait être un ver fixare
D'abord, je tiens à vous remercier beaucoup pour l'examen du greffon qui offre désormais la possibilité de se déplacer entre les commentaires, en plus des caractéristiques des devis et réponse.
Malheureusement, bien que j'ai été informé à plusieurs reprises par d'autres, je n'ai pas encore été rapportés (avec d'autres que j'ai compris) le dépôt de WordPress.org.
Je vais en faire bientôt
En ce qui concerne la solution proposée est certainement le meilleur si vous utilisez déjà jQuery, son seul handicap est qu'il me semble qu'il ne permet pas de liste d'une sélection partielle du texte.
Pour ceux intéressés par une solution alternative en utilisant JavaScript pur, je rappelle le premier article que j'ai écrit récemment sur des sujets connexes, et d'où ensuite (après de nombreuses demandes de lecteurs) ont proposé la mise en oeuvre du plugin:
Une procédure automatique a cité des commentaires dans un message
La procédure permet également à la partie qui cite le texte et est multi-navigateur.
Un salut chaleureux à Giovambattista avec qui je partage non seulement la passion pour l'informatique et la programmation (moi aussi je suis le père de jumeaux
)
@ Christian: tu as raison sur le handicap dans la sélection, a délibérément évité, parce que j'avais un but, un «enseignement» et / ou descriptive, et ne remplacera pas le fonctionnement de votre plugin grande
Convenir d'une passion pour la programmation et "difficile" d'augmenter les jumeaux
Si vous avez une idée pour un nouveau plugin Wordpress j'aimerais travailler avec vous si vous le souhaitez!
Salutations et à bientôt
@ Napolux:
Le problème est l'utilisation du
text()la méthodetext()de jQuery. Cela fonctionne jusqu'à ce qu'il y est ajouté un nouveau contenu. Mieux vaut utiliserattr('value')formeattr('value')@ Giovambattista Fazioli:
J'ai deviné
La chose ne pouvait me donner un immense plaisir, sans aucun doute profiter de vos compétences et connaissances dans
@ Christian: Voir la réponse de jQuery pour commenter
@ Giovambattista Fazioli:
J'ai déjà "vu" et "vérifiée" par le Parrain
J'ai finalement trouvé le temps de me créer un compte sur le référentiel et soumettre le plugin WordPress: Je ne sais pas ce qu'il aura à approuver
Si cela ne prendra pas beaucoup de temps, alors que d'autres suggèrent aussi que j'ai déjà réalisé.
Wordpress: comment écrire une réponse à un commentaire en utilisant jQuery ...
Cristiano Jusqu'à tout récemment publié un plugin utile pour Wordpress qui peut ajouter deux liens vers chaque commentaire dans un post (peut-être vous avez quelque chose de similaire installé, comme dans l'annuaire, j'ai ficelé il Wordpress.org un couple, mais comme ...
Bonjour vous êtes bien bon ... guides excellent!
Félicitations
J'ai un blog, je anke ==> Si vous allez Visitagao:
PanHack-Blog
Les gens aiment qui écrivent "Anke"
juste pour que je n'irai jamais de visiter votre blog, mon cher PanHack!
@ Camu:
Désolé Giovambattista, je me suis réveillé un peu acide, ce matin
Excellent guide