Guida introduttiva allo sviluppo di temi per WordPress: crea il tuo primo tema da zero.

Preparazioni e configurazione dell’ambiente

Prima di iniziare a scrivere il codice, è necessario disporre di un ambiente di sviluppo appropriato. Un ambiente di sviluppo locale permette di eseguire test e debug senza influenzare il sito web online. Si consiglia l’uso di pacchetti integrati come XAMPP, MAMP o Local by Flywheel, che consentono di installare in un’unica operazione Apache, MySQL/MariaDB e PHP.

Assicurati che la tua versione di PHP sia 7.4 o superiore: questa è la versione minima consigliata ufficialmente da WordPress. Inoltre, avrai bisogno di un editor di codice, come Visual Studio Code, Sublime Text o PHPStorm, che offrono funzionalità di evidenziazione del codice e suggerimenti automatici, migliorando notevolmente l’efficienza dello sviluppo.

Creare la struttura di base di un tema per WordPress

Un tema WordPress è essenzialmente un insieme di file che definiscono l'aspetto e il funzionamento di un sito web WordPress. wp-content/themes/ La cartella all’interno del directory. Il nome di questa cartella rappresenta l’identificatore del tuo argomento; si consiglia di utilizzare lettere minuscole, numeri e trattini, evitando l’uso di spazi. Ad esempio, puoi creare una cartella chiamata… my-first-theme La cartella “…”

In questa cartella sono necessari almeno due file principali:style.css 和 index.php。style.css Non si tratta solo di fogli di stile: il loro ruolo più importante è quello di fornire informazioni meta sui temi, che vengono visualizzate nella sezione “Aspetto” -> “Temi” dell’interfaccia di amministrazione di WordPress.

Scrivere i metadati della testata (header) di un argomento

在 style.css All’inizio del file, è necessario aggiungere un blocco di commenti specifico per definire le informazioni sul tema. Ecco un esempio:

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: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个简洁、轻量级的入门级 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Tra questi,Text Domain Utilizzato per l’internazionalizzazione (supporto per più lingue); deve essere identico al nome della tua cartella tematica.index.php Il file in questione rappresenta il modello predefinito per i contenuti di un determinato argomento (tema) e funge da modello di base per tutte le pagine correlate a quel tema. All’inizio, puoi provare a scrivere semplici strutture HTML al suo interno per effettuare dei test.

File di template principali e struttura gerarchica dei template

WordPress utilizza un insieme di regole chiamato “struttura gerarchica dei template” per determinare quale file di template utilizzare per rendere una pagina specifica. Comprendere questa struttura è fondamentale per lo sviluppo di temi. L’idea di base è la seguente: WordPress inizia la ricerca dal file di template più specifico; se non lo trova, ricorre a un file più generico, e infine, se nemmeno questo è disponibile, utilizza il file di template predefinito. index.php。

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

File di template comuni e loro utilizzi

• header.phpLa parte iniziale di un sito web (header) contiene solitamente l’indicazione della regione, il logo del sito e il menu principale di navigazione.
• footer.phpLa parte inferiore di una pagina web di solito contiene informazioni sul copyright, link utili e altri elementi aggiuntivi.
• sidebar.phpArea della barra laterale.
• index.phpIl template principale rappresenta la risorsa di backup definitiva per tutte le pagine.
• single.phpUtilizzato per visualizzare un singolo articolo di blog.
• page.phpUtilizzato per visualizzare singole pagine, come “Informazioni su di noi” o “Contatti”.
• archive.phpUtilizzato per visualizzare l’elenco degli archivi degli articoli (ad esempio, per categoria, tag, autore, data di archiviazione).
• front-page.phpUtilizzato per definire la pagina iniziale del sito web (in caso sia stata impostata una pagina statica come pagina principale).
• home.phpUtilizzato per visualizzare la pagina dell’indice degli articoli del blog (se è stata impostata una pagina iniziale statica, questo template mostra l’elenco degli articoli più recenti).
• 404.phpUtilizzato per visualizzare la pagina di errore “404 Non trovato”.
• search.phpUtilizzato per visualizzare i risultati della ricerca.
• functions.phpQuesto non è un file di template, ma un file funzionale relativo al tema, utilizzato per aggiungere funzionalità, registrare menu, barre laterali, ecc.

Template tags and loops

Nei file di template, si utilizzano frequentemente i “tag di template”. Si tratta di funzioni PHP fornite da WordPress, utilizzate per generare contenuto dinamico. bloginfo('name') Titolo del sito web:the_title() Titolo dell’articolo:

Il concetto più fondamentale è il “loop di WordPress”. Si tratta di una struttura di codice PHP utilizzata per verificare se la pagina attuale contiene articoli (o elenchi di articoli) da visualizzare, e per riprodurli in modo ciclico. Un esempio di loop di base è il seguente:

<?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 _e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

Integrazione delle funzionalità tematiche con gli stili grafici

functions.php Si tratta del “cervello” del tema: tutte le funzionalità che non fanno parte delle funzionalità principali relative alla rendering delle template devono essere aggiunte qui. Questo file viene caricato automaticamente all’inizializzazione del tema.

Funzione di registrazione di argomenti

在 functions.php Nel contesto di WordPress, è possibile estendere le funzionalità dell’interfaccia di utilizzo grazie ai vari “hook” disponibili, come gli action hooks e i filter hooks. Prima di tutto, di solito è necessario dichiarare esplicitamente che il tema supporta determinate funzionalità. Ad esempio, per aggiungere le immagini di anteprima agli articoli o per implementare il supporto per i 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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup Montato su WordPress after_setup_theme Assicurati che questo “action hook” venga eseguito nel momento giusto.

