Guida completa allo sviluppo di temi WordPress: creare un tema personalizzato da zero.

Concetti di base dello sviluppo di temi per WordPress

Prima di iniziare a scrivere il codice, è fondamentale comprendere la struttura di base e i concetti chiave di un tema WordPress. Un tema WordPress è essenzialmente un insieme di file e configurazioni che definiscono l’aspetto e le funzionalità di un sito web creato con WordPress./wp-content/themes/I folder presenti nel directory contengono una serie di file che insieme determinano l’aspetto e le funzionalità del sito web. Questi file si dividono principalmente in due categorie: i file di template e i file di stile.

I file di template rappresentano lo “scheletro” di un tema e controllano la struttura di visualizzazione dei contenuti delle varie pagine. Ad esempio,index.phpÈ il modello di pagina iniziale predefinito.single.phpControllare la visualizzazione di un singolo articolo.page.phpControllare l’visualizzazione di una singola pagina…header.php、footer.php和sidebar.phpVengono generalmente utilizzati per costruire le aree comuni di un sito web. WordPress segue una specifica struttura gerarchica dei template per selezionare il file template più adatto in base alle richieste ricevute, il che offre agli sviluppatori una grande flessibilità.

I file di stile sono responsabili della rappresentazione visiva di un tema; tra questi, il più importante è…style.cssQuesto file non è soltanto lo spazio in cui vengono definite tutte le regole CSS, ma anche il blocco di commenti presente nella parte iniziale del file contiene i metadati del tema: il nome del tema, l’autore, una descrizione e il numero di versione. Queste informazioni sono essenziali affinché WordPress possa riconoscere e attivare correttamente il tema.

Si consiglia di leggere Come creare un tema personalizzato per WordPress: una guida completa dall’ABC。

Oltre a questi, ci sono anche i file relativi alle funzionalità tematiche (tematic feature files).functions.phpSvolge un ruolo centrale all’interno del sistema. Non si tratta di un file di template, bensì di un file PHP che viene caricato automaticamente all’inizializzazione di un tema. Gli sviluppatori possono utilizzarlo per aggiungere funzionalità personalizzate, registrare menu e barre laterali, inserire script e fogli di stile, nonché per configurare vari aspetti dell’interfaccia utente.add_action和add_filterGli “hook” (ganci) permettono di estendere o modificare il comportamento di base di WordPress. Comprendere il funzionamento di questi file fondamentali e il modo in cui interagiscono tra loro è il primo passo per creare qualsiasi tema personalizzato.

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

Creare un framework tematico e file di template

Il primo passo per creare un tema personalizzato è creare il directory del progetto e i file fondamentali necessari. Questo deve essere fatto nel tuo ambiente di sviluppo locale o sul server di test./wp-content/themes/All’interno di questa directory, crea una nuova cartella chiamata “my-custom-theme”. All’interno di questa cartella, devi immediatamente creare due file di base:style.css和index.php。

style.cssLa parte iniziale del file deve contenere informazioni specifiche relative allo stile di formattazione (stylesheet). Ecco un esempio molto semplice:

/*
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
*/

Queste note sono di fondamentale importanza: WordPress le utilizza per visualizzare i tuoi temi nell’elenco dei temi disponibili in background. Ora, procedi alla creazione…index.phpFile: Questo è il modello di ritorno finale per tutte le richieste alle pagine. Uno dei modelli più semplici ed efficaci…index.phpÈ possibile includere soltanto il codice che richiama i tag dei template principali.

<p><strong>Questo è un testo di esempio.</strong></p>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 默认输出文章内容
            the_content();
        endwhile;
    else :
        echo &#039;<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

Questo codice mostra chiaramente il ciclo tematico (The Loop) di WordPress, attraverso…have_posts()和the_post()La funzione esamina e visualizza tutti gli articoli.get_header()、get_sidebar()和get_footer()Le funzioni vengono utilizzate per importare le parti corrispondenti dei template. Successivamente, dovresti creare i file contenenti questi componenti del template che sono stati importati.header.php、sidebar.php和footer.php。

Si consiglia di leggere Partire da zero: La guida completa e le tecnologie fondamentali per lo sviluppo di temi per WordPress。

Creare un file di template per la parte iniziale della pagina (header).

在header.phpNel testo fornito, è necessario inserire le informazioni di intestazione del documento HTML e chiamare le funzioni chiave di WordPress.

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <p><strong>Questo è un testo di prova</strong></p>
</head>
<body no numeric noise key 1002>
<p><strong>Questo testo è stato tradotto automaticamente.</strong></p>
<header id="masthead" class="site-header">
    <nav>'primary' ) ); ?&gt;</nav>
</header>

wp_head()La funzione consente al nucleo di WordPress, ai plugin e al tuo tema di aggiungere il codice necessario alle parti della pagina (ad esempio, collegamenti ai file di stile).body_class()La funzione genera una serie di nomi di classi CSS condizionali per i tag, facilitando un controllo dello stile estremamente preciso. Allo stesso modo…footer.phpIl file deve contenere obbligatoriamente…wp_footer()Le chiamate di funzione vengono solitamente posizionate prima dei tag di chiusura.

Utilizzare il file functions.php per potenziare le funzionalità di un tema.

functions.phpIl file rappresenta il “centro di controllo” del tuo tema, utilizzato per aggiungere funzionalità e integrare le caratteristiche offerte da WordPress. Un punto di partenza comune è configurare le funzionalità supportate dal tema, registrare i menu di navigazione e assicurarsi che i risorse vengano caricate correttamente.

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

Aggiungere il supporto alla funzionalità dei temi.

Puoi utilizzare…add_theme_support()Le funzioni vengono utilizzate per dichiarare le varie funzionalità supportate da un tema. Ad esempio, abilitare l’utilizzo di immagini di rilievo per gli articoli e il supporto di HTML5 per alcuni elementi è una pratica molto comune e standard.

function my_custom_theme_setup() {
    // 让主题支持特色图像
    add_theme_support( 'post-thumbnails' );

// 为评论表单、搜索表单等添加HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加标题标签支持，允许WordPress管理文档标题
    add_theme_support( 'title-tag' );

// 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Questo, qui,after_setup_themeSi tratta di un “hook” (un meccanismo di attivazione automatica) che viene eseguito dopo l’inizializzazione del tema, rappresentando quindi il punto standard per effettuare le impostazioni relative al tema stesso.add_theme_support(‘title-tag’)In quel caso, non avrai più bisogno di…header.phpScritto a mano in cinese.<title>Etichettato.

Introdurre correttamente script e stili

Per motivi di prestazioni, caching e gestione delle dipendenze, è necessario utilizzare i metodi forniti da WordPress per caricare i file CSS e JavaScript, anziché scriverli direttamente nell’HTML.<link>或<script>Tag. Questo viene realizzato attraverso…wp_enqueue_style()和wp_enqueue_script()La funzione è stata completata.

Si consiglia di leggere La guida definitiva all'ottimizzazione di WordPress: strategie complete per migliorare le prestazioni, dall'inizio all'avanzato.。

function my_custom_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 引入一个自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 如果需要，为脚本局部化数据（传递PHP变量到JS）
    wp_localize_script( 'my-custom-theme-navigation', 'myThemeData', array(
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'homeUrl' => home_url( '/' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

wp_enqueue_scriptsQuesto è il hook corretto da utilizzare per caricare i risorse sul lato client (frontend).get_stylesheet_uri()Per ottenere il contenuto relativo al tema…style.cssPercorso, utilizzareget_template_directory_uri()Ottenere l’URL del catalogo dei temi. Inviare il numero di versione come parametro aiuta a eliminare la cache del browser dopo l’aggiornamento dei file.

Implementare una struttura gerarchica dei template e stili personalizzati

La struttura gerarchica dei template di WordPress è un sistema di regole utilizzato per selezionare automaticamente il file template corretto da visualizzare sulla pagina. Quando si accede a un URL, WordPress cerca i file template in ordine dalla specificità maggiore alla specificità minore. Ad esempio, per un articolo con l’ID 123, WordPress cercherà i file template nell’ordine seguente:single-post-123.php -> single-post.php -> single.php -> singular.php -> Infine, tornare indietro a…index.php。

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

Creare un modello di pagina personalizzato.

Oltre ai modelli predefiniti, è possibile creare modelli personalizzati per pagine specifiche. Questo si fa aggiungendo una nota con il nome del modello speciale all’inizio del nuovo file del modello. Ad esempio, per creare un modello chiamato “Pagina a larghezza piena”:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */
get_header(); ?>

<main id="primary" class="site-main full-width">
    &lt;?php
    while ( have_posts() ) :
        the_post();
        the_title( &#039;<h1 class="entry-title">', '</h1>' );
        the_content();
    endwhile;
    ?&gt;
</main>

&lt;?php
get_footer();

Crea e salva questo file (ad esempio: “file_name.txt”).template-full-width.phpDopo aver eseguito tale operazione, quando modifichi una pagina nel backend di WordPress, potrai trovare il template “Pagine a larghezza piena” nell’elenco a discesa “Template” delle “Proprietà della pagina” e utilizzarlo come desideri.

Scrivere CSS responsivo e modulare

Nello sviluppo di temi per applicazioni moderne, il design responsivo è essenziale.style.cssPer adattare il design del sito a diverse dimensioni di schermo, è necessario utilizzare i Media Queries. Una buona pratica consiste nell’adottare il principio del “mobile first”: inizialmente si creano gli stili di base per i dispositivi mobili, per poi gradualmente aggiungere elementi di personalizzazione per schermi più grandi.

Allo stesso tempo, è importante mantenere la modularità e la manutenibilità del CSS. È necessario creare una struttura chiara di nomi di classi per le diverse parti di un sito (come la testa, il menu di navigazione, gli articoli, il piede di pagina), ad esempio utilizzando la metodologia BEM (Block Element Modifier).body_class()和post_class()I nomi di classe generati automaticamente dalle funzioni possono semplificare notevolmente i tuoi selezionatori CSS, evitando eccessivi livelli di nidificazione e problemi legati all’elevata specificità dei selezionatori stessi.

/* 移动端基础样式 */
.site-header {
    padding: 1rem;
}
.entry-title {
    font-size: 1.5rem;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .site-header {
        padding: 2rem;
        display: flex;
        justify-content: space-between;
    }
    .entry-title {
        font-size: 2rem;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .site-main.full-width {
        max-width: 1200px;
        margin: 0 auto;
    }
}

Riassumendo

Sviluppare un tema personalizzato per WordPress da zero rappresenta un progetto sistematico che richiede da parte dello sviluppatore una comprensione approfondita dell’architettura fondamentale del sistema: la struttura di controllo dei file di template e la definizione dell’aspetto grafico attraverso i file di stile.functions.phpQuindi, la funzionalità di gestione centralizzata permette di creare in modo efficiente visualizzazioni di diversi tipi di pagine, seguendo la struttura gerarchica dei template e utilizzando correttamente le funzioni e gli “hook” forniti da WordPress.wp_enqueue_scripts、add_theme_supportL’utilizzo di temi per siti web rappresenta la chiave per garantire la compatibilità, la sicurezza e le prestazioni del sito stesso. Costruendo componenti di template modulari, scrivendo codice CSS responsive e sfruttando i file di configurazione dei temi per personalizzazioni approfondite, è possibile controllare completamente l’aspetto e il comportamento del sito, creando un’esperienza utente unica. Sebbene questo processo richieda tempo e impegno per l’apprendimento, offre la libertà assoluta di creare siti web di qualsiasi tipo.

FAQ - Domande frequenti

Qual è la differenza tra temi e plugin?

Il “Theme” (Tematica) è responsabile principalmente del controllo dell’aspetto grafico del sito web, ovvero del design visivo e della disposizione che gli utenti vedono. Determina i colori, i font, la tipografia, la struttura delle pagine, e altri aspetti estetici del sito.

I plugin sono moduli progettati per aggiungere funzionalità o caratteristiche specifiche a un sito web, permettendo di estendere le sue capacità senza modificare il design di base del tema utilizzato. Ad esempio, possono essere utilizzati per aggiungere moduli di contatto, migliorare l’ottimizzazione per i motori di ricerca (SEO), creare negozi online, e molto altro ancora. Un sito web può attivare soltanto un tema alla volta, ma è possibile installare e attivare più plugin.

È necessario installare un ambiente locale prima di sviluppare un tema?

Sì, si consiglia vivamente di sviluppare i temi per WordPress in un ambiente di sviluppo locale (come Local, XAMPP, MAMP o Docker).

In questo modo potrai scrivere e testare il codice in un ambiente isolato e sicuro, senza il rischio di influenzare il sito web online. L’ambiente locale offre una velocità di caricamento più elevata, facilita la debugging e rende più semplice l’utilizzo di strumenti di controllo delle versioni (come Git) per la gestione del codice. Una volta completati lo sviluppo e i test del tema, potrai poi distribuirlo sul server di produzione.

Come posso rendere il mio tema compatibile con più lingue?

Per rendere un tema compatibile con più lingue (internazionalizzazione e localizzazione), sono necessari due passaggi principali. Primo, in tutti i punti in cui il tema visualizza del testo, è necessario utilizzare le funzioni di traduzione fornite da WordPress per incapsulare tali stringhe di testo. Ad esempio, si può utilizzare…esc_html_e(‘Hello World’, ‘my-custom-theme’)或__('Hello World', 'my-custom-theme')Il secondo parametro di queste funzioni, “my-custom-theme”, è quello che hai definito tu stesso.style.cssI campi di testo (Text Domain) definiti devono essere coerenti tra loro.

In secondo luogo, è necessario utilizzare strumenti come Poedit per analizzare tutte le stringhe traducibili presenti nel tema e generare il contenuto da tradurre..potFile di template, e per ogni lingua creare i relativi file di configurazione..poE quello compilato….moI file vengono raccolti e poi posizionati all’interno del tema (theme)./languages/Nella directory. Infine, infunctions.phpUtilizzare nel contestoload_theme_textdomain()Una funzione per caricare i file di traduzione.

Perché ho modificato il file style.css e il sito web non ha subito alcun cambiamento?

Di solito, questo problema è causato dal cache del browser. Il browser memorizza i file CSS per velocizzare il caricamento delle pagine web, il che può far sì che tu veda stili che non siano gli ultimi disponibili.

Puoi provare i seguenti metodi per risolvere il problema: innanzitutto,wp_enqueue_style()Nella funzione, aggiungi un parametro che contenga un numero di versione dinamico per il file dei style sheet; in questo modo, ogni volta che il file viene aggiornato, l’URL cambia, costringendo il browser a scaricarlo nuovamente. Inoltre, esegui un rinfresco forzato del browser premendo Ctrl+F5 (o Cmd+Shift+R). Verifica anche se il tuo tema è stato attivato correttamente, e assicurati di modificare il tema che è attualmente in uso.style.cssFile. Infine, assicurati che i tuoi selezionatori CSS siano abbastanza specifici da sovrascrivere eventuali altri stili esistenti.