Vuoi creare un tema WordPress? Esploriamo il loop!

In questo e nel prossimo articolo entreremo nel “cuore” di WordPress, infatti esamineremo nel dettaglio il suo famoso “loop”, cioè il codice utilizzato per visualizzare i vari tipi di post che possono essere creati con WordPress.

Come al solito vi ricordo che per seguire questa guida è necessario:

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

Cosa è il loop di WordPress

Se tornate a visualizzare il codice html del tema Mymagazine noterete che il medesimo codice viene ripetuto molte volte. Ad esempio a partire dalla riga n. 109 troverete diversi tag div class=”articles-home”, che racchiudono l’anteprima di ciascun post, con la relativa immagine in evidenza, titolo, categoria e tag. Invece di scrivere questo codice tante volte quanti sono i post pubblicati, inseriamo soltanto il codice del loop, in modo tale che sia WordPress a visualizzare dinamicamente i post in sequenza.
Il loop è il codice utilizzato da WordPress per visualizzare il contenuto dei post. Più nel dettaglio, il loop

  • verifica se esistono contenuti da visualizzare;
  • in caso affermativo, crea un ciclo che si ripete tante volte quanti sono i contenuti trovati;
  • all’interno di questo ciclo, inserisce il codice necessario alla visualizzazione del post.

Seguendo le indicazioni del codex di WordPress, il loop ha questa struttura:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
       <!-- qui inseriamo il codice del contenuto del post da visualizzare -->;
<?php endwhile; else : ?>
	<!-- qui inseriamo il codice da visualizzare se nessun post viene trovato -->
<?php endif; ?>

Esiste anche una sintassi alternativa che puoi incontrare esaminando il codice di diversi temi, che conduce comunque allo stesso risultato del codice riportato sopra:

<?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 
		//
		// Contenuto del post
		//
	} // end while
} // end if
?>

Il file index.php

Aprite adesso il file index.php che del tema Mymagazine che avete scaricato dalla pagina della directory dei temi di WordPress e confrontatelo con il codice che abbiamo visto all’inizio dell’articolo:

<?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(); ?>

Come vedete il codice si è ridotto moltissimo, adesso è WordPress a ripetere ciclicamente le istruzioni che avevamo inserito nel codice html. Esaminiamo le istruzioni più importanti:

<?php
    get_header();
?>

Abbiamo già dedicato alcuni articoli di questa guida alla creazione del file header.php. Tuttavia non abbiamo ancora detto a WordPress se e quando utilizzare questo file; glielo diciamo adesso, con la funzione get_header(), che indica a WordPress di elaborare il file header.php presente nella cartella del tema. Badate che potremmo anche avere più file contenente l’header, da utilizzare ciascuno in determinate circostanze. Supponiamo di volere una header elaborata specificamente per la home page, ed un’altra header da utilizzare in tutte le altre pagine del sito. In questo caso oltre al file header.php dovremmo creare un nuovo file con una header diversa, che chiameremo (ad esempio) header-homepage.php. Per utilizzarli selettivamente dovremmo usare un codice del genere:

<?php
if ( is_home() ) :
	get_header( 'homepage' );
else :
	get_header();
endif;
?>

In pratica useremo una espressione condizionale che dice a WordPress di cercare un file header-homepage.php se ci troviamo nella pagina home oppure un file header.php in tutti gli altri casi.
A partire dalla riga n. 5 troviamo il loop, all’interno del quale troviamo gli articoli del sito, contenuti all’interno dei tag <article>. Ciascun <article> ha una <header>, con un titolo contenuto all’interno di un tag <h2>, come possiamo notare alla riga n. 10:

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

Siccome vogliamo che il titolo valga anche come link all’articolo, all’interno del tag <h2> abbiamo inserito il tag <a>; al suo interno troviamo due funzioni:

  • la funzione the_permalink() serve a visualizzare l’URL del post, e pertanto attribuisce all’attributo href del tag a l’url corretto;
  • la funzione the_title() serve a visualizzare il titolo del post.

Alla riga n. 13 incontriamo una espressione condizionale che consente di elaborare il codice contenuto nelle righe nn. 14-18 soltanto nel caso in cui l’articolo abbia una immagine in evidenza

<?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 } ?>

In pratica stiamo dicendo a WordPress di visualizzare un link all’articolo

<a href="<?php the_permalink(); ?>">

che racchiuda al suo interno l’immagine in evidenza del post, attraverso l’uso della funzione the_post_thumbnail(). Come già detto, nel caso in cui non vi sia alcuna immagine in evidenza questo codice non verrà elaborato grazie all’espressione condizionale di cui sopra.
Alla riga n. 24 abbiamo la funzione the_content(); fondamentale per visualizzare il contenuto di post e pagine. Ne parleremo diffusamente nel prossimo articolo della guida, se nel frattempo avete dubbi o suggerimenti scrivete un commento qui sotto. Se l’articolo vi è piaciuto condividetelo!

 
https://amzn.to/2K5QVkN