Lezione 4 - Creare il menù

Lezione 4 - Creare il menù

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-default">
    <div class="container">
    <!-- 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">
          <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="<?php echo site_url(); ?>">
          <img class="logo" src="<?php echo get_header_image(); ?>" alt="<?php echo(get_bloginfo('title')); ?>"/>
        </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(['menu_class' => 'nav navbar-nav responsive-nav main-nav-list']);   ?>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </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:


 .navbar-nav ul li a, .navbar-nav ul li a:active, .navbar-nav ul li a:hover, .navbar-nav ul li a:link,
 .navbar-nav ul li a:visited {   text-decoration: none;
                                 color:#6B6B6B;   }

 .navbar-nav ul { list-style: none; }

 @media all and (min-width:768px) { .navbar-nav ul li { float:left;
                                                        padding:20px; }
                                    }

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

Lascia un commento: