WordPress Le Basi

10. Come creare un tema WordPress da zero

Scritto da Alberto Reineri il 29 Febbraio 2020

Oggi vediamo come fare per sviluppare un Tema per WordPress partendo da Zero.

WordPress è una piattaforma fantastica! Permette di creare siti web di ogni tipo in maniera semplice e veloce, grazie all’infinita quantità di temi plugin disponibili, moltissimi dei quali in maniera gratuita.

Però quando si vuole fare il salto di livello ed avere un sito web veramente performante, allora conviene utilizzare un tema sviluppato da zero, in grado di implementare tutte le funzioni necessarie nella maniera più performante!

Niente errori in console, niente stringhe in inglese, niente codici sparsi in giro per il sito, niente css e js inutili… Solo ciò che serve realmente, sviluppato nel modo corretto.

Oggi vediamo come creare un tema WordPress da zero!

Mettiti comodo e prenditi il tuo tempo, ci vorrà un po’, ma alla fine avrai realizzato il tuo primo tema WordPress funzionante e nel rispetto di tutte le best practice.

 

Questo tutorial è suddiviso in 3 parti, alla fine potrai scaricare l’intero tema che creeremo insieme per confrontarlo e correggere eventuali errori. Ti consiglio di seguire le varie parti e scaricare il tema solo alla fine, ma se ti servisse prima lo puoi trovare sul fondo dell'articolo.

Creiamo il nostro tema WordPress da Zero

Se apri la cartella del tuo sito WordPress noterai che all’interno sono presenti 3 cartelle:

  • wp-admin
  • wp-content
  • wp-includes

A noi per il momento interessa solamente la “wp-content“, quindi iniziamo ad aprirla.

All’interno di wp-content apriamo ora la cartella “themes“, che come puoi intuire contiene i temi del progetto.

Procediamo quindi a creare il nostro primo tema WordPress da Zero!

Creiamo una nuova cartella e la chiamiamo “il-mio-tema“, dopodiché apriamo la cartella con VS Code.

Un tema WordPress per essere riconosciuto necessita solamente di 2 file:

  • style.css
  • index.php

creiamo quindi questi 2 file all’interno della cartella “il-mio-tema” e inseriamo questo codice in “style.css“, in modo da indicare a WordPress i dati del tema:

/*
Theme Name: Il mio tema
Author: Specialista WP
Description: Il mio primo tema WordPress
Version: 0.0.1
*/

Puoi sostituire l’autore con il tuo nome, così come il nome del tema e la descrizione.

Se ora salvi il file CSS e vai nel backend di WordPress in “Aspetto – Temi” vedrai comparire il nostro tema!

Puoi attivare il tema voilà! Il tema è fatto!

Non è poi tanto complicato vero? Già, però ora il tema è vuoto, occorre riempirlo!

Inizia con l’inserire questo codice nella “index.php“, è un layout di base creato con bootstrap sul quale andremo a costruire il nostro sito:

index.html

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- I 3 meta tags qua sopra DEVONO essere inseriti come primi -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Il mio primo tema</title>

    <!-- Bootstrap core CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Il mio primo tema</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Chi sono</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contatti</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="container mt-5">

        <div class="row">
            <!-- CONTENUTO -->
            <div class="col-sm-8">

                <!-- ARTICOLO -->
                <div class="articolo-list">
                    <!-- TITOLO -->
                    <h2 class="">Il mio articolo</h2>
                    <!-- META -->
                    <p>15 luglio 2020 - Scritto da <a href="#">Alberto</a></p>
                    <!-- CONTENT -->
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ultrices, blandit nulla in, convallis metus. Nullam et mollis orci.
                        Nulla magna augue, accumsan in metus ut, pulvinar facilisis libero. Aliquam erat volutpat. Nulla lectus tortor, lacinia id imperdiet ut, sagittis
                        consectetur magna. Maecenas laoreet sodales tristique. [...]
                    </p>
                </div>
                <!-- /ARTICOLO -->

                <!-- ARTICOLO -->
                <div class="articolo-list mt-5">
                    <!-- TITOLO -->
                    <h2 class="">Il mio articolo 2</h2>
                    <!-- META -->
                    <p>16 luglio 2020 - Scritto da <a href="#">Alberto</a></p>
                    <!-- CONTENT -->
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ultrices, blandit nulla in, convallis metus. Nullam et mollis orci.
                        Nulla magna augue, accumsan in metus ut, pulvinar facilisis libero. Aliquam erat volutpat. Nulla lectus tortor, lacinia id imperdiet ut, sagittis
                        consectetur magna. Maecenas laoreet sodales tristique. [...]
                    </p>
                </div>
                <!-- /ARTICOLO -->

                <!-- ARTICOLO -->
                <div class="articolo-list mt-5">
                    <!-- TITOLO -->
                    <h2 class="">Il mio articolo 3</h2>
                    <!-- META -->
                    <p>17 luglio 2020 - Scritto da <a href="#">Alberto</a></p>
                    <!-- CONTENT -->
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ultrices, blandit nulla in, convallis metus. Nullam et mollis orci.
                        Nulla magna augue, accumsan in metus ut, pulvinar facilisis libero. Aliquam erat volutpat. Nulla lectus tortor, lacinia id imperdiet ut, sagittis
                        consectetur magna. Maecenas laoreet sodales tristique. [...]
                    </p>
                </div>
                <!-- /ARTICOLO -->

                <!-- NAVIGATION LINKS -->
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center mb-5">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Precedente</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">Successivo</a>
                        </li>
                    </ul>
                </nav>
                <!-- /NAVIGATION LINKS -->
            </div>
            <!-- /CONTENUTO -->

            <!-- SIDEBAR -->
            <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
                <div>
                    <h4>Chi sono</h4>
                    <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
                </div>
                <div>
                    <h4>Ultimi articoli</h4>
                    <ol class="list-unstyled">
                        <li><a href="#">Il mio articolo 1</a></li>
                        <li><a href="#">Il mio articolo 2</a></li>
                        <li><a href="#">Il mio articolo 3</a></li>

                    </ol>
                </div>
                <div>
                    <h4>Social</h4>
                    <ol class="list-unstyled">
                        <li><a href="#">GitHub</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Facebook</a></li>
                    </ol>
                </div>
            </div>
            <!-- /SIDEBAR -->

        </div><!-- /.row -->

    </div><!-- /.container -->

    <footer>
        <div class="container text-center mb-5">
            <p>Sito realizzato da <a href="https://albertoreineri.it">Specialista WP!</a></p>
        </div>
    </footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

Se ora salvi refreshi la home del sito vedrai del contenuto!

La pagina è commentata, quindi dovresti riuscire a capire bene il codice al suo interno.

Ricorda sempre di commentare il codice indicando cosa stai facendo, potrà aiutare i tuoi collaboratori ma anche il te stesso del futuro quando ritornerà al codice dopo molto tempo!

Ora procediamo con la creazione del tema!

Dividere in sezioni il tema WordPress creato da Zero

Ora esiste solamente index.php, ma noi vogliamo creare un tema vero e proprio, che avrà delle parti di layout che si ripeteranno spesso e altre parti da aggiornare dinamicamente.

Procediamo quindi a dividere il layout del nostro sito in quattro sezioni:

  • header.php
  • footer.php
  • sidebar.php
  • content.php

Creiamo questi quattro file nella cartella del nostro tema ed andiamo a spezzettare la index.php in questo modo:

heder.php

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- I 3 meta tags qua sopra DEVONO essere inseriti come primi -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Il mio primo tema</title>

    <!-- Bootstrap core CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Il mio primo tema</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Chi sono</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contatti</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    
    <div class="container mt-5">

        <div class="row">

footer.php


            </div><!-- /.row -->

</div><!-- /.container -->

    <footer>
        <div class="container text-center mb-5">
            <p>Sito realizzato da <a href="https://albertoreineri.it">Specialista WP!</a></p>
        </div>
    </footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

sidebar.php

            <!-- SIDEBAR -->
            <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
                <div>
                    <h4>Chi sono</h4>
                    <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
                </div>
                <div>
                    <h4>Ultimi articoli</h4>
                    <ol class="list-unstyled">
                        <li><a href="#">Il mio articolo 1</a></li>
                        <li><a href="#">Il mio articolo 2</a></li>
                        <li><a href="#">Il mio articolo 3</a></li>

                    </ol>
                </div>
                <div>
                    <h4>Social</h4>
                    <ol class="list-unstyled">
                        <li><a href="#">GitHub</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Facebook</a></li>
                    </ol>
                </div>
            </div>
            <!-- /SIDEBAR -->

content.php



            <!-- CONTENUTO -->
            <div class="col-sm-8">

                <!-- ARTICOLO -->
                <div class="articolo-list">
                    <!-- TITOLO -->
                    <h2 class="">Il mio articolo</h2>
                    <!-- META -->
                    <p>15 luglio 2020 - Scritto da <a href="#">Alberto</a></p>
                    <!-- CONTENT -->
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ultrices, blandit nulla in, convallis metus. Nullam et mollis orci.
                        Nulla magna augue, accumsan in metus ut, pulvinar facilisis libero. Aliquam erat volutpat. Nulla lectus tortor, lacinia id imperdiet ut, sagittis
                        consectetur magna. Maecenas laoreet sodales tristique. [...]
                    </p>
                </div>
                <!-- /ARTICOLO -->

                <!-- ARTICOLO -->
                <div class="articolo-list mt-5">
                    <!-- TITOLO -->
                    <h2 class="">Il mio articolo 2</h2>
                    <!-- META -->
                    <p>16 luglio 2020 - Scritto da <a href="#">Alberto</a></p>
                    <!-- CONTENT -->
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ultrices, blandit nulla in, convallis metus. Nullam et mollis orci.
                        Nulla magna augue, accumsan in metus ut, pulvinar facilisis libero. Aliquam erat volutpat. Nulla lectus tortor, lacinia id imperdiet ut, sagittis
                        consectetur magna. Maecenas laoreet sodales tristique. [...]
                    </p>
                </div>
                <!-- /ARTICOLO -->

                <!-- ARTICOLO -->
                <div class="articolo-list mt-5">
                    <!-- TITOLO -->
                    <h2 class="">Il mio articolo 3</h2>
                    <!-- META -->
                    <p>17 luglio 2020 - Scritto da <a href="#">Alberto</a></p>
                    <!-- CONTENT -->
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et justo ultrices, blandit nulla in, convallis metus. Nullam et mollis orci.
                        Nulla magna augue, accumsan in metus ut, pulvinar facilisis libero. Aliquam erat volutpat. Nulla lectus tortor, lacinia id imperdiet ut, sagittis
                        consectetur magna. Maecenas laoreet sodales tristique. [...]
                    </p>
                </div>
                <!-- /ARTICOLO -->

                <!-- NAVIGATION LINKS -->
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center mb-5">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Precedente</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">Successivo</a>
                        </li>
                    </ul>
                </nav>
                <!-- /NAVIGATION LINKS -->
            </div>
            <!-- /CONTENUTO -->

Ora non ci resta che richiamare i vari pezzi di contenuto nella index.php, in modo da montare il sito, in questo modo:

index.php

<?php get_header(); ?>

<?php get_template_part( 'content', get_post_format() ); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Ora la nostra index.php è molto più semplice no?

Le funzioni get_header(), get_sidebar() get_footer() vanno automaticamente ad inserire i fine header.phpsidebar.php e footer.php.

Per inserire un file diverso abbiamo utilizzato la funzione get_template_part() indicando il nome del file php da cui prendere il codice.

Nella programmazione è molto importante suddividere i contenuti in parti più piccole, in modo da rendere i file più semplici e facilmente leggibili.

Impostazioni principali

Vediamo ora come recuperare alcune delle informazioni principali del nostro sito.

Nel backend puoi impostare un nome e una descrizione al tuo sito, nella sezione “Impostazioni – Generali“.

Inserisci il titolo del sito e un motto. Ora vediamo come recuperare questi dati nel frontend!

Andiamo in header.php e modifichiamo il titolo nella navbar del sito.

Eliminiamo quindi la scritta “Il mio primo tema” e la sostituiamo con

<?php echo get_bloginfo( 'name' ); ?>

In questo modo il nome del sito sarà dinamico.

Possiamo anche inserire il motto del sito con questa funzione:

<?php echo get_bloginfo( 'description' ); ?>

Infine possiamo impostare i link alla home del sito sul titolo, in questo modo:

<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo get_bloginfo( 'name' ); ?></a>

Molto bene! Abbiamo iniziato a rendere dinamico il nostro sito! Ora buttiamoci in qualcosa di più complicato ma fondamentale!

Il loop

Il loop sta alla base di ogni tema WordPress. Consente di inserire una serie di dati recuperandoli dal database.

Possiamo utilizzarlo per inserire l’elenco degli articoli, delle pagine, di una determinata categoria, di sezioni speciali etc.

Tutti i contenuti in WordPress vengono generati da loop! Possiamo dire che è la funzione più importante di tutte!

Nel backend al momento abbiamo solamente l’articolo di default: “Ciao mondo!”, vediamo come farlo comparire nella home page del sito.

Il loop di WordPress è molto semplice:

<?php
if (have_posts()) :
    while (have_posts()) : the_post();
?>

        <!-- Contenuto del loop -->

<?php
    endwhile;
endif;
?>

Direi che si spiega abbastanza da solo.

Se ci sono dei post allora inizia il loop, nel quale inserisce i post finché ce ne sono.

Proviamo ad inserire il loop nella nostra home page, in index.php

index.php

<?php get_header(); ?>

<?php
if (have_posts()) :
    while (have_posts()) : the_post();

        get_template_part('content', get_post_format());
        
    endwhile;
endif;
?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Ora rendiamo dinamico il contenuto all’interno del file content.php

content.php



            <!-- CONTENUTO -->
            <div class="col-sm-8">

                <!-- ARTICOLO -->
                <div class="articolo-list">
                    <!-- TITOLO -->
                    <h2 class=""><?php the_title(); ?></h2>
                    <!-- META -->
                    <p><?php the_date('d/m/Y'); ?>  - Scritto da <a href="#"><?php the_author(); ?></a></p>
                    <!-- CONTENT -->
                    <?php the_content(); ?>

                </div>
                <!-- /ARTICOLO -->

                <!-- NAVIGATION LINKS -->
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center mb-5">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Precedente</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">Successivo</a>
                        </li>
                    </ul>
                </nav>
                <!-- /NAVIGATION LINKS -->
            </div>
            <!-- /CONTENUTO -->

Benissimo! Ora in home page compare solamente il nostro primo articolo.

Prova a creare un nuovo articolo nel backend e a pubblicarlo, lo vedrai comparire anche nella home page!

Grande! Stai iniziando a fare sul serio con WordPress!

 

 

Ora andiamo a rendere dinamico il contenuto delle varie sezioni!

Menu

WordPress permette di impostare dei menu, nella sezione “Aspetto – Menu“.

Questi menu creati nel backend possono essere inseriti nel frontend, rendendo così eventuali modifiche molto semplici ed immediate.

Vediamo come fare.

Per prima cosa dobbiamo abilitare il nostro tema all’utilizzo dei menu. Se infatti provi ad andare nel backend a certare la sezione “Aspetto – Menu” ora non la troverai ancora.

Per abilitarla dobbiamo creare quello che sarà il file più importante di tutto il tema: functions.php.

Creiamo quindi un file chiamato functions.php e inseriamo al suo interno questo codice:

<?php
//Setup del tema
function il_mio_tema_setup() {
	
//Imposto il menù per la navbar
    register_nav_menus(array(
		'navigation' => __( 'Menu Navbar','il-mio-tema'),
	));
	
}

add_action('after_setup_theme', 'il_mio_tema_setup');

Abbiamo creato una funzione di setup del tema, che utilizzeremo ancora in seguito per inserire altre personalizzazioni.

Qua abbiamo registrato un nuovo menu attraverso la funzione register_nav_menus e l’abbiamo chiamato ‘Menu Navbar‘.

Se ora andiamo nel backend vedremo che la sezione “Aspetto – Menu” è attiva e utilizzabile.

Procediamo quindi a creare un nuovo menù:

Per il momento inseriamo solamente la home page e la pagina di esempio di default di WordPress, giusto per avere del contenuto al suo interno e clicchiamo su “Crea menu“.

Poi possiamo impostare il menù nella posizione “Menù navbar”:

Ora non ci resta che inserire questo menù nella nostra barra di navigazione, nell’header del tema.

Apriamo quindi header.php e sostituiamo l'<ul> della nav con questo:

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <?php
                $args = array(
                    'theme_location' => 'navigation',
                    'depth'      => 2,
                    'container' => false,
                    'menu_class' => 'navbar-nav ml-auto',
                    'add_li_class'  => 'nav-item',
                    'link_class'   => 'nav-link',
                    'walker'     => new Bootstrap_Walker_Nav_Menu()

                );

                ?>
                <?php wp_nav_menu($args); ?>
            </div>

IMPORTANTE: per selezionare il giusto menù abbiamo inserito il theme_location uguale al nome di registrazione del menu inserito in functions.php.

Per far funzionare correttamente il dropdown di bootstrap dobbiamo ancora aggiungere una funzione che permetta di gestire i vari sottomenù. Questa funzione è chiamata “walker“, puoi semplicemente incollare questo codice nel functions.php:

// Custom Walker Class for Bootstrap Menu
add_action( 'after_setup_theme', 'bootstrap_setup' );

if ( ! function_exists( 'bootstrap_setup' ) ):

  function bootstrap_setup(){

    class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {


      function start_lvl( &$output, $depth = 0, $args = array() ) {

        $indent = str_repeat( "\t", $depth );
        $output    .= "\n$indent<ul class=\"dropdown-menu\">\n";

      }

      function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $li_attributes = '';
        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = ($args->walker->has_children) ? 'dropdown' : '';
        $classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
        $classes[] = 'menu-item-' . $item->ID;
        $classes[] = 'nav-item';


        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';

        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
        $attributes .= ($args->walker->has_children)      ? ' class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' : 'class="nav-link"';

        $item_output = $args->before;
        $item_output .= ($depth > 0) ? '<a class="dropdown-item"' . $attributes . '> ' : '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
      }

    }

  }

endif;

Ora se salvi e aggiorni dovresti avere il menu funzionante e dinamico!

Widget nel tema WordPress creato da Zero

widget sono una parte importantissima di WordPress. Consentono di creare una sezione inseribile in più parti in maniera semplice e veloce.

Inizializziamo i widget

Per inizializzare un widget dobbiamo andare sempre nel functions.php ed inserire questo codice:

// Widgets
function InizializzazioneWidget() {
	
	register_sidebar( array(
		'name' => 'Sidebar',
		'id' => 'sidebar1',
		'before_widget' => '<div class="sidebar">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	));
}

add_action('widgets_init', 'InizializzazioneWidget');

Ora abbiamo aggiunto la possibilità di inserire widget nella sidebar. I widget saranno inseriti in un div con classe “sidebar” e il titolo di ogni widget sarà un <h3>.

Se andiamo nel backend in “Aspetto – Widget” possiamo vedere che abbiamo un’area riservata alla sidebar:

Proviamo ad inserire dei widget al suo interno. Al momento non verranno inseriti nel frontend.

Dobbiamo andare a dire alla sidebar di prendere il suo contenuto attraverso i widget!

Apriamo quindi il nostro file sidebar.php, cancelliamo tutto e sostituiamo il codice con questo:

<!-- SIDEBAR -->
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
    <?php if (is_active_sidebar('sidebar1')) : ?>

        <?php dynamic_sidebar('sidebar1'); ?>

    <?php endif; ?>
</div>
<!-- /SIDEBAR -->

Ora nel backend proviamo ad inserire il Widget “Articoli recenti” nella sidebar, inserendo “Articoli recenti” come titolo e salvando.

Se tutto è andato liscio dovresti vedere gli ultimi articoli apparire nella sidebar!

Fantastico! Hai appena creato un widget!

Puoi creare widget anche in altre parti del sito, per esempio nel footer.

Esercizio:

Prova a creare dei widget da solo adesso.

Crea 4 widget da inserire nel footer del sito. Ricordati, devi registrare 4 zone per il footer in functions.php e andare nel file footer.php a inserire le aree giuste!

Ecco il risultato nel front-end:

Prenditi un po’ di tempo e prova a farlo, qua sotto ti lascerò il codice:

functions.php

// Widgets
function InizializzazioneWidget() {
	
	register_sidebar( array(
		'name' => 'Sidebar',
		'id' => 'sidebar1',
		'before_widget' => '<div class="sidebar">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	));
    
    register_sidebar( array(
		'name' => 'Footer Area 1',
		'id' => 'footer1',
		'before_widget' => '<div class="widget-item">',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
    ));
    
    register_sidebar( array(
		'name' => 'Footer Area 2',
		'id' => 'footer2',
		'before_widget' => '<div class="widget-item">',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
    ));
    
    register_sidebar( array(
		'name' => 'Footer Area 3',
		'id' => 'footer3',
		'before_widget' => '<div class="widget-item">',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
    ));
    
    register_sidebar( array(
		'name' => 'Footer Area 4',
		'id' => 'footer4',
		'before_widget' => '<div class="widget-item">',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
	));

	
}

add_action('widgets_init', 'InizializzazioneWidget');

footer.php

<div class="row">

            <?php if (is_active_sidebar('footer1')) : ?>

                <div class="col-lg-3">
                    <?php dynamic_sidebar('footer1'); ?>
                </div>

            <?php endif; ?>

            <?php if (is_active_sidebar('footer2')) : ?>

                <div class="col-lg-3">
                    <?php dynamic_sidebar('footer2'); ?>
                </div>

            <?php endif; ?>

            <?php if (is_active_sidebar('footer3')) : ?>

                <div class="col-lg-3">
                    <?php dynamic_sidebar('footer3'); ?>
                </div>

            <?php endif; ?>

            <?php if (is_active_sidebar('footer4')) : ?>

                <div class="col-lg-3">
                    <?php dynamic_sidebar('footer4'); ?>
                </div>

            <?php endif; ?>
        </div>

Molto bene, ora il sito inizia a prendere forma! Andiamo ora a cerare i layout per le pagine, gli articoli e gli archivi.

Layout Pagine

Per creare un layout dedicato alle pagine di WordPress dobbiamo andare nella cartella del nostro tema e creare un file page.php.

page.php

<?php get_header(); ?>


<?php
if (have_posts()) :
    while (have_posts()) : the_post();

?>
        <!-- TITOLO -->
        <h1><?php the_title(); ?></h1>

        <!-- IMMAGINE EVIDENZA -->
        <?php the_post_thumbnail(); ?>
        
        <!-- CONTENUTO -->
        <?php the_content(); ?>

<?php

    endwhile;
endif;
?>

<?php get_footer(); ?>

Questo codice ci permetterà di visualizzare il titolo, l’immagine in evidenza ed il contenuto della pagina salvata nel backend.

Per differenziarla dagli articoli non abbiamo inserito la sidebar nelle pagine.

Vediamo ora come creare un articolo.

Layout articoli

Per creare un layout dedicato agli articoli ci basterà creare il file single.php all’interno del tema e inserire il loop:

single.php

<?php get_header(); ?>

<div class="container">
    <div class="row">g<!-- CONTENTUO -->
        <div class="col-lg-8">

            <?php
            if (have_posts()) :
                while (have_posts()) : the_post();

            ?>
                    <!-- TITOLO -->
                    <h1><?php the_title(); ?></h1>

                    <!-- IMMAGINE EVIDENZA -->
                    <?php the_post_thumbnail(); ?>

                    <!-- CONTENUTO -->
                    <?php the_content(); ?>

            <?php

                endwhile;
            endif;
            ?>

        </div>
        <!-- SIDEBAR -->
        <div class="col-lg-4">

            <?php get_sidebar(); ?>

        </div>
    </div>

</div>

<?php get_footer(); ?>

In questo caso abbiamo il contenuto dell’articolo sulla sinistra e la sidebar sulla destra.

Ed ecco il nostro bel layout per gli articoli!

Layout archivi nel tema WordPress creato da zero

Un archivio è una pagina che contiene un elenco di post.

Iniziamo con il creare una categoria “blog” nel backend di WordPress, dopodiché inseriamo questa categoria nel nostro menu di navigazione.

Creiamo anche un paio di articoli con categoria “blog”, in modo da avere dei contenuti da visualizzare nel frontend.

Ora andiamo nella cartella del nostro tema e creiamo un file archive.php contenente questo codice:

archive.php

<?php get_header(); ?>

<div class="container">
    <div class="row">
        <!-- CONTENTUO -->
        <div class="col-lg-8">
            <h1>
                <?php
                single_cat_title();
                ?>
            </h1>

            <?php
            if (have_posts()) :
                while (have_posts()) : the_post();

            ?>
                    <a href="<?php the_permalink(); ?>">
                        <div class="articolo">
                            <!-- TITOLO -->
                            <h1><?php the_title(); ?></h1>

                            <!-- IMMAGINE EVIDENZA -->
                            <?php the_post_thumbnail(); ?>

                            <!-- CONTENUTO -->
                            <?php the_excerpt(); ?>
                        </div>
                    </a>
            <?php

                endwhile;
            endif;
            ?>

        </div>
        <!-- SIDEBAR -->
        <div class="col-lg-4">

            <?php get_sidebar(); ?>

        </div>
    </div>

</div>



<?php get_footer(); ?>

Il loop come puoi vedere è sempre lo stesso, però in questo caso al posto che visualizzare il contenuto (the_content), abbiamo visualizzato l’excerpt!

Un excerpt è una parte del contenuto, un’anteprima del testo vero e proprio.

In più abbiamo inserito il link ad ogni singolo articolo, utilizzando the_permalink.

Non è così complicato vero?

Il tema è sempre più completo! Ci mancano solamente ancora un paio di passaggi. 

 

 

Inserire immagini nel tema WordPress creato da Zero

Con WordPress è semplicissimo inserire immagini all’interno degli articoli, delle pagine o dei widget, ma se volessimo inserire per esempio un logo? Oppure un’immagine in un punto specifico del sito?

Per fare questo dobbiamo utilizzare la funzione get_template_directory_uri, che ci permette di collegarci alla cartella del nostro tema. Vediamo come fare.

Inseriamo un logo nella navbar

Per prima cosa rechiamoci nella cartella del nostro tema e creiamo un’altra cartella chiamata “img“. Qua dentro ora possiamo inserire le immagini che vogliamo inserire nel tema. Inseriamo un logo. Io lo chiamerò “logo.png“.

Ora andiamo nel nostro header.php e inseriamo il logo prima del titolo del nostro sito, in questo modo:

<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="" height="50">

La funzione get_template_directory_uri inserirà il percorso della cartella del nostro sito, a cui noi aggiungiamo il percorso per raggiungere l’immagine.

Prova a salvare e aggiornare il sito, dovresti vedere il logo comparire prima del nome del sito!

Se appare brutto puoi modificarlo tramite CSS, ma per il momento ci interessa il fatto che compaia!

La funzione get_template_directory_uri può essere utilizzata ogni volta che dobbiamo raggiungere qualcosa contenuto nella cartella del nostro tema.

Potremmo anche utilizzarla per inserire i file CSS e JS nel sito, ma WordPress prevede un sistema diverso, che vedremo fra poco.

Hook nel tema WordPress creato da Zero

Nello sviluppo WordPress gli hook hanno una grande importanza.

Ci permettono di aggrapparci a questi per inserire le nostre customizzazioni. Questo permette a noi sviluppatori di inserire delle modifiche al nostro tema senza toccare il core di WordPress.

Ci sono alcuni hook che sono fondamentali in ogni tema ben fatto.

wp_title

Un primo hook da inserire è il wp_title, che va messo nel meta tag <title>, nell'<head> della pagina.

Apriamo quindi il nostro heder.php e modifichiamo il <title> in questo modo:

<title><?php wp_title(); ?></title>

In questo modo il tag del titolo verrà gestito da WordPress nel migliore dei modi.

wp_head

Sempre nel nostro header dobbiamo aggiungere l’hook wp_head. Questo ci permette di inserire i nostri CSS e JS nell'<head> della pagina, come vedremo fra poco.

Aggiungiamo quindi questo codice giusto prima del </head>:

<?php wp_head(); ?>

body_class

Rimaniamo sempre nel nostro header.php e aggiungiamo un hook anche al <body>, in questo modo:

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

Così WordPress gestirà al meglio il body del nostro tema.

wp_footer

L’ultimo hook che andremo ad aggiungere è il wp_footer, che permette di inserire i contenuti prima del </body>, come i file javascript.

Andiamo quindi nel footer.php e inseriamo questo giusto prima del </body>

<?php wp_footer(); ?>

Inserire CSS e JS in un tema WordPress creato da zero

Il metodo corretto per inserire dei file CSS e JS all’interno di un tema WordPress è un po’ particolare.

Sebbene funzioni anche in metodo classico di inserimento nell'<head> e prima del </body> (metodo che abbiamo utilizzato nella parte 1 di questa serie di tutorial), un tema WordPress ben fatto deve inserire i file CSS e JS attraverso il file functions.php.

CSS

Iniziamo ad aprire il nostro file functions.php e inseriamo questo codice per embeddare il nostro file style.css nel tema:

function risorse_il_mio_tema() {
	//CSS
         enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'risorse_il_mio_tema');

In questo modo embedderemo il file style.css, obbligatorio in ogni tema WordPress.

Ora inseriamo il CSS di Bootstrap in maniera corretta. Lo aggiungiamo a questa funzione, in questo modo:

wp_enqueue_style( 'bootstrap','https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css','','','all');

Ricorda di inserire Bootstrap come primo file, prima di “style”, per un corretto funzionamento.

Ora andiamo nell’header.php e rimuoviavo il CSS di bootstrap, che ora verrà inserito nella maniera corretta tramite functions.php

JS

Inseriamo ora i file javascript di Bootstrap nel modo corretto.

Anche i file Javascript vanno inseriti come i CSS, nella stessa funzione, in questo modo:

//JS
wp_enqueue_script( 'jquery-js', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', '','' ,true);
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', '','' ,true);

Ora possiamo eliminare i file JS di bootstrap dal nostro footer.php

Per semplicità ti riscrivo tutta la funzione di embeddamento di CSS e JS:

/* CSS e JS */
function risorse_il_mio_tema() {
	//CSS
	wp_enqueue_style( 'bootstrap','https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css','','','all');
	wp_enqueue_style('style', get_stylesheet_uri());

	//JS
	wp_enqueue_script( 'jquery-js', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', '','' ,true);
	wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', '','' ,true);
	
}
add_action('wp_enqueue_scripts', 'risorse_il_mio_tema');

In questo modo hai inserito i codici CSS e JS secondo le Best Practice di WordPress!

Paginazione nel tema WordPress creato da Zero

Se il nostro tema inizierà ad avere molti articoli, allora la pagina archivio diventerà presto molto pesante.

Fortunatamente WordPress fornisce una funzione per facilitare moltissimo la paginazione.

Puoi decidere quanti articoli far visualizzare nelle pagine archivio tramite la sezione “Impostazioni – Lettura“.

Per inserire la paginazione nel frontend andiamo nel nostro archive.php e inseriamo questa funzione dopo il loop:

<?php echo paginate_links(); ?>

In questo modo i link di paginazione saranno gestiti interamente da WordPress!

Fantastico vero? Nulla di più semplice! Non ti resta che rendere questi link un po’ più carini, tramite CSS.

Commenti

Il sito inizia ad avere senso, ma non abbiamo ancora inserito una sezione commenti! Vediamo come fare!

Iniziamo creando un file comments.php nella cartella del nostro tema.

comments.php

 
<div id="comments" class="comments-area">
 
    <?php if ( have_comments() ) : ?>
        <h2 class="comments-title">
            <?php
                printf( _nx( 'Un commento per "%2$s"', '%1$s Commenti su "%2$s"', get_comments_number(), 'comments title', 'beauty-mountain' ),
                    number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
            ?>
        </h2>
 
        <ol class="comment-list">
            <?php
                wp_list_comments( array(
                    'style'       => 'ol',
                    'short_ping'  => true,
                    'avatar_size' => 74,
                ) );
            ?>
        </ol><!-- .comment-list -->
 
        <?php
            // Ci sono più commenti?
            if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
        ?>
        <nav class="navigation comment-navigation" role="navigation">
            <h1 class="screen-reader-text section-heading"><?php _e( 'Comment navigation', 'beauty-mountain' ); ?></h1>
            <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'beauty-mountain' ) ); ?></div>
            <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'beauty-mountain' ) ); ?></div>
        </nav><!-- .comment-navigation -->
        <?php endif; ?>
 
        <?php if ( ! comments_open() && get_comments_number() ) : ?>
        <p class="no-comments"><?php _e( 'Comments are closed.' , 'beauty-mountain' ); ?></p>
        <?php endif; ?>
 
    <?php endif; // have_comments() ?>
 
    <?php comment_form(); ?>
 
</div><!-- #comments -->

Questo codice ti pemetterà di inserire i commenti, ora andiamo nel file single.php, quello che contiene i nostri articoli, e inseriamo il template per i commenti dopo il contenuto:

<!-- COMMENTI -->
<?php comments_template(); ?>

In questo modo potrai vedere i commenti sui tuoi articoli!

Perfetto! Direi che per iniziare abbiamo già creato qualcosa di carino!

Prima di lasciarti andare via ti condivido ancora un po’ di CSS per rendere il nostro lavoro un po’ più carino.

Ricorda che puoi scaricare l’intero tema, per controllare errori e verificare di aver capito tutto al meglio! Clicca sul bottone sul fondo dell’articolo per scaricare il tema!

Non è un tema perfetto ma può essere un buon starter theme per i tuoi progetti futuri!

style.css

/*
Theme Name: Il mio tema
Author: Specialista WP
Description: Il mio primo tema WordPress
Version: 0.0.1
*/

/*
 * Globals
 */

a:hover{
  text-decoration: none;
}

img{
  max-width: 100%;
  height:auto
}

footer{
  background-color: #888;
  margin-top: 50px;
  padding-top: 50px;
  color:#000;
  margin-bottom: 0;
  padding-bottom: 50px;
}