Concetti di base dello sviluppo di temi per WordPress
Prima di iniziare a scrivere il codice, è fondamentale comprendere la struttura di base di un tema WordPress. Un tema WordPress è essenzialmente una cartella situata nella directory `wp-content/themes/`, che contiene una serie di file con nomi specifici. Questi file, insieme, determinano l’aspetto e le funzionalità del sito web. Il sistema di base di WordPress legge questi file e combina i contenuti presenti nel database (ad esempio articoli, pagine) con lo stile e la struttura del tema, per generare infine la pagina web che viene visualizzata dagli utenti.
Un tema di base richiede almeno due file: `index.php` e `style.css`. `index.php` è il file del modello principale del tema, mentre `style.css` non contiene soltanto gli stili CSS, ma anche delle informazioni meta relative al tema, come il nome del tema, l’autore e una descrizione. Queste informazioni sono l’unico modo con cui WordPress può riconoscere un tema.
Oltre ai file di base, lo sviluppo di temi WordPress prevede anche l’utilizzo di una serie di file di template, che seguono un sistema gerarchico ben definito. Ciò significa che WordPress seleziona automaticamente il file di template più appropriato in base al tipo di pagina che viene visualizzato (ad esempio, la pagina iniziale, un singolo articolo o una pagina di archivio) per renderizzare il contenuto corrispondente. Quando si accede a un singolo articolo, WordPress cerca in sequenza i file `single-post-{slug}.php`, `single-post-{id}.php` e `single-post.php`; solo in caso di assenza di questi file viene utilizzato il file `singular.php` o `index.php`. Comprendere e sfruttare questo meccanismo è fondamentale per creare temi flessibili e potenti.
Costruisci la tua prima struttura tematica.
Iniziamo creando il tema più semplice possibile, per familiarizzarci con i file fondamentali e la struttura dei directory.
Innanzitutto, nella directory `wp-content/themes/` della tua installazione di WordPress locale, crea una nuova cartella chiamata `my-first-theme`. Successivamente, all’interno di questa cartella, crea un file `style.css` e aggiungi le seguenti informazioni di commento necessarie all’inizio del file:
"""`css
/*
Nome del tema: Il mio primo tema
URI del tema: https://example.com/my-first-theme
Autore: Il tuo nome
URI dell’autore: https://example.com
Descrizione: Si tratta di un tema semplice utilizzato per imparare lo sviluppo di temi per WordPress.
Versione: 1.0
License: GNU General Public License v2 or later
Domain del testo: my-first-theme
*/
```
Successivamente, creiamo il file `index.php`. Questo è il modello di base per tutte le pagine, utilizzato in caso di necessità (ad esempio, quando una pagina non viene caricata correttamente). Possiamo inizialmente scrivervi una struttura HTML molto semplice:
Si consiglia di leggere Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero。
PHP
<!DOCTYPE html>
<html no numeric noise key 1000>
<head>
<meta charset="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1000>
<h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
<?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 :
\necho '<p>Non ci sono contenuti disponibili.</p>';
fin;
?>
<?php wp_footer(); ?>
<p>Io non sono un'attrice.</p>
<p>Questo testo è stato tradotto automaticamente.</p>
```
Dopo aver completato questi due file, accedi al pannello di amministrazione di WordPress, vai alla sezione “Aspetto” -> “Temi” e dovresti vedere apparire il tema “Il mio primo tema”. Attivalo e il tuo sito inizierà a funzionare utilizzando il tema che hai creato tu stesso.
Comprendere i tag dei modelli principali
Nel codice di `index.php` sopra, abbiamo utilizzato alcune “etichette di template” (template tags) presenti nel nucleo di WordPress. Si tratta di funzioni PHP utilizzate per generare contenuto dinamico. Ad esempio:
`bloginfo( 'name' )`: visualizza il titolo del sito web impostato in “Impostazioni” -> “Generale”.
`the_title()`: all'interno del ciclo, viene visualizzato il titolo dell'articolo o della pagina corrente.
`the_content()`: all'interno del ciclo, viene visualizzato il contenuto completo dell'articolo o della pagina corrente.
`have_posts()` / `the_post()`: vengono utilizzati per controllare il ciclo principale, eseguire un'iterazione e impostare i dati dell'articolo corrente.
`wp_head()` e `wp_footer()`: sono hook fondamentali che consentono al core di WordPress, ai plugin e ad altri script di inserire codice nell'intestazione e nel piè di pagina della pagina.
Estensione delle funzionalità relative ai temi e ai modelli
I temi di base possono essere visualizzati su tutte le pagine con lo stesso layout. Per creare un sito web più professionale, è necessario utilizzare i livelli dei template per creare modelli specifici per ciascuna pagina e suddividere le parti comuni in file modulari.
Creare componenti per la parte superiore e inferiore della pagina (header e footer).
Separare le parti `header` e `footer` in file distinti è una pratica standard che migliora la manutenibilità del codice. Creare i file `header.php` e `footer.php`.
Modifica il file `index.php` per includere il seguente codice:<body>Tutto il codice che si trova prima dei tag vada spostato in `header.php`.</body>e<p>Questo testo è stato tradotto automaticamente.</p>Tutto il codice che precede l’etichetta (solitamente a partire da…)<footer>Inizia a spostare i file necessari fino al file `footer.php`.
Si consiglia di leggere Guida completa allo sviluppo di temi WordPress: dall'inizio all'avanzato.。
Successivamente, modifica il file `index.php` e utilizza le funzioni `get_header()` e `get_footer()` per includere i contenuti necessari.
PHP
<?php get_header(); ?>
<?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 :
\necho '<p>Non ci sono contenuti disponibili.</p>';
fin;
?>
<?php get_footer(); ?>
```
Creare altri modelli di pagine
Ora puoi creare template per diversi tipi di pagine. Ad esempio, puoi creare un file `single.php` per visualizzare un singolo articolo; questo file può essere copiato da `index.php`, ma può essere modificato per includere ulteriori dettagli, come le categorie, i tag, l’autore e i commenti relativi all’articolo.
Si consiglia di leggere Guida allo sviluppo di temi per WordPress: Costruire temi personalizzati da zero。
Crea un altro file chiamato `page.php` per visualizzare pagine statiche. Un requisito comune è quello di creare una homepage personalizzata: puoi creare un file denominato `front-page.php`, e WordPress lo utilizzerà automaticamente come pagina iniziale del sito, invece di `home.php` o `index.php`.
Introduzione di stili e script
正确的样式和脚本引入方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数。这确保了依赖关系管理，并避免了重复加载。
Crea un file `functions.php` nella directory radice del tema e aggiungi il seguente codice per importare il file di stile principale:
PHP
<?php
function my_first_theme_scripts() {
// Importa il file che contiene lo stile principale del tema
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// È possibile importare i Google Fonts.
wp_enqueue_style( 'my-first-theme-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap', array(), null );
// Importa il file JavaScript personalizzato
wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
```
Inoltre, è possibile aggiungere nella stessa file la funzionalità di supporto per i temi (tema customization), ad esempio:
PHP
// Supporto per le immagini caratteristiche degli articoli
`add_theme_support('post-thumbnails');`;
// Supporto per l’uso di un logo personalizzato
`add_theme_support('custom-logo');`;
// Supporto per i tag HTML5
`add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));`;
```
Personalizzazione e ottimizzazione dell’argomento (o del tema)
Un ottimo tema non solo deve disporre di funzionalità complete, ma deve anche essere facile da personalizzare dall’utente e offrire prestazioni elevate.
Integrazione con i plugin personalizzati per WordPress
Il Personalizzatore di WordPress consente agli utenti di visualizzare in tempo reale e modificare l’aspetto del tema. Attraverso il file `functions.php`, è possibile aggiungere facilmente nuove opzioni di configurazione. Ad esempio, è possibile aggiungere un’opzione per impostare il testo del copyright nella parte inferiore della pagina.
PHP
function my_first_theme_customize_register( $wp_customize ) {
// Aggiungere una sezione per la “configurazione del piede di pagina”
$wp_customize->add_section( 'my_footer_section', array(
'title' => __( '页脚设置', 'my-first-theme' ),
'priority' => 160,
) );
// Aggiungere un elemento di configurazione all’interno della sezione.
$wp_customize->add_setting( 'footer_copyright_text', array(
'default' => '© 2026 我的网站。保留所有权利。',
'sanitize_callback' => 'sanitize_text_field',
'transport' => 'postMessage', // 支持实时预览
) );
// Aggiungere un controllo (un campo di input) per l’impostazione
$wp_customize->add_control( 'footer_copyright_text', array(
'label' => __( '页脚版权文本', 'my-first-theme' ),
'section' => 'my_footer_section',
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_first_theme_customize_register' );
```
Poi, in `footer.php`, utilizza la funzione `get_theme_mod()` per visualizzare questo valore.
PHP
```
Assicurarsi che il sito sia responsive (adattabile a diversi dispositivi) e che le prestazioni siano ottimali.
I temi moderni devono essere responsive, cioè in grado di adattarsi automaticamente a diversi tipi di schermi (da smartphone a desktop). Questo viene principalmente realizzato utilizzando le query di media presenti nel file CSS. Assicurati che il layout definito nel file `style.css` sia in grado di adattarsi correttamente a tutte le dimensioni dello schermo, indipendentemente dal dispositivo utilizzato.
Per quanto riguarda l’ottimizzazione delle prestazioni, oltre alla compressione dei file CSS/JS e delle immagini, durante lo sviluppo di temi (temi per siti web) è importante prestare attenzione anche a:
1. 选择性加载脚本：仅在需要的页面加载特定的JS文件（如评论页加载`comment-reply.js`）。
2. 图片优化：使用`the_post_thumbnail()`及其相关函数时，确保生成适当的图片尺寸。
3. 减少数据库查询：合理使用Transients API缓存耗时查询，避免在模板中执行不必要的`WP_Query`。
Riassumendo
Partendo dalla creazione di una cartella di base che contenga i file `style.css` e `index.php`, hai seguito passo dopo passo il processo di creazione di un tema personalizzato per WordPress. Hai imparato a comprendere la struttura gerarchica dei template, a suddividere i loro componenti, ad aggiungere funzionalità e stili tramite il file `functions.php`, nonché a utilizzare i cosiddetti “customizer” per offrire opzioni personalizzabili agli utenti. Il cuore dello sviluppo di temi WordPress risiede nella comprensione di come il sistema combina i dati con i template, sfruttando la sua vasta libreria di funzioni e il sistema di “hook” per creare siti web flessibili ed efficienti. Una volta acquisite queste basi, potrai esplorare temi più avanzati: creare tipi di articoli personalizzati, sviluppare aree per gli strumenti aggiuntivi (plugins) o creare temi compatibili con l’editor di blocchi (Block Editor) di WordPress. La pratica è la migliore strada per imparare: provando e modificando continuamente, sarai in grado di creare un tema WordPress davvero unico.
FAQ - Domande frequenti
Quali sono le conoscenze preliminari necessarie per sviluppare temi per WordPress?
È necessario possedere una conoscenza di base di HTML e CSS, che costituiscono le fondamenta per costruire la struttura e lo stile delle pagine web. Inoltre, è importante padroneggiare la grammatica di base di PHP, poiché i file dei temi di WordPress sono composti principalmente da codice PHP, utilizzato per ottenere e visualizzare dati in modo dinamico. Una conoscenza di base di JavaScript può essere utile per aggiungere funzionalità interattive, ma non è essenziale per iniziare.
Posso sviluppare temi localmente? Qual è l’ambiente necessario?
Si consiglia vivamente di sviluppare i temi in locale. È necessario configurare un ambiente di server locale. Il metodo più semplice è utilizzare pacchetti software integrati, come XAMPP, MAMP (per Mac) o Local by Flywheel. Questi pacchetti installano contemporaneamente i server Apache/Nginx, PHP e il database MySQL; ti basterà quindi installare WordPress per iniziare lo sviluppo in locale, senza la necessità di una connessione internet, il che rende il processo più veloce e sicuro.
Qual è la differenza tra il file `functions.php` del tema e i plugin?
Il file `functions.php` viene solitamente utilizzato per aggiungere o modificare funzionalità strettamente legate all’aspetto e alle caratteristiche del tema attivo. Quando si cambia tema, queste funzionalità di solito vengono disattivate. I plugin, invece, servono per aggiungere funzionalità universali che non dipendono dal tema specifico (ad esempio, moduli di contatto o ottimizzazioni per i motori di ricerca SEO). Se una funzionalità dovesse essere mantenuta anche in futuro, quando si cambierà tema, è consigliabile svilupparla come plugin. Nella pratica, il file `functions.php` di un tema di grandi dimensioni può diventare molto esteso.
Come posso rendere il mio tema compatibile con più lingue (internazionalizzazione)?
你需要使用WordPress的国际化（i18n）功能。在代码中，所有需要翻译的文本字符串都应使用特定的函数进行包装，例如`__('文本', 'my-text-domain')`或`_e('文本', 'my-text-domain')`。然后在`functions.php`中使用`load_theme_textdomain()`函数来设置翻译文件的加载路径。最后，使用如Poedit这样的工具创建`.pot`模板文件，并让翻译人员生成不同语言的`.po`和`.mo`文件。
Il prossimo passo, cosa dovremo fare dopo?
Per una lettura approfondita e conoscenza pratica
I seguenti contenuti sono correlati all'argomento di questo articolo e sono adatti per una lettura approfondita. È consigliabile iniziare con l'articolo più vicino al tuo problema attuale, per poi passare gradualmente agli argomenti correlati, il che di solito dà risultati migliori.
- Guida allo sviluppo di temi per WordPress: costruire siti personalizzati da zero
- Guida completa allo sviluppo di temi per WordPress: un corso pratico per passare dall’essere principianti all’essere esperti
- Guida completa allo sviluppo di temi per WordPress: costruire template per siti web di livello professionale da zero
- WordPress Theme Development in Action: Building Responsive Enterprise-Level Websites from Scratch
- Creazione di temi per WordPress senza codice: una guida completa per imparare da zero.
Italiano