Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero

Per iniziare a sviluppare temi per WordPress, è essenziale disporre di un computer dotato di un ambiente PHP locale. È possibile utilizzare strumenti come XAMPP, MAMP o Local by Flywheel per configurare rapidamente l’ambiente di sviluppo. Successivamente, sarà necessario un editor di codice, come Visual Studio Code, PHPStorm o Sublime Text, che offrono funzionalità come l’illuminazione del codice e i suggerimenti automatici, migliorando notevolmente l’efficienza dello sviluppo. Infine, assicuratevi di aver installato e attivato la versione più recente di WordPress.

Prima di iniziare a codificare, è fondamentale comprendere la struttura dei directory dei temi di WordPress. Un tema di base richiede almeno due file:style.css和index.phpMa nello sviluppo pratico, di solito abbiamo bisogno di più file per separare le funzionalità tra di loro. Una tipica struttura di tema moderno potrebbe essere la seguente:

your-theme/
├── style.css          # 主题样式和基本信息
├── index.php         # 主模板文件
├── header.php        # 头部模板
├── footer.php        # 底部模板
├── sidebar.php       # 侧边栏模板
├── functions.php     # 功能和特性定义
├── page.php          # 页面模板
├── single.php        # 文章模板
└── assets/
    ├── css/
    ├── js/
    └── images/

Creare il file dei temi principali

In questo passaggio, creeremo le basi fondamentali del tema. Questi file definiscono l’identità del tema e la sua struttura di base.

Si consiglia di leggere La guida definitiva allo sviluppo di temi WordPress: dalla creazione di un tema personalizzato da zero.。

Definire le informazioni sul tema e il foglio di stile principale

style.cssI file non sono soltanto fogli di stile, ma rappresentano anche l“”identificativo” di un tema per WordPress. Il blocco di commenti presente nella parte superiore di tali file contiene tutte le informazioni meta necessarie affinché WordPress possa riconoscere correttamente il tema stesso. Un esempio di commento di intestazione di base è il seguente:

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

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始构建的简单自定义主题，用于学习WordPress主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Tra questi,Text DomainUtilizzato per l’internazionalizzazione, rappresenta un identificatore chiave per le chiamate successive alle funzioni di traduzione. Dopo il blocco di commenti, potrai aggiungere stili al tuo tema esattamente come faresti con il CSS tradizionale.

Creare un modello di scheletro per un tema

index.phpÈ il modello principale predefinito per il tema e funge anche da modello di backup per tutte le pagine. Una buona pratica consiste nell’utilizzare le funzioni di template fornite da WordPress per inserire le parti modulari del codice, invece di accumulare tutto il codice in un unico file. Un esempio di soluzione semplice ma ben strutturata…index.phpPotrebbe apparire come segue:

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

Separare i template per la parte superiore e quella inferiore del sito.

header.phpI file di solito contengono la parte iniziale (il “header”) dei documenti HTML, fino al punto in cui inizia l’area principale del contenuto. Questa parte iniziale deve includere tutte le informazioni necessarie per il corretto funzionamento del documento.Dichiarazione,Tag.Area (da utilizzare)wp_head()Ganci), nonché il titolo del sito web e il menu principale. Le funzioni chiave sono…wp_head()Permette ai plugin e ai temi di inserire il codice necessario (come CSS e JS) nella parte iniziale della pagina (header).

footer.phpIl file contiene tutti i contenuti presenti dopo la fine della zona principale del testo, come ad esempio la sezione con gli strumenti presenti in fondo alla pagina o le informazioni sul copyright. Deve essere concluso in modo appropriato.wp_footer()La chiamata alla funzione è terminata; questa funzione è essenziale per il corretto funzionamento di molti plugin, ad esempio quelli utilizzati per l’analisi del codice.

Si consiglia di leggere Costruire un sito web professionale: Una guida completa per creare da zero un tema personalizzato per WordPress。

Introduzione di funzionalità e miglioramenti al tema

functions.phpIl file rappresenta il “centro di controllo” del tuo tema: non si tratta di un file di template, bensì di un file PHP che viene caricato automaticamente all’avvio del tema. Qui puoi aggiungere funzionalità di supporto per il tema, registrare menu, fogli di stile e script, nonché definire varie funzionalità personalizzate.

