Come creare un vero tema WordPress. I file style.css e header.php

Questa è la seconda parte della serie dedicata alla creazione di un template WordPress. Nella prima parte abbiamo visto come creare le cartelle ed i file necessari al funzionamento del tema, in questo secondo appuntamento cominceremo a modificare il codice html dei file principali.

Vi ricordo che questa guida ha lo scopo di ricreare il tema Mymagazine che potete scaricare dalla directory dei temi di WordPress.org, e che per seguire la spiegazione è necessario:

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

Il file style.css di un template WordPress

Il file style.css è quello destinato a contenere le principali istruzioni css relative al template WordPress. Può essere anche l’unico file contenente i fogli di stile, ma generalmente viene affiancato da altri file css ed inizia sempre con alcune righe di codice contenute all’interno di un commento, chiamate “file headers“. Tali  istruzioni sono composte da un nome e da un valore separati dal carattere “:”  e contengono delle meta-informazioni riguardanti il tema, che consentono a WordPress di individuarlo e visualizzarlo nel pannello di amministrazione, come abbiamo visto nelle immagini precedenti; inoltre forniscono ulteriori informazioni circa l’autore, la descrizione del tema, la versione e sopratutto alcune parole chiave (tags) che consentono di individuarlo all’interno della directory dei template WordPress.

/*
Theme Name: MyMagazine-demo
Theme URI: http://www.svgthemes.com/mymagazine
Author: Alessandro Costa
Author URI: http://www.svgthemes.com
Description: Mymagazine is a creative and responsive WordPress theme. It has a clean and colorful magazine style, perfect for news websites dedicated to sports or travels.
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, two-columns, right-sidebar, responsive-layout, flexible-header, custom-header, custom-menu, editor-style, featured-images, post-formats, sticky-post, translation-ready, custom-background
Text Domain: mymagazine
*/

 

In questo codice ho riportato esattamente il codice contenuto nel template Mymagazine, aggiungendo soltanto la parola “-demo” al nome del tema per evitare conflitti con quello vero. È opportuno segnalare che i tag non sono casuali ma possono essere inseriti soltanto se il tema rispetta determinate condizioni, che potrete consultare in questa pagina del codex di WordPress. Di conseguenza se inserite dei tags non pertinenti il revisore del tema vi segnalerà l’errore, invitandovi a rimuovere il tag o a modificare il tema per renderlo conforme al suo significato. Copiate il codice qui sopra nel file style.css, salvatelo e tornate all’installatore dei temi: come potete vedere il tema è pronto per essere attivato!

immagine dell'installatore dei temi di wordpress
l’anteprima del nuovo tema appare ancora come un rettangolo vuoto

 

L’anteprima del nuovo template WordPress è uno schermo vuoto, affinchè essa diventi degna di questo nome è necessario salvare all’interno della cartella principale del tema una immagine in formato .png denominata “screenshot.png”, le cui dimensioni ottimali sono 1200 x 900 pixel.

Tutte le altre istruzioni contenute nel file style.css riguardano esclusivamente l’aspetto estetico del sito, e non riguardano specificamente il funzionamento del template WordPress. Per questo motivo non mi soffermerò oltre sul file style.css, ma se avete scaricato il tema potete copiare il contenuto del file style.css ed inserirlo all’interno del vostro file.

Il file header.php

Poichè tutte le pagine del sito avranno in comune il codice contenuto all’interno della sezione <head> e il codice relativo all’header ed al menu, possiamo inserire questa parte di codice all’interno del file header.php, evitando così di ripeterne la digitazione e lasciando che sia WordPress a richiamarlo in tutte le pagine.

Aprite il file header.php del vostro Mymagazine e copiate tutto il suo contenuto all’interno del file header.php che avevate creato nella precedente parte della guida:

<?php ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
        <div class="wrapper">
            <a class="skip-link screen-reader-text" href="#content"><?php _e('Skip to content', 'mymagazine'); ?></a>
            <?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; ?>
            <header id="masthead" class="site-header">
                <div class="pre-header">
                    <div class="row">
                        <div class="small-12 columns">
                            <ul class="mobile-icons">
                                <li class="li-social">
                                <?php
                                wp_nav_menu( array(
                                    'theme_location' => 'social',
                                    'container'       => false,
                                    'menu_id'         => '',
                                    'menu_class'      => 'social-links',
                                    'depth'           => 1,
                                    'link_before'     => '<span class="screen-reader-text">',
                                    'link_after'      => '</span>',
                                    'fallback_cb'     => '',
                                ));
                                ?>
                                </li>
                                <li><span class="genericon genericon-search"><span class="screen-reader-text"><?php echo _e('Search', 'mymagazine'); ?></span></span></li>
                                <li><span class="genericon genericon-user"><span class="screen-reader-text"><?php echo _e('Login', 'mymagazine'); ?></span></span></li>
                            </ul>
                            <?php
                            wp_nav_menu( array(
                                    'theme_location' => 'social',
                                    'container'       => false,
                                    'menu_class'      => 'social-links',
                                    'depth'           => 1,
                                    'link_before'     => '<span class="screen-reader-text">',
                                    'link_after'      => '</span>',
                                    'fallback_cb'     => '',
                                ));
                            ?>
                            <?php get_search_form( true ); ?>
                            <a class="log" href="<?php echo esc_url(wp_login_url( home_url() )); ?>" title="Login"><?php echo _e('Login', 'mymagazine'); ?></a>
                            <a class="log" href="<?php echo esc_url(wp_registration_url()); ?>" title="Register"><?php echo _e('Register', 'mymagazine'); ?></a>
                        </div>
                    </div><!-- end .row -->
                </div><!-- end .pre-header -->
                <div class="main-header">
                    <div class="row">
                        <div class="small-11 columns logo">
                            <?php 
                            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 } ?>
                            <p class="site-description"><?php bloginfo( 'description' ); ?></p>  
                        </div><!-- .logo -->
                    </div><!-- end .row -->
                    <nav class="site-navigation main-nav">       
                    <div class="row">
                        <div class="nav-columns small-12 columns">
                            <h2 class="screen-reader-text"><?php _e('menu', 'mymagazine'); ?></h2>
                            <div class="screen-reader-text skip-link">
                                <a href="#content" title="Skip"><?php _e('Skip to content', 'mymagazine'); ?></a>
                            </div>
                            <div class="header-menu">
                                <span class="screen-reader-text"><?php _e('menu', 'mymagazine'); ?></span>
                                <span class="menu-button">
                                    <span class="menu-bar"></span>
                                    <span class="menu-bar"></span>
                                    <span class="menu-bar"></span>
                                </span>
                            </div>
                        <?php
                                wp_nav_menu( array(
                                    'theme_location' => 'primary',
                                    'menu_id' => 'menu-primary',
                                    'container'       => false,
                                    'menu_class'      => 'menu',
                                    'depth'           => 3,
                                ));
                                ?>
            
                      </div><!-- end .small-2 .medium-12 .columns -->
                    </div><!-- end .row -->
                  </nav><!-- .site-navigation .main-navigation -->
                </div><!-- row -->
            </header><!-- .site-header -->
            <div class="start row"><!-- Main Column -->

Esaminiamo il codice concentrandoci innanzi tutto sul codice relativo al tag <html> e a quello contenuto all’interno del tag <head>. Come già detto, questa guida presuppone una conoscenza almeno di base di html e php, per cui non mi soffermerò su ogni singola riga di codice ma soltanto sulle istruzioni che meritano un’approfondimento in quanto specifiche di WordPress.

La funzione WordPress “language_attributes()”

Alla riga n. 3 troviamo l’istruzione:

<html <?php language_attributes(); ?>>

La funzione language_attributes() consente di specificare all’interno del tag <html> la lingua utilizzata dal sito web, che poi è quella impostata nella sezione Impostazioni -> Generali -> Lingua del sito del back-end di WordPress. Ad esempio, nel caso in cui la lingua del sito sia impostata in italiano, il codice html generato dalla suddetta riga di codice sarà il seguente: <html lang=”it-IT”>.

La funzione WordPress “bloginfo()”

Alla riga n. 5 troviamo l’istruzione:

<meta charset="<?php bloginfo( 'charset' ); ?>">

Per la prima volta incontriamo la funzione “bloginfo()“, che ritroveremo più volte nel corso di questa guida. Questa funzione restituisce una serie di informazioni relative al sito, che nella maggior parte dei casi sono le stesse settate nella pagine di amministrazione di WordPress, in particolare nella sezione “Impostazioni”. Supponiamo ad esempio di volere visualizzare il nome del sito “Tal dei Tali” all’interno di una intestazione <h2>. Piuttosto che scrivere il codice

<h2>Benvenuti al sito "Tal dei tali"</h2>

scriveremo

<h2>Benvenuti al sito "<?php bloginfo('name'); ?>"</h2>.

In questo modo se un giorno decideremo di cambiare il nome del sito da “Tal dei Tali” a “Vattelappesca” dovremo semplicemente andare nel pannello di amministrazione, sezione “Impostazioni Generali” e modificare il titolo del sito. Automaticamente anche l’output generato da WordPress si aggiornerà senza che dobbiate modificare il codice già scritto. Consultando il codex di WordPress alla pagina dedicata alla funzione “bloginfo()“, potrete scoprire tutte le informazioni che essa è in grado di restituire.  È importante notare che tale funzione visualizza direttamente nella pagina l’informazione richiesta, senza la necessità di utilizzare l’istruzione “echo”. Nel caso in cui abbiate la necessità di avere restituito il valore della funzione, magari per memorizzarlo all’interno di una variabile, è necessario utilizzare la funzione “get_bloginfo()”.

Alla riga n. 6 troviamo un altro tag <meta  name=”viewport” content=”width=device-width”> utilizzato per realizzare un layout c.d. “responsive”, nulla che riguardi specificamente l’uso di WordPress.

Come potete notare, due righe dopo si chiude il tag <head>. Dove sono finiti tutti i link ai fogli di stile ed ai file javascript che avevamo nella versione html? Per rispondere dobbiamo mettere da parte temporaneamente il nostro header.php ed aprire il file functions.php, ma lo faremo nel prossimo articolo. Nel frattempo, se avete dubbi o domande scrivete un commento qui sotto, se questa parte della guida su come creare un template WordPress vi è piaciuta non dimenticate di condividerla!