A seguito della costruzione e dell'attivazione del nuovo tema siamo pronti per iniziare con lo sviluppo della prima pagina del sito Web. La Home Page. Partiamo aprendo la Dashboard di WordPress e creando una nuova pagina chiamata ovviamente Home Page.
All'interno di questa pagina saranno presenti i contenuti che dovranno comparire nella prima pagina, o quasi. Infatti, grazie alla costruzione personalizzata del nostro tema potremo inserire elementi all'interno di ogni sua parte.
Come Creare una home page personalizzata con WordPress
Inseriamo del testo all'interno del campo principale in questo modo:
A questo punto salviamo cliccando sul tasto "Pubblica" presente a destra della schermata.
Ora andiamo all'interno del menu di sinistra e raggiungiamo la voce "Impostazioni > Lettura". All'interno di questa sezione indichiamo che questa nuova pagina corrisponderà alla Home Page. La prima pagina che dovrà aprirsi raggiungendo il nostro sito. Alla voce "La tua homepage mostra" selezioniamo la pagina appena creata, "Home Page", e salviamo le modifiche.
A questo punto la pagina Home Page diventerà la prima che si aprirà di default quando verrà visualizzato il nostro sito.
Il mock-up
Prima di passare alla personalizzazione è molto importante avere chiaro quale sarà il risultato che vogliamo creare. Realizzando un mock-up o un abbozzo del design del sito avremo l'opportunità di tradurre le idee in una rappresentazione visiva che ci consentirà di sapere con esattezza quali elementi dovremo sviluppare.
Di seguito ho realizzato un rapido e semplice mock-up per definire le principali aree che dovranno essere contenute all'interno della Home Page.
Ora che abbiamo chiara la disposizione degli elementi possiamo iniziare con lo sviluppo. Recuperiamo i file creati durante la scorsa lezione e duplichiamo il file index.php rinominandolo front-page.php.
In questo modo il nuovo file ci servirà solamente per personalizzare la prima pagina del sito e potremo operare in tranquillità. Chiamando la pagina front-page.php in automatico WordPress leggerà questa pagina come pagina Home.
Mettiamo a confronto la pagina con il file di codice per capire quali elementi sono coinvolti.
<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>Quello che c'è scritto all'interno di questo file serve a richiamare gli elementi della pagina assegnata nel seguente modo:
<?php the_title(); ?>Questo shortcode serve a richiamare il titolo della pagina WP.
<?php the_content(); ?>A questo punto abbiamo piene possibilità di creazione e personalizzazione.
Le macro-aree della pagina
Basandoci sul mock-up che abbiamo creato dobbiamo definire le macro aree della nostra pagina. Per fare ciò iniziamo dall'area superiore che è contenuta all'interno del file header.php e quella inferiore presente in footer.php. Apriamo quindi header.php e procediamo in questo modo:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div id="logo"></div>
<nav>
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</nav>
<div class="clr"></div>
</header>Ora apriamo il foglio di stile style.css e inseriamo il codice CSS che consentirà la stilizzazione del codice HTML:
/*SERVICE*/
body{ margin: 0px;}
.clr{ clear: both;}
/*HEADER*/
#logo{
width: 20%;
height: 80px;
background-color: blue;
float: left;
}
nav{
width: 80%;
height: 80px;
background-color: #0d90c6;
float: left;
}
All'interno dell'elemento <nav> andremo ad inserire il menu di navigazione al quale dedicheremo la prossima lezione. Ora concentriamoci sulla stilizzazione della nostra pagina.
Proseguiamo con la creazione della parte finale del nostro sito: il <footer>. Apriamo il file footer.php e iniziamo la compilazione.
<footer>
<div class="footer">
<div class="footer_i">
<p>
• Lorem ipsum dolor sit amet<br/>
• Consectetur adipiscing elit<br/>
• Sed do eiusmod tempor incididunt<br/>
• Ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="footer">
<div class="footer_i">
<p>
• Lorem ipsum dolor sit amet<br/>
• Consectetur adipiscing elit<br/>
• Sed do eiusmod tempor incididunt<br/>
• Ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="footer">
<div class="footer_i">
<p>
• Lorem ipsum dolor sit amet<br/>
• Consectetur adipiscing elit<br/>
• Sed do eiusmod tempor incididunt<br/>
• Ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="clr"></div>
</footer>Logicamente il contenuto testuale è puramente illustrativo. In questa pagina è bene inserire i riferimenti di contatto e le informazioni che potrebbero essere utili al visitatore. Come ad esempio i collegamenti social o un rapido menu di navigazione.
Proseguiamo con la scrittura del codice CSS grazie al quale definiamo lo stile dei nuovi elementi. Anche in questo caso le istruzioni saranno aggiunte all'interno del file style.css:
/*FOOTER*/
footer{
width: 100%;
height: auto;
background-color: #c60d5f;
}
.footer{
width: 33.3%;
height: auto;
float: left;
}
.footer_i{
padding: 10px;
}
footer p{
color: #fff;
}Questo il risultato:
La Main Area
Ora è il momento di concentrarci sulla Main Area della nostra pagina. La parte centrale che sincronizza il contenuto presente in WordPress. Proseguiamo aggiungendo le seguenti informazioni all'interno del file front-page.php:
<?php get_header(); ?>
<div id="content">
<div id="content_i">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
</div>
<?php get_footer(); ?>E di conseguenza anche le regole stilistiche:
/*MAIN CONTENT*/
#content{
width: 100%;
height: auto;
background-color: #c6b70d;
}
#content_i{
padding: 100px 50px;
}
#content h1{
font-size: 30px;
text-transform: uppercase;
color: #fff;
}
#content p{
color: #fff;
}Aggiorniamo la pagina e otteniamo il seguente risultato:
Aggiungiamo ora il <div> dedicato allo slideshow che inseriremo nella lezione dedicata alle animazioni. Integriamo il file front-page.php in questo modo:
<?php get_header(); ?>
<div id="slideshow"></div>
<div id="content">
<div id="content_i">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
</div>
<?php get_footer(); ?>Infine inseriamo il codice CSS relativo all'interno del file style.css
/*SLIDESHOW*/
#slideshow{
width: 100%;
height: 400px;
background-color: #0dc69f;
}
A questo punto abbiamo creato tutti gli elementi necessari per avere una Home Page personalizzata, ovviamente basilare. Con essa potremo avere pieno controllo per costruire ogni elemento che vorremo sia presente.
Durante le prossime lezioni andremo più a fondo e, oltre a migliorare l'aspetto estetico del sito Web, introdurremo molti strumenti e plugin di WordPress per sfruttare tutti gli strumenti e i punti di forza di questo metodo di lavoro.