Modificare header e footer WordPress

Siamo giunti al terzo capitolo della guida come creare un tema per WordPress. In questo tutorial vedremo come costruire tre elementi fondamentali di un qualsiasi sito web: header, menu di navigazione e footer.

Come per le guide precedenti sfrutteremo i componenti di Bootstrap, facendo riferimento alla guida ufficiale. Avremo anche bisogno di consultare la Bibbia dello sviluppatore WordPress: il Codex.

Da dove cominciamo? Direi di partire dalla testata che nelle impostazioni classiche di Bootstrap contiene anche il menù di navigazione principale.

navbar

Apriamo quindi il file header.php e cancelliamo tutta questa porzione di codice:

<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'webfool' ); ?></a>

<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php
endif;

$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding -->

<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'webfool' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->

Ora visualizzando la pagina dei componenti di Bootsrap scegliamo l’esempio di navbar che più ci piace. Io direi di prendere il primo snippet, quello più ricco di elementi che in pratica non è altro che il codice che realizza l’immagine precedente. Nel file header.php, nello nuovo spazio vuoto, inseriamo un tag <header></header> e al suo interno incolliamo lo snippet copiato.

<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>

Ora cancelliamo gli elementi che non ci servono, direi di lasciare solamente il brand e il menu di destra. Dopo queste operazioni dovrebbe rimanere solo il codice di seguito:

<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Ecco come si presenterà il nostro nuovo header

Header modificato

A questo punto possiamo sostituire la barra di navigazione rimasta con il menù di WordPress, avvalendoci della funzione wp_nav_menu. La funzione accetta come parametro un’array, le cui chiavi definiscono i criteri di visualizzazione. La chiave theme_location individua la posizione del menu stabilita nel file functions.php.

Nella pagina successiva vedremo anche come registrare un nuovo menu. Impostando la chiave la chiave items_wrap possiamo definire la formattazione della lista e assegnare le classi in modo da sfruttare lo stile di Bootstrap.

<?php
wp_nav_menu (array(
'theme_location' => 'menu-1',
'container' => false,
'items_wrap' => '<ul id="%1$s" class="nav navbar-nav navbar-right">%3$s</ul>'));
?>

Procediamo alla sostituzione del menu con il codice appena mostrato. Il risultato lato codice del nostro header dovrebbe essere il seguente:

<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php wp_nav_menu (array(
'theme_location' => 'menu-1',
'container' => false,
'items_wrap' => '<ul id="%1$s" class="nav navbar-nav navbar-right">%3$s</ul>'));
?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>

Per completare il discorso del menu Bootstrap, implementando ad esempio il dropdown, possiamo avvalerci di un componente esterno, la classe wp-bootstrap-navwalker. Scarichiamo il file wp-bootstrap-navwalker.php da GitHub e collochiamola nella cartella /inc/ del tema. Apriamo il file functions.php e inseriamo alla fine questa stringa:

require get_template_directory() . '/inc/wp_bootstrap_navwalker.php';

Ora torniamo sul file header.php e facciamo una piccola modifica ai parametri della funzione wp_nav_menu, inserendo la chiave walker e nel relativo valore istanziamo la classe wp-bootstrap-navwalker.

<?php
wp_nav_menu (array(
'theme_location' => 'primary',
'container' => false,
'walker' => new wp_bootstrap_navwalker(),
'items_wrap' => '<ul id="%1$s" class="nav navbar-nav navbar-right">%3$s</ul>'));
?>

Per creare un nuovo elemento dropdown nel menu, andiamo in Aspetto →Menu e inseriamo nella barra di navigazione un nuovo Link personalizzato. Inseriamo il carattere cancelletto (#) nella voce URL e collochiamo gli elementi a scomparsa all’interno dell’elemento genitore.

Struttura menu dropdownPer il momento accantoniamo l’header, nei tutorial successivi vedremo come gestire il logo attraverso il pannello delle opzioni. Passiamo invece al footer e alla registrazione di un nuovo menu da mostrare a fondo pagina.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *