Creare un Tema WordPress – I Commenti, Pt. 2

Creare temi WordPress - I commenti, pt 2
Articolo aggiornato il

Nella precedente lezione abbiamo visto come generare la pagina che gestisce i commenti, utilizzando la funzione wp_list_comments(), inoltre vi ho accennato che è possibile personalizzare la lista dei commenti, passando al parametro callback, la funzione che sostituirà la visualizzazione generata automaticamente da WordPress. Apriamo comments.php e scriviamo:

<ul class="commentlist">
<?php wp_list_comments('type=comment&callback=nomedellafunzione'); ?>
</ul>

La funzione invece, va inserita al di fuori della condizione if ( have_comments())

<?php 
function nomedellafunzione($comment, $args, $depth) {
/* AZIONI DA ESEGUIRE */
}
?>

Ora possiamo iniziare a personalizzare la lista dei commenti, intanto generiamo dinamicamente la classe che identifica il singolo elemento, utilizzando la funzione comment_class(). Se volessimo aggiungere una classe personalizzata, è necessario indicarla tra parentesi:

comment_class('nomedellaclasse')

Mentre per generare l’ID univoco del commento, utilizzeremo la funzione comment_ID()

Adesso, dopo l’apertura della funzione e prima del tag di chiusura della lista, scriviamo:

 
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<!-- generazione del commento -->

Come potete notare, manca la chiusura del tag li, poiché sarà generato dinamicamente da WordPress. Ora occupiamoci dell’avatar dell’utente, utilizzando la funzione get_avatar(). Questa funzione quattro parametri:

  1. $id-o-email, (obbligatorio) l’id o l’email dell’utente che ha inserito il commento (possiamo inserire direttamente $comment, per generare i dati necessari.
  2. $grandezza, (opzionale) grandezza, in pixel, dell’avatar (max 512px).
  3. $url, (opzionale) url dell’avatar, non inserendo nulla vengono utilizzati quelli di WordPress (di default Mystery Man).
  4. $alt, (opzionale)testo alternativo per l’avatar
<div class="comment-author-avatar">
<?php echo get_avatar( $comment, 48 ); ?>
</div>

Se i commenti devono essere prima approvati da un amministratore del sito, scriviamo:

<?php if ( $comment->comment_approved == '0' ) : ?>
<em class="moderation">Il tuo commento è in attesa di essere approvato.</em>
<br />
<?php endif; ?>

Adesso occupiamoci della data del commento, per iniziare trasformiamola in un link al commento, con la funzione get_comment_link(). Successivamente generiamo la data, utilizzando le funzioni comment_date() e comment_time(), la prima per la data mentre la seconda per ora e minuti.
Infine, se vogliamo inserire il pulsante per modificare il commento, nel caso l’utente connesso abbia i permessi per farlo, utilizziamo la funzione get_comment_link(). Alla fine di tutto scriviamo una riga per indicare che l’utente Tizio ha scritto il commento che verrà generato di seguito, insieme al link al suo sito, utilizzando la funzione comment_author_link().

<div class="comment-date">
Il <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ) ?>">
<?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?>
</a>
<?php edit_comment_link(__('(Edit)'),'  ','') ?>
<?php printf(__('<cite class="fn">%s</cite> <span class="says">ha scritto:</span>'), get_comment_author_link()) ?>
</div>

Per visualizzare il contenuto del commento, dobbiamo utilizzare la funzione comment_text(). È possibile indicare, come parametro, l’ID del commento che si vuole visualizzare altrimenti mostrerà il testo del commento corrente.

<div class="comment-text">
<?php comment_text(); ?> 
</div>

