Ciao 🙂

Siamo quasi arrivati alla fine della guida Come creo un tema WordPress?, ma ti voglio ripetere ancora una volta che giunti a questo punto darò per scontato alcune cose che ormai dovresti aver imparato.

Ti spiego allora come creare la pagina relativa agli articoli che nel nostro sito abbiamo chiamato “News”. Per ogni articolo del blog potremo entrare nel dettaglio e fare in modo che gli utenti lascino commenti.

Primo passo

Per prima cosa ti ricordo che prima ancora di creare pagine appropriate per la Home e per le altre pagine riuscivamo a vedere già la Homepage sotto forma di “pagina contenente articoli”. Quindi adesso devi impostare che la pagina che contiene gli articoli è la pagina “News” se non lo hai già fatto.

Per farlo segui questi passi:

Entra nel pannello wp-admin del tuo sito
Clicca su Impostazioni
Clicca su Lettura
Imposta come “Pagina articoli” la pagina News

La pagina News

Per iniziare a vedere qualche articolo vai nella sezione Articoli nel pannello di amministrazione ed aggiungi qualche articolo. Per ogni articolo imposta pure il tag More (tag <leggi tutto..>) e scrivi un po’ di testo. Dopo di che imposta una categoria ed un’immagine in evidenza.

Dunque apri il file “style.css” e fai una piccola modifica. Dove trovi il CSS relativo ad “.attachment-thumbnail.size-thumbnail.wp-post-image” imposta height e width al 30%.

Bene a questo punto se entri nella pagina degli articoli del tuo sito (la pagina News) vedrai qualcosa di simile a questo:

Apriamo un articolo

Ora quello che manca è l’apertura dell’articolo nella sua interezza. Adesso l’articolo se clicchi su “Continua a leggere” si apre, però sono sicuro che vuoi una pagina creata da te appositamente per l’articolo come unità singola.

Dunque vai nel tuo tema ed aggiungi il file “single.php“. In questo file inserisci il seguente codice:

Deep Learning Specialization on Coursera

<?php get_header(); ?>
<div class = "container">
   <?php if (have_posts()) : ?>
   <!-- START LOOP -->
   <?php while (have_posts()) : the_post(); ?>
   <!-- BEGIN POST -->
   <div class = "row">
      <div class = "col-xs-12 col-md-12 col-lg-12 custom-content post-content">
         <div <?php post_class(); ?>>
            <h2 class = "custom-post-title"><?php the_title(); ?></h2>
            <?php
               if ( has_post_thumbnail() ) {
               	the_post_thumbnail('thumbnail');
               }
               ?>
            <p class="author">
               <?php the_time('j F Y') ?> di <?php the_author() ?>
            </p>
            <div class="entry single-post">
               <?php the_content(__('|| continua a leggere &raquo;')); ?>
            </div>
            <p class="postmetadata">
               Pubblicato in <?php the_category(', ') ?>
            </p>
            <p class="right">
               <?php comments_popup_link('Nessun commento &raquo;', '1 Commento &raquo;', '% Commenti &raquo;'); ?>
            </p>
            <!-- START FEED -->
            <p class="feed">
               Se ti &egrave; piaciuto questo articolo considera di
               <a href="#">iscriverti ai nostri feed</a>
               per restare sempre aggiornato sulle ultime novit&agrave; pubblicate!
            </p>
            <!-- END FEED -->
         </div>
      </div>
   </div>
   <!-- END POST -->
   <?php comments_template(); ?>
   <?php endwhile; ?>
   <!-- END LOOP -->
   <div class="navigation">
      <div class="alignleft"><?php next_posts_link(__('&laquo; Precedenti')) ?></div>
      <div class="alignright"><?php previous_posts_link(__('Successivi &raquo;')) ?></div>
   </div>
   <?php else: ?>
   <h2><?php _e('Non trovato'); ?></h2>
   <p class="center"><?php _e('Siamo spiacenti, quello che stavi cercando non è su questa pagina'); ?></p>
   <?php endif; ?>
</div>
<!-- START SIDEBAR -->
<?php get_sidebar(); ?>
<!-- END SIDEBAR -->
<div class="clearer"></div>
<!-- START FOOTER -->
<?php get_footer(); ?>
<!-- END FOOTER -->
</div>
</body>
</html>

Come puoi vedere il codice è praticamente quello della pagina di index. Quindi non c’è molto da spiegare.

Quello che c’è di nuovo è relativo alla riga <?php comments_template(); ?> nella quale stiamo chiedendo a WordPress di mostrare nella pagina il template relativo ai commenti.

Il template dei commenti

Dunque devi creare il template dei commenti. Per prima cosa però apri il file functions.php ed aggiungi in fondo queste righe di codice:

<?php
   function paolodellaguzzo_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 ', 'paolodellaguzzo' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?>
   </div>
   <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
            printf( __( '%1$s at %2$s', 'paolodellaguzzo' ), get_comment_date(),  get_comment_time() ); ?></a><?php edit_comment_link( __( '(Modifica)', 'paolodellaguzzo' ), ' ' );
            ?>
      </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>
   </div>
</li>
<?php
   }
?>

Questa funzione sarà chiamata dal nostro template e serve per mostrare il commento vero e proprio. Ciascun commento sarà quindi composto dall’avatar dell’autore (disponibile per chi ha il profilo WordPress con il “gravatar”), dalla data, dall’eventuale attesa di moderazione ed infine dal testo del commento con il link per permettere ad altri utenti di rispondere.

Il file comments.php

Siamo alla fine! Crea il file “comments.php“. Quì gestiremo il template dei commenti a partire dai messaggi di “password necessaria” fino alla registrazione per commentare. Inserisci questo codice:

<div id="comments">
   <?php if ( post_password_required() ) : ?>
   <p class="nopassword"><?php _e( 'Questo articolo è protetto da password. Inserisci la password per visualizzare i commenti.', 'paolodellaguzzo' ); ?>
   </p>
</div>
<!-- #comments -->
<?php
   return;
   endif;
   ?>
<?php if ( have_comments() ) : ?>
<h3 id="comments-title">
   <?php comments_number(__('nessun commento', 'paolodellaguzzo'), __('1 commento', 'paolodellaguzzo'), __('% commenti', 'paolodellaguzzo')); ?>
</h3>
<ol class="commentlist">
   <?php
      wp_list_comments( array( 'type' => 'comment', 'callback' => 'paolodellaguzzo_comment' ) );
      ?>
</ol>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<div class="navigation">
   <div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">&larr;</span> Commenti Precedenti', 'paolodellaguzzo' ) ); ?></div>
   <div class="nav-next"><?php next_comments_link( __( 'Commenti Successivi <span class="meta-nav">&rarr;</span>', 'paolodellaguzzo' ) ); ?></div>
</div>
<!-- .navigation -->
<?php endif; ?>
<?php endif; ?>
<?php if ( comments_open() ) : ?>
<div id="respond">
   <!-- START TITLE LEAVE A REPLY -->
   <h2 id="leave-reply">Lascia un commento</h2>
   <!-- END TITLE LEAVE A REPLY -->
   <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
   <!-- START MESSAGE REQUEST REGISTRATION COMMENTS -->
   <p><?php printf(__('Devi eseguire il <a href="%s">login</a> per inserire un commento.', 'paolodellaguzzo'), get_option('siteurl') . '/wp-login.php?redirect_to=' . urlencode(get_permalink())); ?></p>
   <!-- END MESSAGE REQUEST REGISTRATION COMMENTS -->
   <?php else : ?> 
   <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
      <?php if ( $user_ID ) : ?>
      <p><?php printf(__('Sei loggato come <a href="%1$s">%2$s</a>.', 'paolodellaguzzo'), get_option('siteurl') . '/wp-admin/profile.php', $user_identity); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Log out da questo account', 'paolodellaguzzo'); ?>"><?php _e('Log out &raquo;', 'paolodellaguzzo'); ?></a></p>
      <?php endif; ?>
      <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="1"></textarea>
      <?php if ( !$user_ID ) : ?>
      <p>
         <label for="author">Nome <?php if ($req) _e(" (required)", 'paolodellaguzzo'); ?></label>
      </p>
      <p>
         <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="2" />
      </p>
      <p>
         <label for="email">Mail <?php if ($req) _e(" (required)", 'paolodellaguzzo'); ?></label>
      </p>
      <p>
         <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="3" />
      </p>
      <p>
         <label for="url">Website</label>
      </p>
      <p>
         <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="4" />
      </p>
      <?php endif; ?>
      <p>
         <input name="submit" type="submit" id="submit" tabindex="5" value="Invia Commento" />
         <?php comment_id_fields(); ?>
      </p>
      <?php do_action('comment_form', $post->ID); ?>
   </form>
   <?php endif; ?>
</div>
<!-- #respond -->
<?php else : 
   if ( ! comments_open() ) :
   ?>
<p class="nocomments"><?php _e( 'I commenti sono chiusi.', 'paolodellaguzzo' ); ?></p>
<?php
   endif;
?>
<?php endif;
?>

So che un po’ spaventa questo codice, ma nella realtà dei fatti è semplice. Ti elencherò in ordine cosa accade:

Controlliamo se l’articolo è protetto da password ed in caso mostriamo un messaggio
Se i commenti sono abilitati (have_comments()) mostriamo il numero dei commenti e dunque chiamiamo la function inserita precedentemente nel file functions.php (wp_list_comments( array( ‘type’ => ‘comment’, ‘callback’ => ‘paolodellaguzzo_comment’ ) );)
Inseriamo la navigazione se ci sono pagine di commenti
Dunque se c’è la possibilità di inserire commenti li facciamo inserire ed eventualmente facciamo fare prima il login all’utente
Infine inviamo il commento
Dunque se i commenti non possono essere inseriti mostreremo il messaggio “I commenti sono chiusi.”

Ogni volta che ti vuoi chiedere cosa fa di preciso una function non ti dimenticare di controllare sul Codex di WordPress.org. Per esempio cosa fa “comments_open(..)“? Scoprilo cliccando quì.

Il risultato e.. la sidebar!

Il risultato che dovresti ottenere è questo:

Ti faccio vedere anche come aggiungere la sidebar dinamica. Con questa sidebar potrai spostare dentro i widget a tuo piacimento.

Entra nel file “sidebar.php” ed inserisci:

<div id="sidebar">
   <div class="pull-right">
      <?php 
         if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar') ) : endif;
      ?>
   </div>
</div>

A questo punto vai nel file “style.css” ed inserisci:

.pull-right {
    position: absolute;
    top: 90px;
    float: right;
    left: 80%;
}

Infine ricordati, come già visto negli articoli precedenti, che nel file functions.php deve trovarsi questo codice per registrare la sidebar:

<?php
   if ( function_exists('register_sidebar') ) {
       register_sidebar(array(
           'name'=>'sidebar',
           'id' => 'sidebar',
           'before_widget' => '<li>',
           'after_widget' => "</li>",
           'before_title' => '<h3 class="widget-title">',
           'after_title' => '</h3>',
       ));
   
   }
?>

Ora vedrai in tutte le pagine dove richiami la sidebar una barra laterale contenente i widgets. Non è il massimo esteticamente e non è nemmeno adatta ad essere responsive. Però da adesso in poi tocca a te!

Conclusioni

Nella prossima ed ultima guida ti farò vedere come caricare il tema che hai appena creato su un sito WordPress esistente. Dunque sei arrivato fin quì e sai creare un tema WordPress! Complimenti 🙂

Se hai dubbi o domande non esitare a scrivermi nei commenti ?

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!)

Commenti