Vuoi creare un tema WordPress? Completiamo il file index.php

In questo articolo completeremo l’esame del file index.php del tema Mymagazine, che avevamo iniziato nella precedente parte della guida.
Come al solito vi ricordo che per seguire questa guida occorre:

  • una installazione di WordPress funzionante;
  • una conoscenza almeno di base di html, css, jQuery e php.

Completiamo il file index.php

Nel precedente articolo abbiamo iniziato l’esame del file index.php del tema Mymagazine, il cui codice è il seguente:

<?php
    get_header();
?>
        <div id="content" class="large-8 columns" role="main">
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <article>
                <header class="article-intro">
                    <div class="row">
                        <div class="article-title <?php if ( ! has_post_thumbnail() ) echo 'no-thumbnail '; ?>large-12 columns">
                            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        </div>
                    </div><!-- end .row -->
                    <?php if ( has_post_thumbnail() ) { ?> 
                        <div class="row">
                            <div class="large-12 columns">
                                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                            </div>
                        </div><!-- end .row -->
                    <?php } ?>
                </header><!-- end .article-intro -->
                <div class="row">
                    <div class="article-container large-12 columns">
                        <div class="article-content">
                           <?php the_content(); ?> 
                        </div>
                    </div><!-- end .article-container -->
                </div><!-- end .row -->
            </article>
            <?php endwhile; ?>
            <div class="clear"></div>
            <?php $pagination = get_the_posts_pagination();
			if ($pagination){ ?>
				<div class="pagination">
					<?php previous_posts_link( '<span class="previous">' . __( "Previous", "mymagazine" ) . '</span>' ) ?>
					<?php next_posts_link( '<span class="next">' . __( "Next", "mymagazine" ) . '</span>' ); ?>
				</div>
			<?php } ?>
            <?php // If no content, include the "No posts found" template.
		else :
			get_template_part( 'content', 'none' );
		endif;
	    ?>   
        </div>
        <!-- End Main Column -->
        <?php get_sidebar(); ?>
        <?php get_footer(); ?>

Alla riga n. 24 troviamo la funzione the_content(), questa funzione ha lo scopo di visualizzare il contenuto del post o della pagina inserito attraverso l’editor di WordPress. In altre parole, quando create il contenuto di un post o di una pagina, inserendo testi, immagini e tutto quello che wordpress vi consente di inserire, sappiate che lo visualizzerete nella pagina web grazie alla funzione the_content(); in mancanza di essa vi ritrovereste davanti ad una pagina senza testi nè altro.
La funzione the_content() accetta 2 parametri:

  • $more_link_text
  • $strip_teaser

Il primo parametro serve a definire il testo da visualizzare quando un articolo viene troncato attraverso l’uso del tag < !- – more – -> dell’editor di WordPress. Per default il tag <!- – more – -> determina la troncatura del testo con questo simbolo […]. Se volete sostituire le parentesi quadre ed i tre puntini con un testo a vostro piacimento, ad esempio “Continua a leggere”, la funzione the_content() andrà scritta così:

<?php the_content('Continua a leggere'); ?>

Tenete a mente che se volete personalizzare al volo il testo da personalizzare, ad esempio scrivendo “Scopri il resto”, potete modificare direttamente il tag more al momento dell’inserimento, scrivendo così < !- – more Scopri il resto – – >. Anche personalizzando la funzione the_content(), questo tag personalizzato avrà comunque la precedenza su quanto definito con tale funzione.
Il secondo parametro, $strip_teaser, serve invece ad eliminare completamente la visualizzazione del tag < !- – more – – > . Pertanto, se volete che dopo il testo troncato non venga visualizzato nulla, nemmeno il classico […], scrivete la funzione the content così:

<?php the_content('', TRUE); ?>

Alla riga n. 29 si conclude il ciclo while del loop. Il codice che segue è sempre contenuto all’interno del loop, che si concluderà alla riga n. 41, ma viene elaborato solo alla fine dell’elenco degli articoli.
In particolare alle righe nn. 30-31 verifichiamo se sia attiva la paginazione dei post. Infatti andando nella bacheca di WordPress, su -> Impostazioni -> Lettura, è possibile determinare il numero di post da visualizzare in una sola pagina. Se il numero dei post totali eccede tale numero vengono create delle pagine aggiuntive che contengono gli ulteriori articoli.
La funzione get_the_posts_pagination() restituisce una serie di link relativi alle diverse pagine in cui viene suddiviso l’elenco dei post; nel caso in cui la paginazione non sia attiva, in quanto il numero di post da visualizzare è inferiore a quanto stabilito nelle impostazioni di lettura, la funzione restituisce una stringa vuota. Per tale motivo abbiamo assegnato il valore di tale funzione alla variabile $pagination: il nostro scopo è infatti quello di determinare se la paginazione sia attiva o meno. Nel caso in cui sia attiva (quindi nel caso in cui la variabile $pagination restituisca un valore) verrà eseguito il codice contenuto nelle righe n. 33-36:

if ($pagination){ ?>
	<div class="pagination">
	<?php previous_posts_link( '<span class="previous">' . __( "Previous", "mymagazine" ) . '</span>' ) ?>
	<?php next_posts_link( '<span class="next">' . __( "Next", "mymagazine" ) . '</span>' ); ?>
	</div>
<?php } ?>

In pratica se la paginazione è attiva verrà visualizzato un div contenente i link ai post precedenti e successivi, grazie alle funzioni previous_posts_link() e next_posts_link(); in caso contrario il codice di queste righe non verrà elaborato e si procederà con le righe seguenti. L’unico parametro accettato da queste due funzioni è l’etichetta di navigazione, cioè il codice html da visualizzare all’interno del link; nel nostro caso abbiamo inserito un tag span con le scritte, rispettivamente, Previous e Next.

Esempio di paginazione alla fine di un elenco di post
Ecco come apparirà la paginazione in fondo all’eleno dei post

Come abbiamo detto nell’articolo dedicato al loop, questo inizia alla riga n. 5 con l’espressione if( have_posts() ), cioè il loop valuta come prima cosa se vi siano post da mostrare, ed in caso affermativo prosegue con la visualizzazione degli stessi. Cosa accade invece se non vi sono post? In questo caso viene elaborato un codice alternativo, che è quello contenuto alle righe nn. 39-40:

else :
get_template_part( 'content', 'none' );

In altre parole stiamo dicendo a WordPress: se la condizione if( have_posts() ) non è vera elabora un altro file del tema denominato content-none.php.
Per fare questo utilizziamo la funzione get_template_part($slug, $name) che accetta 2 parametri;

  • il primo, $slug, è obbligatorio ed è il nome generico del template da richiamare (nel nostro caso “content”);
  • il secondo, $name, è opzionale e va utilizzato nel caso in cui vi siano più file di un template, che inizino con il medesimo slug, per indicare esattamente il file a cui ci si riferisce. Ad esempio nel tema Mymagazine abbiamo un file content.php, ed i file content-video.php, content-gallery.php, content-image.php, content-aside.php e content-none.php. Per indicare il file che intendiamo richiamare tra tutti quelli che abbiano lo slug content, specifichiamo nella funzione get_template_part() la seconda parte del nome del file, quella separata dal trattino (in questo caso vogliamo richiamare il file content-none.php, perciò abbiamo scritto come secondo parametro ‘none’).

Alla riga n. 41 si conclude finamente il loop. Alle righe n. 45 e 45 richiamiamo i file sidebar.php e footer.php, di cui parleremo nei prossimi articoli. Nel frattempo se avete dubbi o considerazioni lasciate pure un commento qui sotto e se l’articolo vi è piaciuto condividetelo!