Come creare il proprio tema WordPress

Come creare il proprio tema WordPress

La guida ideale per chi vuole portare al massimo le prestazioni del proprio sito web.

Pubblicato il Scritto da Matteo Feduzi Sito Web, WordPress 4 commenti

La creazione di un proprio tema WordPress porta con se svariati vantaggi:

  • Migliore ottimizzazione SEO.
  • Prestazioni di velocità ottimizzate.
  • Migliore user experience.

D’altra parte però le modifiche possono richiedere più tempo, specialmente se non si hanno delle buone conoscenze di programmazione.

Prima di partire assicurati di avere delle conoscenze base almeno di HTML e CSS.

Tranquillo, ho preparato per te delle risorse che ti aiuteranno in questo percorso. Se sei un mio lettore accanito saprai già che non lascio niente al caso 🙂

Sei pronto? Partiamo.

PS. Ecco le statistiche riportate da Google PageSpeed Insights una volta creato il mio tema personalizzato dove il 97/100 dell’analisi mobile è data solamente da due immagini che devono essere ridotte.

Risorse utili

Se non vuoi che il tuo sito sia raggiungibile online mentre lo stai realizzando, una soluzione ideale potrebbe essere quella di lavorare in locale.

Esistono vari strumenti che ti permettono di lavorare in locale:

  • XAMPP: è una distribuzione di Apache completamente gratuita e semplice da installare, contenente MySQL, PHP e Perl. È possibile installarla su dispositivi Windows, Linux e macOS.
  • MAMP: è un server locale gratuito che può essere installato su macOS e Windows. Qui puoi scegliere di lavorare con Apache o Nginx e con i linguaggi di programmazione PHP, Python, Perl o Ruby. Esiste anche la versione PRO per l’aspetto commerciale.
  • Vagrant: è un altro famoso ambiente di sviluppo e funziona su Mac, Linux, Windows e altro ancora.

Se decidi di intraprendere questa strada consulta prima la mia guida su come installare WordPress in locale.

Altrimenti un’altra soluzione potrebbe essere quella di lavorare direttamente all’interno del tuo hosting.

Se non hai iniziato alcuna procedura di indicizzazione è molto difficile che un utente raggiunga prematuramente il tuo sito.

Potrebbe raggiungerlo solo nel caso in cui conosca l’URL del sito.

In questa guida utilizzerò l’hosting di Siteground ma puoi utilizzare qualsiasi altro tipo di hosting.

Bene, ora siamo quasi pronti, ci manca solo un buon editor per il codice, eccone alcuni dei migliori:

  • Atom: lo uso personalmente e posso dire con sicurezza che è uno dei migliori editor gratuiti, open source e multipiattaforma al mondo.
  • Visual Studio Code: è uno degli editor di codice più utilizzati. Viene utilizzato da oltre il 34,9% degli sviluppatori.
  • Sublime Text 3: offre una versione gratuita e a pagamento. È anche molto veloce ed estendibile.

Hai scelto? Bene, proseguiamo!

Come stabilire una connessione FTP con il tuo account di hosting

Ora apriamo il nostro editor e creiamo il nostro file FTP.

Se utilizzi Atom puoi crearlo andando su Packages > Remote FTP > Create FTP config file.

Questo è il codice che dovrebbe apparire in automatico:

{
    "protocol": "ftp",
    "host": "example.com",
    "port": 21,
    "user": "user",
    "pass": "pass",
    "promptForPass": false,
    "remote": "/",
    "local": "",
    "secure": false,
    "secureOptions": null,
    "connTimeout": 10000,
    "pasvTimeout": 10000,
    "keepalive": 10000,
    "watch": [],
    "watchTimeout": 500
}

Sostituisci le seguenti voci:

  • Host: il nome del server dell’account.
  • User: coincide con l’username del cPanel.
  • Pass: la password del cPanel.
  • Port: assicurati che sia la 21.

Una volta inseriti correttamente questi valori stabilisci la connessione andando su Packages > Remote FTP > Connect.

Dovrebbe aprirsi una sezione chiamata “Remote” alla tua sinistra, se non si apre vai su Packages > Remote FTP > Toggle. Ora dovresti vederla.

Struttura modulare di WordPress

Prima di procedere apriamo una piccola parentesi e vediamo quella che è la struttura modulare di WordPress.

L’unico contenuto che varia, a seconda dell’URL chiamato, è il contenuto; mentre header, sidebar e footer rimangono gli stessi su tutte le pagine.

Se per esempio rimaniamo nella home del sito verrà richiamato il file index.php, se visitiamo una pagina verrà richiamato il file page.php e così via.

Ora siamo pronti a creare i file necessari alla configurazione del nostro tema personalizzato.

Creiamo i file essenziali del tema

Adesso apri la cartella public_html e se possiedi un sito unico vai su wp-content, altrimenti seleziona prima la cartella del dominio interessato.

Seleziona la cartella themes e crea una nuova cartella al suo interno facendo clic destro su questa voce e cliccando Add folder.

Puoi chiamare questa cartella come più ti aggrada, io la chiamerò esempio.

Ora selezioniamo la cartella appena creata e inseriamo al suo interno i file fondamentali:

  • style.css
  • functions.php
  • index.php
  • header.php
  • footer.php
  • sidebar.php

Andiamo sul file style.css e aggiungiamo il seguente commento:

/*
  Theme Name:    esempio
  Description:   Il tema ufficiale creato da Matteo Feduzi per matteofeduzi.it
  Version:       1.3.0
  Author:        Matteo Feduzi
  Author URI:    https://www.matteofeduzi.it/chi-sono
  Site:          https://www.matteofeduzi.it
  Text Domain:   esempio
  Domain Path:   /languages
  Tags:          section, col-1, col-2, col-50, col-100, row
  License: GNU   General Public License v2 or later
  License URI:   http://www.gnu.org/licenses/gpl-2.0.html
*/

In questo modo:

Ovviamente ricordati di sostituire i miei dati con i tuoi.

Ora andiamo sul file index.php e scriviamo il seguente codice di test per vedere se il tema viene registrato correttamente.

<?php

echo 'messaggio di prova';

?>

Dopodiché entra sul tuo sito WordPress, seleziona Aspetto > Temi e dovresti trovare il tema appena creato con la seguente grafica.

Ora puoi selezionarlo e attivarlo. Successivamente recati sulla home del tuo sito e se tutto è andato liscio dovresti trovare solamente il testo “messaggio di prova”.

Configurazione del file functions.php su WordPress

Una volta attivato il tuo tema recati sul file functions.php ed aggiungiamo il setup del tema.

<?php
/*--------------------------------
Setup tema
--------------------------------*/
if ( ! function_exists( 'esempio_setup' ) ) {
  function esempio_setup() {

    add_theme_support( 'title-tag' );

    //Enable automatic feed links
    add_theme_support( 'automatic-feed-links' );

    //Enable featured image
    add_theme_support( 'post-thumbnails' );

    //Thumbnail sizes
    add_image_size('esempio-single',800,493,true);
    add_image_size('esempio-big',1400,928,true);

    //Custom menu areas
    register_nav_menus(
			array(
        'header' => esc_html__('Header','esempio')
      )
    );

    //Load theme laanguages
    load_theme_textdomain('esempio', get_template_directory, '/languages');

  }
}
add_action('after_setup_theme', 'esempio_setup');


/*--------------------------------
Include style e scripts
--------------------------------*/
if ( ! function_exists( 'esempio_styles_scripts' ) ) {
  function esempio_styles_scripts() {

	  wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
	  wp_enqueue_script( 'jquery' );

      wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array ( 'jquery' ), 1.1, true);

    wp_enqueue_style('esempio-nunito', 'https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,700,700i');

    wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css',false,'1.1','all');

  }
}
add_action('wp_enqueue_scripts', 'esempio_styles_scripts');

Mi raccomando di modificare il prefisso “esempio” con il nome del tuo tema.

Creare un header su WordPress

Ora devi creare il tuo header, perciò vai sul file header.php e aggiungi il seguente codice:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <?php wp_head(); ?>

</head>
<body id="body" <?php body_class(); ?> itemscope="itemscope" itemtype="http://schema.org/WebPage">
  <header id="site-header" class="site-header clearfix" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader">

          <?php /* Utilizza questo codice per riprodurre il menu di navigazione */
  	       wp_nav_menu( array(
  		         'theme_location' => 'header',
  		         'depth' => 2,
  		         'container' => false,
  		         'menu_class' => ''
  	       ));
           ?>

  </header>
  <main id="contenuto-principale" itemscope="itemscope" itemtype="https://schema.org/CollectionPage" role="main">

Tieni in considerazione che questa è una semplice base di codice, starà a te il compito di personalizzarlo come più ti pare e piace.

In questo caso utilizziamo wp_head() per stampare tutti gli script e i dati dentro il tag <head> del sito mentre utilizziamo wp_nav_menu() per mostrare il menu di navigazione.

Mi raccomando che la voce inserita su theme_location sia quella inizializzata nel file functions.php della funzione register_nav_menu() quindi in questo caso “header”.

Sei pronto per creare il tuo footer. Vai su footer.php e aggiungi il seguente codice:

<footer itemscope="itemscope" itemtype="http://schema.org/WPFooter">

</footer>

<?php wp_footer(); ?>
</body>
</html>

Anche qui, come nel codice precedente, considera che questa è una semplice base, starà a te il compito di personalizzare il tuo footer.

Qui viene utilizzata la funzione wp_footer() che ha il compito di stampare prima del tag </body> tutti gli scripts e i dati necessari alla pagina.

Creare una sidebar su WordPress

Ora devi creare la tua sidebar. Prima di richiamarla è però necessario registrarla andando sul file functions.php e aggiungendo il seguente codice:

/*--------------------------------
Registrazione Sidebar
--------------------------------*/
if ( ! function_exists('esempio_sidebars') ) {
	function esempio_sidebars() {
		register_sidebar(array( 'name' => 'Primary','id' => 'primary','description' => 'Normal full width sidebar.', 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
	}
}
add_action('widgets_init','esempio_sidebars');

Possiamo poi richiamarla inserendo sul file sidebar.php il seguente codice:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('primary') ) : ?>

<?php endif; ?>

Questo ti permetterà di registrare la tua sidebar in modo da poterla visualizzare nella sezione Aspetto > Widget di un sito WordPress.

Adesso aggiungi i widget necessari alla tua sidebar e mostrala inserendo il seguente codice dove più preferisci:

<?php get_sidebar(); ?>

Creare template articoli su WordPress

Da adesso in poi è molto importante tenere in considerazione la struttura gerarchica di WordPress.

In questo caso, se si scorre fino alla sezione single post, è possibile notare la struttura gerarchica degli articoli.

Nella maggior parte dei casi, come anche nel mio caso, si tende ad utilizzare il file single.php. Questo perché solitamente varia solo il contenuto, che è possibile modificare direttamente selezionato l’apposito articolo.

Nel caso tu voglia effettuare delle modifiche importanti a un solo articolo dovrai creare, ad esempio, il seguente file: single-post-slug.php.

Ecco il codice base che dovrai utilizzare sul file single.php:

<?php

get_header(); ?>

<article id="articolo" class="articolo">

<!-- Thumbnail articolo -->
<div class="img-thumbnail">
  <div class="overlay"></div>
  <?php the_post_thumbnail(); ?>
</div>

<!-- Breadcrumbs di Yoast SEO -->
<div class="breadcrumbs">
  <?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
  }?>
</div>

<!-- Titolo articolo -->
<h1 class="titolo-articolo"><?php the_title(); ?></h1>

<!-- Meta articolo -->
<div class="info-meta">
  <p class="data" style="display: inline-block; margin: 0;">Pubblicato il <?php the_time('j F, Y'); ?> </p>
  <p class="autore" style="display: inline-block; margin: 0;">Scritto da <?php the_author(); ?> </p>
  <p class="categoria" style="display: inline-block; margin: 0;"><?php the_category(', ') ?></p>
</div>

<!-- Contenuto articolo -->
<div class="contenuto-articolo js-toc-content">
  <?php the_content(); ?>
</div>

<!-- Sidebar -->
<div class="articolo-sidebar-right">
  <?php get_sidebar(); ?>
</div>

</article>

<div class="commenti">
  <?php comments_template(); ?>
</div>

<?php get_footer(); ?>

Qui sopra ti ho indicato le funzioni più utilizzate negli articoli, anche qui potrai personalizzare il codice come più ti pare.

Creare template di una pagina WordPress

In questo caso, molto probabilmente, come viene mostrato nella sezione single page della gerarchia di WordPress, sarebbe più saggio utilizzare il seguente formato: page-{slug}.php.

Nel mio sito creo le varie pagine con il seguente formato perché ogni pagina è diversa e contiene file di stile e scripts diversi.

Mettiamo caso di voler creare la home page del nostro sito web e che questa sia unica nel suo genere; dovremmo creare il file con il seguente formato: page-home.php.

Questa è la base da cui partire:

<?php get_header(); ?>

<!-- Inserisci qui il tuo codice HTML -->

<?php get_footer(); ?>

Creare una pagina di errore 404 su WordPress

La gerarchia di WordPress che segue la pagina 404 è molto semplice: se non possiedi un file 404.php all’interno della cartella del tuo tema verrà utilizzata la pagina index.php al suo posto.

La creazione di questa pagina è molto semplice e segue la struttura di qualsiasi altro tipo di pagina:

<?php get_header(); ?>

<!-- Inserisci qui il tuo codice HTML -->
<?php get_search_form(); ?>

<?php get_footer(); ?>