Attivare la funzionalità dei temi principali

Attraversoadd_theme_support()Per le tue funzioni, puoi dichiarare il supporto per alcune funzionalità fondamentali di WordPress. Ad esempio, abilitare le immagini in miniatura degli articoli (immagini di rilievo) e il supporto per i tag HTML5 sono caratteristiche essenziali per i temi moderni.

<?php
function my_theme_setup() {
    // 启用文章和评论的HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 设置默认缩略图尺寸
    set_post_thumbnail_size( 800, 400, true );
    // 启用标题标签支持（由WordPress自动生成<title>标签）
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Menù di registrazione e caricamento delle risorse

La posizione dei menu di navigazione registrati consente agli utenti di gestirli nella sezione “Aspetto” -> “Menu” presente nell’area di amministrazione.register_nav_menus()Implementazione della funzione:

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

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

Caricare i file CSS e JavaScript nel modo corretto è essenziale per garantire un buon funzionamento del sito web. Dovresti utilizzare…wp_enqueue_style()和wp_enqueue_script()Funzioni, e montarle suwp_enqueue_scriptsSul gancio… In questo modo si possono garantire che le dipendenze siano corrette e si evita il caricamento ripetuto dei file.

Creare un modello di pagina specifico

WordPress utilizza un sistema gerarchico di template, il che significa che cerca automaticamente il file di template più adatto in base al tipo di pagina che viene visualizzato. Creare template specifici per i diversi tipi di pagine permette di ottimizzare la presentazione della grafica e del contenuto, rendendola più precisa e coerente.

Progettare template per singoli articoli e pagine indipendenti

single.phpIl template viene utilizzato per visualizzare un singolo articolo. È collegato a…index.phpI cicli sono simili, ma di solito contengono informazioni metatiche più complete, come la categoria, gli tag, l’autore, l’ora di pubblicazione e la sezione per i commenti.

Si consiglia di leggere Tutorial completo per lo sviluppo di temi WordPress: creare un tema personalizzato da zero.。

page.phpI template vengono utilizzati per visualizzare pagine statiche indipendenti. Di solito non mostrano i metadati degli articoli (come le categorie o la data di pubblicazione); inoltre, il ciclo di visualizzazione dei contenuti è più semplice, poiché i template si concentrano esclusivamente sul contenuto fornito dall’editor di pagine.

Creare modelli per pagine di elenco di articoli e pagine di archiviazione

archive.phpI template vengono utilizzati per visualizzare pagine di archiviazione che contengono informazioni su categorie, tag, autori, date, ecc. Solitamente presentano un titolo (ad esempio “Categoria: Tecnologia”) e un elenco di articoli.

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

home.php或front-page.phpUtilizzato per personalizzare la pagina iniziale del blog. Se disponibile…front-page.phpSarà utilizzato come pagina iniziale del sito; in caso sia disponibile…home.phpServirà come pagina di indice dell’articolo.

Implementare una ricerca personalizzata e una pagina 404

search.phpUtilizzato per visualizzare i risultati della ricerca. Puoi utilizzarlo qui.the_search_query()Una funzione per visualizzare le parole chiave utilizzate dall’utente nella ricerca.

404.phpQuindi, la pagina viene visualizzata quando un utente accede a un indirizzo non esistente. Una buona pagina 404 dovrebbe contenere un messaggio cordiale, un campo di ricerca e collegamenti alle pagine più importanti del sito.

Integrazione di widget e barre laterali dinamiche

I widget sono funzionalità offerte da WordPress che permettono agli utenti di aggiungere in modo flessibile blocchi di contenuto (come elenchi di articoli più recenti, cataloghi di categorie, campi di ricerca, ecc.) al sito. Per far sì che il tuo tema supporti i widget, è necessario prima registrare uno o più “barre laterali” (che in realtà rappresentano le aree destinate all’visualizzazione dei widget), e successivamente mostrarli all’interno dei template del sito.

Area pronta per l’iscrizione agli strumenti aggiuntivi

Usareregister_sidebar()Esiste una funzione per registrare una barra laterale; puoi utilizzarla per configurare l’aspetto e le funzionalità della barra laterale nel tuo sito web.functions.phpVengono definite più barre laterali, utilizzate rispettivamente per la barra laterale principale, l’area del piede di pagina, e altre sezioni del sito.

function my_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' );

Chiamare la barra laterale nel template

Dopo l’iscrizione, dovrai utilizzare questi elementi nei file di template.dynamic_sidebar()Utilizzare una funzione per visualizzare i contenuti di questa area. Ad esempio, in…sidebar.phpCinese:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

Poi, inindex.php、single.phpUtilizzare nei template che richiedono una barra laterale.get_sidebar()Introduzione delle funzionisidebar.phpGli utenti possono ora trascinare e aggiungere vari widget nella “Barra laterale principale” dalla pagina “Aspetto” -> “Widget” presente nell’interfaccia di amministrazione di WordPress.

Riassumendo

Costruire un tema personalizzato per WordPress da zero rappresenta un processo di apprendimento sistematico che inizia con la comprensione della struttura di base dei file, per poi approfondirsi gradualmente nei livelli dei template, nell’aggiunta di funzionalità e nelle aree per il contenuto dinamico. L’elemento fondamentale è padroneggiare…style.css、index.php、header.php、footer.php和functions.phpIl ruolo e la modalità di scrittura di questi file fondamentali.add_theme_support()Abilita questa funzionalità per creare modelli di pagine personalizzati a livello di template, e successivamente…register_sidebar()Con l’integrazione di questi strumenti aggiuntivi, un tema completo e ben strutturato inizia finalmente a prendere forma. Questo non rappresenta soltanto un aspetto legato alla realizzazione tecnica, ma anche una dimostrazione di una profonda comprensione della logica di gestione dei contenuti offerta da WordPress.

FAQ - Domande frequenti

È necessario utilizzare sottotemi prima di sviluppare un tema principale?

Non necessariamente. Se stai creando un tema completamente originale da zero, puoi semplicemente creare un tema padre. Il modo migliore per utilizzare i temi figli è quando vuoi personalizzare e modificare un tema esistente (tema padre), e desideri che in futuro sia possibile aggiornare il tema padre in modo sicuro senza perdere le tue modifiche personali. Iniziare da zero e creare direttamente un tema padre ti aiuterà a comprendere meglio l’intera architettura del sistema.

Perché il mio tema non viene visualizzato nella sezione “Aspetto” (Appearance) del pannello di configurazione del backend?

Di solito, questo è dovuto a…style.cssIl problema deriva da un formato errato, dall’assenza o da errori grammaticali nel blocco di note con le informazioni sul tema posizionato in cima al file. Si prega di verificare attentamente se il blocco di note all’inizio del file è stato scritto seguendo esattamente il formato richiesto, in particolare…Theme Name:Questa riga deve essere presente e corretta. Assicurati inoltre che la tua cartella tematica sia stata posizionata nel posto giusto.wp-content/themes/All’interno della directory.

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

functions.phpIl codice presente nei file è strettamente legato al tema scelto; pertanto, quando si cambia tema, queste funzionalità di solito vengono disattivate. Tali file sono adatti per contenere codice relativo all’aspetto estetico del sito, alla sua struttura e alle funzionalità dei modelli. I plugin, invece, servono per fornire funzionalità indipendenti dal tema, utilizzabili in qualsiasi tema. Esiste un semplice principio da seguire: se una funzionalità influisce sull’aspetto o sulla struttura del sito, va inserita all’interno del file del relativo tema.functions.phpSe si tratta di aggiungere logica commerciale indipendente (ad esempio, moduli di contatto, ottimizzazione SEO), tali funzionalità dovrebbero essere realizzate sotto forma di plugin.

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

Per rendere un tema supportivo di più lingue (internazionalizzazione e localizzazione), sono necessari principalmente due passaggi. Prima di tutto,style.cssIl blocco di commenti e…functions.phpIn tutti i punti in cui è necessario effettuare la traduzione, utilizzare un approccio simile a…__( ‘文本’, ‘my-first-theme’ )Wrap such a translation function inside another function…‘my-first-theme’È il tuo dominio di testo (Text Domain). In secondo luogo, devi utilizzare uno strumento come Poedit per analizzare i file dei temi e generare il contenuto necessario..potFile di template, e creare quelli corrispondenti per ogni lingua..po和.moTraduci i file e mettili nella sezione dedicata al tema./languages/All’interno della directory.