Nel corso di questa guida abbiamo iniziato a sviluppare un sito Web interamente personalizzato con WordPress, HTML e CSS. WordPress è infatti una delle piattaforme più popolari e versatili per la creazione di siti Web, mentre HTML e CSS rappresentano la base dello sviluppo per il Web e consentono di creare ogni singolo elemento necessario per il funzionamento dei siti Internet. Unendo queste potenti tecnologie, siamo in grado di personalizzare ogni componente dei siti Web, dall'aspetto alla struttura fino alle funzionalità interattive.
Personalizzazione dei contenuti WordPress senza limiti
Nelle prime lezioni abbiamo configurato l'ambiente di lavoro e creato le macro aree che conterranno gli elementi del sito, l'avanzamento raggiunto è il seguente:
Ora è tempo di passare alla personalizzazione e definizione degli elementi contenuti all'interno di tutte le pagine. Iniziamo dalla sezione più in alto ovvero quella chiamata <header>. Apriamo il file dedicato, header.php ed inseriamo l'immagine all'interno dell'elemento logo. Ovviamente dovremo inserire l'immagine nella cartella images del nostro folder.
<div id="logo">
<img src="<?php echo get_template_directory_uri();?>/images/logo.png" alt="logo" />
</div>Apriamo anche il file style.css ed aggiungiamo il codice CSS dedicato al nostro logo.
#logo img{
width: auto;
height: 70px;
}Aggiorniamo inoltre le istruzioni degli elementi contenuti nell'area <header>.
nav {
width: 80%;
height: 80px;
background-color: transparent;
float: right;
display: flex;
align-items: center;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
color: #111;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
color: #5400ff;
}Quello che abbiamo appena fatto è stato ripulire la sezione <header> rendendola in questo modo molto più professionale.
Proseguiamo saltando la seconda sezione chiamata #slideshow in quanto nelle prossime lezioni ci focalizzeremo anche sulle animazioni e vedremo come inserire una galleria di tipo slideshow proprio all'interno di quest'area.
Continuiamo quindi con la personalizzazione della sezione sottostante chiamata #content che sarà anche l'area principale ed il cuore dei contenuti delle nostra pagine. Diamo una maggiore forma e disposizione agli elementi e per fare ciò sfruttiamo un plugin WordPress chiamato Advanced Custom Fields.
Advanced Custom Fields
Il plugin "Advanced Custom Fields" (ACF) è un popolare strumento di personalizzazione per WordPress che consente di aggiungere campi personalizzati ai contenuti, permettendo di estendere le funzionalità di WordPress oltre ai campi predefiniti, come titolo, testo e categorie. Grazie a questo add-on andremo ad inserire più campi nei quali distribuire i contenuti che richiameremo nelle pagine del sito.
Passiamo subito alla pratica ed andiamo alla configurazione dei nostri extra fields cliccando sulla nuova voce dedicata all'interno della sidebar di sinistra.
Clicchiamo sul pulsante "Add Field Group" e diamo un nome al nuovo gruppo di campi extra, io per comodità lo chiamo "Campi personalizzati".
Apriamo ora il primo campo disponibile, chiamato "Tipo di campo" e vediamo appunto quali tipologie di campi sono disponibili con ACF. All'interno di questo elenco troviamo tutto quello che è possibile creare in aggiunta ai campi presenti di default all'interno delle pagine o degli articoli di WordPress. Nel nostro caso useremo ACF per creare una griglia alternata che conterrà testo e immagini.
Creiamo quindi il primo campo di tipo "Area di testo" ed assegniamo il nome che useremo per riconoscerlo, ad esempio "testo aggiuntivo 1", mentre all'interno del campo sottostate chiamato "Nome campo" indichiamo il codice univoco che ci servirà per richiamarlo all'interno dei file di lavoro. Attenzione perché qualunque sia il nome che sceglieremo non dovrà avere spazi.
Nel mio caso assegno il nome "testo_aggiuntivo_1".
A questo punto possiamo aggiungere un nuovo campo cliccando sopra la voce "Add Field" e proseguiamo con la creazione di un nuovo field di tipo "Immagine". Anche in questo caso indichiamo un nome per l'input "Etichetta campo" ed un nome univoco per l'input "Nome campo".
Non ci fermiamo qua, ma inseriamo ancora un testo ed un'immagine aggiuntivi. Avendo già creato dei campi identici, non dovremo generarli da zero ma potremo duplicare quelli già presenti cliccando sopra la voce "Duplica" e assegnando un nuovo nome.
A questo punto il risultato è il seguente:
Ultima operazione da fare è quella di indicare all'interno di quali pagine WordPress questi campi dovranno essere attivi per la compilazione. Nel nostro caso diciamo che gli ACF dovranno essere attivi in tutte le pagine, così da poterli usare ovunque. Infine salviamo.
Usciamo e torniamo all'interno delle pagine, apriamo la Home Page e notiamo che a questo punto sono presenti anche i nostri nuovi campi personalizzati, pronti per essere compilati.
Come potrai intuire ora è possibile procedere con la compilazione dei nuovi campi inserendo all'interno di questi il nuovo testo e le immagini che preferiamo, selezionandole dai media.
Richiamare gli elementi nei file
Una volta inseriti i nuovi contenuti e salvato il tutto, è tempo di tornare all'interno dei file e richiamare i singoli elementi. Apriamo il file front-page.php e creiamo una struttura a griglia alternata in questo modo:
<div class="grid-1">
<div class="grid-1-left">
<div class="grid-1-left_i">
</div>
</div>
<div class="grid-1-right">div>
<div class="clr"></div>
</div>Inseriamo anche le regole CSS così da visualizzare il risultato:
.grid-1-left{
width: 50%;
height: 500px;
position: relative;
float: left;
background-color: #ccc;
}
.grid-1-left_i{ padding: 10px;}
.grid-1-right{
width: 50%;
height: 500px;
position: relative;
float: left;
background-color: #ddd;
}
Ora che abbiamo creato una struttura, dobbiamo inserire i nostri contenuti presenti all'interno degli ACF.
Come inserire campi personalizzati WordPress all'interno delle pagine Web?
Advanced Custom Fields consente di richiamare i contenuti inseriti negli elementi interni di WordPress, come Pagine o Articoli, in maniera molto semplice e rapida. È infatti possibile utilizzare degli shortcode specifici per ogni tipo di elemento e richiamare così tutti gli extra fields creati. Il sito Web ufficiale del Plugin fornisce tutte le regole per poter richiamare ogni tipo di campo.
Nel nostro caso usiamo il seguente shortcode inserito direttamente nel codice PHP.
<?php if( get_field('testo_aggiuntivo_1') ): ?>
<p><?php the_field('testo_aggiuntivo_1'); ?></p>
<?php endif; ?>Traducendo il codice appena scritto, stiamo dicendo che se il campo chiamato "testo_aggiuntivo_1" esiste, allora lo dovrò mostrare, in caso contrario non sarà visualizzato. Sfruttiamo questa regola come "validatore" del campo personalizzato e la inseriamo all'interno del costrutto di codice scritto poco fa, aggiornandolo in questo modo:
<?php if( get_field('testo_aggiuntivo_1') ): ?>
<div class="grid-1-left">
<div class="grid-1-left_i">
<p><?php the_field('testo_aggiuntivo_1'); ?></p>
</div>
</div>
<?php endif; ?>A questo punto vedremo comparire il contenuto del campo all'interno della nostra pagina Web.
Ovviamente il risultato finale è da sistemare ma il procedimento funziona.
Passiamo ora all'inserimento dell'immagine. Per richiamare l'immagine abbiamo due modi: il primo consente di richiamare l'elemento immagine fisico ovvero <img>, il secondo invece prevede di richiamare l'URL dell'immagine che potremo inserire all'interno di qualunque elemento e, come nel nostro caso, di usarlo come background del <div> chiamato grid-1-right.
<?php
$img1 = get_field('immagine_aggiuntiva_1');
?>
<?php if( get_field('immagine_aggiuntiva_1') ): ?>
<div class="grid-1-right" style="background-image:url(<?php echo esc_url($img1 ['url']); ?>);"></div>
<?php endif; ?>All'interno di questo codice, andiamo a richiamare nella prima parte il campo "immagine_aggiuntiva_1" per poi inserirlo direttamente nel URL del tag <img>.
Replichiamo queste operazioni anche per i secondi campi creati in questo modo:
<!--grid-2-->
<div class="grid-2">
<?php if( get_field('testo_aggiuntivo_2') ): ?>
<div class="grid-1-left">
<div class="grid-1-left_i">
<p><?php the_field('testo_aggiuntivo_2'); ?></p>
</div>
</div>
<?php endif; ?>
<?php
$img2 = get_field('immagine_aggiuntiva_2');
?>
<?php if( get_field('immagine_aggiuntiva_2') ): ?>
<div class="grid-1-right" style="background-image:url(<?php echo esc_url($img2['url']); ?>);"></div>
<?php endif; ?>
<div class="clr"></div>
</div>
<!--grid-2-->Infine agiamo sulle regole CSS ottimizzando il contenuto dal punto di vista visivo:
.grid-2 .grid-1-left, .grid-2 .grid-1-right{ float: right;}Ed aggiorniamo i seguenti elementi:
#content_i {
padding: 50px 50px;
}
#content h1 {
color: #111;
}
#content p {
color: #444;
}
#content {
background-color: #FFF;
}
.grid-1-left {;
display: flex;
align-items: center;
}
.grid-1-left_i {
padding: 50px;
}A questo punto avremo ottenuto il seguente risultato.
Insomma, abbiamo visto come sia possibile personalizzare le pagine e gli elementi dei siti Web senza limitarci alle funzionalità previste di default da WordPress. Nella prossima lezione continueremo con la personalizzazione delle altre pagine che comporranno il nostro sito Web.