Ritengo che sia molto importante inserire nella pagina 404 anche la funzione get_search_form() che crea un form di ricerca grazie al quale l’utente può raggiungere più facilmente la pagina o l’articolo desiderato.

Per far sì che venga visualizzato un form di ricerca non è sufficiente inserire solamente quella funzione, è necessaria l’aggiunta di un ulteriore file che vedremo di seguito.

Creare un form e una pagina di ricerca

Per prima cosa dovremo creare il file searchform.php e aggiungere al suo interno il seguente codice:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
        <input type="search" placeholder="Cerca" value="" name="s" id="s" />
		<button type="submit" id="searchsubmit" value="Cerca">
		<svg class="icona-search" width="18" height="18" viewBox="0 0 24 24">
		<path d="M23.111 20.058l-4.977-4.977c.965-1.52 1.523-3.322 1.523-5.251 0-5.42-4.409-9.83-9.829-9.83-5.42 0-9.828 4.41-9.828 9.83s4.408 9.83 9.829 9.83c1.834 0 3.552-.505 5.022-1.383l5.021 5.021c2.144 2.141 5.384-1.096 3.239-3.24zm-20.064-10.228c0-3.739 3.043-6.782 6.782-6.782s6.782 3.042 6.782 6.782-3.043 6.782-6.782 6.782-6.782-3.043-6.782-6.782zm2.01-1.764c1.984-4.599 8.664-4.066 9.922.749-2.534-2.974-6.993-3.294-9.922-.749z"/>
		</svg>
		</button>
</form>

Di per se questo semplice codice (non tenendo in considerazione il CSS) funziona, ma puoi personalizzarlo come più ti pare.

Ora la funzione get_search_form() dovrebbe mostrare la barra di ricerca.

Se viene visualizzata correttamente sei pronto per creare la tua pagina di ricerca.

Ti basterà creare il file search.php e aggiungere il seguente codice:

<?php get_header(); ?>

<!-- Controlla se ci sono dei post da mostrare -->
<?php if ( have_posts() ) : ?>

<!-- Inserisce barra di ricerca -->
<div class="cerca">
  <?php get_search_form() ?>
</div>
<div class="contenuto-articoli">
  <!-- Loop degli articoli -->
  <?php while ( have_posts() ) : the_post(); ?>
    <div class="cat_wrapper">
      <!-- Thumbnail -->
      <div class="thumbnail">
        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
	  <?php echo the_post_thumbnail(array(60,60)); ?>
	</a>
      </div>
      <!-- Titolo e Meta -->
      <div class="titolo-meta">

      <!-- Titolo -->
      <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

      <!-- Meta -->
      <div class="entry-content-meta">

        <!-- Data -->
	<time class="Data">
	  <?php the_time('j F, Y') ?>
	</time>

	<!-- Numero commenti -->
	<span class="numero-commenti">
	  <?php comments_popup_link( '0 Commenti', '1 comment', '% comments', 'comments-link', 'Comments closed'); ?>
	</span>

	<!-- Autore articolo -->
        <span class="autore" style="color: #a0a0a0; font-size: 12px; text-transform: uppercase;"> Scritto da <?php the_author_posts_link() ?>
	</span>

      </div>
      </div>
      </div>
      <?php endwhile; ?>

      <!-- Impaginazione numerata -->
      <?php
      the_posts_pagination (array (
	'mid_size' => 2,
	'prev_text' => __ ('Indietro', 'textdomain'),
	'next_text' => __ ('Avanti', 'dominio del testo'),
      ));?>

     </div>
    </div>
<?php else: ?>

<p>Nessuna pagina trovata!</p>

<?php endif; ?>

<?php get_footer(); ?>

Conclusioni

La creazione di un proprio tema WordPress che riporti delle performance ottimali può richiedere tempo e fatica ma il risultato vale assolutamente il gioco.

Personalmente ho notato dei grandi migliorami, specialmente per quanto riguarda la permanenza media e la frequenza di rimbalzo.

E tutto ciò è più che normale considerando che la maggior parte delle mie pagine vengono caricate in meno di un secondo.

Hai avuto delle difficoltà nella creazione del tuo tema? Fammelo sapere nei commenti o nella chat di assistenza, rispondo quasi subito!

4Commenti
Lascia un commento
  1. Bigportal

    Grazie, nozioni chiare ed utili!

    1. Matteo Feduzi

      Prego!

      Un saluto,
      Matteo.

  2. Claudio

    Ottimo articolo! Proprio quello che stavo cercando.

    1. Matteo Feduzi

      Grazie Claudio, sono contento di esserti stato utile!

      Un abbraccio,
      Matteo.

Lascia un commento

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