Guida pratica allo sviluppo di temi WordPress: creare da zero un'architettura e un modello di tema personalizzati.

I temi di WordPress rappresentano il cuore dell’aspetto estetico e delle funzionalità di un sito web. Grazie allo sviluppo personalizzato, gli sviluppatori possono controllare completamente la logica di progettazione, le prestazioni e le possibilità di espansione delle funzionalità del sito, liberandosi dalle limitazioni dei temi forniti da terze parti. Questo guida ti accompagnerà dalla struttura dei directory di base fino alla creazione di un tema personalizzato di WordPress completo di funzionalità e conforme agli standard di sviluppo moderni. Imparerai i concetti fondamentali dell’architettura di un tema, la logica di organizzazione dei file di template, nonché come inserire contenuti dinamici utilizzando funzioni PHP e hook.

La base dello sviluppo del tema e la preparazione dell'ambiente.

Prima di iniziare a scrivere il codice, è fondamentale creare un ambiente di sviluppo corretto e comprendere la struttura di base dell’argomento trattato. Questo permetterà di svolgere il proprio lavoro in modo efficiente e in conformità con le norme dell’ecosistema WordPress.

Creare un ambiente di sviluppo locale

Consigliamo l’utilizzo di ambienti di sviluppo locali, come Local, XAMPP o MAMP. Questi strumenti permettono di installare PHP, MySQL e Apache/Nginx con un solo clic. Creare all’interno di tali ambienti una nuova installazione di WordPress che fungerà da piattaforma di test per i tuoi temi.

Si consiglia di leggere Guida allo sviluppo di temi per WordPress: costruire un tema professionale da zero。

Standard Directory Structure for Understanding Topics

Un tema semplificato al massimo, riconosciuto da WordPress, richiede soltanto due file:style.css 和 index.phpTuttavia, un catalogo di temi personalizzati ben strutturato dovrebbe organizzare in modo logico i diversi tipi di file. La struttura tipica di un catalogo di temi è la 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

your-theme/
├── style.css          (必需，主题样式表和信息头)
├── index.php          (必需，主模板文件)
├── functions.php      (主题功能增强文件)
├── header.php         (头部模板)
├── footer.php         (底部模板)
├── sidebar.php        (侧边栏模板)
└── assets/            (静态资源目录)
    ├── css/
    ├── js/
    └── images/

Creare il file di stile principale.

style.css I file non sono soltanto file di stile, ma rappresentano anche l“”identificativo” di un tema. Il blocco di commenti presente in cima al file contiene tutte le informazioni meta necessarie affinché WordPress possa riconoscere il tema corrispondente.

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

Tra questi,Text Domain Utilizzato per l’internazionalizzazione, è un identificatore obbligatorio da utilizzare nelle chiamate successive alle funzioni di traduzione.

Costruire un sistema di file di template principali

WordPress utilizza un sistema a livelli di template per determinare quale file di template venga utilizzato per i diversi tipi di pagine. La creazione di questi file rappresenta il lavoro fondamentale nello sviluppo di temi (temi per il design e la funzionalità del sito web).

Creare un file di template di base

Prima di tutto, creare i template per la parte superiore e quella inferiore della pagina, che saranno divise in sezioni. File: header.php Dovrebbe contenere il titolo del documento HTML (header del documento HTML).Nella parte iniziale di una regione e del corpo principale di una pagina, si utilizza solitamente… wp_head() Una funzione che permette agli plugin e alle funzionalità principali di inserire codice all’interno del sistema.

Si consiglia di leggere Sviluppo di un tema WordPress dall'inizio alla fine: una guida completa alla costruzione di siti web personalizzati。

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <p><strong>Questo è un testo di prova</strong></p>
</head>
<body no numeric noise key 1003>
<p><strong>Questo testo è stato tradotto automaticamente.</strong></p>
<header>
    <h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

Documento footer.php Allora, il contenuto include anche il piede di pagina, e termina con… wp_footer() La funzione è terminata.

<footer>
    <p>©</p>
</footer>
<p><strong>Questo è un testo di esempio.</strong></p>
<p>Io non sono un'attrice.</p>
<p>Questo testo è stato tradotto automaticamente.</p>

