Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero

Perché sviluppare il proprio tema WordPress?

Dopo aver esaminato un gran numero di temi pronti, gli sviluppatori spesso hanno l’idea di creare i propri temi. Questo non avviene solo per ottenere un design visivo unico, ma anche per avere il pieno controllo sul codice sorgente. I temi disponibili sul mercato, infatti, sono spesso configurati con troppe funzionalità e codice che potrebbero non essere necessari, il che può causare problemi di lentezza nel funzionamento del sito web, vulnerabilità di sicurezza o problemi di compatibilità durante futuri aggiornamenti.

Costruendo un tema da zero, puoi garantire che il codice sia semplice, efficiente e sicuro. Questo processo rappresenta anche un ottimo modo per comprendere a fondo il funzionamento fondamentale di WordPress. Imparerai come funziona la struttura gerarchica dei template, come i dati vengono recuperati dal database e visualizzati sulle pagine, e come utilizzarli al meglio.functions.phpI file vengono estesi attraverso azioni e hook dei filtri. Alla fine, otterrai uno strumento completamente personalizzato in base alle esigenze del tuo progetto, la cui manutenzione e l’iterazione saranno completamente sotto il tuo controllo.

Preparazione dell’ambiente e degli strumenti prima di iniziare.

Prima di scrivere la prima riga di codice, è fondamentale creare un ambiente di sviluppo locale efficiente. Questo ti permetterà di effettuare test e debug in modo indipendente, senza influenzare il sito web online. Puoi scegliere software per ambienti di sviluppo integrati come Local by Flywheel, XAMPP o MAMP, che consentono di installare automaticamente Apache, MySQL e PHP con un solo clic. Assicurati che la versione di PHP utilizzata sia compatibile con i requisiti di installazione di WordPress; di solito si tratta di una versione 7.4 o più recente.

Si consiglia di leggere Guida all’approccio di base allo sviluppo di temi per WordPress: creare temi personalizzati da zero。

L’editor di codice è la tua principale arma per lo sviluppo software. Strumenti come Visual Studio Code, PhpStorm o Sublime Text rappresentano scelte eccellenti: offrono funzionalità come l’highlighting del codice, la completazione automatica e strumenti di debug che migliorano notevolmente l’efficienza del lavoro. Inoltre, ti servirà anche un browser moderno (ad esempio Chrome o Firefox) con le relative funzionalità per lo sviluppo (developer tools), per poter eseguire il debug in tempo reale di HTML, CSS e JavaScript.

UltaHost – Hosting per siti WordPress

Garanzia di rimborso entro 30 giorni, larghezza di banda illimitata e accesso ai database, protezione gratuita contro gli attacchi DDoS; sconto del 50% per l’acquisto di un piano valido per 3 anni (da 3 a 4 TB di spazio di archiviazione).

pagina di accesso

Infine, avrai bisogno di una nuova installazione di WordPress, pulita e priva di eventuali problemi. Non effettuare test sullo sviluppo di temi direttamente sul tuo sito web principale. Dopo l’installazione, seleziona una struttura di collegamenti non predefinita nelle impostazioni di WordPress (in particolare, nella sezione “Impostazioni -> Collegamenti permanenti”), ad esempio basata sul nome dell’articolo. Questo aiuterà a creare correttamente le regole di rimappatura dei collegamenti fin dall’inizio.

Costruire la struttura di base del file tematico

Un tema WordPress è essenzialmente un insieme di file che definiscono l'aspetto e il funzionamento di un sito web WordPress./wp-content/themes/I folder presenti nel directory contengono una serie di file destinati a scopi specifici. Iniziamo creando i file più basilari.

Prima di tutto, nel tuo…/wp-content/themes/Crea una nuova cartella all’interno del directory e dale il nome del tuo argomento, ad esempio:my-first-themeTutti i file relativi ai vari argomenti (temi) verranno posizionati in questo luogo.

Poi, creare due file fondamentali e assolutamente necessari. Il primo è il file delle foglie di stile.style.cssLe note presenti nella parte iniziale di questo file non servono soltanto a definire gli stili visuali, ma costituiscono anche il “cartellino d’identità” del tema per WordPress. Il loro contenuto dovrebbe essere il seguente:

Si consiglia di leggere Sviluppo di temi per WordPress: dalla prima idea alla creazione di temi per siti web di livello professionale。

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个从零开始构建的入门级 WordPress 主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Il secondo file necessario è…index.phpÈ il modello predefinito per tutte le pagine. Come punto di partenza, può rappresentare la struttura PHP/HTML più basilare dell’intero sito web.

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <p><strong>Questo è un testo di prova</strong></p>
</head>
<body no numeric noise key 1002>
    <header>
        <h1>Il mio primo argomento</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© Il mio sito web</p>
    </footer>
    <p><strong>Questo è un testo di esempio.</strong></p>
</body>
</html>

In questo momento, il tuo tema è stato riconosciuto e attivato da WordPress, anche se le sue funzionalità sono molto limitate.

Comprendere e applicare la struttura gerarchica dei template

Uno dei punti di forza principali di WordPress è la sua potente “struttura gerarchica dei template”. Queste regole determinano, per qualsiasi richiesta di pagina del sito, quale file di template WordPress utilizzerà automaticamente per visualizzare il contenuto. Comprendendole, si acquisisce la chiave per lo sviluppo di temi personalizzati per WordPress.

hosting.com Hosting condiviso

Prestazioni elevate con CPU AMD EPYC, storage SSD NVMe e LiteSpeed, supporto interno di esperti 24 ore su 24, 7 giorni su 7, misure di sicurezza avanzate, tra cui SSL, brute force, malware e protezione DDoS, risparmi fino a 73%

pagina di accesso

Il flusso di lavoro può essere semplificato come segue: quando una pagina viene richiesta, WordPress cerca il file del template in base al tipo della pagina (ad esempio, pagina di articolo, pagina statica, archivio di categorie) e a determinate condizioni specifiche (come l’ID dell’articolo o il nome della categoria), seguendo un elenco di priorità prestabilito. Ad esempio, per un singolo articolo del blog, WordPress cerca i file del template nell’ordine seguente:single-{post-type}-{slug}.php、single-{post-type}.php、single.phpE, infine,singular.phpContinuerà la ricerca fino a quando non verrà trovato il primo file esistente. Se nessun file verrà trovato, alla fine verrà eseguita l’operazione di fallback.index.php。

Diamo il via alla pratica: creeremo alcuni file di template essenziali. Prima di tutto…header.php和footer.phpVengono utilizzati per modularizzare i codici relativi alla parte superiore e alla parte inferiore della pagina.index.phpTrasferite il codice presente nella parte superiore e in quella inferiore del documento in questi due file rispettivamente, e utilizzatelo come indicato.get_header()和get_footer()Le funzioni le chiamano.

Successivamente, crea uno…page.phpUtilizzato per visualizzare una singola pagina.single.phpUtilizzati per visualizzare singoli articoli. È possibile utilizzarli in questi template.the_title()和the_content()Si utilizzano tag di template per visualizzare contenuti specifici.

Si consiglia di leggere Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero。

Estendere le funzionalità di un tema tramite il file functions.php

Il tema delfunctions.phpIl file rappresenta la tua “cassetta degli attrezzi”: ti permette di aggiungere funzionalità al tema e di modificarne il comportamento inserendo codice PHP nonché chiamando le funzioni e gli hook integrati in WordPress. Questo file viene caricato automaticamente all’avvio del tema.

Un uso fondamentale e importante è quello della registrazione dei menu e delle barre laterali (aree contenenti strumenti aggiuntivi). Ad esempio, utilizzando questo sistema…register_nav_menus()Funzione per impostare la posizione del menu di navigazione per la dichiarazione del tema:

Hosting condiviso InterServer

Hosting condiviso $2,50 USD al mese, primo mese $0,1 USD codice promozionale tryinterserver, 461 script di applicazioni cloud, installazione con un clic.

pagina di accesso

function mytheme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Allo stesso modo, puoi anche utilizzare…register_sidebar()Una funzione viene utilizzata per creare l’area dedicata agli strumenti aggiuntivi (o “widget”). Un’altra attività fondamentale consiste nel…add_theme_support()Le funzioni abilitano diverse funzionalità per il tuo tema, come le miniature degli articoli, i loghi personalizzati, il supporto per i form HTML5, e molto altro ancora.

Inoltre, è necessario caricare correttamente i file di stile e i file di script. Non si dovrebbe mai inserirli direttamente nei file di template utilizzando i tag `link` o `script` in modo hardcoded. Il modo corretto per farlo è…wp_enqueue_style()和wp_enqueue_script()Funzioni, e montarle suwp_enqueue_scriptsSu questo gancio, in questo modo WordPress potrà gestire le dipendenze e l’ordine di caricamento dei componenti.

Applicare stili e aggiungere interattività agli elementi del sito web

Un tema senza stile è soltanto uno “scheletro” di un sito web. Scrivendo il codice CSS, è possibile definire l’aspetto visivo del sito, inclusi il layout, i colori, i font e il design responsive (adattabile a diversi dispositivi). Si consiglia di organizzare il codice CSS in modo modulare; per questo scopo si possono utilizzare preprocessor come Sass. Tuttavia, l’elemento fondamentale rimane comunque la definizione chiara e strutturata dei vari aspetti estetici del sito.style.cssLa stesura di…

Per garantire la compatibilità tra diversi browser e un layout responsive, il tuo CSS dovrebbe iniziare con lo reset o la standardizzazione degli stili, proseguire con la definizione di stili globali, e solo infine con gli stili specifici per i singoli componenti. Sfrutta al massimo le funzionalità offerte da WordPress.body_class()和post_class()Queste funzioni generano dinamicamente i nomi delle classi CSS in base alla pagina attiva, permettendoti di individuare e creare stili in modo preciso.

L’interattività dipende principalmente da JavaScript. Similmente ai fogli di stile, dovresti utilizzare…wp_enqueue_script()Per aggiungere file JavaScript in modo sicuro, una buona pratica è registrare il tuo codice e incapsularlo all’interno di una funzione.

function mytheme_scripts() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Attenzione all’ultimo parametro.trueCiò significa che lo script verrà caricato in fondo alla pagina, il che di solito è una buona pratica. Per gli script che necessitano di librerie come jQuery, è necessario specificare tali dipendenze all’interno degli argomenti dell’array.

Riassumendo

Costruire il tuo primo tema personalizzato per WordPress è un processo graduale che inizia dalla comprensione del “perché sia necessario svilupparlo personalmente”, prosegue con l’installazione dell’ambiente di sviluppo, la creazione della struttura di base dei file, la padronanza dei meccanismi legati alla struttura dei template, e infine con l’implementazione delle funzionalità desiderate.functions.phpQuesto potente “centro nevralgico” permette di espandere le funzionalità di un sito web; infine, è CSS e JavaScript a dare vita a tali elementi, conferendogli un aspetto visivo unico e personalizzato. Il processo non solo insegna come creare un tema per WordPress, ma soprattutto aiuta a comprendere il funzionamento del sistema stesso, nonché la filosofia alla base della separazione dei dati dalle loro rappresentazioni grafiche.

La pratica è il miglior maestro. Non lasciarti spaventare dalla complessità iniziale; inizia con la soluzione più semplice possibile.index.php和style.cssInizia attivando il tema che hai scelto, quindi aggiungi gradualmente nuovi file di template e funzionalità. Ogni volta che aggiungi qualcosa, testa il risultato e osserva i cambiamenti che si verificano. I documenti ufficiali di WordPress e il codice sorgente rappresentano le migliori risorse per imparare. Quando avrai completato il tuo primo tema, anche se sarà molto semplice, avrai già fatto il tuo primo passo nel mondo dello sviluppo per WordPress.

FAQ - Domande frequenti

Per sviluppare temi (temi per siti web), è necessario avere una solida conoscenza di PHP?

Conoscere bene PHP è certamente di grande aiuto per lo sviluppo avanzato, ma per iniziare a sviluppare temi per WordPress non è necessario essere già un esperto di PHP. Ti basterà padroneggiare la grammatica di base di PHP: variabili, array, funzioni, condizioni e cicli. WordPress fornisce un gran numero di funzioni integrate (tag per i template) e un sistema di “hook” ben strutturato che puoi utilizzare in modo semplice e intuitivo. Nel corso del tuo apprendimento, le tue competenze in PHP miglioreranno naturalmente.

Come viene visualizzato l’elenco degli articoli sul frontend in base al mio tema?

Mostrare l’elenco degli articoli sulla pagina principale, nelle categorie o nelle pagine di archiviazione è una richiesta comune per i siti web. È necessario modificare i file di template corrispondenti (ad esempio…)home.php、archive.php、index.phpNel codice sorgente, viene utilizzato il ciclo principale di WordPress. Di solito, si procede in questo modo…if ( have_posts() )和while ( have_posts() )Utilizzando questa combinazione, si può esaminare l’articolo e, all’interno del ciclo, eseguire le operazioni necessarie.the_title()、the_excerpt()、the_permalink()Utilizzando funzioni come `print` per visualizzare il titolo, l’abstracto e il link di ogni articolo.

Come aggiungere una pagina di impostazioni personalizzate a un tema?

Quando le funzionalità di un tema diventano più complesse, può essere necessario offrire agli utenti alcune opzioni di configurazione, come la possibilità di cambiare lo schema di colori o di caricare un logo. In questi casi, è possibile utilizzare l“”Customizer“ di WordPress o l’API delle ”Pagine di Opzioni“ (Options Pages). Il metodo più recente e consigliato è quello di utilizzare l”“Theme Customizer”, che permette di modificare il tema in modo semplice e intuitivo.functions.phpUtilizzare nel contesto$wp_customize->add_setting()和$wp_customize->add_control()Per aggiungere impostazioni e controlli, si offre all’utente un’esperienza di configurazione con una visualizzazione in tempo reale.

Qual è la relazione tra un sottotema e un tema principale?

I sottotemi rappresentano una funzionalità potente che consente di ereditare tutte le funzionalità, gli stili e i modelli di un altro tema (tema padre). Lo scopo principale di un sottotema è quello di personalizzarlo, modificarlo o estenderlo senza dover modificare direttamente i file del tema padre. Creare un sottotema è molto semplice: basta disporre di un file che contenga le necessarie annotazioni di intestazione.style.cssE unofunctions.phpQuando WordPress non riesce a trovare un file di template all’interno di un sottotema, cerca automaticamente nella tematica principale (padre). Questa è la pratica migliore per applicare aggiornamenti di sicurezza alla tematica principale, mantenendo al contempo le modifiche personalizzate apportate.