Per ultimo inseriamo il pulsante per rispondere al commento, utilizzando la funzione comment_reply_link(), accetta tre parametri:

  1. $args, prevede diverse opzioni, caricandoli in un array:
    • “add_below”, è il primo parametro della funzione Javascript moveAddCommentForm(), serve per indicare a quale ID, relativo all’elemento della lista generata da WordPress per visualizzare i commenti, dovrà agganciarsi. Di default è comment .
    • “respond_id”, è un parametro di funzione per moveAddCommentForm(), di default è respond
    • “reply_text”, che nome utilizzare per il pulsante Rispondi, di default è reply.
    • “login_text “, il testo da visualizzare, nel caso sia necessario essere collegati per postare un commento.
    • “depth”, il livello di profondità del commento.
    • “before “, codice html o testo da visualizzare prima del pulsante Rispondi.
    • “after”, codice html o testo da visualizzare dopo il pulsante Rispondi.
  2. $comment, ID del commento a cui rispondere, di default è quello corrente.
  3. $post, ID del post a cui rispondere, di default è quello corrente.
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth'],'reply_text' => __('Rispondi al commento'))));
?>

Aggiungendo, tra i file javascript da caricare nel tema, comment-reply.js (presente nel core di WordPress), potremo far visualizzare il form di risposta direttamente di seguito al commento di nostro interesse. Una soluzione può essere richiamarlo nell’header del nostro tema, insieme agli altri script.

<?php wp_enqueue_script( 'comment-reply' ); ?>

