In questa breve lezione vedremo come aggiungere il form per la ricerca interna di WordPress (che nella scorsa lezione abbiamo inserito nella sidebar del tema) insieme alla relativa pagina che gestirà i risultati di ricerca. Successivamente vedremo come funziona la pagina di errore 404, che WordPress caricherà ogni volta che si cercherà di aprire un contenuto o una pagina non esistente.
Il form di ricerca.
Per integrare il modulo è necessario utilizzare la funzione get_search_form(), che caricherà il contenuto del file searchform.php, presente nel nostro tema. Se il file non fosse presente, WordPress genererà il seguente codice:
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>"> <div><label class="screen-reader-text" for="s">Cerca per:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Cerca" /> </div> </form>
Quindi, per personalizzare il form di ricerca, dobbiamo creare il file searchform.php e scrivere:
<form method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div>
<input type="text" value="cerca nel sito ..." name="s" id="s" onblur="if (this.value == '') {this.value = 'cerca nel sito ...';}" onfocus="if (this.value == 'cerca nel sito ...') {this.value = '';}"/>
<input type="submit" id="searchsubmit" class="button-search" value="<?php _e( 'Cerca', 'WIP' ) ?>" />
</div>
</form>
Quello che abbiamo fatto è assegnare, come valore della text input, la frase “Cerca nel sito“, così da eliminare la label e guadagnare un pò di spazio.
In alternativa possiamo creare una funzione apposita, all’interno di function.php, agganciandola ad un filter hook :
function modulo_ricerca( $form ) {
$form = '<form method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div>
<input type="text" value="cerca nel sito ..." name="s" id="s" onblur="if (this.value == '') {this.value = 'cerca nel sito ...';}" onfocus="if (this.value == 'cerca nel sito ...') {this.value = '';}"/>
<input type="submit" id="searchsubmit" class="button-search" value="<?php _e( 'Cerca' ) ?>" />
</div>
</form>';
return $form;
}
add_filter( 'get_search_form', 'modulo_ricerca' );
In questo caso la funzione che abbiamo appena creato, verrà utilizzata solamente se non è presente il file searchform.php.
Se vogliamo visualizzare il form in altri punti del sito, basterà richiamarlo utilizzando la funzione get_search_form(), di cui vi ho parlato all’inizio della lezione.
<?php get_search_form(); ?>
Risultati della ricerca.
Adesso occupiamoci del template che gestirà i risultati della ricerca, creiamo un file vuoto e rinominiamolo come search.php, non è necessario integrarlo in altri template poiché verrà utilizzato da WordPress, nel momento in cui un visitatore dovesse svolgere una ricerca interna.
Al suo interno copiamo il contenuto di uno degli altri template in cui viene richiamato il loop, ad esempio archive.php. Questo è sufficiente per ottenere i risultati di una ricerca, ma è necessario correggere alcuni punti del loop. Ad esempio, come inserire un messaggio che informa quale parola o frase è stata cercata? Semplicemente restituendo il valore della variabile $s. Scriviamo, dopo
<div class="post">:
<?php
if (is_search()) {
echo '<h2>Risultati ricerca per : "'.$s.'" </h2>';
}
?>
Ora visualizziamo la paginazione degli articoli anche alla fine dei risultati di ricerca, se dovesse rendersi necessario. Troviamo
if (is_category()) {
echo '<div class="pagination">';
E sostituiamo la prima riga con:
if ( (is_category()) || (is_search()) ) {
Pagina di errore 404.
Nel caso i visitatori cercassero di aprire una pagina che è stata eliminata oppure non esistente, è possibile avvisarli realizzando una pagina di errore 404. Creiamo un file vuoto e rinominiamolo come 404.php in cui copieremo il contenuto di page.php o single.php, successivamente inseriremo un messaggio di errore sostituendolo al loop.
<?php get_header(); ?>
<!-- inizio content -->
<div id="content">
<div class="post">
<?php _e('Ci spiace, ma la pagina o il contenuto richiesto non è stato trovato.') ?><br/>
<?php _e('Puoi tornare alla ') ?> <a href="<?php echo home_url() ?>">homepage</a> <?php _e(', oppure effettuare una nuova ricerca tra i contenuti del blog.') ?>
<?php get_search_form(); ?>
<div class="clear"></div>
</div>
<!-- fine content -->
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Il nostro tema è quasi finito, nella prossima lezione, l’ultima dedicata a questo argomento, aggiungeremo il footer e potrete inoltre scaricare un archivio contenente il tema che abbiamo sviluppato.
Alla prossima settimana.
Siamo arrivati quasi alla fine del primo ciclo di articoli dedicati alla realizzazione di un tema per WordPress poiché le lezioni future saranno incentrate sull’aggiunta di funzionalità avanzate al nostro tema appena creato come, ad esempio, un pannello amministrativo per poter gestire alcuni parametri del tema stesso oppure widget personalizzati. Ma torniamo a noi, nella lezione di oggi vedremo come aggiungere la sidebar al nostro tema. Creiamo un file nuovo e rinominiamolo sidebar.php e includiamolo in single.php, archive.php e search.php aggiungendo, dopo il richiamo al loop, la funzione get_sidebar():
<?php get_sidebar(); ?>
È possibile indicare una sidebar specifica, inserendone il nome tra parentesi.
<?php
/* Caricherà il file sidebar-right.php */
get_sidebar('right'); ?>
Mentre, all’interno della sidebar, scriviamo:
<div id="sidebar"> <h2>Cerca nel sito</h2> <?php get_search_form(); ?> </div> <div class="clear"></div>
Invece, nel foglio di stile, aggiungiamo:
/* Sidebar */
#sidebar ul { list-style:none; }
#sidebar h2 { font-size:16px;font-family:Verdana, Geneva, sans-serif;line-height:2.4em; color:#262626; text-shadow:1px 1px 1px #fff; text-align:left; margin:10px}
#sidebar input[type=text] { width: 100px; height:12px; padding: 8px; float:left; border: 1px solid #DBDBDB; margin:0 0 0 10px; }
#sidebar input[type=submit] { cursor: pointer; height:30px; width:76px; background:#007fa6; text-align:center; font-size:14px;line-height:29px; border:none; color:#fff; float:right; margin:0 10px 0 0}
Ora predisponiamo la sidebar ad ospitare i widget, ovvero elementi gestibili dal front end di WordPress da Aspetto e poi su Widget. Per aggiungerne uno basta trascinarlo all’interno dello spazio predisposto ai widget che desideriamo, infatti è possibile aggiungere più di un’area, ad esempio in punti diversi della sidebar o del sito, come nel footer. Ora, andando in Widget nell’area amministrativa del nostro sito in WordPress, verrà visualizzato un errore o non sarà comunque possibile andarci. Niente paura, basta utilizzare la funzione register_sidebar(), all’interno di function.php. Accetta 8 parametri, vediamoli insieme:
- $name, il nome della sidebar, deve essere un nome identificativo e univoco, per evitare incomprensioni.
- $id, l’id della sidebar, deve essere in minuscolo e senza spazi. Di default è un valore che si auto incrementa
- $description , la descrizione della sidebar, che comparirà nel pannello di amministrazione di WordPress.
- $before_widget, eventuale codice HTML da visualizzare prima del widget.
- $after_widget, eventuale codice HTML da visualizzare dopo il widget.
- $before_title, eventuale codice HTML da visualizzare prima del titolo del widget.
- $after_title, eventuale codice HTML da visualizzare dopo il titolo del widget.
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'sidebar',
'id' => 'sidebar-area',
'description' => 'La nostra widget area.',
'before_widget' => '<div class="widget-box">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
}
Per richiamarla nel punto desiderato, quindi in sidebar.php, aggiungiamo
<?php (dynamic_sidebar('sidebar-area')) ?>
Grazie alla funzione dynamic_sidebar(), andremo a richiamare l’area widget creata precedentemente.
Nel caso non fosse stato aggiunto nessun widget e volessimo inserire un contenuto statico o un messaggio di errore, scriviamo:
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar-area')) :
else:
/* Azioni da eseguire o testo da visualizzare, nel caso la sidebar non fosse attiva */
endif; ?>
In questo modo controlliamo se esiste la funzione dynamic_sidebar e se corrisponde a quella creata precedentemente, se cosi non fosse possiamo caricare un contenuto statico oppure un messaggio di errore. Possiamo ulteriormente sintetizzare il tutto nel seguente modo:
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-area')):
/* Azioni da eseguire o testo da visualizzare, nel caso la sidebar non fosse attiva */
endif; ?>
Ora possiamo aggiungere i widget alla nostra sidebar.
Tornando al sito, troverete la lista degli ultimi articoli e delle pagine presenti.
Ora andiamo a personalizzare lo stile delle liste non ordinate, aggiungendo nel file style.css:
#sidebar 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; margin:0 0 0 10px; }
#sidebar li a:hover { color:#262626;}
Ecco il risultato:
Se vogliamo aggiungere una nuova sidebar, ad esempio per il footer
(teniamo in sospeso questa parte per l’ultima lezione, il footer non è ancora presente ma questo esempio vale anche per altre situazioni)
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar-area',
'description' => 'La nostra widget area.',
'before_widget' => '<div class="widget-box">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
register_sidebar(array(
'name' => 'Footer Sidebar',
'id' => 'footer-sidebar-area',
'description' => 'La nostra widget area.',
'before_widget' => '<div class="widget-box">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
}
Tornando al front end del nostro sito, troveremo un nuovo spazio dove aggiungere i widget.
Per farli visualizzare nel footer dovremmo scrivere, al suo interno:
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-sidebar-area')):
/* Azioni da eseguire o testo da visualizzare, nel caso la sidebar non fosse attiva */
endif; ?>
Bene, in questa lezione abbiamo visto come rendere la nostra sidebar, grazie all’utilizzo dei widget. Nella prossima lezione vedremo come gestire la ricerca. Alla prossima settimana.
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:
- $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.
- $grandezza, (opzionale) grandezza, in pixel, dell’avatar (max 512px).
- $url, (opzionale) url dell’avatar, non inserendo nulla vengono utilizzati quelli di WordPress (di default Mystery Man).
- $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:
- $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.
- $comment, ID del commento a cui rispondere, di default è quello corrente.
- $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:
- $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.
- $fields , la matrice che gestirà la visualizzazione dei campi di input(autore,email,sito web), di default è:
- $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(__('« Commenti Precedenti'));
echo '</span>';
echo '<span class="nav-right">';
next_comments_link(__('Commenti Successivi»'));
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: &quot;Helvetica Neue&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.
Nella precedente lezione abbiamo visto come creare query personalizzate per il loop e ci siamo avvantaggiati per questa lezione, collegando il loop al template dei commenti. Pur non essendo necessario creare il file, poiché se nel nostro tema non è presente il file comments.php, WordPress genererà automaticamente sia il form di inserimento che gli stessi commenti, vedremo comunque come personalizzarne la visualizzazione. Se apriamo un qualsiasi articolo troveremo, alla fine del testo, i commenti fino ad ora inseriti.
Una volta creato il file comments.php, riprendiamo l’articolo aperto in precedenza, non verrà visualizzato più nulla, poiché dobbiamo utilizzare la funzione wp_list_comments(). Questa funzione prevede ben undici parametri, vediamo quelli principali:
- $style, ovvero cosa utilizzare tra div, ol ed ul per racchiudere i commenti, utilizzando sia una lista ordinata che non ordinata, verrà generato solo il codice relativo all’elemento, quindi è necessario racchiudere la funzione tramite il tag di apertura. Ad esempio:
<ul><?php wp_list_comments(array('style' => 'ul')); ?></ul> - $tipo, cioè quale tipo di elemento bisogna visualizzare tra commenti, trackback o pingback. Di default vengono visualizzati tutti, per visualizzare trackback e pingback insieme possiamo inserire ping, per visualizzare solo i commenti, ovviamente utilizzeremo comment
- $dimensioneavatar, la dimensione in pixel dell’avatar relativo all’utente che ha lasciato un commento. Di default è di 32 pixel.
- $callback, il nome della funzione da utilizzare per personalizzare la visualizzazione dei commenti, questo sarà l’argomento della prossima lezione.
Per il momento non utilizziamone nessuno e, all’interno di comments.php, scriviamo solamente:
<?php wp_list_comments(); ?>
Tornando al sito troveremo i due commenti presenti ma non il form per l’inserimento. Torniamo al template dei commenti ed aggiungiamo:
<?php comment_form(); ?>
Ora potremo anche aggiungere nuovi commenti.
Questo grazie alla funzione comment_form(). È possibile personalizzare ulteriormente sia il form che la lista dei commenti ma ci arriveremo più avanti. Le due funzioni da sole potrebbero anche bastare ma è necessario controllare l’effettiva presenza di commenti, grazie alla funzione have_comments():
<?php if ( have_comments() ) : ?> <!-- visualizzazione dei commenti, se presenti --> <?php else : // altrimenti ?> <!-- codice da visualizzare, se non sono presenti commenti--> <?php endif; // end have_comments() ?>
Quindi, integrando questo controllo ci ritroveremo:
<?php if ( have_comments() ) : ?> <?php wp_list_comments(); ?> <?php else : // altrimenti ?> <p> Nessun commento presente </p> <?php endif; // end have_comments() ?> <?php comment_form(); ?>
Diamo un’occhiata al codice appena scritto, la chiamata al form è stata messa al di fuori del controllo, poiché deve essere presente sia se ci siano commenti, sia che non ce ne siano, nel caso siano presenti dei commenti, verranno visualizzati grazie alla funzione wp_list_comments(), altrimenti verrà mostrato all’utente un messaggio di errore
Se vogliamo visualizzare il numero di commenti presenti, dobbiamo utilizzare la funzione comments_number(),già vista nella lezione dedicata al loop:
<?php comments_popup_link( 'Nessun commento', '1 commento', '% commenti', 'css-commenti', 'Commenti disabilitati'); ?>
Infine aggiungiamo la paginazione dei commenti, utilizzando previous_comments_link() e next_comments_link(). Entrambi i tags prevedono due parametri:
- $label. Il testo del pulsante.
- $number. Il numero massimo di commenti da visualizzare, di default è 0 ovvero illimitato.
<?php previous_comments_link(__('« Commenti Precedenti')) ?>
<?php next_comments_link(__('Commenti Successivi»')) ?>
Per informare l’utente della possibilità o meno di inserire commenti, nel caso siano disabilitati per l’articolo corrente, scriviamo :
<p> Nessun commento presente </p>
con
<?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() ?>
In questo modo, se non sono presenti dei commenti viene effettuato un ulteriore controllo, se non ci sono commenti perché sono stati disabilitati per quell’articolo viene mostrato il relativo messaggio di errore, altrimenti avverte il visitatore che non sono presenti commenti
Bene, in questa lezione abbiamo visto come visualizzare i commenti e come dare la possibilità ai visitatori di inserirli, nella prossima lezione personalizzeremo il codice di entrambe le funzioni.
Alla prossima settimana.