Introduzione di stili e script

I temi moderni dovrebbero includere i file di stile (CSS) e i file JavaScript in modo corretto, in modo che possano essere caricati e utilizzati correttamente dal browser. wp_enqueue_style() 和 wp_enqueue_script() Le funzioni vanno inserite in una coda, anziché essere scritte direttamente nei file di template utilizzando i tag `` o ``. Il vantaggio di questo approccio è che permette di gestire meglio le dipendenze tra le funzioni, evita il caricamento ripetuto dei file e segue le migliori pratiche di sviluppo di WordPress.

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.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

La funzione `getstylesheet_uri()` punta al file della tua template (il file che contiene il codice HTML per il design del sito). style.css Il file `get_template_directory_uri()` restituisce l’URL della directory del tema corrente.

Si consiglia di leggere Guida all’approccio di base allo sviluppo di temi per WordPress: costruisci il tuo tema personalizzato da zero。

Costruire la disposizione della pagina e i componenti dei modelli

Una pagina web standard è solitamente composta da un titolo della pagina, un corpo di contenuto e un piede di pagina. WordPress consiglia di suddividere le parti ripetibili in file separati, per poi includerle nel template principale tramite funzioni specifiche.

Dividere i componenti di un template

Creare header.php、footer.php 和 sidebar.php…in header.php Nella tua risposta, devi includere la sezione " completa e concludere con un contenitore di intestazione evidente (come il tag "). footer.php Di solito, terminano con le etichette `` e ``.

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

Assemblare la pagina completa.

Nel template della pagina (ad esempio…) index.php、single.phpNel codice, puoi utilizzare le seguenti funzioni per includere questi componenti:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php Il file verrà caricato soltanto se non esiste. template-parts/content.phpQuesto ha notevolmente migliorato la riutilizzabilità e la manutenibilità del codice.

Riassumendo

Costruire un tema per WordPress da zero rappresenta un processo di apprendimento sistematico. Prima di tutto, è necessario creare un ambiente di sviluppo locale corretto e comprendere la struttura dei file di base di un tema. L’aspetto fondamentale è padroneggiare la gerarchia dei template di WordPress, poiché essa determina il modo in cui i diversi contenuti vengono visualizzati. functions.php Per creare un tema efficace, è possibile aggiungere funzionalità e caratteristiche avanzate al tema stesso, seguendo al contempo le migliori pratiche per la gestione degli stili e dei script. Inoltre, dividendo la pagina in componenti predefiniti come testata, piede di pagina e barre laterali, e utilizzando le funzioni fornite da WordPress per assemblarli, è possibile creare codice tematico ben strutturato e facile da mantenere. Seguendo questi passaggi, non solo sarai in grado di creare il tuo primo tema, ma metterai anche le basi per lo sviluppo di progetti più complessi e professionali in futuro.

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

FAQ - Domande frequenti

Per sviluppare temi per WordPress è necessario conoscere PHP?

Sì, PHP è il linguaggio di programmazione principale utilizzato per WordPress. I file di template dei temi (ad esempio…) index.php、page.php) e i file funzionali (functions.phpTutti questi file sono in formato PHP. Per poter visualizzare e manipolare dinamicamente i dati presenti in WordPress, è necessario padroneggiare la grammatica di base di PHP, i concetti di valutazione condizionale, i cicli e l’utilizzo delle funzioni.

Nello sviluppo di siti web, quali sono le differenze tra `page.php` e `front-page.php`?

page.php Utilizzato per rendere le singole “pagine” create in WordPress, come ad esempio “Informazioni su di noi” o “Contatti”. front-page.php Si tratta di un template progettato appositamente per la visualizzazione della “Pagina Iniziale” di un sito web. Nella sezione “Impostazioni” -> “Lettura” del pannello di controllo di WordPress, se scegli l’opzione “Una pagina statica” e imposti la “Pagina Iniziale” su una determinata pagina, WordPress utilizzerà automaticamente quel template per la visualizzazione della pagina principale del sito. front-page.php Per visualizzare questa pagina… se… front-page.php Se l’elemento non esiste, verrà utilizzato un valore alternativo. page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

Usare wp_enqueue_style() È il metodo ufficialmente consigliato da WordPress. Garantisce che lo stile venga caricato una sola volta, anche se diversi plugin o temi fanno riferimento allo stesso file. Permette inoltre di gestire facilmente le dipendenze tra gli stili (ad esempio, se il tuo stile dipende da un framework di base). Inoltre, è più compatibile con i meccanismi di cache e con i plugin, e consente ai temi figli di sovrascrivere facilmente gli stili dei temi genitori.

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

Per rendere un tema compatibile con più lingue, sono necessari principalmente due passaggi. Primo, in tutti i testi presenti nel tema, è necessario utilizzare le funzioni di traduzione fornite da WordPress, come… ()、_e() 或 esc_html()E specificare in quale posizione devono essere posizionate. style.css Definito in cinese Text DomainAd esempio:_e( 'Hello World', 'my-first-theme' )In secondo luogo, utilizza strumenti come Poedit per analizzare il codice del tuo tema e generare i file necessari. .pot I file dei modelli, in base ai quali i traduttori possono creare versioni in diverse lingue. .po E quello compilato… .mo File: Posizionare i file di lingua all’interno del tema. /languages/ All’interno della directory, WordPress caricherà automaticamente le traduzioni corrispondenti in base alle impostazioni di lingua del sito.