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.

  1. Come Installare WordPress in Locale?
  2. WordPress: Diamo Uno Sguardo al Pannello di Amministrazione
  3. Come Creare un Template per WordPress Partendo da Zero?
  4. WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2)
  5. Diamo Uno Sguardo al Loop di WordPress
  6. Aggiungiamo la Sidebar al nostro tema
  7. WordPress: come rendere dinamici Header e Sidebar del template?
  8. Gerarchia dei template e loro utilizzo: come creare un template per gli articoli?
  9. Come Creare Template Personalizzati per le Pagine di WordPress?
  10. WordPress: predisporre la sidebar per l’uso di widget
  11. Personalizzare il Template dei Commenti di WordPress (Parte 1) | (Parte 2)
Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , ,

L'autore

Nando è fondatore di Edi Group, società di Comunicazione e Formazione fondata nel 2005. È inoltre Trainer Microsoft e docente di Webdesign con anni di esperienza, anche in qualità di progettista, in corsi di Formazione Professionale regionali e privati. È stato speaker in diverse prestigiose conferenze, anche per conto di Microsoft Italia. Tiene abitualmente corsi di formazione presso le aziende. È autore di diversi libri sul Web Design, in italiano ed inglese. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

45 commenti

  1. Nicolò
  2. Luigi
    • Antonio
  3. anto
  4. stekiros
  5. wido
    • wido
  6. wido
  7. wido
  8. Victor
  9. Stefano
  10. giorgio
  11. Carlo
    • giovanni

Trackback e pingback

  1. 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 …

Lascia un Commento

Current day month ye@r *