Ora che abbiamo creato l'head del nostro tema andiamo a creare il menù. Siccome vogliamo che anche il menù venga poi richiamato su tutti i template insieme all head lo inseriremo nel file header.php.
Se vogliamo creare un tema che abbia una buona usabilità dobbiamo creare un menù responsive, ovvero dovrà adattarsi anche da smartphone e da tablet, per fare ciò possiamo sfruttare le classi di bootstrap. Inoltre il nostro menù dovrà essere personalizzabile da pannello in modo che l'utente possa modificare il menù solo attraverso qualche click.
Mettiamoci subito all'opera apriamo il file header.php e ci poniamo nell'ultima riga sotto il tag <body> e scriviamo:
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="<?php echo site_url(); ?>">
<img class="logo" src="<?php echo get_header_image(); ?>" alt="<?php echo get_bloginfo('title'); ?>"/>
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<?php wp_nav_menu(['menu_class' => 'nav navbar-nav responsive-nav main-nav-list']); ?>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</header>
Ora non vi spaventate le righe inserite sono molte, ma non sono complesse!
Inizialmente tralasciamo la parte stilistica-strutturale e ci concentriamo sulla funzione <?php wp_nav_menu(['menu_class' => 'nav navbar-nav responsive-nav main-nav-list']); ?>.
La funzione wp_nav_menu() è una funzione di wordpress molto utile; permette di creare dei menù modificabili direttamente da pannello di amministrazione.
Nel nostro caso abbiamo inserito solo il parametro "menu_class" ovvero le classi che saranno date al contenitore del nostro menù. Vi consiglio di approfondire la funzione wp_nav_menu() nel codex ufficiale di wordpress.
Nel codice abbiamo anche inserito un immagine affianco al menù per aggiungere il logo nel nostro sito. Siccome vogliamo che anche questo sia personalizzabile da pannello utiliziamo la funzione get_header_image() che preleverà automaticamente l'immagine inserita in Aspetto->Personalizza (Lo vedremo meglio nel prossimo articolo).
Per integrare la funzione wp_nav_menu() con il menù di bootstrap ci sono due strade, aggiungere tramite style.css le proprietà mancanti o integrare l'utile pacchetto wp-bootstrap-navwalker. Noi in questa guida utilizzeremo la prima strada, in caso voleste utilizzare il pacchetto wp-bootstrap-navwalker leggete quest'articolo per scoprire come fare.
Quindi apriamo il file style.css e inseriamo:
header .navbar ul {
list-style: none;
margin-bottom: 0px;
}
header .navbar ul li {
padding: 10px 40px;
}
Se da pannello aggiungiamo 2 nuove pagine che chiameremo pagina1 e pagina2 e se avremmo fatto tutto corettamente il risultato dovrebbe essere come quello sottostante,
Nel prossimo articolo scopriremo come attivare le personalizzazioni da Pannello.
Commenti
Ancora nessun commento per questo articolo