WordPress: come scrivere un reply to comment usando jQuery

Recentemente Cristiano Fino ha rilasciato un utile Plugin per WordPress in grado di aggiugere due link ad ogni commento di un post (forse ne avete uno simile installato, visto che nella directory di WordPress.org ne ho travati un paio, tuttavia essendo un software italiano sarebbe il caso di onorare l’ottimo lavoro fatto da Cristiano). Questi Link (reply & quote) permettono di rispondere e/o quotare l’autore di un commento, eseguendo quella noiosa operazione di inserire il carattere at (@) per indicare a chi ci si rivolge. In questo tutorial voglio illustrare – per gli utenti medio-esperti – il modo di aggiugere queste due funzionalità “a mano”, senza ricorrere all’istallazione di nessun Plugin. Inoltre sfrutterò le capacità di jQuery per la parte in Javascript. La tecnica che espongo è la medesima che ho usato per introdurre questa funzionalità in questo blog.

Nota: l’uso di un plugin è la miglior soluzione per chi tende a modificare spesso il proprio template WordPress o, al limite, ha in previsione di farlo. Questo tutorial vuole solo mostrare come eseguire interventi mirati all’interno del codice WordPress ed è dedicato ai più curiosi.

Modifica del file comments.php

La prima modifica che apportiamo è quella di inserire i link “reply” e “quote” all’interno di ogni commento. Per fare questo editiamo il file comments.php situato nella cartella del nostro tema. Questo file contiene tutte le istruzioni che consentono di visualizzare i commenti alla fine di un post. La sezione che ci interessa (che può variare leggermente da tema a tema) è il loop di creazione dei vari commenti, riconoscibile da:

1
2
3
4
5
<?php foreach ($comments as $comment) : ?>
<li id="comment-<?php comment_ID() ?>">
// ...
</li>
<?php endforeach; /* end for each comment */ ?>

In un loop di questo tipo tutto un singolo commento è racchiuso nei tag li. Subito dopo l’apertura del tag li, o subito prima della chiusura del tag li, possiamo inserire i nostri link, racchiudendoli in un div e impostando alcune classi che ci saranno utili per definirne più avanti il layout:

1
2
3
<div class="jqr2c_ul">
<a href="javascript:jqr2c_reply('comment-<?php comment_ID() ?>')">Rispondi</a> <a href="javascript:jqr2c_quote('comment-<?php comment_ID() ?>')">Quota</a>
</div>

Nota:possiamo migliorare il nostro codice aggiungendo anche un controllo sullo stato dei commenti (aperti o chiusi) e sulla tipologia del commento (pingback, trackback, etc…). Ad esempio inserendo:

1
2
3
4
5
6
7
<?php if ( comments_open() &&
    $comment->comment_type != "trackback" &&
    $comment->comment_type != "pingback"  ) { ?>
<div class="jqr2c_ul">
<a href="javascript:jqr2c_reply('comment-<?php comment_ID() ?>')">Rispondi</a> <a href="javascript:jqr2c_quote('comment-<?php comment_ID() ?>')">Quota</a>
</div>
<?php } ?>

Modifica del file header.php

I link che abbiamo inserito nel file comments.php chiamano due funzioni Javascript, in questo caso jqr2c_reply() e jqr2c_quote(). Andiamo quindi ad inserire queste funzioni nell’header della pagina, definito nel file header.php. Editiamo questo file e posizioniamoci prima della chiusura del tag head o prima della chiamata alla funzione WordPress wp_header(), ed inseriamo le seguenti righe di codice:

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
/**
 * inserisce stile e script solo se stiamo visualizzando
 * un singolo post ed i commenti sono aperti
 */
