Partire da zero: padroneggiare i processi fondamentali e le migliori pratiche nello sviluppo di temi per WordPress

Per sviluppare un tema WordPress completo e funzionale, è necessario prima comprendere la sua struttura di file di base. Un tema WordPress semplificato richiede almeno due file:style.css 和 index.phpTra questi,style.css Non si tratta solo di un file di stili, ma anche di un “certificato di identità” per un tema specifico: il blocco di commenti presente all’inizio del file contiene tutte le informazioni metadati relative a quel tema.

Documento di dichiarazione delle informazioni sull'argomento.

style.css All’inizio del file deve essere presente un blocco di commenti specifico, utilizzato per dichiarare al sistema WordPress il tema utilizzato. Queste informazioni includono il nome del tema, l’autore, una descrizione, il numero di versione, ecc., e verranno visualizzate nell’elenco dei temi disponibili nell’interfaccia amministrativa di WordPress.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个简洁、响应式的自定义 WordPress 主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

File del modello principale

index.php Questo è il file di template predefinito del tema; viene utilizzato da WordPress quando non riesce a trovare un file di template più specifico. Costituisce, in sostanza, il “piano di riserva” e il punto di partenza per l’intero tema. Man mano che lo sviluppo del tema prosegue, creerai altri file di template dedicati, ad esempio quelli utilizzati per la pagina singola di un articolo. single.phpUtilizzato per le pagine web. page.phpUtilizzato per l’elenco di archiviazione degli articoli. archive.php Questa struttura gerarchica dei template rappresenta il concetto fondamentale nella progettazione dei temi per WordPress.

Si consiglia di leggere Da zero: Guida completa e migliori pratiche per lo sviluppo di temi per WordPress。

Costruire le funzionalità principali e i modelli di un tema

Un insieme di pagine HTML statiche non può essere considerato un tema WordPress; la differenza principale risiede nell’utilizzo dinamico dei dati e delle funzionalità fornite da WordPress. Questo viene realizzato principalmente attraverso i tag dei template e il meccanismo noto come “The Loop” presente in WordPress.

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

Comprendere il ciclo principale di WordPress

“Il ciclo” è il meccanismo predefinito di WordPress per recuperare gli articoli dal database e visualizzarli sulla pagina. Si tratta di un frammento di codice PHP che verifica la presenza di articoli e, in caso affermativa, li mostra in modo ciclico (ossia uno dopo l’altro). Quasi tutti i file dei template dei temi di WordPress contengono varianti di questo codice ciclico.

<?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 class="entry-content">
        <p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p>
    </div>
<?php endwhile; else : ?>
    <p><?php esc_html_e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
<?php endif; ?>

Nel codice sopra,have_posts() 和 the_post() Le funzioni guidano il ciclo… the_title() 和 the_content() Si tratta di un tag del template che viene chiamato all’interno di un ciclo, e serve per visualizzare il titolo e il contenuto dell’articolo corrente.

Introduzione delle parti comuni: la parte superiore (header) e la parte inferiore (footer)

Per rispettare il principio DRY (Don’t Repeat Yourself – Non ripeterti), i temi di WordPress solitamente separano le parti comuni in file separati. I due più importanti di questi file sono: header.php 和 footer.php。
在 index.php In questo contesto, puoi introdurle in questo modo:

<?php get_header(); ?>
<!-- 主循环内容在这里 -->
<?php get_footer(); ?>

get_header() La funzione introdurrà… header.php Il file deve contenere una dichiarazione del tipo di documento.<head> I segni pubblici presenti nella zona e in cima al sito web (come il logo e il menu di navigazione). Anche in questo caso…get_footer() Verrà introdotto. footer.phpContiene il contenuto del piede di pagina e le tag HTML per chiudere la pagina.

Si consiglia di leggere Approfondire lo sviluppo di temi per WordPress: una guida essenziale dall’introduzione all’espertizzazione。

Integrazione delle funzionalità di base di WordPress

Un tema di qualità dovrebbe integrarsi perfettamente con le funzionalità principali di WordPress, come i menu, gli strumenti utili (widgets) e le immagini di presentazione degli articoli. Questo offre agli amministratori del sito una grande flessibilità per personalizzare l’aspetto del sito senza dover modificare il codice sorgente.

Registrazione del menu di navigazione

Il sistema di menu di WordPress consente agli utenti di creare e gestire i menu di navigazione nella sezione “Aspetto” -> “Menu” dell’interfaccia di amministrazione. I temi, invece, devono specificare in quali posizioni del sito devono essere supportati i menu.

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

Dopo aver completato la registrazione, potrai utilizzare i file di template (come…) header.phpNella posizione corrispondente, utilizzare… wp_nav_menu() La funzione è stata utilizzata per visualizzare il menu.

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

Attiva l’area degli strumenti aggiuntivi.

L’area degli strumenti aggiuntivi (o “barra laterale”) consente agli utenti di aggiungere contenuti trascinando gli strumenti disponibili. Prima di tutto, è necessario registrare una nuova barra laterale.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Poi, nel file del template (ad esempio…) sidebar.phpNel testo fornito, non è presente alcun contenuto specifico da tradurre. Potresti fornire il testo che desideri tradurre in italiano, così potrò eseguire il lavoro per te. dynamic_sidebar( ‘sidebar-1’ ) Per chiamarlo…

Supporto per l’uso di immagini caratteristiche degli articoli.

L’immagine caratteristica (Post Thumbnail) rappresenta l’immagine più rappresentativa di un articolo. Per abilitarla, è necessario aggiungere il supporto relativo al tema nel file functions.php del tema stesso.

Si consiglia di leggere Analisi approfondita dello sviluppo di temi per WordPress: una guida pratica completa dall’introduzione all’espertizzazione。

add_theme_support( ‘post-thumbnails’ );

Dopo di ciò, potrai utilizzarlo all’interno del ciclo. the_post_thumbnail() La funzione è stata utilizzata per generare le immagini che rappresentano le caratteristiche principali di questo articolo.

Applicazione di stili e script front-end

I temi moderni per WordPress devono essere responsive e in grado di caricare in modo efficiente e ordinato i file di stile (CSS) e i file JavaScript.

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

Inserire correttamente gli stili e i script

Assolutamente non si dovrebbe utilizzare direttamente nei file di template. <link> 或 <script> Etichette di risorse hardcoded. La pratica corretta consiste nell'utilizzare wp_enqueue_style() 和 wp_enqueue_script() Funzione, in… functions.php Viene caricato tramite un “hook” (un meccanismo di interazione tra componenti software).

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( ‘my-first-theme-style’, get_stylesheet_uri() );

// 排入自定义 JavaScript 文件
    wp_enqueue_script( ‘my-first-theme-navigation’, get_template_directory_uri() . ‘/js/navigation.js’, array(), ‘1.0’, true );

// 如果需要，排入 jQuery（WordPress 默认已包含）
    // wp_enqueue_script( ‘jquery’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );

Questo metodo consente a WordPress di gestire le dipendenze tra i componenti del sito, evitando il caricamento ripetuto di file e semplificando il processo di personalizzazione dei sottotempi (subthemes).

Costruire un layout responsive

Assicurati che il tuo style.css Il layout è progettato per adattarsi a diverse dimensioni di schermo, da quelle di un telefono a quelle di un computer desktop, grazie all’utilizzo di “Media Queries”. Inoltre, header.php 的 <head> È di fondamentale importanza includere alcune meta-tag relative alla visualizzazione (viewport meta tags) nel codice del sito web.

<meta name="viewport" content="width=device-width, initial-scale=1">

Seguire le migliori pratiche e le norme di sicurezza.

Lo sviluppo di temi non consiste solo nell’implementare funzionalità, ma anche nel garantire la sicurezza del codice, la sua manutenibilità e la sua compatibilità con l’ecosistema di WordPress.

Internazionalizzazione e localizzazione

Preparare i campi di testo e le stringhe da tradurre fin dall’inizio permetterà al tuo contenuto di essere utilizzato da utenti in tutto il mondo. __( ‘文本’, ‘my-first-theme’ ) 或 _e( ‘文本’, ‘my-first-theme’ ) Utilizzate questo strumento per incapsulare tutte le stringhe visualizzabili dall’utente che vengono inviate al front end. Assicuratevi che… style.css Assicurarsi che il “Text Domain” sia impostato correttamente in tutte le funzioni coinvolte.

Convalida dei dati, escape e pulizia dei dati

Non fidarti mai dei dati provenienti dagli utenti o dai database. Quando si visualizzano i dati, è necessario eseguire l’operazione di “escape” (ovvero modificare i caratteri in modo che non vengano interpretati in modo errato dal sistema).
Utilizzare esc_html() Transformare il contenuto HTML in formato escape.
Utilizzare esc_url() URL di escape.
Utilizzare esc_attr() Eccogliere i valori delle proprietà HTML e “evasivarli” (cioè modificarli in modo che non vengano interpretati correttamente dal browser).
Per le variabili PHP utilizzate in JavaScript, è necessario utilizzare… wp_json_encode()。

Considerazioni per l’ottimizzazione delle prestazioni

Per ottimizzare le prestazioni di un tema, si possono seguire questi passaggi: quando si organizzano gli script e i file di stile, impostare correttamente le dipendenze e i numeri di versione; assicurarsi che tutte le immagini siano state ottimizzate; prendere in considerazione il caricamento differito delle immagini non essenziali; e ridurre al minimo le richieste HTTP verso risorse esterne. Inoltre, è importante mantenere il codice il più semplice e efficiente possibile.

Riassumendo

Lo sviluppo di temi per WordPress rappresenta un vero e proprio progetto di ingegneria sistemica: inizia dalla comprensione dei concetti più fondamentali… style.css 和 index.php Iniziamo analizzando gradualmente i livelli dei template, il ciclo principale del codice e l’integrazione delle funzionalità fondamentali del sito. L’elemento chiave è l’utilizzo dinamico dei tag e delle funzioni forniti da WordPress, nonché il rispetto dei principi di modularizzazione del codice comune. È inoltre essenziale prestare attenzione all’organizzazione corretta dei file front-end, al design responsivo del sito, e considerare aspetti legati alla sicurezza (come l’elaborazione dei dati) e all’internazionalizzazione come basi fondamentali dello sviluppo. Seguendo questi processi e queste migliori pratiche, sarà possibile creare temi per WordPress moderni, potenti, sicuri, affidabili e facili da mantenere.

FAQ - Domande frequenti

Quanti file sono necessari almeno per un tema WordPress?

Un tema WordPress richiede almeno due file:style.css 和 index.php。style.css Utilizzato per fornire informazioni sul tema e lo stile di base. index.php Come file di template predefinito, viene utilizzato per visualizzare il contenuto del sito web.

Come posso aggiungere una pagina di impostazioni personalizzate al mio tema?

Di solito non si consiglia di aggiungere direttamente nel tema un gran numero di pagine di configurazione complesse, poiché ciò potrebbe causare conflitti con gli plugin o con le future funzionalità di base di WordPress. Per opzioni semplici, si può considerare l’utilizzo dell’API del Personalizzatore di WordPress (WordPress Customizer). Per esigenze più complesse, è consigliabile creare plugin separati. Se è davvero necessario aggiungere tali elementi nel tema, si può procedere in questo modo. add_menu_page() 或 add_theme_page() Funzioni, create in collaborazione con l’impostazione dell’API.

Perché il layout del sito web è diventato disordinato dopo il cambio di tema?

Di solito, questo accade perché i widget o i menu registrati con il tema precedente non hanno un corrispondente spazio all’interno del nuovo tema. WordPress cercherà di mantenere queste impostazioni. Per favore, verifica se il tuo nuovo tema dispone delle aree necessarie per ospitare tali elementi. functions.php I punti di accesso ai menu di navigazione sono stati registrati correttamente (utilizzando…). register_nav_menus) e l’area degli strumenti aggiuntivi (da utilizzare) register_sidebarAssicurarsi che l“”ID“ o la ”posizione” registrati siano unici, e che vengano utilizzate le funzioni corrette nei file di template. wp_nav_menuSi possono chiamare utilizzando il relativo meccanismo di invocazione.

Come posso far sì che il mio tema supporti i sottotemi?

Per permettere al tuo tema di supportare i sottotemi, è necessario renderlo il più modulare e flessibile possibile. Evita di utilizzare percorsi fissi (hardcoded) all’interno delle funzioni, e preferisci invece un approccio basato sull’uso di strutture modulari. get_template_directory_uri() 和 get_stylesheet_directory_uri() Una funzione del genere… Per le funzioni modificabili, si utilizza… if ( ! function_exists( ‘…’ ) ) Per verificare se qualcosa è già stato definito, è fondamentale utilizzare gli “action hooks” (come ad esempio…). after_setup_theme, wp_enqueue_scriptsÈ possibile aggiungere nuove funzionalità in questo modo, permettendo di rimuovere o modificare facilmente tali “hook” (elementi di configurazione) all’interno del tema.

È necessario utilizzare una versione specifica di PHP per lo sviluppo di temi?

Anche se non esistono requisiti obbligatori, per motivi di sicurezza, prestazioni e compatibilità, è consigliabile seguire le indicazioni ufficiali di WordPress riguardo alle versioni di PHP da utilizzare. A partire dal 2026, il core di WordPress raccomanda l’uso di PHP 7.4 o versioni più recenti. Durante lo sviluppo, è opportuno utilizzare versioni più aggiornate di PHP e evitare l’uso di funzioni ormai obsolete nel codice. style.css È una buona abitudine indicare nella documentazione la versione minima di PHP richiesta per il tuo progetto o per gli obiettivi che vuoi raggiungere con il tuo software.