Implementare il file del template principale

index.php In qualità di file di fallback per il modello finale, la sua funzione principale è quella di includere le parti iniziali (“header”) e finali (“footer”) del sito, nonché di creare il ciclo principale per visualizzare l’elenco degli articoli.

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

<main>
    
            <article>
                <h2><a href="/it/</?php the_permalink(); ?>"><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></a></h2>
                <div><?php the_excerpt(); ?></div>
            </article>
        
        <p>Non sono disponibili articoli.</p>
    <?php endif; ?>
</main>

Sviluppare modelli di pagine dedicati

In base alla struttura gerarchica dei template, è possibile creare template più specifici per pagine particolari. Ad esempio, è possibile creare… single.php Utilizzato per visualizzare un singolo articolo.page.php Utilizzato per visualizzare pagine indipendenti.archive.php Utilizzati per visualizzare gli archivi categorizzati. WordPress richiamerà automaticamente queste template più specifiche in modo prioritario.

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

Rafforzare le funzionalità di un tema tramite file di funzioni.

functions.php Il file fa parte del tuo tema “Control Center” e serve per aggiungere funzionalità, registrare menu, supportare immagini personalizzate, ecc., senza la necessità di modificare i file principali del progetto.

Aggiungere il supporto di base per i temi.

在 functions.php In cinese, usare add_theme_support() Una funzione viene utilizzata per dichiarare le funzionalità supportate da un tema. Questo rappresenta un punto di partenza standard.

function my_custom_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );
    // 支持HTML5标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Area per gli strumenti della barra laterale di registrazione

Usare register_sidebar() Una funzione viene utilizzata per definire l’area dedicata agli strumenti aggiuntivi (widget), consentendo agli utenti di aggiungere contenuti in modo dinamico in background.

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

function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-custom-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-custom-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_custom_theme_widgets_init' );

Introdurre script e stili in modo sicuro

Non collegare mai direttamente i file CSS e JS nei template. È consigliabile utilizzare altri metodi per includerli. wp_enqueue_style() 和 wp_enqueue_script() Funzione, e montarla… wp_enqueue_scripts Sul gancio.

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-script', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Implementare etichette di template e cicli

Le etichette di template sono una serie di funzioni PHP fornite da WordPress, utilizzate per generare dinamicamente contenuti all’interno dei template, come titoli di articoli, testi, date, ecc. Vengono solitamente utilizzate all’interno del ciclo principale del codice.

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

Comprendere e utilizzare il ciclo principale

Il ciclo principale (main loop) rappresenta il concetto più fondamentale nei template di WordPress; esso utilizza variabili globali per eseguire le operazioni necessarie all’interfaccia utente. $wp_query Per esaminare gli articoli che devono essere visualizzati sulla pagina attuale, la struttura di base è la seguente:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- 在这里使用模板标签 -->
<?php endwhile; else : ?>
    <!-- 没有找到文章时的内容 -->
<?php endif; ?>

Durante la chiamata… the_post() Successivamente, i dati relativi agli articoli vengono impostati a livello globale, e allora è possibile utilizzare vari tag per i template.

Eseguire l’output utilizzando i tag delle template più comuni.

All’interno del ciclo, è possibile chiamare una serie di funzioni per visualizzare le informazioni sull’articolo. Ad esempio:
- the_title()Titolo dell’articolo:
- the_permalink()Genera un link permanente per l’articolo.
- the_content(): Mostra il contenuto completo dell'articolo.
- the_excerpt()Riassunto dell’articolo:
- the_post_thumbnail()Estrai le immagini caratteristiche dell’articolo.
- the_date() 和 the_author()Data di pubblicazione e autore.

Implementare la navigazione a pagine per gli articoli

Dopo la conclusione del ciclo di visualizzazione dell’elenco degli articoli (ad esempio, sulla pagina principale o nella pagina degli archivi), è necessario fornire un sistema di navigazione a pagine. the_posts_pagination() Una funzione per generare un elenco di link di paginazione esteticamente piacevole e facilmente accessibile.

the_posts_pagination( array(
    'mid_size'  => 2,
    'prev_text' => __( '上一页', 'my-custom-theme' ),
    'next_text' => __( '下一页', 'my-custom-theme' ),
) );

Riassumendo

Dall’istante in cui viene creato un file che contiene gli header di informazioni corrette… style.css e di base index.php Iniziamo: hai già percorso il percorso fondamentale per creare un tema personalizzato per WordPress. Abbiamo analizzato in dettaglio il sistema di gerarchia dei template e ne abbiamo compreso il funzionamento. header.php 和 footer.php Al fine di migliorare la riutilizzabilità del codice e, attraverso… functions.php Il file ha aggiunto in modo efficace le funzionalità relative ai temi e alle risorse necessarie. Comprendere e utilizzare correttamente il “ciclo principale” (main loop) e le “etichette dei template” (template tags”) è fondamentale per visualizzare i contenuti dinamici sulle pagine. Seguendo questi passaggi e le migliori pratiche, non solo creerai un tema funzionante, ma stabilirai anche una base progettuale facile da mantenere, estendere e in linea con gli standard di WordPress.

FAQ - Domande frequenti

Per sviluppare temi per WordPress è necessario conoscere PHP?

Sì, PHP è una tecnologia essenziale da padroneggiare. Il nucleo di WordPress è scritto in PHP; tutti i file delle template, la logica delle funzionalità e l’interazione con il database dipendono da PHP. HTML, CSS e JavaScript vengono utilizzati per creare l’aspetto grafico e le interazioni dell’interfaccia utente, ma PHP rappresenta la base per l’inserimento di dati dinamici nell’interfaccia stessa.

Perché il mio tema non viene visualizzato o non può essere attivato nel backend?

La causa più comune è… style.css Il formato delle informazioni relative al tema presenti in cima al file è errato, mancano informazioni essenziali, oppure c’è un problema con la codifica del file. Si prega di compilare le informazioni nel rispetto delle specifiche stabilite e di verificare che la codifica del file sia “UTF-8 without BOM”. Inoltre, controllare se la cartella contenente i file relativi al tema sia stata posizionata correttamente./wp-content/themes/All’interno della directory.

Qual è la differenza tra il file functions.php e i plugin?

functions.php Le funzionalità presenti nel file sono strettamente legate al tema attivo; pertanto, al cambiare tema, queste funzionalità smetteranno di funzionare. Sono adatte per essere utilizzate per aggiungere elementi che siano strettamente correlati all’aspetto e alla struttura del tema (ad esempio, il menu di registrazione, l’area per definire gli strumenti utilizzabili, le opzioni di supporto al tema). Al contrario, le funzionalità fornite dai plugin sono generalmente indipendenti dal tema e rimangono disponibili anche dopo il cambio di tema, quindi sono più indicate per aggiungere funzionalità di carattere generale (come moduli di contatto, ottimizzazioni per i motori di ricerca, meccanismi di caching).

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

Devi utilizzare le funzioni di internazionalizzazione di WordPress per incapsulare tutti i testi destinati all’utente. Nel codice, usa… () 或 _e() Funzioni come “aspettare” (wait), e specificare in quale contesto vanno utilizzate. style.css Definito in cinese Text DomainAd esempio:echo ( ‘阅读更多’, ‘my-custom-theme’ );Poi, utilizzare uno strumento come Poedit per generare il contenuto desiderato..potFile di template per la traduzione, da utilizzare dai traduttori per creare i contenuti da tradurre..po和.moFile di lingua.

Durante lo sviluppo, è opportuno modificare direttamente i file dei template principali?

Assolutamente non modificare direttamente i file di codice sorgente di WordPress, né i file di codice sorgente dei temi principali che stai utilizzando (a meno che non stia creando un tema derivato, ovvero un “sottotema”). Qualsiasi modifica apportata verrà sovrascritta alla prossima aggiornazione di WordPress. Lo sviluppo personalizzato dovrebbe sempre avvenire all’interno di un tema indipendente o di un sottotema creato da te stesso: questo è un principio fondamentale dello sviluppo su WordPress.