Ora andiamo a personalizzare il form per inserire un commento, come già detto nella scorsa lezione, dovremo utilizzare la funzione comment_form(), prevede due parametri:

  1. $args, ovvero tutti gli elementi che comporranno il nostro form:
    • $fields , la matrice che gestirà la visualizzazione dei campi di input(autore,email,sito web), di default è:
      'fields' => array(
'author' => '<label for="author">' . __( 'Name' ) .( $req ? '<span class="required">*</span>' : '' ). '</label> '.'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /><div class="clear"></div>',
'email' => '<label for="email">' . __( 'E-mail' ) .( $req ? '<span class="required">*</span>' : '' ). '</label> '.'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /><div class="clear"></div>',
'url' => '<label for="url">' . __( 'Website' ) . '</label>'.'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /><div class="clear"></div>')
    • $comment_field , la textarea dove inserire il commento. Di default è
      'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
    • $must_log_in , il testo da visualizzare se, per inserire un commento, è necessario essere registrati e loggati al sito. Di default è:
      'must_log_in' => '<p class="must-log-in">' .  sprintf( __( 'Devi aver effettuato il <a href="%s">log in</a> per inserire un commento' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>',

      La funzione wp_login_url(), genererà il link per potersi collegare al sito.

    • $logged_in_as, il testo da visualizzare dopo essersi loggati dal link generato nel precedente parametro. Di default è:
      'logged_in_as' => '<p class="logged-in-as">' . sprintf( __( 'Hai effettuato il login come <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>',
    • $comment_notes_before, il testo da visualizzare prima del form, nel caso non ci si sia collegati al sito e non dovesse essere necessario esserlo per scrivere un commento. Di default è:
      'comment_notes_before' => '<p class="comment-notes">' . __( 'La tua e-mail non sarà pubblicata.' ) . ( $req ? $required_text : '' ) . '</p>',
    • $comment_notes_after , il testo da visualizzare dopo il form e prima del pulsante per inviare il comment. Di default è:
      '<p class="form-allowed-tags">' . sprintf( __( 'Puoi utilizzare i seguenti tags e attributi <abbr title="HyperText Markup Language">HTML</abbr> : %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>'

      Con allowed_tags() visualizzeremo i tags permessi che abbiamo impostato.

    • $id_form, l’ID da assegnare al form.
    • $id_submit, l’ID da assegnare al pulsante per l’invio del commento.
    • $title_reply, Il titolo che comparirà all’inizio del form.
    • $title_reply_to, Il titolo che comparirà all’inizio del form, per rispondere a.
    • $cancel_reply_link Se stiamo rispondendo ad un commento, questo comparirà affianco al precedente parametro e sarà il nome del link per annullare la risposta.
    • $label_submit Il nome del pulsante per inviare il commento.
  2. $post_id, l’ID del post in cui il form dovrà essere collegato.

Ecco il codice completo della lezione di oggi, da inserire nel file comments.php

<?php if ( have_comments() ) : ?>
<div class="comments">
<?php echo comments_number( '<h3>Nessun commento</h3>', '<h3>1 commento</h3>', '<h3>% commenti</h3>' ); ?>
<ul>
<?php wp_list_comments('type=comment&callback=wip_comment'); ?>
</ul>

<?php
echo '<div class="pagination">';
echo '<span class="nav-left">';
previous_comments_link(__('&laquo; Commenti Precedenti'));
echo '</span>';
echo '<span class="nav-right">';
next_comments_link(__('Commenti Successivi&raquo;'));
echo '</span></div>';
echo '<div class="clear"></div>';
?>
</div>

<?php else : // altrimenti ?>
<?php  if ( ! comments_open() ) : ?>
<p> I commenti per questo post sono chiusi</p>
<?php else : // altrimenti ?>

<p> Nessun commento presente </p>

<?php  endif; // end ! comments_open() ?>
<?php endif; // end have_comments() ?>

<div class="formitem">

<?php
$args = array(
'fields' => array(
'author' => '<label for="author">' . __( 'Name' ) .( $req ? '<span class="required">*</span>' : '' ). '</label> '.'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /><div class="clear"></div>',
'email' => '<label for="email">' . __( 'E-mail' ) .( $req ? '<span class="required">*</span>' : '' ). '</label> '.'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /><div class="clear"></div>',
'url' => '<label for="url">' . __( 'Website' ) . '</label>'.'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /><div class="clear"></div>'),
'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
'must_log_in' => '<p class="must-log-in">' .  sprintf( __( 'Devi aver effettuato il <a href="%s">log in</a> per inserire un commento' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>',
'logged_in_as' => '<p class="logged-in-as">' . sprintf( __( 'Hai effettuato il login come <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>',
'comment_notes_before' => '<p class="comment-notes">' . __( 'La tua e-mail non sarà pubblicata.' ) . ( $req ? $required_text : '' ) . '</p>',
'<p class="form-allowed-tags">' . sprintf( __( 'Puoi utilizzare i seguenti tags e attributi <abbr title="HyperText Markup Language">HTML</abbr> : %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',
'title_reply' => __( 'Commenta' ),
'title_reply_to' => __('Commenta a %s'),
'cancel_reply_link' => __('Annulla commento'),
'label_submit' => __('Commenta'),
);
comment_form($args); 
?>
<div class="clear"></div>

</div>

<?php

function wip_comment($comment, $args, $depth) { 
$GLOBALS['comment'] = $comment; ?>

<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">

<div class="comment-author-avatar">
<?php echo get_avatar( $comment, 55 ); ?>
</div>

<?php if ( $comment->comment_approved == '0' ) : ?>
<em class="moderation">Il tuo commento è in attesa di essere approvato.</em>
<?php endif; ?>

<div class="comment-text">
<div class="comment-date">
Il <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ) ?>"> <?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?> </a>
<?php edit_comment_link(__('(Edit)'),'  ','') ?>
<?php printf(__('<cite class="fn">%s</cite> <span class="says">ha scritto:</span>'), get_comment_author_link()) ?>
</div>

<?php comment_text() ?>

<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth'],'reply_text' => __('Rispondi al commento')))); ?>
</div>
<div class="clear"></div>
<?php } ?>

Ecco il codice css completo della lezione di oggi, da aggiungere nel file style.css

/* Comment */
.comments { padding:10px; }
.comment-text { float:left; width:550px;border-bottom: dotted 1px #dadada;  }
.comments ul, div.comment-date ul { list-style:none; }
.comments li a { font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#007fa6; text-decoration:none;text-shadow:1px 1px 1px #fff; }
.comments li a:hover { color:#262626;}
.comment-date,.comment-text,.comments h3 { font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#262626; text-decoration:none;text-shadow:1px 1px 1px #fff; }
.comment-author-avatar { float:left; margin:0 10px 0 0}

/* Form */
h3#reply-title { font-size:16px; }
.formitem { padding:10px; font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#262626; text-decoration:none;text-shadow:1px 1px 1px #fff;}
.formitem label { width: 100px; font-size: 90%; float:left; padding-top: 12px; font-size:12px; font-family:Verdana, Geneva, sans-serif; }
.formitem input[type=text] { width: 400px; padding: 8px; float:left; border: 1px solid #DBDBDB; }
.formitem p.form-allowed-tags { float:left; }
.formitem textarea { float: left; width: 470px; height: 125px; padding: 10px; font-family: &amp;quot;Helvetica Neue&amp;quot;, Helvetica, Arial, sans-serif; font-size: 100%; border: 1px solid #DBDBDB; }
.formitem input[type=submit] { margin:10px 0 0 100px; cursor: pointer; height:30px;  width:96px; background:#007fa6; text-align:center; font-size:14px;line-height:29px; border:none; color:#fff; float:left}
.formitem p.form-allowed-tags { margin:10px 0 0 100px; font-style:italic; font-size:12px; width: 490px; }
.formitem input[type=submit]:hover { color:#fff; background:#005b77; width:96px; height:30px; }
.formitem  span.required { color: #CC0000; float:left; margin:0 10px 0 0; }
.form_error { display: block; padding: 4px 10px 4px 22px; margin-bottom: 10px; font-size: 90%; }
.loader { float: right; padding: 10px; }
.form_success { display: block; background: url('images/success.png') no-repeat left center; padding: 4px 10px 4px 22px; margin-bottom: 10px; font-size: 90%; }

Nella lezione di oggi abbiamo completato il template che gestisce la visualizzazione dei commenti, con un pò di css possiamo migliorare ulteriormente l’interfaccia grafica, l’unico limite è la vostra fantasia. Nella prossima lezione aggiungeremo la sidebar del nostro tema, predisponendola a contenere i widget di WordPress.
Alla prossima settimana.

Newsletter

Assistenza WordPress

Hai bisogno di assistenza per il tuo sito WordPress?
Scopri cosa posso fare per te

Scopri di più

Commenti

Marco

Ciao Alex, praticamente gran parte del codice del file comments.php è copiato dal comment-template.php giusto? In questo modo modificando il file comments.php si evita di toccare quello nel core di wordpress, correggimi se sbaglio ….

    Alessandro Vellutini

    Ciao Marco, in realtà ho seguito ciò che è indicato nel Codex di WordPress, ma molto probabilmente avranno riportato un’esempio con lo stesso codice, comunque puoi personalizzarlo come meglio credi senza andare a toccare comment-template.php.

    A presto.

Marco

Certo il codex è il riferimento in assoluto. Ti ho detto questo perchè per curiosità tempo fa mi informai sul file che gestisce i commenti e lessi che era il file comment-template che si trova nella cartella wp-includes e quindi dopo la tua lezione ho confrontato i codici ed ho visto che sono quasi identici , quindi ho pensato che il vantaggio di replicarlo su un file del tema fosse quello di non toccare quello che si trova nel file di configurazione di wordpress ….

lucio

Ciao alex ,senti vorrei poter insrire gli avatar nei commenti recenti del widget e le immagini neglu ultimi articoli,potresti aiutarmi?
Grazie

giuseppe

ti ringrazio per la lezione…sono un principiante assoluto e grazie a te sto imparando molto…

io ho la necessità di inserire la funzione cs_print_smilies() in
‘ ‘)); ?>

ma non ho capito come fare nonostante abbia letto con attenzione…
devo studiare molto

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *