Come creare un tema WordPress. Completiamo il file header.php

In questo appuntamento della nostra guida completeremo il file header.php, completando la sezione <header> contenente logo e menu di navigazione. Come già accennato nella seconda parte della guida, si tratta di un codice che viene ripetuto in tutte le pagine del sito, perciò è opportuno scriverlo una sola volta nel file header.php e lasciare a WordPress il compito di riproporlo automaticamente.

Come al solito vi ricordo che per seguire questa guida è necessario:

  • una installazione di WordPress funzionante;
  • una conoscenza almeno di base di html, css, jQuery e php.

Completiamo l’header del tema WordPress

Riapriamo il file header.php del tema mymagazine: avevamo iniziato ad esaminare il codice fino alla riga n. 6, poi ci siamo soffermati sulle funzioni necessarie ad inserire i link ai fogli di stile nel file functions.php e abbiamo spiegato come le funzioni possano essere richiamate nel codice attraverso gli action hooks. Adesso è più facile comprendere il significato della riga n. 7 che contiene la funzione “wp_head()” che ha lo scopo di attivare l’action hook ‘wp_head’, largamente utilizzato da temi e plugin. Questa funzione va sempre inserita nella sezione <head> subito prima del relativo tag di chiusura.

La funzione body_class()

La riga numero 9 contiene il seguente codice:

<body <?php body_class(); ?>>

La funzione body_class() ha lo scopo di assegnare dinamicamente delle classi all’elemento <body>, in base alla pagina visualizzata ed in base al template file che viene utilizzato da WordPress per visualizzare tale pagina. Ad esempio nel caso della home page WordPress assegnerà la classe .home e il codice html della pagina sarà qualcosa del genere: <body class=”home blog”>. I tipi di classi che WordPress può assegnare dinamicamente grazie a questa funzione sono veramente tanti e sono elencati in questa pagina del codex, ma la cosa importante da puntualizzare è che grazie a questa funzione è possibile personalizzare lo stile dei diversi tipi di pagine generate da WordPress modificando gli stili css da attribuire a ciascuna classe. Ad esempio se volessimo attribuire un colore di sfondo rosso alla home page ed un colore verde alle pagine archivio, nel nostro foglio di stile scriveremmo così:

.home { background: red; }
.archive { background: green; }

La riga n. 12 contiene una istruzione condizionale if che termina alla riga n. 20


<?php if ( get_header_image() ) : ?>
    <div class="row">
        <div id="site-header">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                <img class="custom-header" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
            </a>
        </div>
    </div>
<?php endif; ?>

Pertanto, il codice contenuto all’interno di questa istruzione viene eseguito soltanto nel caso in cui la funzione get_header_image() restituisca un valore, in caso contrario WordPress non terrà conto delle istruzioni contenute all’interno dell’istruzione if e continuerà con l’elaborazione del codice successivo. Ma qual è il valore che può essere restituito dalla funzione get_header_image() ? Questa funzione restituisce l’URL dell’immagine della testata, che può essere caricata dal customizzatore, nella sezione “Header Image”, come si può vedere dall’immagine seguentela sezione del customizzatore da dove potere caricare l'immagine della header del tema WordPress

Allea riga n. 21 si apre il tag <header> che chiuderemo alla riga n. 103. Alla riga n. 21 si apre un <div> al quale ho attribuito la classe <pre-header>, che contiene le icone social, il modulo di ricerca e i link per accedere o registrarsi al sito in alto a destra della pagina, su sfondo azzurro.

immagine della header del tema WordPress mymagazine

Alle righe nn. 28 e 44 troviamo la funzione wp_nav_menu() destinata alla gestione del menu “social”. Ne riparleremo tra poche righe quando utilizzaremo la medesima funzione per la gestione del menu di navigazione.

Alla riga n. 54 troviamo la funzione incaricata di visualizzare il modulo di ricerca get_search_form():

<?php get_search_form(); ?>

La riga n. 55 contiene il link alla pagina di login di WordPress:

<a class="log" href="<?php echo esc_url(wp_login_url( home_url() )); ?>" title="Login"><?php echo _e('Login', 'mymagazine'); ?></a>

in particolare abbiamo utilizzato la funzione wp_login_url() cha accetta al proprio interno, come parametro opzionale, l’url della pagina alla quale reindirizzare l’utente dopo il login. Nel nostro caso abbiamo inserito all’interno delle parentesi “home_url()” per reindirizzare l’utente alla home page, avremmo potuto scrivere “get_permalink()” per reindirizzare l’utente alla medesima pagina dalla quale proveniva. La funzione wp_login_url() è contenuta all’interno della funzione esc_url() che ha lo scopo di “sanitizzare” gli url per evitare che al loro interno vi siano caratteri non validi o pericolosi.

La riga n. 56, molto simile alla precedente, contiene il link alla pagina di registrazione di WordPress. Per tale motivo, anzichè contenere la funzione wp_login_url contiene la funzione wp_registration_url().

Le righe dalla n. 64 alla n. 69 contengono un’altra espressione condizionale if:

if ( '' != get_theme_mod( 'mymagazine_logo_image' )) {
    $logo_image_url = get_theme_mod( 'mymagazine_logo_image' ); ?>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
        <img class="logo-img" src="<?php echo esc_url( $logo_image_url ); ?>" alt="logo"/>
    </a>
    <?php
} else { ?>
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php }

 

Per la prima volta incontriamo la funzione get_theme_mod(), utilizzata dal theme customizer di WordPress per gestire e memorizzare le opzioni che il tema consente di modificare, appunto, attraverso il customizzatore. Ci occuperemo in seguito di esaminare il funzionamento del Customizer, in questo caso ci basti sapere che stiamo chiedendo a WordPress di verificare se l’opzione denominata “mymagazine_logo_image” contiene un valore, in caso positivo assegneremo tale valore (che è l’indirizzo url dell’imagine utilizzata come logo) alla variabile $logo_image_url (riga n. 65) e nella riga successiva utilizzeremo tale variabile come valore dell’attributo src del tag <img>; in caso negativo non verrà caricata alcuna immagine ma visualizzeremo  il titolo del sito all’interno di un tag <h1>. Come visto prima,  la funzione home_url( ‘/’ ) specifica che il tag <a> deve indirizzare l’utente alla home page del sito. Ritroviamo inoltre la funzione bloginfo(), che in questo caso visualizza il nome del sito all’interno del tag <a>.

Analogamente, nella riga successiva dedicata alla descrizione del sito, lasciamo che sia la funzione bloginfo() a visualizzarla.

Il menu di navigazione del tema WordPress

Il menu di navigazione viene gestito dal pannello di amministrazione di WordPress, è sufficiente andare su “Aspetto > Menu” per personalizzare le pagine ed i link da visualizzare nel menu. Vi ricordo che nel precedente articolo dedicato alle “theme features” abbiamo parlato della funzione register_nav_menus(), con la quale abbiamo innanzitutto comunicato a WordPress che il nostro tema supporta i menu (senza questa funzione, andando su “bacheca” > “aspetto” non avremmo trovato la voce “menu”), ed inoltre abbiamo registrato due posizioni alle quali è possibile associare i menu che verranno creati.

Adesso provate ad andare su “Aspetto > Menu” e cliccate su “crea un nuovo menu”, dovreste trovare una schermata del genere:

immagine della sezione menu del tema wordpress

 

Come vedete, è possibile creare un menu ed associarlo alla location che abbiamo definito prima, aggiungendo e modificando le pagine ed i link da visualizzare.

Mentre nel file html dal quale siamo partiti le voci del menu erano incluse all’interno dei tag <ul> e <li>, nel file header.php troviamo la funzione wp_nav_menu(), che ha lo scopo di visualizzare il menu creato da “Aspetto > Menu” e che accetta una notevole quantità di parametri, elencati nella relativa pagina del codex di WordPress. Nel nostro caso il codice, contenuto nelle righe nn. 90-96 è il seguente:

wp_nav_menu( array(
 'theme_location' => 'primary',
 'menu_id' => 'menu-primary',
 'container' => false,
 'menu_class' => 'menu',
 'depth' => 3,
 ));

Esaminiamo i paramentri che abbiamo utilizzato:

  • “theme location” è la location assegnata a questo menu;
  • “menu_id” è l’ID assegnato al tag <ul> del menu;
  • “container” serve a specificare se il tag <ul> debba essere contenuto all’interno di un altro tag, come ad esempio un tag <div>, che è il valore di default. In altre parole, se non avessimo attribuito il valore “false”, WordPress avrebbe automaticamente inserito il menu all’interno di un tag <div>;
  • “menu_class” è la classe assegnata al tag <ul> del menu;
  • “depth” è il numero di sottolivelli previsti dal menu.

Il menu social

Torniamo alle righe n. 28-37 e 44-52 che avevamo tralasciato nel corso della spiegazione (i due blocchi di codice sono identici, sono ripetuti soltanto per una migliore visualizzazione del menu nella diverse risoluzioni dello schermo). Ancora una volta utilizziamo la funzione wp_nav_menu(), in questo caso per creare il c.d. menu social, cioè una lista di link verso i vari profili social. Notiamo che in questo caso al parametro “menu_class” abbiamo associato il valore “social-links”. Questo significa che al tag <ul> del menu verrà associata la classe “social-links”.

Il funzionamento è semplice, occorre creare un nuovo menu, chiamato per esempio “social” e collegarlo alla seconda location che abbiamo creato prima con la funzione wp_register_menus(). Occorre inoltre creare dei custom link con l’url dei profili social che ci interessano ed aggiungerli al nostro menu, come nell’immagine che segue:

immagine che spiega il funzionamento del menù social

Il resto del lavoro viene eseguito dal browser, grazie ad alcune regole css. Innanzi tutto ai tag <a> contenuti all’interno delle <ul> contraddistinte dalla classe “social-links” abbiamo assegnato il font “Genericons”

.social-links li a { font-family: "Genericons"; }

Inoltre ai link che contengono all’interno dell’url il nome di un social network abbiamo assegnato l’icona genericons corrispondente, come nell’esempio che segue riferito a Facebook

.social-links li a[href*="facebook"]::before {
 content: "\f204";
 }

Per una migliore comprensione del funzionamento del menu social, vi rimando all’ottimo articolo di Justin Tadlock.

Abbiamo terminato così il nostro file header.php, se avete dubbi o considerazioni al riguardo scrivete un commento qui sotto, se l’articolo vi è piaciuto condividetelo!

 

2 commenti su “Come creare un tema WordPress. Completiamo il file header.php”

  • Seby ha commentato il :

    Ciao, disturbo ancora 😀
    Il menu social è bloccato a solo i link dei veri collegamenti dei social compatibili come dice Justin Tadlock ma se si volesse inserire in questo menu le pagine del proprio sito wordpress? Sto provando ma non riesco trovare il modo.
    Grazie

    • Alessandro Costa ha commentato il :

      Ciao, purtroppo ho impostato soltanto alcune icone per il menu social. WordPress non l’ho considerato tra i social network e non l’ho inserito. 🙁

    I commenti sono chiusi