if (is_single() && comments_open()) {    ?>
<style type="text/css">
/* _____________ qui possiamo definire i nostri stili */
div.jqr2c_ul {margin:8px 0 30px 400px}
/* etc... */
</style>
<script type="text/javascript">
    <!--//
    function jqr2c_reply(id) {
        var aut = jQuery('li#'+id).children('cite').text();
        jQuery('textarea#comment').text('<b>@'+aut+'</b>: ').focus();    
    }
    function jqr2c_quote(id) {
        var aut = 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 } ?>

Se il vostro blog, come nel mio caso, già usa jQuery, questo è tutto quello che serve! Altrimenti potete aggiungere queste righe al codice precedente, dopo if (is_single() && comments_open()):

1
2
3
4
5
if (is_single() && comments_open()) { ?>
// include jQuery tramite Google Ajax Library API
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6")</script>
// ... il resto identico ...

I due script includono jQuery tramite il servizio Google spiegato in Google AJAX Library API: una svolta per gli sviluppatori

20 commenti a: “ ”

  1. 03 ott, 2008 camu:

    Ottima guida, come sempre!

    RispondiQuota
  2. 03 ott, 2008 Giovambattista Fazioli:

    @camu: :D

    RispondiQuota
  3. 03 ott, 2008 Napolux:

    Ma perché scomodare jQuery (con tutto il peso che comporta, nonostante sia minimo) quando si può fare tutto a mano con del semplice JS?

    RispondiQuota
  4. 03 ott, 2008 Napolux:

    Tra l’altro qui da te su Firefox 3.0.3 se la textarea ha già “avuto” un focus i bottoni non funzionano..

    RispondiQuota
  5. 03 ott, 2008 Giovambattista Fazioli:

    @Napolux:

    Ma perché scomodare jQuery (con tutto il peso che comporta, nonostante sia minimo) quando si può fare tutto a mano con del semplice JS?

    Può risultare utile se, come nel mio caso, già si usa jQuery per altri motivi. Tuttavia è vero che è possibile realizzarlo tramite un “semplice” Javascript, ma è sempre utile sfruttare i frame-work esistenti (jQuery, prototype.js, Dojo, etc…) più che altro perchè garantiscono una compatibilità cross-browser non sempre facile da implementare (non in questo caso).

    RispondiQuota
  6. 03 ott, 2008 Giovambattista Fazioli:

    @Napolux:

    Tra l’altro qui da te su Firefox 3.0.3 se la textarea ha già “avuto” un focus i bottoni non funzionano..

    A me, se ho capito bene, non lo fa… ? Comunque potrebbe essere un baco da fixare :D

    RispondiQuota
  7. 04 ott, 2008 Cristiano:

    Anzitutto voglio ringraziare di cuore per la recensione del plugin che attualmente offre anche la possibilità di muoversi tra i commenti, oltre alle funzionalità di Quote e Reply.
    Purtroppo, nonostante mi sia già stato consigliato più volte anche da altri, non lo ho ancora segnalato (insieme agli altri che ho realizzato) al repository di WordPress.org.
    Lo farò al più presto ;-)

    Per quanto riguarda la soluzione proposta è senz’altro la migliore se già si utilizza jQuery, l’unico handicap è che mi sembra che non consenta di quotare una selezione parziale del testo.

    Per chi fosse interessato ad una soluzione alternativa usando javascript puro mi permetto di segnalare il primo articolo che avevo scritto tempo fa su argomento analogo e dal quale poi (in seguito a richieste di molti lettori) è nata l’implementazione del plugin:

    Una procedura per quotare automaticamente i commenti in un post

    La procedura descritta permette anche il quoting parziale del testo ed è cross-browser.

    Un caro saluto a Giovambattista con il quale credo di condividere non solo la passione per l’informatica e la programmazione (sono anch’io padre di due gemelli :-) )

    RispondiQuota
  8. 06 ott, 2008 Giovambattista Fazioli:

    @Cristiano: hai ragione sull’handicap della selezione, evitato intenzionalmente, in quanto avevo un obiettivo “didattico” e/o descrittivo e non di sostituizione del tuo ottimo Plugin :D
    Concordo sulla passione per la programmazione e la “fatica” a crescere due gemelli :D :D
    Se hai qualche idea per un nuovo Plugin WordPress mi piacerebbe collaborare con te, se lo desideri!
    Un saluto e a presto

    RispondiQuota
  9. 06 ott, 2008 Giovambattista Fazioli:

    @Napolux:

    Tra l’altro qui da te su Firefox 3.0.3 se la textarea ha già “avuto” un focus i bottoni non funzionano..

    Il problema è nell’uso del metodo text() di jQuery. Questo funziona sino a quando non viene inserito un nuovo contenuto. Meglio usare la forma attr('value')

    RispondiQuota
  10. 06 ott, 2008 Cristiano:

    @Giovambattista Fazioli:

    avevo un obiettivo “didattico” e/o descrittivo e non di sostituizione del tuo ottimo Plugin

    Avevo intuito ;-)

    Se hai qualche idea per un nuovo Plugin WordPress mi piacerebbe collaborare con te, se lo desideri!

    La cosa non potrebbe che farmi un immenso piacere; approfittero sicuramente della tua preparazione e competenza in materia :-)

    RispondiQuota
  11. 06 ott, 2008 Giovambattista Fazioli:

    @Cristiano: vedi jQuery reply to comment

    RispondiQuota
  12. 06 ott, 2008 Cristiano:

    @Giovambattista Fazioli:
    Ho già “visto” e “verificato” dai referrer :-)
    Finalmente ho trovato il tempo di crearmi un account sul repository di WordPress e di sottoporre il plugin: non so quanto tempo ci metteranno per approvarlo ;-)
    Se non ci vorrà molto tempo, poi segnalerò anche gli altri che ho già realizzato.

    RispondiQuota
  13. 09 ott, 2008 Leonaut.com:

    WordPress: come scrivere un reply to comment usando jQuery…

    Recentemente Cristiano Fino ha rilasciato un utile Plugin per WordPress in grado di aggiugere due link ad ogni commento di un post (forse ne avete uno simile installato, visto che nella directory di WordPress.org ne ho travati un paio, tuttavia essendo…

  14. 14 dic, 2008 PanHack:

    Ciao sei molto bravo…Ottime guide !!!

    Complimenti ;)

    Ho anke io un blog ==> Se ti va visitalo :

    PanHack-Blog

    RispondiQuota
  15. 15 dic, 2008 camu:

    adoro quelli che scrivono “anke” :) solo solo per questo non andrò mai a visitare il tuo blog, caro il mio PanHack!

    RispondiQuota
  16. 15 dic, 2008 Giovambattista Fazioli:

    @camu:

    adoro quelli che scrivono “anke” solo solo per questo non andrò mai a visitare il tuo blog, caro il mio PanHack!

    :)

    RispondiQuota
  17. 15 dic, 2008 camu:

    Scusa Giovambattista, mi sono svegliato un po’ acido stamattina :D

    RispondiQuota
  18. 29 mar, 2009 Realizzazione Siti:

    Ottima guida

    RispondiQuota
  19. 09 giu, 2010 miniMAC:

    Mannaggia a me non funziona… nel senso che inserisco tutto ma mi genera solo un

    1
    <b>@</b>

    un aiutino? :)

    RispondiQuota
  20. 24 gen, 2013 http://furnacecincinn.livejournal.com:

    Hi, I think your website might be having browser compatibility issues.
    When I look at your website in Firefox, it looks fine
    but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, amazing blog!

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<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