Personalizzare il template dei commenti di WordPress (Parte 2)
La scorsa settimana ci siamo lasciati dopo aver creato la pagina necessaria a visualizzare l’elenco dei commenti presenti su ogni articolo del nostro blog e il relativo form d’inserimento. Per visualizzare l’elenco dei commenti abbiamo utilizzato il template predefinito messo a disposizione dal core di WordPress.
In quest’ultima lezione andremo a vedere come personalizzare la visualizzazione dell’elenco dei commenti in conformità a un nostro template personalizzato.
1. Come personalizzare la visualizzazione dell’elenco dei commenti del blog?
Nella lezione precedente abbiamo visto che richiamando l’elenco dei commenti da mostrare a video mediante la funzione wp_list_comments() è possibile – passando il parametro callback alla funzione in questione – definire il nome di una eventuale funzione da utilizzare per visualizzare l’elenco dei commenti, bypassando in questo modo la funzione predefinita di WordPress atta a svolgere questo compito.
Al momento di richiamare l’elenco dei commenti nel file comments.php, passiamo dunque il parametro callback indicando come valore di questo parametro il nome della funzione che vogliamo utilizzare per mostrare l’elenco dei commenti:
<ol class="commentlist">
<?php
wp_list_comments( array( 'type' => 'comment', 'callback' => 'yiw_comment' ) );
?>
</ol>
Adesso basta creare – all’interno del file functions.php – una nuova funzione denominata yiw_comment() la quale conterrà il template (il codice xHTML per intenderci) da utilizzare per la visualizzazione di ogni singolo commento.
2. Creare la funzione necessaria a personalizzare l’elenco dei commenti
Apriamo il file functions.php del nostro tema e creiamo una nuova funzione denominata yiw_comment(), così come il valore che abbiamo assegnato al parametro callback. Di seguito puoi vedere la funzione creata per la visualizzazione dei commenti del nostro blog:
<?php
function yiw_comment( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment;
?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<div class="author-avatar">
<?php $url = get_bloginfo("template_url").'/images/bg/gravatar.gif'; ?>
<?php echo get_avatar( $comment, 75,$default=$url ); ?>
<?php printf( __( '%s ', 'yiw' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?>
</div><!-- .author-avatar -->
<div class="comment-meta commentmetadata">
<?php if ( $comment->comment_approved == '0' ) : ?>
<em class="moderation">Il tuo commento è in moderazione.</em>
<br />
<?php endif; ?>
<div class="commentDate">
<a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
<?php
/* translators: 1: date, 2: time */
printf( __( '%1$s at %2$s', 'yiw' ), get_comment_date(), get_comment_time() ); ?></a><?php edit_comment_link( __( '(Modifica)', 'yiw' ), ' ' );
?>
</div>
<div class="comment-body"><?php comment_text(); ?></div>
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div><!-- .reply -->
</div><!-- .comment-meta .commentmetadata -->
</li>
<?php
}
?>
Andiamo ad analizzare più nel dettaglio la funzione che abbiamo creato.
Abbiamo visto in precedenza che l’elenco dei commenti è richiamato all’interno di un elenco ordinato:
<ol>
<!-- funzione che richiama l’elenco dei commenti -->
</ol>
2.1 Creare il contenitore di ogni singolo commento
La prima cosa da fare per visualizzare l’elenco dei commenti è mostrare questi ultimi all’interno dell’elemento <li>…</li>.
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<!-- contenuto commento -->
</li>
L’utilizzo della funzione comment_class() serve per inserire in modo automatico una classe che identifica il tipo di commento (commento pari, commento dispari, replica di primo livello, ecc) in modo che l’utente successivamente possa gestirne la presentazione a video nel migliore dei modi mediante l’utilizzo dei fogli di stile.
La funzione comment_ID() invece serve a stampare l’ID univoco del commento interessato.
2.2 Mostrare l’avatar dell’utente che ha lasciato il commento
Dalla versione 2.5 di WordPress è stata introdotta la funzione get_avatar() la quale permette di recuperare e mostrare l’avatar dell’utente che ha lasciato il commento semplicemente passando come parametro l’user ID dell’autore del commento o l’indirizzo email.
La funzione accetta anche altri parametri, come per esempio la dimensione dell’avatar da mostrare (nel nostro caso 75px di altezza e larghezza) e un eventuale url in cui è presente un avatar di default nel caso in cui per qualche motivo non fosse disponibile l’avatar dell’autore del commento.
Infine la funzione get_comment_author_link() visualizza sullo schermo il nome dell’autore del commento facendolo linkare all’url del suo sito web (nel caso in cui questo valore sia stato fornito al momento dell’inserimento del commento).
<div class="author-avatar">
<?php $url = get_bloginfo("template_url").'/images/bg/gravatar.gif'; ?>
<?php echo get_avatar( $comment, 75,$default=$url ); ?>
<?php printf( __( '%s ', 'yiw' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?>
</div><!-- .author-avatar -->
2.3 Mostrare un messaggio in caso di commento in moderazione
Prima di mostrare il contenuto del commento è necessario eseguire un controllo per verificare se il commento è in coda di moderazione o meno e in caso di moderazione mostrare un messaggio che avvisi l’utente.
<?php if ( $comment->comment_approved == '0' ) : ?>
<em class="moderation">Il tuo commento è in moderazione.</em>
<br />
<?php endif; ?>
Il codice sopra dovrebbe essere già di per se abbastanza auto esplicativo.
2.4 Mostrare data e ora d’inserimento del commento
Adesso mostriamo la data e l’ora di inserimento del commento facendo in modo di linkare questi ultimi al contenuto del commento stesso:
<div class="commentDate">
<a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
<?php
/* translators: 1: date, 2: time */
printf( __( '%1$s at %2$s', 'yiw' ), get_comment_date(), get_comment_time() );
?>
</a>
<?php edit_comment_link( __( '(Modifica)', 'yiw' ), ' ' ); ?>
</div>
La funzione get_comment_link() restituisce l’url del commento in questione, mentre le funzione get_comment_date() e get_comment_time() restituiscono nell’ordine la data e l’ora di inserimento del commento.
Infine, mediante la funzione edit_comment_link() visualizziamo un link che permetta la modifica del commento corrente se l’utente è loggato e se possiede i permessi per modificare il commento.
2.5 Mostrare il contenuto del commento
Adesso mostriamo il contenuto vero e proprio del commento utilizzando la funzione comment_text() messa a disposizione da WordPress:
<div class="comment-body"><?php comment_text(); ?></div>
2.6 Mostrare un link che permette la replica diretta al commento
Prima di concludere mostriamo un link che permette all’utente, nel caso in cui questa funzionalità sia abilitata, di replicare direttamente al commento corrente:
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div><!-- .reply -->
Mediante la funzione comment_reply_link() otteniamo il risultato desiderato.
3. Conclusione
A questo punto basterà definire nel foglio di stile del nostro tema le regole necessarie che desideriamo assegnare per la visualizzazione del nostro nuovo template dei commenti. Da questo momento in poi l’elenco dei commenti sarà mostrato secondo il template definito nella funzione che abbiamo appena personalizzato. Sembrava più difficile vero?
In queste lezioni che ti hanno guidato alla realizzazione di un tema per WordPress hai avuto modo di sperimentare l’enorme ed eccellente documentazione ufficiale messa a disposizione dal Team di sviluppo, avrai inoltre notato che realizzare un tema personalizzato per WordPress può essere un’operazione abbastanza semplice se si hanno un minimo di conoscenze di base e tanta buona volontà. Adesso infatti dovresti possedere le conoscenze di base necessarie per la realizzazione del tuo primo template.
Il corso si conclude ufficialmente con questa lezione, mi auguro che sia stato di tuo gradimento e che tu sia riuscito ad ottenere buona parte degli obiettivi che ci eravamo prefissati ad inizio corso.
Ci sarebbero ancora molti altri argomenti da approfondire in merito alla realizzazione e personalizzazione di un tema per WordPress ma credo che gli articoli di un blog non si prestino molto bene per questo genere di attività.
Ho ricevuto tantissime richieste in privato di utenti che mi chiedevano di trattare questo o quell’altro argomento, ovviamente trattare tutto sarebbe impossibile. Ho cercato di prendere le richieste più comuni (come per esempio il passaggio da psd a WordPress) alle quali risponderò con ulteriori approfondimenti all’interno dell’eBook che sto allestendo e che sarà rilasciato molto presto insieme ad un case studio realizzato di sana pianta per l’occasione.
4.Indice degli articoli trattati in questa guida
Per agevolarti la consultazione della guida alla fine di ogni articolo riporterò l’indice comprendente tutti gli argomenti trattati.
- Come Installare WordPress in Locale?
- WordPress: Diamo Uno Sguardo al Pannello di Amministrazione
- Come Creare un Template per WordPress Partendo da Zero?
- WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2)
- Diamo Uno Sguardo al Loop di WordPress
- Aggiungiamo la Sidebar al nostro tema
- WordPress: come rendere dinamici Header e Sidebar del template?
- Gerarchia dei template e loro utilizzo: come creare un template per gli articoli?
- Come Creare Template Personalizzati per le Pagine di WordPress?
- WordPress: predisporre la sidebar per l’uso di widget
- Personalizzare il Template dei Commenti di WordPress (Parte 1) | (Parte 2)
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
45 commenti
Trackback e pingback
-
Tweets that mention Personalizzare il template dei commenti di WordPress (Parte 2) | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by yesWEBcan, Antonino Scarfì. Antonino Scarfì said: RT @YIW Personalizzare il template dei…
Articolo molto utile, anche perchè il design è imporatintissimo..
Ciao Giacomo, grazie per essere passato e per aver espresso il tuo parere.
Spero che prima poi venga realizzato un pdf di tutto questo lavoro
molto presto, donald! purtroppo ultimamente problemi personali mi stanno impedendo di dedicarmi al lavoro con la dedizione di sempre.
Grazie mille per il tuo (enorme) lavoro. Mi prenoto per l’e-book ;-)
ciao Gloria, grazie a te per i complimenti =)
Bene, siamo giunti alla fine di questa eccellente guida e mi unisco a Gloria nel ringraziare Nando per l’enorme lavoro e per l’impeccabile qualità.
Dalla conclusione di quest’ultimo articolo intendo che alcune cose che ancora mi interessavano dovrò scoprirle da solo (in particolare come implementare il “pannello amministrativo” del tema con le varie opzioni; alcuni temi lo prevedono).
Poco male, con gli strumenti che ci hai dato non sarà troppo difficile (poi magari ci faccio io un’articolo :-).
ciao maurì, grazie anche a te per i complimenti.
per quanto riguarda il resto, non posso continuare a parlare solo di wordpress, altrimenti rischio di diventate monotematico e di annoiare buona parte di voi. =)
con il tempo comunque ho intenzione di integrare a questa guida alcuni argomenti che reputo interessanti, altri invece saranno già presenti nell’ebook.
Ottima conclusione della guida.
Mi unisco a Gloria e Maurizio per l’ebook. Anche io avrei voluto avere delle maggiori spiegazioni su alcuni aspetti ma sicuramente c’è la guida ufficiale.
Già con queste lezioni sono riuscito a creare un tema per wordpress partendo da zero e sono molto soddisfatto della cosa.
Come sempre bravo bravo!
Ciao Luca, grazie e a presto!
E un altra grande guida è stata completata.
Ottima risorsa, diventerà un eccellente e-book
Grazie mille Nando per esserti fatto il c..o
Ciao sà, grazie anche a te =)
Grazie Mille
Ciao Paolo, grazie mille a te per tutte le belle parole che hai espresso nei miei confronti nel corso di questa guida.
chiedo scusa a tutti per l’immenso ritardo di queste risposte, ma causa problemi personali sono stato fuori sede nell’ultima settimana e ho fatto rientro solo oggi.
Ottima guida e grazie a voi ho quasi completato partendo da 0 un tema per wp!
Ho però una domanda, se un utente preme rispondi, come faccio a far comparire il form proprio sotto il commento? (come nei vostri commenti)
avete usato un plug in particolare?
Grazie
Federico
Ciao potreste mettere i file comments.php e functions.php finali… perchè ho trovato un pò difficoltoso saper dove inserire le porzioni di codice dell’ultima lezione (commenti parte 2) e mi son perso… ci sono delle cose che non mi tornano :(
grazie!
scusate mi sono accorto ora che i file del pacchetto zip sono già completi… avevo sovrapposto le cose… grazie ancora… grande guida!
Ciao Nicolò, grazie a te per le belle parole!
Ottimo!!! Aspetto con ansia l’ebook. Grazie Nando!!!
Ciao Luigi, molto presto sarà disponibile anche l’ebook, abbiate pazienza =)
é normale che dopo aver postato un commento sparisca la tabella dove inserire i commenti?
——————-
Ogni volta poi che posto un commento appare questo messaggio nella finestra:
“Warning: Cannot modify header information – headers already sent by (output started at C:\AppServ\www\wordpress\wp-content\themes\Blog\functions.php:10) in C:\AppServ\www\wordpress\wp-includes\pluggable.php on line 890”
che significa?
ciao luca, no, non è normale che dopo aver inserito un commento sparisca il modulo di inserimento dei commenti. devi aver commesso qualche errore di progettazione.
riguardo l’errore menzionato: non puoi inviare un header quando già esistono degli output. l’header va inviato subito al caricamento della pagina.
Per creare dei propri template da zero bisogna avere un minimo di conoscenze di php, il linguaggio con cui WordPress è sviluppato. Ti consiglio di approfondire bene questo linguaggio e poi vedrai che non ci saranno più problemi.
Grazie della risposta Nando.
Hai ragione,non ho granchè conoscenza dei codici PHP.
Scusami ma che significa “non puoi inviare un header quando già esistono degli output. l’header va inviato subito al caricamento della pagina. ”
La tua guida l’ho copiata pari pari a come l’hai postata.
Ho rifatto la tua guida e almeno il problema della sparizione della form è sparita.
Rimane comunque il problema del messaggio che appare quando invio un commento.
C’è da aggiungere qualcosa in più rispetto a quello che tu spieghi nella guida per creare un template da zero?
Riguardo il messaggio devo cancellare il file header da wp-includes o usare direttamente quello?
Grazie
Grazie di cuore, ti farei un monumento!
Anche se le lezioni sui commenti per me sono state un po’ ostiche…
iacopo
Warning: Cannot modify header information – headers already sent by (output started at C:\AppServ\www\theme\wp-content\themes\blog\functions.php:26) in C:\AppServ\www\theme\wp-includes\pluggable.php on line 890
Ho rifatto la tua guida con un mio tema
Il problema che riscontro è nel file functions.php.
Eliminando questo file o almeno la funzione riguardante i commenti non c’è nessun tipo di problema.
Il problema si riferisce a questa riga qua
ciao luca, scusa leggo solo adesso il tuo commento. utilizza il nostro forum per il supporto perchè come vedi qui tra i commenti dell’articolo riportare righe di codice risulta abbastanza scomodo.
Ciao Nando. Conclusa questa guida, si è concluso con essa il mio primo tema (anche se ci devo ancora un po’ lavorare sulla grafica).
Comunque oltre che a scriverti per complimentarmi con te, ti scrivo anche perché ho un piccolo problema.
Quando provo a lasciare un commento, appena clicco su “invia”, mi si apre una pagina bianca e non mi pubblica il commento. Questo perché per funzionare deve essere caricato su di un dominio, oppure ho sbagliato io qualcosa?
Salve a tutti, ho appena utilizzato l’intera guida per cercare di realizzare il mio tema personalizzato, la semplicita’ con cui l’autore affronta i vari problemi fa si che anche un neofita possa capire passo passo cosa fare, ho un problema anche io riguardo il post di un commento, il commento mi viene inserito ma vengo rediretto ad una pagina bianche il cui indirizzo e’ : wp-comments-post.php … ci sono altre cose da modificare oltre i file menzionati o c’e’ un problema di progettazione del tema ? in effetti ho realizzato il tema esempio partendo proprio dagli esempi mostrati nella guida…
devo dire che ho realizzato passo passo un semplice tema, ancora da testare, e la parte più difficoltosa è quella dei commenti.
Congratulazioni per la guida molto chiara, ma le ultime due lezioni sono un po difficili e’ possibile scaricare la parte due del codice della lezione:
template dei commenti di WordPress (Parte 2), perche’ nell download parte 1 non sono presenti i codici della parte 2
grazie ancora
Ciao, sono Stefano e da diverso tempo seguo il sito.
Ho seguito tutto il corso e grazie a voi ho capito come funziona WordPress e “dove metter le mani” per crearne un template, vorrei farvi i miei complimenti (per quel che valgono :P ).
Una sola cosa non riesco a capire e non so se sia un “limite” del template montato o una mancanza mia: come si fa comparire, al posto dell’avatar di default, quello presente nell’account gravatr? come far interagire il template con gravatar?
Nel template montato seguendo il corso all’autore di ogni risposta compare come avatar quello di default, come posso risolvere questo piccolo problemino? :D
Grazie in anticipo :)
Ciao ho un piccolo problema utilizzando il vostro codice. Volendo utilizzare il js comment_reply.js ( che non funziona anche aggiungendo il codice in header.php ), in quanto osservando l’output dal browser noto un di troppo dopo la chiusura del tag: <li id=”li-comment-“>. Eliminando l’opzione di callback da wp_list_comments(); il js funziona. Ho anche provato ad eliminare dalla funzione di callback il senza risultato. Mi chiedo aldilà del problema del js, come mai spunti fuori questa chiusura di un list-item di troppo.
Ciao ho un piccolo problema utilizzando il vostro codice. Volendo utilizzare il js comment_reply.js ( che non funziona anche aggiungendo il codice in header.php ), in quanto osservando l’output dal browser noto un /li di troppo dopo la chiusura del tag: li id=”li-comment-“. Eliminando l’opzione di callback da wp_list_comments(); il js funziona. Ho anche provato ad eliminare dalla funzione di callback il /li senza risultato. Mi chiedo aldilà del problema del js, come mai spunti fuori questa chiusura di un list-item di troppo.
Scusate il reply.
Pare che abbia trovato il problema:
Leggendo la function reference di wp_list_comments -> http://codex.wordpress.org/Function_Reference/wp_list_comments
Nella sezione di esempio sulla customizzazione della funzione di callback leggo: Note the lack of a trailing . WordPress will add it itself once it’s done listing any children and whatnot.
Il js di comment-reply.js non funziona ancora ma aggiungendo un div con idcomment – , si. Questo perchè a quanto pare lo script ha necessità di sapere quale sia l’id del commento di cui si sta effettuando il reply.
Ho fatto qualche ricerca e studio, e dalla release 3.0 di WordPress è disponibile una funzione comment_form(); customizzabile attraverso un array, e vari hooks.
Finalmente una guida online su wordpress veramente chiara e ben fatta
grazie davvero e complimenti per il lavoro veramente notevole!
Ciao
Salve, ho seguito la vostra guida abbastanza bene, ma quando vado a fare un test (commentando) mi dice che devo inserire nome ed email. Io ho fatto quello che c’era scritto, ma non capisco dove sbaglio.
P.S. Nome ed email le inserisco
ciao ancora complimenti per la guida. Se volessi mettere i commenti sotto delle foto come posso fare’
Utilissimo :) Una domanda, qual’è la funzione di quei ,’yiw’ sparsi qua e là? :)
Per esempio:
Penso sia il nome del database (forse) se hai seguito tutto all’inizio ha creato una tabella con questo nome all’interno del database
Ciao Carlo, non riesco a vedere il codice che hai scritto ma credo tu ti riferisca alla stringa che si usa per permettere successivamente la localizzazione del tema in altre lingue.
Ciao Nando e complimenti per il corso, mi chiedevo se era possibile avere l’ebook.
Ciao ed alla prossima!!
Ciao Lucio, sto per pubblicare il libro, a breve uscirà sul nostro store sia la versione cartacea che digitale. In questo momento siamo in fase di editing e di aggiornamento all’ultima versione di WordPress.