Guida completa: Come creare un tema personalizzato per WordPress da zero

Preparativi e allestimento dell'ambiente.

Prima di iniziare a scrivere la prima riga di codice, è necessario disporre di un ambiente di sviluppo appropriato. Questo include un server locale, un editor di codice e una buona conoscenza della struttura dei file di base di WordPress. Si consiglia l’uso di XAMPP, MAMP o Local by Flywheel per configurare rapidamente un ambiente locale per WordPress. Questi strumenti permettono di sviluppare e testare il sito in un ambiente sicuro e isolato.

Un tema WordPress è essenzialmente un insieme di file che definiscono l'aspetto e l'organizzazione di un sito web creato con WordPress./wp-content/themes/I file presenti all’interno di questa cartella costituiscono il “identificatore del tema” (topic identifier). Devi creare una nuova cartella, ad esempio…my-custom-themeIn questa cartella sono necessari almeno due file principali:style.css和index.phpIl primo viene utilizzato per memorizzare le informazioni sui formati e i metadati del tema, mentre il secondo rappresenta il file di template predefinito.

Comprendere il messaggio centrale del documento tematico

style.cssI file non vengono utilizzati soltanto per gli stili CSS, ma anche il blocco di commenti presente nella parte superiore dei file rappresenta di fatto il “cartellino d’identità” del tema stesso. È necessario inserire qui informazioni essenziali come il nome del tema, l’autore, una descrizione, la versione, ecc. Questi dati verranno visualizzati nella sezione “Aspetto” -> “Temi” dell’interfaccia amministrativa di WordPress.

Si consiglia di leggere WordPress Theme Development in Practice: A Complete Guide to Building Custom Themes from Scratch。

Un elemento di basestyle.cssEcco un esempio della parte iniziale di un file:

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

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-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-custom-theme
*/

Tra questi,Text DomainUtilizzato per l’internazionalizzazione (traduzione in più lingue); assicurarsi che il nome corrisponda a quello della cartella tematica.

Costruire la struttura di base dei file di template

WordPress utilizza un sistema a livelli di template per determinare quale file di template caricare per i diversi tipi di pagine. Comprendere e creare questi file è fondamentale per costruire la struttura di base di un tema (un tema personalizzato per il sito web).

Creare i file di template necessari.

Oltre a…index.phpDovresti creare gradualmente file di template più specifici. Ad esempio,header.phpUtilizzato per contenere l’intero codice della parte “testa” di tutte le pagine (HTML head, navigazione del sito, ecc.).footer.phpUtilizzato per contenere il piede di pagina.sidebar.phpUtilizzato per la barra laterale. Attraverso le funzioni integrate di WordPress.get_header()、get_footer()和get_sidebar()Puoi facilmente integrare queste parti in altri template.

index.phpQuesto è l’ultimo template di riserva disponibile. Dovresti creare template più specifici e mirati per migliorare il livello di controllo sulle operazioni in corso, ad esempio:
- front-page.phpUtilizzato come pagina iniziale statica.
- home.phpMostra l’indice degli articoli del blog.
- single.phpVisualizza un singolo articolo di blog o un tipo di articolo personalizzato.
- page.phpVisualizza una singola pagina.
- archive.phpVisualizza la pagina di archiviazione che mostra informazioni come categorie, tag, autori, date, ecc.
- 404.phpVisualizza la pagina “Non trovato”.
- search.phpMostra i risultati della ricerca.

Si consiglia di leggere Guida definitiva allo sviluppo di temi per WordPress: creare da zero temi personalizzati per siti web WordPress。

Comprendere il meccanismo dei cicli

Il cuore di WordPress è il cosiddetto “The Loop” (Il Ciclo). Si tratta di un frammento di codice PHP utilizzato per verificare se esistono articoli e, in caso affermativo, per visualizzare il contenuto di ciascun articolo in modo ciclico (ossia uno dopo l’altro). Una struttura di ciclo di base è la seguente, e viene solitamente posizionata all’interno del file `wp-content.php`.single.php或home.phpCinese:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h2>
    <div><p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p></div>
