Elenco file php per creare un tema WordPress

Quando ho sviluppato il mio tema, la prima cosa che mi sono chiesto è stato proprio un elenco file php per creare un tema WordPress, spiegato nel dettaglio. Ho deciso di realizzare questa guida per darti tutte le informazioni di cui hai bisogno e rispondere alle tue domande.

Devi sapere che WordPress ragiona in modo molto semplice e aiuta gli sviluppatori nella creazione di temi personalizzati.

Per sviluppare un tema infatti basta creare una cartella all’interno di wp-content/themes e inserire al suo interno tutti i file necessari.

In base al nome del file, WordPress li utilizzerà nel momento giusto.

• index.php
• style.css
• functions.php
• header.php
• footer.php
• home.php
• 404.php

Il file index.php è l’unico file indispensabile al funzionamento del tuo tema, per tutti gli altri puoi scegliere tu se inserirli o meno.

Nella gerarchia dei file questo è sicuramente il più importante. 

Qualsiasi pagina, articolo, tassonomia e persino i risultati di ricerca, verranno mostrati secondo questo modello a meno che non ci sia un file specifico (es. page.php oppure single.php).

Se vuoi evitare problemi, questo file dovrebbe essere una buona anteprima per qualsiasi tipo di pagina o articolo.

Puoi personalizzare questo file come vuoi, inserendo codice html o funzioni personalizzate ma non devono mancare le seguenti:

<?php 
/**
 * @package WordPress
 * @subpackage Eureka theme
 * @since Eureka theme 1.0
 */

get_header(); /* restituisce il codice del file header.php del tema*/

/* wordpress loop */
if (have_posts()) { /* se ci sono post */
  while (have_posts()) {
    the_post(); /* mostra il contenuto della pagina o dell'articolo */
  }
}

get_footer(); /* restituisce il codice del file footer.php */
?>

Il file style.css è anch’esso fondamentale per lo sviluppo di un tema in WordPress. In questo file vanno inseriti i metadati necessari al CMS per leggere correttamente i contenuti del tema.

L’unico codice fondamentale di questo file è l’intestazione che deve essere un commento con questa struttura:

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: insert your description here.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Una volta creato questo foglio di stile potrai vedere le informazioni inserite al suo interno nel backend di WordPress, sezione Aspetto/Temi.

L’unico campo obbligatorio è il nome del tema. Dovrà essere univoco altrimenti sorgeranno problemi di interpretazione da parte del CMS.

Il resto del file può essere utilizzato come un foglio di stile qualunque e potrai inserire il tuo codice.

Questo è un elenco di tutti i tag che puoi inserire nel file style.css

• Author
• Author URI
• Description
• Domain Path
• Status
• Tags
• Template
• Text Domain
• Theme Name
• Theme URI
• Version

l file functions.php contiene tutte le funzioni necessarie allo sviluppo effettivo del tema. In questo file potrai aggiungere le tue funzioni personalizzate ma anche quelle predefinite di WordPress.

Le funzioni più comunemente utilizzate in questo file sono:

• add_theme_support() /* per aggiungere elementi di WordPress al tema */
• register_nav_menu() /* per creare menu del sito */
• add_image_size()
• register_sidebar()
• require
• include

Il file header.php contiene il codice che verrà mostrato nella testa del sito. Il codice sarà visibile in tutte le pagine di frontend del sito semplicemente creando questo file.

Questo file sarà un misto di codice HTML e PHP, conterrà il menu principale del sito ma soprattutto la funzione wp_head() che restituisce tutto il codice dell’hook wp-head utilizzato da tutti i plugin.

Ecco un esempio molto semplice del file header.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php if (is_singular() && pings_open( get_queried_object() )) { ?>
      <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php } ?>
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    if (!function_exists('wp_body_open')) {
        function wp_body_open() {
            do_action( 'wp_body_open' );
        }
    }
    wp_body_open(); ?>
    <!-- resto del contenuto -->
<?php

Le funzioni più comuni in questo file sono:

• language_attributes()
• bloginfo()
• wp_head()
• body_class()
• wp_body_open()

Come per il file header.php, footer.php contiene il codice necessario a stampare a video il footer in tutte le pagine.

Questo file sarà un misto di codice HTML e PHP in cui potrai inserire codice a tuo piacimento ma senza dimenticare la funzione wp_footer() che stamperà a video fogli di stile, javascript e altri elementi dei plugin.

ecco un esempio di codice del file footer.php:

<?php
/**
 * @package Your Theme
 * @since   1.0.0
 */
?>

    <div class="sidebar">
      <?php get_sidebar('your-sidebar'); ?>
    </div>
    <footer>
      <?php wp_footer(); ?>
    </footer>
  </body>
</html>
<?php
?>

Il file home.php contiene il codice necessario a mostrare un elenco di articoli e post del tuo sito.

Non bisogna fare confusione, questo file non mostra la homepage ma l’elenco di articoli, anche se la tua home non è una pagina statica.

In assenza di questo file, WordPress leggerà le informazioni contenute nel file index.php.

In questo file dovrai inserire quindi il loop di WordPress che mostra i post e potrai aggiungere codice HTML a tuo piacimento. Vediamo un esempio delle funzioni necessarie:

get_header(); /* restituisce le azioni dell'hook wp-head */

/* wordpress loop */
if (have_posts()) { /* se ci sono post */
  while (have_posts()) {
    ?>
    <div class="">
      <h1><?php the_title(); ?></h1>
      <?php the_post_thumbnail(); ?>
      <p><?php the_excerpt(); ?></p>
      <p>Pubblicato in data: <?php the_date(); ?></p>
    </div>
    <?php
  }
}

get_footer(); /* restituisce le azioni dell'hook wp-footer */

Questo file è necessario per creare la corrispondente pagina di errore 404, quella che compare su una pagina inesistente del tuo sito.

Non è necessario inserire qui il loop di WordPress perché si tratta di una pagina statica. Trovi maggiori nella guida dedicata a come creare una pagina 404.