Hai mai desiderato aggiungere funzionalità personalizzate al tuo sito WordPress senza dipendere da plugin di terze parti? Creare un plugin wordpress personalizzato ti permette di estendere le capacità del tuo sito in modo pulito, organizzato e riutilizzabile. In questo tutorial plugin wp completo, ti guiderò passo dopo passo nella creazione del tuo primo plugin WordPress, partendo dalle basi fino ad arrivare a implementazioni più avanzate.

Perché Creare un Plugin WordPress Personalizzato

Prima di immergerci nel processo di sviluppo, è fondamentale comprendere perché potresti aver bisogno di un plugin personalizzato. WordPress offre migliaia di plugin gratuiti e premium attraverso il repository ufficiale, ma ci sono situazioni in cui un plugin personalizzato rappresenta la soluzione migliore:

• Esigenze specifiche: Hai requisiti unici che nessun plugin esistente soddisfa completamente
• Prestazioni: Vuoi evitare l’overhead di plugin complessi con funzionalità che non utilizzi
• Manutenzione: Preferisci controllare completamente il codice senza dipendere da sviluppatori terzi
• Sicurezza: Riduci la superficie di attacco eliminando plugin non necessari
• Apprendimento: Desideri comprendere come funziona internamente WordPress

Creare un plugin wordpress significa anche organizzare meglio il tuo codice. A differenza delle funzioni inserite nel file functions.php del tema, un plugin rimane attivo anche quando cambi tema, garantendo la persistenza delle funzionalità.

Prerequisiti per lo Sviluppo di Plugin WordPress

Per seguire questo tutorial plugin wp in modo efficace, dovresti avere familiarità con alcuni concetti fondamentali:

Conoscenze Tecniche Necessarie

• PHP: WordPress è costruito principalmente su PHP, quindi una solida comprensione del linguaggio è essenziale. Devi conoscere variabili, funzioni, array, oggetti e programmazione orientata agli oggetti
• HTML/CSS: Per creare interfacce di amministrazione e frontend
• JavaScript: Per funzionalità lato client e interazioni AJAX
• MySQL: Comprensione base delle query database (WordPress offre astrazioni che semplificano questo aspetto)

Strumenti di Sviluppo Consigliati

• Ambiente locale: Utilizza software come Local by Flywheel, XAMPP o Docker per creare un ambiente di test
• Editor di codice: VS Code, PhpStorm o Sublime Text con estensioni per WordPress
• Version Control: Git per tracciare le modifiche e gestire le versioni del tuo plugin

Struttura Base di un Plugin WordPress

Un plugin wordpress ben strutturato segue convenzioni specifiche che permettono a WordPress di riconoscerlo, attivarlo e gestirlo correttamente. Analizziamo la struttura essenziale:

La Directory del Plugin

Ogni plugin risiede nella directory wp-content/plugins/ di WordPress. Crea una cartella con un nome unico, preferibilmente prefissato per evitare conflitti con altri plugin.

wp-content/
  └── plugins/
      └── mio-plugin-personalizzato/
          ├── mio-plugin-personalizzato.php
          ├── index.php
          ├── README.txt
          └── assets/
              ├── css/
              ├── js/
              └── images/

Il File Principale del Plugin

Il file principale del plugin deve contenere l’header di documentazione che permette a WordPress di identificare il plugin nel pannello di amministrazione. Ecco un esempio di header standard:

<?php
/
Plugin Name: Mio Plugin Personalizzato
Plugin URI: https://esempio.com/mio-plugin
Description: Una breve descrizione delle funzionalità del plugin
Version: 1.0.0
Author: Il Tuo Nome
Author URI: https://esempio.com
License: GPL v2 or later
Text Domain: mio-plugin-personalizzato
Domain Path: /languages
/

Senza questo header, il plugin non apparirà nella lista dei plugin installabili in WordPress.

Guida Passo-Passo: Creare il Tuo Primo Plugin WordPress

Ora che comprendi la struttura base, procediamo con la creazione di un plugin funzionale. In questo esempio, creeremo un plugin che aggiunge un widget per visualizzare informazioni personalizzate nel footer.

Passaggio 1: Creare la Struttura Base

Apri il tuo editor di codice preferito e crea una nuova cartella chiamata mio-plugin-footer. Al suo interno, crea il file principale mio-plugin-footer.php.

Passaggio 2: Definire le Costanti del Plugin

È buona pratica definire costanti per il percorso e l’URL del plugin, facilitando riferimenti successivi:

<?php
// Evita accesso diretto
defined('ABSPATH') or die('Accesso non consentito');

// Costanti del plugin
define('MPF_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('MPF_PLUGIN_URL', plugin_dir_url(__FILE__));
define('MPF_PLUGIN_VERSION', '1.0.0');

Passaggio 3: Creare la Classe del Plugin

La programmazione orientata agli oggetti (OOP) mantiene il codice organizzato e previene conflitti con altri plugin:

class Mio_Plugin_Footer {

    /
      Istanza singleton
      @var Mio_Plugin_Footer
     /
    private static $instance = null;

    /
      Ottieni l'istanza singleton
     /
    public static function get_instance() {
        if (null === self::$instance) {
            self::$instance = new self();
        }
        return self::$instance;
    }

    /
      Costruttore - inizializza gli hook
     /
    private function __construct() {
        add_action('wp_footer', array($this, ' mostra_contenuto_footer'));
        add_action('wp_enqueue_scripts', array($this, 'carica_stili'));
    }

    /
      Carica gli stili CSS
     /
    public function carica_stili() {
        wp_enqueue_style(
            'mpf-plugin-styles',
            MPF_PLUGIN_URL . 'assets/css/style.css',
            array(),
            MPF_PLUGIN_VERSION
        );
    }

    /**
      Mostra il contenuto nel footer
     /
    public function mostra_contenuto_footer() {
        echo '<div id="mpf-footer-info">';
        echo '<p>Plugin creato con successo!</p>';
        echo '</div>';
    }
}

// Inizializza il plugin
Mio_Plugin_Footer::get_instance();

#mpf-footer-info {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
    border-top: 3px solid #007bff;
    margin-top: 30px;
}

#mpf-footer-info p {
    margin: 0;
    color: #333;
    font-size: 14px;
}

// Aggiungi il menu nel pannello admin
add_action('admin_menu', function() {
    add_options_page(
        'Impostazioni Mio Plugin',
        'Mio Plugin Footer',
        'manage_options',
        'mpf-settings',
        'mpf_render_settings_page'
    );
});

// Renderizza la pagina delle impostazioni
function mpf_render_settings_page() {
    // Verifica permessi
    if (!current_user_can('manage_options')) {
        return;
    }
    ?>
    <div class="wrap">
        <h1>Impostazioni Mio Plugin Footer</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('mpf_settings_group');
            do_settings_sections('mpf-settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

// Registra le impostazioni
add_action('admin_init', function() {
    register_setting('mpf_settings_group', 'mpf_footer_text', array(
        'sanitize_callback' => 'sanitize_text_field'
    ));

    add_settings_section(
        'mpf_main_section',
        'Configurazione Footer',
        null,
        'mpf-settings'
    );

    add_settings_field(
        'mpf_footer_text',
        'Testo da visualizzare',
        function() {
            $value = get_option('mpf_footer_text', 'Testo predefinito');
            echo '<input type="text" name="mpf_footer_text" value="' . esc_attr($value) . '" class="regular-text">';
        },
        'mpf-settings',
        'mpf_main_section'
    );
});

// Sanitizzazione dell'input
$testo = sanitize_text_field($_POST['testo']);

// Escape dell'output
echo esc_html($testo);
echo esc_attr($testo);
echo esc_url($url);

// Preparazione query database
global $wpdb;
$risultato = $wpdb->get_var(
    $wpdb->prepare(
        "SELECT  FROM {$wpdb->posts} WHERE ID = %d",
        $id
    )
);

Performance

Evita di caricare risorse su pagine dove non sono necessarie:

// Carica script solo dove necessario
add_action('wp_enqueue_scripts', function() {
    if (is_single()) {
        wp_enqueue_script('mpf-script', MPF_PLUGIN_URL . 'assets/js/script.js', array('jquery'), MPF_PLUGIN_VERSION, true);
    }
});

Compatibilità

Verifica sempre l’esistenza di funzioni prima di usarle per garantire compatibilità con temi e altri plugin:

// Verifica funzioni
if (function_exists('do_blocks')) {
    $content = do_blocks($content);
}

// Verifica classi
if (class_exists('WooCommerce')) {
    // Codice specifico per WooCommerce
}

Hook WordPress: Il Cuore del Plugin

I hook sono fondamentali per l’interazione tra il tuo plugin e WordPress. Comprendere la differenza tra azioni e filtri ti permetterà di manipolare quasi ogni aspetto della piattaforma.

Action Hooks

Le azioni permettono di eseguire codice in specifici momenti:

// Hook durante l'inizializzazione
add_action('init', 'mpf_inizializza_plugin');

// Hook durante il caricamento del footer
add_action('wp_footer', 'mpf_aggiungi_contenuto');

// Hook per caricare risorse
add_action('wp_enqueue_scripts', 'mpf_carica_css');

Filter Hooks

I filtri permettono di modificare dati prima dell’output:

// Modifica il contenuto del post
add_filter('the_content', 'mpf_aggiungi_contenuto_articolo');

// Modifica l'excerpt
add_filter('get_the_excerpt', 'mpf_personalizza_excerpt');

// Modifica il titolo
add_filter('the_title', 'mpf_formatta_titolo');

Debug e Testing del Plugin

Durante lo sviluppo, avrai bisogno di strumenti per identificare e risolvere problemi. Per attivare il debug in WordPress, modifica il file wp-config.php:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Logging Personalizzato

Crea una funzione di logging per tracciare l’esecuzione del plugin:

function mpf_debug_log($messaggio) {
    if (WP_DEBUG === true) {
        error_log('[Mio Plugin] ' . print_r($messaggio, true));
    }
}

Attivazione e Disattivazione del Plugin

WordPress fornisce hook specifici per gestire l’attivazione e la disattivazione del plugin. Questi hook permettono di eseguire operazioni importanti come la creazione di tabelle custom o la pulizia dei dati.

register_activation_hook(__FILE__, 'mpf_attivazione_plugin');

function mpf_attivazione_plugin() {
    // Creare opzioni di default
    add_option('mpf_footer_text', 'Benvenuto nel mio plugin!');

    // Flush rewrite rules se necessario
    flush_rewrite_rules();
}

register_deactivation_hook(__FILE__, 'mpf_disattivazione_plugin');

function mpf_disattivazione_plugin() {
    // Pulizia dati se necessario
    // Non eliminare dati qui per permettere riattivazione
}

Distribuzione del Plugin

Se desideri condividere il tuo plugin wordpress con altri utenti, hai due opzioni principali:

Repository WordPress Ufficiale

Per pubblicare nel repository ufficiale:

1. Registra un account su WordPress.org
2. Crea il file README.txt nel formato richiesto
3. Carica il codice tramite SVN
4. Attendi la revisione del team WordPress

Distribuzione Privata

Per distribuzione privata o commerciale:

1. Comprimi la directory del plugin in formato ZIP
2. Fornisci file di installazione manuale
3. Implementa un sistema di licenze se necessario

Manutenzione e Aggiornamenti

Un plugin richiede manutenzione continua per rimanere sicuro e compatibile:

• Aggiornamenti WordPress: Testa sempre il plugin con le ultime versioni di WordPress
• PHP Evolution: Verifica compatibilità con nuove versioni PHP
• Security Patches: Rimani informato sulle vulnerabilità comuni
• Feedback Utenti: Implementa un sistema di supporto per raccogliere feedback

Conclusione

Creare un plugin wordpress personalizzato è un investimento prezioso per il tuo sito. In questa guida hai imparato le basi fondamentali: dalla struttura di un plugin alla creazione di pagine di impostazioni, dalla sicurezza all’uso dei hook WordPress.

Ricorda che lo sviluppo di plugin è un processo iterativo. Inizia con funzionalità semplici, testa accuratamente, e amplia gradualmente le capacità del tuo plugin. La documentazione ufficiale di WordPress, disponibile sul Codex WordPress, offre risorse aggiuntive per approfondire ogni aspetto.

Se questo è il tuo primo plugin, ti consiglio di iniziare con piccoli progetti prima di affrontare implementazioni complesse. La pratica costante e la lettura del codice di plugin ben sviluppati ti aiuteranno a diventare un sviluppatore WordPress competente.

Hai domande o spunti da condividere sulla creazione di plugin WordPress? Lascia un commento qui sotto, il tuo feedback è sempre gradito!

Creare un tema WordPress da zero è una delle competenze più gratificanti che uno sviluppatore web possa acquisire. Non solo ti permette di avere il pieno controllo sul design e sulle funzionalità del tuo sito, ma ti offre anche una comprensione profonda di come funziona WordPress internamente.

In questa guida ti accompagnerò passo dopo passo nel processo di sviluppo di un tema WordPress funzionale, partendo dalle basi fino ad arrivare alla creazione di un tema completo e professionale.

Perché Creare un Tema WordPress Personalizzato

Prima di immergerci nel codice, è importante capire perché potresti voler creare il tuo tema WordPress invece di utilizzarne uno preesistente.

Un tema personalizzato ti offre:

• Controllo totale sull’aspetto e sul comportamento del sito
• Codice pulito senza funzionalità superflue che rallentano il caricamento
• Possibilità di branding per creare un’identità unica
• Apprendimento approfondito del funzionamento di WordPress
• Manutenzione semplificata perché conosci ogni parte del codice

Se stai cercando di entrare nel mondo dello sviluppo WordPress o vuoi creare un sito web professionale, imparare a sviluppare temi è un investimento che vale sicuramente il tempo dedicato.

Prerequisiti per lo Sviluppo di Temi WordPress

Prima di iniziare, assicurati di avere una buona comprensione dei seguenti concetti:

Competenze Tecniche Necessarie

• HTML e CSS: La base di qualsiasi sito web. Devi sapere come strutturare una pagina e stilizzarla.
• PHP: WordPress è costruito su PHP, quindi una conoscenza base è essenziale per comprendere come funziona il sistema di template.
• JavaScript: Utile per aggiungere interattività, anche se non strettamente necessario per un tema base.

Strumenti di Sviluppo

• Un server locale come XAMPP, MAMP o Local by Flywheel
• Un editor di codice come Visual Studio Code, PhpStorm o Sublime Text
• Un browser moderno con strumenti di sviluppo (Chrome DevTools)
• Accesso a un’installazione WordPress locale

Configurare l’Ambiente di Sviluppo Locale

Il primo passo concreto è configurare un ambiente di sviluppo locale dove poter testare il tuo tema senza compromettere un sito live.

Installare Local by Flywheel

Local è una delle opzioni più semplici per creare un ambiente WordPress locale:

1. Scarica e installa Local dal sito ufficiale
2. Crea un nuovo sito WordPress
3. Assegna un nome al progetto
4. Attendi che l’installazione venga completata
5. Accedi alla bacheca WordPress

Una volta completata l’installazione, avrai un sito WordPress funzionante su cui testare il tuo tema in tempo reale.

Struttura delle Cartelle dei Temi

WordPress cerca i temi in una struttura specifica. I temi si trovano in:

wp-content/themes/nome-del-tuo-tema/

Questa cartella sarà la tua area di lavoro principale. Al suo interno creerai tutti i file necessari per il tuo tema.

Creare i File Essenziali del Tema

Ogni tema WordPress richiede alcuni file fondamentali per funzionare. Iniziamo creando la struttura base.

1. Il File style.css

Il file style.css è il cuore del tuo tema. Non contiene solo CSS, ma anche le informazioni necessarie a WordPress per riconoscere e visualizzare il tema nel pannello di amministrazione.

/
Theme Name: Il Mio Primo Tema
Theme URI: https://esempio.com
Author: Il Tuo Nome
Author URI: https://esempio.com
Description: Un tema WordPress personalizzato creato da zero
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mio-primo-tema
/

Questo commento iniziale è obbligatorio. Senza di esso, WordPress non sarà in grado di riconoscere il tuo tema.

2. Il File functions.php

Il file functions.php è dove definisci le funzionalità del tema, registri script, stili, menu, widget e molto altro.

<?php
// Aggiungiamo il supporto per vari elementi di WordPress
function mio_tema_setup() {
    // Supporto per il titolo del sito
    add_theme_support('title-tag');

    // Supporto per le immagini in evidenza
    add_theme_support('post-thumbnails');

    // Supporto per il logo personalizzato
    add_theme_support('custom-logo');

    // Registriamo un menu di navigazione
    register_nav_menus(array(
        'primary' => __('Menu Principale', 'mio-primo-tema'),
        'footer' => __('Menu Footer', 'mio-primo-tema'),
    ));
}
add_action('after_setup_theme', 'mio_tema_setup');

// Carichiamo gli stili e gli script
function mio_tema_scripts() {
    wp_enqueue_style('mio-tema-style', get_stylesheet_uri());
    wp_enqueue_script('mio-tema-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'mio_tema_scripts');

3. Il File index.php

Il file index.php è il template di fallback di WordPress. Viene utilizzato quando non esiste un template più specifico per un determinato contenuto.

<?php get_header(); ?>

<main class="site-main">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <h2 class="entry-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h2>
                <div class="entry-meta">
                    <span class="posted-on"><?php echo get_the_date(); ?></span>
                </div>
            </header>

            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>

    <?php endwhile; else : ?>
        <p><?php esc_html_e('Nessun contenuto trovato.', 'mio-primo-tema'); ?></p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

Comprendere la Gerarchia dei Template

WordPress utilizza un sistema di gerarchia dei template per determinare quale file PHP visualizzare per ogni tipo di contenuto. Comprendere questo sistema è fondamentale per creare un tema completo.

Ordine di Priorità dei Template

Ecco l’ordine in cui WordPress cerca i template:

Esempio Pratico: Creare header.php e footer.php

Per evitare di ripetere il codice in ogni template, WordPress permette di creare file parziali riutilizzabili.

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<header class="site-header">
    <div class="container">
        <?php if (has_custom_logo()) : ?>
            <?php the_custom_logo(); ?>
        <?php else : ?>
            <h1 class="site-title">
                <a href="<?php echo esc_url(home_url('/')); ?>">
                    <?php bloginfo('name'); ?>
                </a>
            </h1>
        <?php endif; ?>

        <nav class="main-navigation">
            <?php wp_nav_menu(array(
                'theme_location' => 'primary',
                'container' => false,
                'menu_class' => 'nav-menu',
            )); ?>
        </nav>
    </div>
</header>

<main class="site-content">

footer.php

</main>

<footer class="site-footer">
    <div class="container">
        <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. Tutti i diritti riservati.</p>
        <?php wp_nav_menu(array('theme_location' => 'footer')); ?>
    </div>
</footer>

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

Il Loop di WordPress: Cuore del Sistema

Il Loop è il meccanismo fondamentale attraverso cui WordPress recupera e visualizza i contenuti. Comprenderlo è essenziale per qualsiasi sviluppatore di temi.

Struttura Base del Loop

<?php
// Verifichiamo se ci sono post da visualizzare
if (have_posts()) :

    // Iteriamo attraverso ogni post
    while (have_posts()) : the_post();

        // Contenuto del singolo post ?>
        <article id="post-<?php the_ID(); ?>">
            <h2><?php the_title(); ?></h2>
            <div class="post-thumbnail">
                <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail('medium'); ?>
                <?php endif; ?>
            </div>
            <div class="post-excerpt">
                <?php the_excerpt(); ?>
            </div>
            <a href="<?php the_permalink(); ?>">Leggi tutto</a>
        </article>
        <?php

    endwhile;

    // Paginazione
    the_posts_pagination();

else :
    // Messaggio se non ci sono post
    echo '<p>Nessun contenuto disponibile.</p>';

endif;
?>

Funzioni Utili all’Interno del Loop

All’interno del Loop hai accesso a numerose funzioni:

• the_title() - Visualizza il titolo del post
• the_content() - Visualizza il contenuto completo
• the_excerpt() - Visualizza un riassunto
• the_permalink() - Restituisce l’URL del post
• the_post_thumbnail() - Visualizza l’immagine in evidenza
• the_date() - Visualizza la data di pubblicazione
• the_author() - Visualizza l’autore
• get_the_category() - Recupera le categorie

Template Parts: Riutilizzare il Codice

I template parts sono frammenti di template che puoi includere in diversi punti del tuo tema. Questo approccio promuove il riutilizzo del codice e la manutenzione più semplice.

Creare Template Parts

Puoi creare template parts per elementi ripetitivi come card di articoli, header di sezioni, o qualsiasi altro componente.

template-parts/content.php

<article id="post-<?php the_ID(); ?>" <?php post_class('article-card'); ?>>
    <?php if (has_post_thumbnail()) : ?>
        <div class="card-image">
            <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail('large'); ?>
            </a>
        </div>
    <?php endif; ?>

    <div class="card-content">
        <h3 class="card-title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h3>

        <div class="card-meta">
            <span class="card-date"><?php echo get_the_date(); ?></span>
            <span class="card-author">di <?php the_author(); ?></span>
        </div>

        <div class="card-excerpt">
            <?php the_excerpt(); ?>
        </div>

        <a href="<?php the_permalink(); ?>" class="card-link">
            Continua a leggere →
        </a>
    </div>
</article>

Includere Template Parts nel Template

<?php get_template_part('template-parts/content', 'page'); ?>

Il secondo parametro (‘page’) permette di specificare un suffisso. WordPress cercherà prima content-page.php e, se non esiste, ricorrerà a content.php.

Aggiungere Stili e Script Correttamente

Un aspetto cruciale dello sviluppo temi è la gestione corretta di CSS e JavaScript. WordPress fornisce un sistema integrato per caricare risorse in modo sicuro e.performante.

Best Practices per CSS e JavaScript

function mio_tema_enqueue_assets() {
    // CSS principale del tema
    wp_enqueue_style(
        'mio-tema-main',
        get_stylesheet_directory_uri() . '/css/main.css',
        array(),
        '1.0.0'
    );

    // Font Google (dipendenza per main.css)
    wp_enqueue_style(
        'google-fonts',
        'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap',
        array(),
        null
    );

    // JavaScript con dipendenze
    wp_enqueue_script(
        'mio-tema-navigation',
        get_template_directory_uri() . '/js/navigation.js',
        array(),
        '1.0.0',
        true
    );

    // JavaScript condizionale (es. solo per IE)
    wp_enqueue_script(
        'html5shiv',
        'https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js',
        array(),
        '3.7.3',
        false
    );
    wp_script_add_data('html5shiv', 'conditional', 'lt IE 9');
}
add_action('wp_enqueue_scripts', 'mio_tema_enqueue_assets');

Creare il File CSS Principale

css/main.css

/ Reset di base /
 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/ Variabili CSS /
:root {
    --color-primary: #2563eb;
    --color-secondary: #1e40af;
    --color-text: #1f2937;
    --color-bg: #ffffff;
    --font-main: 'Inter', sans-serif;
    --spacing-md: 1.5rem;
    --spacing-lg: 3rem;
}

/ Stili globali /
body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
}

/ Container /
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/ Header /
.site-header {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid #e5e7eb;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/ Navigazione /
.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-md);
}

.nav-menu a {
    text-decoration: none;
    color: var(--color-text);
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: var(--color-primary);
}

/ Articoli /
.article-card {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: 8px;
    background: #f9fafb;
}

.card-title a {
    text-decoration: none;
    color: var(--color-text);
}

/ Responsive */
@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .nav-menu {
        flex-direction: column;
        align-items: center;
    }
}

Personalizzare il Tema con il Customizer

Il Customizer di WordPress permette agli utenti di modificare aspeketti del tema in tempo reale. Implementare il Customizer rende il tuo tema più flessibile e user-friendly.

Aggiungere Opzioni al Customizer

function mio_tema_customize_register($wp_customize) {
    // Sezione Colori
    $wp_customize->add_section('mio_tema_colors', array(
        'title' => __('Colori del Sito', 'mio-primo-tema'),
        'priority' => 30,
    ));

    // Impostazione colore primario
    $wp_customize->add_setting('primary_color', array(
        'default' => '#2563eb',
        'sanitize_callback' => 'sanitize_hex_color',
    ));

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'primary_color', array(
        'label' => __('Colore Primario', 'mio-primo-tema'),
        'section' => 'mio_tema_colors',
        'settings' => 'primary_color',
    )));

    // Sezione Layout
    $wp_customize->add_section('mio_tema_layout', array(
        'title' => __('Layout', 'mio-primo-tema'),
        'priority' => 35,
    ));

    // Impostazione container width
    $wp_customize->add_setting('container_width', array(
        'default' => '1200',
        'sanitize_callback' => 'absint',
    ));

    $wp_customize->add_control('container_width', array(
        'type' => 'number',
        'section' => 'mio_tema_layout',
        'label' => __('Larghezza Container (px)', 'mio-primo-tema'),
        'input_attrs' => array(
            'min' => 800,
            'max' => 1920,
            'step' => 20,
        ),
    ));
}
add_action('customize_register', 'mio_tema_customize_register');

// Applicare le impostazioni nel CSS
function mio_tema_customizer_css() {
    $primary_color = get_theme_mod('primary_color', '#2563eb');
    $container_width = get_theme_mod('container_width', '1200');
    ?>
    <style type="text/css">
        :root {
            --color-primary: <?php echo esc_attr($primary_color); ?>;
            --container-max: <?php echo esc_attr($container_width); ?>px;
        }
    </style>
    <?php
}
add_action('wp_head', 'mio_tema_customizer_css');

Creare Template Specifici

Per un tema completo, dovresti creare template specifici per diversi tipi di contenuto.

Template per Pagine (page.php)

<?php get_header(); ?>

<main class="page-template">
    <?php while (have_posts()) : the_post(); ?>

        <article class="page-content">
            <header class="page-header">
                <h1 class="page-title"><?php the_title(); ?></h1>
            </header>

            <div class="page-body">
                <?php the_content(); ?>
            </div>

            <?php
            // Supporto per la paginazione all'interno del contenuto
            wp_link_pages(array(
                'before' => '<div class="page-links">' . __('Pagine:', 'mio-primo-tema'),
                'after' => '</div>',
            ));
            ?>
        </article>

        <?php
        // Commenti (se abilitati)
        if (comments_open() || get_comments_number()) :
            comments_template();
        endif;
        ?>

    <?php endwhile; ?>
</main>

<?php get_footer(); ?>

Template per Articoli (single.php)

<?php get_header(); ?>

<main class="single-post">
    <?php while (have_posts()) : the_post(); ?>

        <article class="post-single">
            <header class="post-header">
                <?php if (has_post_thumbnail()) : ?>
                    <div class="post-featured-image">
                        <?php the_post_thumbnail('large'); ?>
                    </div>
                <?php endif; ?>

                <h1 class="post-title"><?php the_title(); ?></h1>

                <div class="post-meta">
                    <span class="post-date">
                        <time datetime="<?php echo get_the_date('c'); ?>">
                            <?php echo get_the_date(); ?>
                        </time>
                    </span>
                    <span class="post-author">
                        <?php the_author_posts_link(); ?>
                    </span>
                    <span class="post-categories">
                        <?php the_category(', '); ?>
                    </span>
                </div>
            </header>

            <div class="post-content">
                <?php the_content(); ?>
            </div>

            <footer class="post-footer">
                <?php the_tags('<div class="post-tags"><strong>Tag:</strong> ', ', ', '</div>'); ?>

                <?php get_template_part('template-parts/author', 'bio'); ?>
            </footer>
        </article>

        <nav class="post-navigation">
            <div class="previous-post">
                <?php previous_post_link('%link', '← Articolo precedente'); ?>
            </div>
            <div class="next-post">
                <?php next_post_link('%link', 'Articolo successivo →'); ?>
            </div>
        </nav>

        <?php comments_template(); ?>

    <?php endwhile; ?>
</main>

<?php get_footer(); ?>

Template per Errori 404 (404.php)

<?php get_header(); ?>

<main class="error-404">
    <div class="container">
        <section class="error-404-content">
            <h1 class="error-code">404</h1>
            <h2 class="error-title"><?php esc_html_e('Pagina Non Trovata', 'mio-primo-tema'); ?></h2>
            <p class="error-message">
                <?php esc_html_e('La pagina che stai cercando non esiste o è stata spostata.', 'mio-primo-tema'); ?>
            </p>

            <div class="error-search">
                <h3><?php esc_html_e('Prova a cercare:', 'mio-primo-tema'); ?></h3>
                <?php get_search_form(); ?>
            </div>

            <div class="error-links">
                <a href="<?php echo esc_url(home_url('/')); ?>" class="btn-home">
                    <?php esc_html_e('Torna alla Home', 'mio-primo-tema'); ?>
                </a>
            </div>
        </section>
    </div>
</main>

<?php get_footer(); ?>

Sicurezza e Best Practices

Quando sviluppi un tema WordPress, la sicurezza deve essere sempre una priorità.

Sanitizzazione e Validazione

// Sanitizzazione degli input
$testo = sanitize_text_field($input);
$email = sanitize_email($input);
$url = esc_url($input);
$html = wp_kses_post($input);

