Per qualsiasi sviluppatore che desideri personalizzare in modo approfondito l’aspetto e le funzionalità di un sito web, imparare a sviluppare temi per WordPress rappresenta una competenza di grande valore. A differenza dell’utilizzo di temi pronti, creare temi personalizzati significa disporre di un controllo totale, permettendo di creare siti unici, ad alte prestazioni e in linea con le esigenze specifiche degli utenti. Questo articolo ti guiderà attraverso i passaggi fondamentali per creare il tuo primo tema personalizzato per WordPress, dalla configurazione dell’ambiente di sviluppo alla creazione dei file di template di base.
Preparazione dell’ambiente di sviluppo e degli strumenti
Prima di iniziare a scrivere il codice, hai bisogno di un ambiente di sviluppo locale adatto. Questo ti permetterà di eseguire test e debug senza influenzare il sito web online.
Configurazione dell’ambiente del server locale
Si consiglia di utilizzare pacchetti software per server locali integrati, come XAMPP, MAMP (adatto a Mac) o Local by Flywheel. Questi strumenti installano in un solo clic il server Apache, il database MySQL e PHP, eliminando la necessità di una complessa procedura di configurazione. Prendendo XAMPP come esempio: una volta installato e avviati i servizi Apache e MySQL, si dispone di un ambiente server locale completo.
Scegliere un editor di codice
Un potente editor di codice è uno strumento essenziale per uno sviluppo efficiente. Visual Studio Code (VS Code) è attualmente una scelta molto popolare: è gratuito, leggero e dispone di un’ampia gamma di estensioni, come PHP Intelephense (per suggerimenti intelligenti per il codice PHP), WordPress Snippet (per frammenti di codice predefiniti) e Live Server (per la visualizzazione in tempo reale dei risultati dello sviluppo), il che permette di migliorare notevolmente l’efficienza del lavoro.
Installazione dei file principali di WordPress
Nel directory radice del tuo server locale (ad esempio, la cartella `htdocs` di XAMPP), crea una nuova cartella per il progetto, chiamiamola `my-first-theme`. Successivamente, vai sul sito ufficiale di WordPress.org per scaricare l’ultima versione del pacchetto compresso di WordPress; una volta scaricato, estrai i file e inseriscili nella cartella `my-first-theme`. Accedi poi al sito `http://localhost/my-first-theme` tramite un browser e segui le istruzioni presenti nella guida all’installazione “In 5 minuti” per installare WordPress. Ricorda i nomi dei dati, l’utente e la password che hai impostato, poiché saranno necessari per collegarti al database in seguito.
La struttura di base e i file necessari per creare un tema
Un tema per WordPress è essenzialmente una cartella situata nella directory `wp-content/themes/`, che contiene una serie di file PHP, file di stile (CSS) e file di script che forniscono funzionalità specifiche al sito web.
Cartelle tematiche e fogli di stile
Innanzitutto, entra nella directory `wp-content/themes/` all’interno dell’installazione di WordPress locale e crea una nuova cartella con il nome del tuo tema, ad esempio `mycustomtheme`. La prima e più importante file da creare all’interno di questa cartella è `style.css`. Le note iniziali di questo file non servono solo a specificare le informazioni sul tema, ma sono anche fondamentali affinché WordPress possa riconoscere correttamente il tuo tema.
Si consiglia di leggere Guida all’approccio di base allo sviluppo di temi per WordPress: costruisci il tuo tema personalizzato da zero。
"""`css
/*
Nome del tema: Il mio tema personalizzato
URI del tema: https://example.com/mycustomtheme
Autore: Il Tuo Nome
URI dell’autore: https://example.com
Descrizione: Questo è il mio primo tema personalizzato per WordPress, creato per imparare a sviluppare siti web.
Versione: 1.0.0
Licenza: GPL v2 o versioni successive
Domain del testo: mycustomtheme
*/
```
File di template principali: index.php e functions.php
Crea il file `index.php`. Questo è il file di template predefinito e di riserva del tema; se non esistono file di template più specifici, WordPress lo utilizzerà per renderizzare le pagine. Inizialmente, può essere molto semplice da configurare.
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();`;
// Per il momento, viene visualizzato semplicemente il titolo dell’articolo.
`the_title('`'<h2>', '</h2>' );
Il contenuto();
`endwhile;`;
else :
\necho '<p>Non sono disponibili articoli.</p>';
fin;
?>
<?php wp_footer(); ?>
<p>Io non sono un'attrice.</p>
<p>Questo testo è stato tradotto automaticamente.</p>
```
Successivamente, crea il file `functions.php`. Questo file rappresenta il “motorino” del tuo tema e viene utilizzato per aggiungere nuove funzionalità, abilitare determinate funzionalità (ad esempio, gli screenshot degli articoli), nonché per gestire il caricamento asincrono di stili e script.
PHP
<?php
// Abilita la funzionalità delle immagini caratteristiche degli articoli
`add_theme_support('post-thumbnails');`;
// Aggiunta del supporto per i menu
`add_theme_support('menus');`;
// Registra una posizione per un elemento del menu di navigazione
`register_navMenus(array(...));`
'primary' => __( '主导航菜单', 'mycustomtheme' ),
) );
// Importazione corretta del file contenente lo stile principale
function mycustomtheme_enqueue_styles() {
wp_enqueue_style( 'mycustomtheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mycustomtheme_enqueue_styles' );
```
Si consiglia di leggere Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero。
Dopo aver completato i passaggi precedenti, accedi al pannello di amministrazione di WordPress e, nella sezione “Aspetto” -> “Temi”, dovresti vedere apparire il tema “My Custom Theme”. Fai clic per abilitarlo.
Livelli dei template e file di template più utilizzati
Comprendere la struttura gerarchica dei template in WordPress è fondamentale per lo sviluppo di temi. Questa struttura determina quale file di template WordPress utilizzerà per rispondere alle richieste di visualizzazione delle pagine, in base al tipo di pagina richiesta.
Il concetto di livelli di template
WordPress cerca i file di template in base al tipo di pagina che è attualmente visualizzato, seguendo un ordine di priorità prestabilito. Ad esempio, quando si accede a un singolo articolo del blog, WordPress cerca in sequenza i file: `single-post.php` -> `single.php` -> `singular.php` -> `index.php`. Utilizza il primo file che trova.
Creare file di template utilizzati frequentemente
Basandoti su questo livello di struttura, puoi iniziare a creare file di template più specifici per arricchire il tuo tema.
- `header.php` e `footer.php`: Separare il codice relativo alla parte superiore (header) e alla parte inferiore della pagina (footer) presente in `index.php` in queste due file, e successivamente utilizzare le funzioni `get_header()` e `get_footer()` all’interno di `index.php` per includerle. Questo permette di riutilizzare il codice in modo più efficiente.
- `page.php`: File utilizzato per visualizzare pagine statiche. Puoi iniziare copiando il contenuto di `index.php` per crearne una nuova, e successivamente apportare modifiche personalizzate.
- `single.php`: File utilizzato per visualizzare un singolo articolo. Di solito contiene informazioni come il titolo dell’articolo, il contenuto, la data di pubblicazione, l’autore, le categorie e i tag associati all’articolo.
- `archive.php`: File utilizzato per visualizzare l'elenco degli articoli archiviati, ad esempio pagine di archiviazione per categoria, tag, autore o data.
- `front-page.php`: Se questo file esiste, verrà utilizzato come pagina principale del sito, con priorità maggiore rispetto a `home.php` e `index.php`. È possibile progettare qui un layout unico per la pagina iniziale del sito.
Dopo aver creato questi file, la struttura del tuo tema sarà più chiara e professionale.
Si consiglia di leggere Guida completa allo sviluppo di temi WordPress: dall'inizio all'avanzato.。
Aggiungere stili e funzionalità di base
Un tema che non dispone di alcun stile grafico è considerato “primitivo”; tuttavia, alcune funzionalità di base possono notevolmente migliorare l’efficacia d’uso del tema stesso e l’esperienza dell’utente.
Scrivere stili CSS di base
Sotto i commenti iniziali del file `style.css`, inizia a scrivere le tue regole di stile. Parti da ripristinare gli stili predefiniti del browser, impostando i font e i colori globali, per poi progettare gradualmente lo stile della parte superiore della pagina, della navigazione, dell’area principale del contenuto, della barra laterale (se verrà aggiunta in futuro) e del piede di pagina. Utilizza i query di media per il design responsivo, in modo che il sito venga visualizzato correttamente su smartphone, tablet e computer.
"""`css
/* Ripristino delle impostazioni di base e stili globali */
* {
`margin: 0;`;
`padding: 0;`;
`box-sizing: border-box;`;
}
body {
`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;`;
`line-height: 1.6;`;
Colore: #333;
`background-color: #f4f4f4;`;
}
.container {
Larghezza: 90%;
`max-width: 1200px;`;
`margin: 0 auto;`;
`padding: 20px;`;
}
/* Stili della parte superiore della pagina */
header {
Sfondo: #333;
Colore: #fff;
`padding: 1rem 0;`;
`text-align: center;`;
}
/* Stile del menu di navigazione */
.primary-menu {
/* Stile del menu di navigazione */
}
```
Implementare un menu di navigazione e una barra laterale
Nella pagina `header.php`, hai riservato lo spazio per i menu; utilizza la funzione `wp_nav_menu()` per visualizzare i menu registrati nella pagina `functions.php`.
PHP
```
Per aggiungere una barra laterale, è necessario prima registrare un’area per gli strumenti della barra laterale in `functions.php`.
PHP
function mycustomtheme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'mycustomtheme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'mycustomtheme' ),
'before_widget' => '
Poi, nel punto in cui desideri che venga visualizzato il sidebar (ad esempio, accanto al contenuto principale di `index.php` o `single.php`), utilizza la funzione `dynamic_sidebar('sidebar-1')` per mostrarlo.
Riassumendo
Seguendo i passaggi descritti in questo articolo, hai completato il processo di creazione di un tema personalizzato per WordPress partendo da zero. Abbiamo spiegato come configurare un ambiente di sviluppo locale, come creare i file fondamentali del tema (`style.css`, `index.php` e `functions.php`), come comprendere la struttura delle template e come modificarle per adattarle alle tue esigenze, nonché come aggiungere funzionalità come stili di base, menu di navigazione e barre laterali al tema. Questo è solo l’inizio: in seguito potrai esplorare template più avanzati (come `search.php` e `404.php`), imparare a utilizzare al meglio le funzionalità offerte da “The Loop” di WordPress, integrare framework JavaScript, o inviare il tuo tema nel catalogo ufficiale di temi di WordPress. Continuare a praticare e consultare il manuale di sviluppo ufficiale è il modo migliore per migliorare le tue competenze.
FAQ - Domande frequenti
Quali sono le conoscenze preliminari necessarie per sviluppare temi per WordPress?
È necessario possedere conoscenze di base di HTML e CSS per costruire la struttura e gli stili delle pagine web. Inoltre, è fondamentale avere una comprensione di base di PHP, poiché i temi di WordPress sono composti principalmente da file di template in PHP. Conoscere un po’ di JavaScript può essere utile per aggiungere funzionalità interattive, ma non è indispensabile per iniziare.
Perché il mio nuovo tema non appare nell’elenco dei temi presente nell’interfaccia di amministrazione di WordPress?
Per prima cosa, verifica se la tua cartella tematica è stata posizionata correttamente nella directory `wp-content/themes/`. Successivamente, assicurati che il file `style.css` si trovi nel directory principale di questa cartella e che le informazioni presenti all’inizio del file (come il “Nome della Tematica”, ad esempio) siano formattate correttamente. Qualsiasi errore in questi passaggi potrebbe impedire a WordPress di riconoscere la tua tematica.
Qual è la funzione del file functions.php?
Il file `functions.php` rappresenta il cuore delle funzionalità del tuo tema. Viene utilizzato per abilitare o modificare le funzionalità di base di WordPress (ad esempio, per aggiungere opzioni di supporto al tema), per registrare i menu di navigazione e le aree per gli strumenti presenti sui lati della pagina, per caricare in modo sicuro i file di stile CSS e i script JavaScript, nonché per definire funzioni personalizzate e filtri. È un file fondamentale per estendere le capacità del tuo tema.
Come posso rendere il mio tema compatibile con più lingue?
让主题支持多语言（国际化与本地化）是一项重要实践。你需要在`style.css`的头部和`functions.php`中设置正确的`Text Domain`（文本域），然后在代码中所有需要翻译的字符串处使用`__()`或`_e()`等翻译函数进行包裹。之后，可以使用像Poedit这样的工具生成`.po`和`.mo`语言文件，供翻译者使用。
Dopo il completamento dello sviluppo, come si può distribuire il tema su un sito web online?
Esistono principalmente due modi per distribuire i temi per un sito web. Il primo consiste nell’utilizzare un client FTP/SFTP (ad esempio FileZilla) per caricare direttamente la cartella contenente il tema dal computer locale nella directory `wp-content/themes/` del sito web. Il secondo metodo, più professionale, prevede l’archiviazione del tema in un file ZIP e la sua successiva installazione tramite la funzione “Aspetto” -> “Temi” -> “Aggiungi nuovo tema” presente nell’interfaccia di amministrazione di WordPress. In entrambi i casi, si consiglia di effettuare un test approfondito nell’ambiente di test del sito web prima di procedere con la distribuzione.
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