<?php endwhile; else : ?>
    <p><p><strong>Sfortunatamente, nessun post corrisponde ai tuoi criteri.</strong></p></p>
<?php endif; ?>

Tra questi,the_title()和the_content()I tag di template vengono utilizzati per visualizzare i dati specifici di un articolo.

Integrare le funzionalità di base di WordPress

Un tema qualificato deve integrare correttamente tutte le funzionalità di WordPress, tra cui i menu, l’area degli strumenti aggiuntivi, le immagini di rilievo per gli articoli e le funzionalità di supporto al tema stesso.

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

Registra il menu di navigazione e l'area dei widget.

Devi utilizzare…register_nav_menus()La funzione è all’interno del tema.functions.phpPosizioni delle voci del menu registrate nel file. Ad esempio, per registrare un menu “Navigazione principale”:

function my_custom_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
        'footer'  => __( 'Footer Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Poi, inheader.phpIn cinese, usarewp_nav_menu()Una funzione viene utilizzata per richiamare questo menu.

Allo stesso modo, utilizzare…register_sidebar()Le funzioni possono essere utilizzate per creare aree per gli strumenti aggiuntivi (barre laterali).functions.phpDopo aver effettuato la registrazione, potrai gestire i widget tramite la funzione di trascinamento nell’interfaccia “Aspetto” -> “Widget” e utilizzarli nei tuoi template.dynamic_sidebar()Utilizzare una funzione per mostrarlo.

Si consiglia di leggere Guida completa allo sviluppo di temi WordPress: dall'introduzione alla creazione di interfacce personalizzate.。

Aggiungere la funzionalità di supporto per i temi.

Attraversoadd_theme_support()Per le tue funzioni, puoi abilitare una serie di funzionalità fondamentali per il tuo tema. Le più utilizzate includono:
- post-thumbnailsAttivare la funzione delle immagini in evidenza per gli articoli.
- title-tagLasciare che WordPress gestisca automaticamente i titoli dei documenti.<title>L’utilizzo di tag rappresenta la migliore pratica per i temi moderni.
- html5Abilita il supporto per HTML5 per i marcatori chiave relativi a tale tema (ad esempio, moduli di commento, moduli di ricerca, ecc.).

Il codice per abilitare queste funzionalità dovrebbe essere inserito nello stesso modo.functions.phpI documenti delafter_setup_themeÈ all’interno dell’uncino.

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

Stili, script e ottimizzazione delle prestazioni

I temi moderni richiedono un corretto gestione del caricamento di CSS e JavaScript, nonché una attenzione particolare alla performance e al design responsivo.

Aggiungere correttamente CSS e JavaScript

Non collegare mai direttamente i file CSS e JS nei file dei template. È necessario utilizzare invecewp_enqueue_style()和wp_enqueue_script()Funzione, tramite…wp_enqueue_scriptsI “hook” vengono utilizzati per aggiungerli alla coda di attesa. Questo garantisce un corretto gestione delle dipendenze e un ordine di caricamento appropriato, evitando eventuali conflitti.

在functions.phpEsempio presente nel testo:

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Attenzione,get_stylesheet_uri()Quello che viene restituito è il tema (il “topic”) in questione.style.cssPer i file JS, procederemo…trueCome ultimo parametro, indica che il caricamento avviene nel footer, il che contribuisce a migliorare le prestazioni di caricamento della pagina.

Realizzare uno stile responsive e degli stili di base.

Tuostyle.cssDovrebbe essere inclusa una base per un design responsivo. Utilizzando la strategia “Mobile First”, si devono prima creare gli stili per schermi di piccole dimensioni, per poi adattarli gradualmente a schermi più grandi tramite query di media (Media Queries). Inoltre, è necessario assicurarsi che gli elementi multimediali, come le immagini, siano ben gestiti in base alle dimensioni dello schermo.max-width: 100%;Una proprietà che impedisce all'oggetto di fuoriuscire dal contenitore.

Riassumendo

Creare da zero un tema personalizzato per WordPress rappresenta un processo di apprendimento molto completo, che richiede la comprensione simultanea di PHP, HTML, CSS, JavaScript nonché delle API di base di WordPress. Inizieremo con la preparazione dell’ambiente e l’analisi dei file fondamentali del sistema.style.cssAbbiamo iniziato costruendo gradualmente la struttura gerarchica del template, comprendendo il meccanismo dei cicli di esecuzione. Successivamente, abbiamo integrato funzionalità essenziali come il menu di navigazione, gli strumenti utili e le immagini di rilievo, e abbiamo imparato come aggiungere correttamente e in modo efficiente i file di stile e i file di script. Seguendo questi passaggi e le migliori pratiche, non solo possiamo creare temi originali e funzionali, ma possiamo anche garantire la qualità del codice, la sua manutenibilità e le sue prestazioni. Ricorda che lo sviluppo di temi è un processo iterativo: è fondamentale continuare a testare i risultati e raccogliere feedback nell’ambiente reale.

FAQ - Domande frequenti

Per sviluppare temi per WordPress è necessario conoscere a fondo PHP?

È necessario disporre di una conoscenza di base e di capacità pratiche di utilizzo di PHP, poiché WordPress è sviluppato in PHP e i file delle template dei temi sono composti principalmente da codice PHP. È fondamentale comprendere concetti come variabili, funzioni, cicli e istruzioni condizionali, nonché sapere come utilizzare i tag e le funzioni forniti da WordPress. Lo sviluppo avanzato di temi richiede una conoscenza più approfondita della programmazione orientata agli oggetti in PHP.

È possibile modificare un tema esistente per creare un nuovo tema?

Certo, questo è un approccio comune per iniziare a imparare e a creare temi per siti web, soprattutto utilizzando il tema ufficiale “Underscores” come punto di partenza. Tuttavia, se il tema verrà pubblicato per l’uso da parte del pubblico, è necessario assicurarsi di disporre dei diritti per modificarlo e distribuirlo, nonché di rispettare la licenza associata (solitamente la GPL). Una pratica migliore consiste nel comprendere i principi alla base del funzionamento di tale tema e, successivamente, costruire da zero la propria struttura e i propri stili grafici.

Qual è la differenza tra il file functions.php del tema e i plugin?

functions.phpI file fanno parte dello “stile” (o tema) di un sito web e le loro funzionalità sono strettamente legate all’aspetto e alla presentazione complessiva del sito stesso. Gli plugin, invece, servono per aggiungere funzionalità specifiche al sito, indipendentemente dal tema utilizzato. Esiste una regola semplice da seguire: se una funzionalità ha lo scopo di modificare l’aspetto o la struttura del sito, è meglio inserirla direttamente nel tema; se, invece, ha lo scopo di aggiungere una funzionalità aggiuntiva (ad esempio, un modulo di contatto o ottimizzazioni per i motori di ricerca SEO), è più appropriato creare un plugin. In questo modo, anche in caso di cambio di tema, le funzionalità essenziali rimarranno disponibili.

Come posso far sì che il mio tema supporti la traduzione in più lingue?

Dovi prepararti per l’internazionalizzazione (Internationalization, i18n). Ciò significa che tutte le stringhe destinate all’utente presenti nel tema devono essere incapsulate utilizzando le funzioni di traduzione fornite da WordPress.esc_html_e(‘Read More’， ‘my-custom-theme’);Tu hai già…style.cssÈ stato dichiarato nella…Text DomainI campi di testo utilizzati qui devono essere coerenti con quelli specificati. In seguito, il traduttore potrà utilizzare i file `.po` e `.mo` per tradurre queste stringhe.