// escaping dell'output
echo esc_html($testo);
echo esc_attr($attributo);
echo esc_url($link);
echo wp_kses_post($contenuto_html);

Altre Best Practices

• Non modificare i file core di WordPress
• Usa funzioni WordPress native invece di codice personalizzato quando possibile
• Implementa il supporto per la traduzione usando __() e _e()
• Evita queries personalizzate complesse nel template; usa invece hooks e filtri
• Mantieni il codice modulare usando template parts e funzioni specifiche

Testare e Distribuire il Tema

Prima di rendere disponibile il tuo tema, è essenziale testarlo accuratamente.

Checklist per i Test

• [ ] Il tema si attiva senza errori
• [ ] Tutti i template funzionano correttamente
• [ ] I menu di navigazione sono visualizzati
• [ ] Le immagini in evidenza vengono visualizzate
• [ ] I commenti funzionano
• [ ] La paginazione è corretta
• [ ] Il Customizer funziona
• [ ] Il tema è responsive su diversi dispositivi
• [ ] Non ci sono errori PHP o JavaScript nella console
• [ ] Il tema rispetta gli standard WordPress

Strumenti di Test

• Theme Check: Plugin che verifica la conformità agli standard WordPress
• Query Monitor: Per debuggare query database e performance
• Browser DevTools: Per testare CSS e JavaScript
• Theme Unit Test: Dataset di test per verificare la compatibilità