Lezione 15 - Come creare un template per le pagine Wordpress

In questo nuovo articolo della guida, andiamo a lavorare sulle pagine interne del nostro sito.

Per andare a creare un template per queste pagine, dobbiamo andar a lavorare sul file page.php. Ora il nostro file page.php è vuoto, se infatti entriamo in una pagina del sito (ad es. Pagina 1), vediamo una pagina completamente bianca.

Abbiamo già visto nella seconda lezione la gerarchia dei template, questa è molto importante per capire per ogni template quale file fa riferimento. Se avete bisogno di un ripasso qui trovate il link alla documentazione.

Procediamo quindi aprendo il file page.php che si deve trovare nella root del nostro tema (nel caso non l'avete creato nelle prime lezioni createlo ora). Attualmente il file risulta vuoto, noi ci inseriamo queste righe di codice:

<?php get_header(); ?>

<?php get_footer(); ?>

Come già fatto per l'homepage andiamo a recuperare il file header.php e il footer.php . Così facendo se ora riproviamo ad accedere in una delle nostre pagine dovremmo vederla con il menù e il footer del nostro tema.

Ora completiamo la pagina stampando titolo e contenuto in questo modo:

<?php get_header(); ?>
	<div class="container page-container">
		<?php
		if ( have_posts() ) :
			while ( have_posts() ) : the_post(); ?>

				<h1 class="text-center" ><?php the_title(); ?></h1>
				<?php the_content(); ?>

			<?php endwhile;
		endif; ?>
	</div>
<?php get_footer(); ?>

Anche in questo caso utilizziamo il loop per stampare il contenuto della pagina. Al suo interno troviamo la funzione the_title() che l'abbiamo già utilizzata in altre lezioni e una nuova funzione the_content(), che stampa il contenuto della pagina o dell'articolo che andiamo a prendere in considerazione.

Ora se proviamo a ricaricare la pagina e se abbiamo inserito del contenuto tramite il pannello di amministrazione, dovremmo vedere stampato sia il titolo che il contenuto da noi inserito.

Ora per concludere miglioriamo un po' il layout grafico con un po' di css:

.page-container {
	padding-top: 60px;
	padding-bottom: 60px;
}

.page-container h1 {
	margin-bottom: 30px;
        font-weight: bold;
}

E il risultato dovrebbe essere il seguente: