Pagina iniziale/Conoscenza/WordPress/Dettagli del contenuto

Sviluppo di temi per WordPress: Una guida completa per creare temi personalizzati da zero

Leggere in 3 minuti.
2026-03-19
2026-06-04
2,768
Guadagno delle commissioni quando fai acquisti tramite i link qui sotto, senza alcun costo aggiuntivo per te.

La struttura di base di un tema WordPress

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 folder presenti nel directory contengono una serie di file utilizzati per controllare l’aspetto e le funzionalità del sito web. Comprendere il ruolo di questi file fondamentali è essenziale per lo sviluppo.

Il file di template è obbligatorio per il tema.

Ogni tema deve contenere due file di base.style.css和index.phpTra questi,style.cssNon viene utilizzato soltanto per contenere i file di stile CSS, ma anche il blocco di commenti presente all’inizio del file contiene informazioni meta sul tema stesso. WordPress si avvale di queste informazioni per riconoscere il tema corretto da utilizzare.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.phpSi tratta del file di template predefinito per i contenuti di un sito WordPress; viene utilizzato quando il sistema non riesce a trovare un template più specifico per la pagina da visualizzare. In pratica, funge da “rete di sicurezza” che garantisce che tutte le pagine vengano mostrate in modo corretto, anche in assenza di un template appropriato.

Si consiglia di leggere Creare siti web di qualità: Una guida pratica all’personalizzazione e all’ottimizzazione dei temi WordPress。

Altri file di template comunemente utilizzati

Per controllare in modo più preciso la visualizzazione delle diverse pagine, è necessario creare ulteriori file di template. Ad esempio,header.phpDi solito contiene la dichiarazione del tipo di documento.<head>La parte iniziale delle pagine di una regione o di un sito web.footer.phpQuindi, il contenuto include il piede di pagina e le etichette di chiusura.sidebar.phpUtilizzato per la barra laterale. Attraverso funzioni integrate in WordPress, come…get_header()、get_footer()和get_sidebar()Puoi facilmente integrare queste parti in altri template.

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).
LOGO di UltaHost pagina di accesso

Inoltre, è anche possibile creare…single.phpUtilizzato per un singolo articolo.page.phpUtilizzato per pagine indipendenti.archive.phpUtilizzato per le liste di archiviazione, nonché…functions.phpQuesto file speciale consente di aggiungere funzionalità e caratteristiche relative ai temi (temi grafici o stili visuali).

Creare un modello per la pagina iniziale di un tema.

La homepage è la facciata di un sito web e di solito richiede un design davvero unico. Cominceremo dalla sua creazione…index.phpIniziamo analizzando come introdurre cicli (loop) per visualizzare i contenuti.

Integrare la parte superiore (header) e la parte inferiore (footer) della pagina.

Una buona pratica è modularizzare le parti comuni del codice. Per iniziare, crea una nuova cartella all’interno della tua cartella tematica (theme folder).header.php和footer.php…inheader.phpNel testo fornito, non è presente alcun elemento specifico da includere. Potresti fornire ulteriori informazioni o indicare quale parte del testo desideri tradurre?<!DOCTYPE html>Dichiarazione,<html>Inizio della etichetta…<head>Area (da utilizzare)wp_head()Gli “hook” permettono agli plugin e ai temi di inserire codice in queste aree, nonché di visualizzare elementi come il logo del sito web e il menu principale all’inizio della pagina.

Poi, inindex.phpAll'inizio di..., utilizzare...<?php get_header(); ?>Per introdurre questo header…index.phpAlla fine, utilizzare…<?php get_footer(); ?>Per introdurre…footer.phpDovrebbe contenere…wp_footer()“Hook call and closure”<p>Io non sono un'attrice.</p><p>Questo testo è stato tradotto automaticamente.</p>Tag.

Si consiglia di leggere Guida completa allo sviluppo di temi per WordPress: costruire temi personalizzati ad alte prestazioni da zero.。

Utilizzare un ciclo per visualizzare gli articoli.

Il cuore di WordPress è il cosiddetto “The Loop”, che è un frammento di codice PHP utilizzato per verificare se esistono articoli e, in caso affermativo, per visualizzarli uno per uno.index.php的get_header()In seguito, puoi inserire il seguente codice di ciclo di base:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/it/</?php the_permalink(); ?>"><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    <p> </p>
<p></p>
    <p>Mi dispiace, non è stato trovato alcun articolo.</p>
<?php endif; ?>

In questo codice,have_posts()和the_post()Funzione-driven loop.the_title()、the_permalink()和the_excerpt()Le etichette di template vengono utilizzate per visualizzare il contenuto effettivo degli articoli. In questo modo, una pagina di elenco di articoli di base è pronta per essere utilizzata.

Aggiungere stili e script al tema.

Un tema che non dispone di stili grafici (formati estetici) è poco attraente. È necessario inserire correttamente i file CSS e JavaScript nella sequenza di caricamento dei file del sito, seguendo le raccomandazioni di WordPress: questo permette di gestire correttamente le dipendenze tra i vari componenti del sito e di evitare conflitti tra i codici.

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%
LOGO di hosting.com pagina di accesso

Introdurre correttamente i file di stile (style sheets)

Anche sestyle.cssÈ necessario, ma non dovresti collegarlo direttamente nell’HTML. Il modo corretto per farlo è…functions.phpUtilizzato nel file.wp_enqueue_style()Funzione. Prima di tutto, crea un file nella directory radice del tema.functions.phpFile, quindi aggiungi il seguente codice:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Questo codice definisce una funzione che indica a WordPress di utilizzare il file di stile principale del tema.get_stylesheet_uri()Il percorso ottenuto viene inserito nella coda utilizzando “my-theme-style” come identificatore (handle).add_action()Il hook monta questo funzionale suwp_enqueue_scriptsAssicurati che questa azione venga eseguita al momento del caricamento della pagina.

Introdurre JavaScript personalizzato

Il metodo per importare un file JavaScript è simile, ma si utilizza…wp_enqueue_script()Funzione. Supponiamo di avere una funzione che si trova in…js/script.jsPer aggiungere un file, puoi procedere in questo modo:

Si consiglia di leggere Dall’approccio iniziale alla padronanza: Guida completa e tutorial pratico per lo sviluppo di temi per WordPress。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

I parametri qui indicati rappresentano rispettivamente: il handle dello script, l’URL dello script, e un array di dipendenze (ad esempio…).array('jquery')Numero di versione, nonché indicazione del fatto che il contenuto venga caricato nella parte inferiore della pagina (footer).trueIndica che…<p>Io non sono un'attrice.</p>Caricamento anticipato.

Estensione della funzionalità dei temi

functions.phpSi tratta della “Cassetta degli attrezzi” del tema: qui puoi aggiungere varie funzionalità per arricchire il tema stesso, senza dover modificare i file del modello principale.

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.
LOGO InterServer pagina di accesso

Aggiungere la funzionalità di supporto per i temi.

WordPress offre molte funzionalità integrate, ma queste possono essere attivate solo se il tema utilizzato dichiara esplicitamente il proprio supporto per tali funzionalità. Questo avviene tramite…add_theme_support()Implementazione delle funzioni. Ad esempio, per supportare le miniature degli articoli (immagini di rilievo), loghi personalizzati e i tag HTML5, è possibile…functions.phpAggiungere quanto segue:

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )Assicurarsi che queste impostazioni vengano eseguite il prima possibile durante l’inizializzazione del tema.

Registrazione del menu di navigazione

Per permettere agli utenti di configurare la navigazione nella sezione “Aspetto > Menù” del pannello di controllo, è necessario registrare in anticipo le posizioni dei menu. Utilizza questo procedimento…register_nav_menus()Funzione:

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

Dopo aver completato la registrazione, potrai utilizzare i file di template (come…)header.phpUtilizzato all'interno di…)wp_nav_menu( array( 'theme_location' => 'primary' ) )Ora il menu viene visualizzato.

Riassumendo

Dall’istante in cui viene creato…style.css和index.phpPartendo dalla cartella di base del tema, hai costruito gradualmente un tema WordPress completo. Comprendendo la struttura gerarchica dei template, hai imparato a creare file template specifici per controllare in modo preciso i diversi tipi di pagine.wp_enqueue_style()和wp_enqueue_script()Gestire le risorse è la migliore pratica per garantire la compatibilità e le prestazioni dei temi (temi in questo contesto probabilmente si riferiscono a elementi grafici o configurazioni di un sistema). Infine, è opportuno sfruttare al meglio le risorse disponibili.functions.phpFile… puoi accedervi tramite…add_theme_support()和register_nav_menus()Funzioni come queste permettono di aggiungere in modo sicuro funzionalità avanzate a un tema WordPress. Comprendendo questi passaggi fondamentali, avrai una solida base per sviluppare autonomamente temi personalizzati per WordPress.

FAQ - Domande frequenti

Quali sono le conoscenze preliminari necessarie per sviluppare temi per WordPress?

È necessario disporre di una solida conoscenza di HTML e CSS per costruire la struttura e gli stili delle pagine web. Inoltre, è importante comprendere la grammatica di base di PHP, poiché i template dei temi WordPress sono sviluppati principalmente in PHP. Una conoscenza di base di JavaScript è utile per aggiungere funzionalità interattive alle pagine web. Essere familiari con i concetti fondamentali di WordPress, come articoli, pagine, categorie e tag, renderà il processo di sviluppo più semplice e veloce.

Perché è necessario utilizzare wp_enqueue_style per caricare i fogli di stile, invece di un link diretto?

Usare direttamente.<link>L’hardcoding del percorso del file dello stile nei tag presenta diversi problemi. In primo luogo, non riesce a gestire correttamente le dipendenze: ad esempio, lo stile potrebbe dipendere dagli stili di un framework specifico. In secondo luogo…wp_enqueue_stylePermette agli plugin o ad altri temi di sovrascrivere o modificare in modo sicuro i tuoi stili grafici. Il punto più importante è che questa funzionalità collabora al meglio con i plugin per la cache e l’ottimizzazione delle prestazioni, garantendo l’ordine e l’efficienza del caricamento dei risorse. È una pratica standard nell’ecosistema WordPress.

Qual è la differenza tra “functions.php” e i plugin?

functions.phpIl codice definito all’interno di un tema è strettamente legato a quell’aspetto visivo e strutturale specifico; pertanto, quando l’utente cambia tema, tali funzionalità diventano inutilizzabili. È consigliabile utilizzare tale codice per contenere elementi direttamente correlati alla presentazione grafica e alla disposizione del sito, come il menu di registrazione, il supporto per immagini personalizzate o la configurazione delle barre laterali. D’altra parte, le funzionalità fornite dai plugin sono generalmente indipendenti dai temi e sono progettate per aggiungere caratteristiche comuni al sito (ad esempio, moduli di contatto o ottimizzazioni per i motori di ricerca SEO); in questo modo, rimangono disponibili anche in caso di cambio di tema. Se una funzionalità non ha alcun legame con l’aspetto estetico del sito, utilizzarla come plugin rappresenta solitamente una scelta più flessibile.

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

Per rendere i temi compatibili con l’internazionalizzazione, è fondamentale puntare al mercato globale. Innanzitutto, in tutti i punti in cui vengono visualizzati i testi dei temi, utilizzate le funzionalità di traduzione fornite da WordPress, ad esempio…__('文本', 'my-custom-theme')或_e('文本', 'my-custom-theme')Tra questi,my-custom-themeÈ vero.style.cssIl campo di testo definito in… Successivamente, utilizzando uno strumento come Poedit, si esegue la scansione dei file tematici per generare il contenuto necessario..potI file dei modelli, in base ai quali i traduttori possono creare versioni in diverse lingue..po和.moFile… Infine,functions.phpIl documento è stato approvato dal Consiglio di Stato cinese il 22 novembre 2019.load_theme_textdomain()La funzione carica i file di traduzione.

Il prossimo passo, cosa dovremo fare dopo?

Se stai creando o ottimizzando un sito WordPress, il passo successivo è continuare a leggere i contenuti relativi all'ottimizzazione delle prestazioni, alla configurazione dei plug-in e alla personalizzazione dei temi.

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.

Etichette: