Preparare l’ambiente di sviluppo e comprendere la struttura del tema.
Prima di iniziare a scrivere il codice, è necessario disporre di un ambiente di sviluppo locale adatto. Si consiglia l’uso di strumenti come Local by Flywheel, XAMPP o MAMP, che permettono di configurare rapidamente un ambiente server basato su PHP, MySQL e Apache/Nginx. Assicurarsi inoltre che il proprio editor di testo o ambiente di sviluppo integrato (IDE), come VS Code o PhpStorm, supporti la visualizzazione evidenziata del codice nonché le funzionalità FTP/SFTP.
Un tema standard per WordPress è in realtà una cartella con una struttura specifica, che si trova all’interno della directory principale del sito web. /wp-content/themes/ All’interno della directory, ci sono soltanto due file fondamentali e essenziali.index.php 和 style.cssTra questi,style.css Non si tratta soltanto di un file di stili, ma anche di un “file di dichiarazione del tema”; le note presenti all’inizio del file contengono i metadati relativi a tale tema.
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个为展示而开发的自定义WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/WordPress utilizza questo commento per riconoscere il tuo tema.Text Domain Utilizzato per l’internazionalizzazione: rappresenta un identificatore che indica che ulteriori traduzioni saranno effettuate in seguito.
Si consiglia di leggere Guida definitiva allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero.。
Comprendere le relazioni gerarchiche tra i modelli
WordPress utilizza un meccanismo di gerarchia dei template (Template Hierarchy) per determinare quale file di template utilizzare per i diversi tipi di contenuti. Ad esempio, quando si accede alla pagina iniziale del blog, WordPress cerca i file di template in ordine prestabilito. home.phpSe non esiste, utilizzalo. index.phpPer un singolo articolo, verrà data priorità alla ricerca delle informazioni disponibili. single-post.phpE poi… single.phpE, infine, index.php。
Comprendere questo meccanismo è fondamentale per lo sviluppo di temi flessibili. Non è necessario creare tutti i file di template: basta creare quelli relativi ai tipi di pagine che richiedono personalizzazioni, mentre le altre pagine verranno generate automaticamente. index.php Questo è il trattamento finale del modello “di riserva”.
Creare il file del modello principale.
I file di template rappresentano lo “scheletro” di un tema e controllano la struttura HTML delle diverse parti di un sito web. Inizieremo creando alcuni file essenziali e comunemente utilizzati.
Creare template per la parte iniziale (header) e la parte finale (footer) del sito.
Per rispettare il principio DRY (Don’t Repeat Yourself – Non ripeterti), i temi di WordPress solitamente separano la parte superiore della pagina (Header) dalla parte inferiore (Footer) in file distinti.
File di intestazione header.php Contiene… <!DOCTYPE html> Tutto il codice che si trova dall’inizio fino alla zona principale del contenuto: la cosa fondamentale è eseguire la chiamata (il “call”) appropriata. wp_head() Questa funzione consente al nucleo di WordPress, ai plugin e ai temi di inserire qui il codice necessario (ad esempio, link alle tabelle di stile o metatag).
Si consiglia di leggere Introduzione allo sviluppo di temi per WordPress: crea passo dopo passo il tuo primo tema personalizzato。
<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<p><strong>Questo testo è stato tradotto automaticamente.</strong></p>
<header id="masthead" class="site-header">
<h1 class="site-title"><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>File di fine (tail file) footer.php Quindi, il contenuto verrà incluso nell’intera parte inferiore della pagina e verrà eseguito (chiamato) prima della fine. wp_footer() Le funzioni sono fondamentali per il caricamento di script e per il funzionamento dei plugin.
<footer id="colophon" class="site-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>Assemblare il modello dell’indice principale
index.php In qualità di template di base, la sua funzione principale è quella di essere utilizzato… get_header() 和 get_footer() La funzione include una sezione iniziale per l’importazione dei componenti necessari e una sezione finale per la chiusura dei processi; al centro, viene utilizzato un ciclo principale per visualizzare il contenuto desiderato.
<p><strong>Questo è un testo di esempio.</strong></p>
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<article 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>
<?php
endwhile;
the_posts_navigation();
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main>In questo template… have_posts() 和 the_post() Le funzioni costituiscono il “main loop” di WordPress (The Loop), che rappresenta la base per l’output di tutti i contenuti degli articoli. Funzioni come… the_title()、the_content()、the_permalink() Utilizzato per visualizzare i dati relativi agli articoli all’interno di un ciclo.
Integrare funzionalità avanzate e componenti tematici
Un tema professionale non si limita a visualizzare il contenuto, ma offre anche funzionalità e componenti avanzati. Per realizzare questo, è necessario comprendere a fondo la libreria di funzioni di WordPress e il sistema di “hook” (meccanismi di interazione tra moduli).
Aggiungere la funzionalità di navigazione del menu
Il menu di navigazione è un componente fondamentale di un sito web. Prima di tutto, è necessario configurarlo all’interno del tema utilizzato per il sito. functions.php Utilizzato nel file. register_nav_menus() La funzione registra una o più posizioni per i menu.
function my_custom_theme_setup() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Poi, nel file del template (ad esempio…) header.phpNel punto in cui desideri visualizzare il menu, utilizza… wp_nav_menu() La funzione la chiama.
Si consiglia di leggere Guida pratica allo sviluppo di temi WordPress: creare da zero un'architettura e un modello di tema personalizzati.。
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'container' => 'nav',
'container_class'=> 'main-navigation',
) );
?>Gli utenti possono ora creare menu nel pannello di controllo di WordPress, all’interno della sezione “Aspetto” -> “Menu”, e assegnarli alla posizione del “Menu principale”.
Abilita le miniature degli articoli e la zona degli strumenti aggiuntivi.
Le immagini caratteristiche degli articoli (in formato di anteprima) e i widget sono funzionalità importanti per aumentare la flessibilità nella visualizzazione dei contenuti. Lo stesso vale anche in… functions.php In questo contesto, vengono abilitate tramite le funzioni di supporto per i temi (theme support functions).
function my_custom_theme_features() {
// 启用文章和页面特色图像
add_theme_support( 'post-thumbnails' );
// 为文章定义缩略图尺寸
set_post_thumbnail_size( 1200, 630, true );
// 启用小工具和选择性刷新
add_theme_support( 'widgets' );
add_theme_support( 'customize-selective-refresh-widgets' );
}
add_action( 'after_setup_theme', 'my_custom_theme_features' );È possibile utilizzare l’area per gli strumenti della barra laterale per registrare nuovi strumenti. register_sidebar() Funzione.
function my_custom_theme_widgets_init() {
register_sidebar( array(
'name' => __( '侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );Successivamente, sarà possibile utilizzare strumenti o procedure come… sidebar.php Utilizzato nei file di template. dynamic_sidebar( 'sidebar-1' ) Esegui l’output per questa area.
Realizzare un design responsivo e un’organizzazione degli stili grafici efficace
I siti web moderni devono essere ben visualizzabili su tutti i dispositivi. Questo significa che il tema utilizzato deve essere “responsivo”, cioè in grado di adattarsi automaticamente alle dimensioni e alle caratteristiche dello schermo di ogni dispositivo.
Applicare uno stile CSS incentrato sull’uso dei dispositivi mobili (mobile-first CSS).
在 style.css Si inizia scrivendo lo stile di base per i dispositivi mobili, per poi utilizzare le “Media Queries” per migliorare gradualmente lo stile visualizzato sui grandi schermi. Questo approccio garantisce che i contenuti essenziali siano sempre accessibili in modo prioritario su tutti i dispositivi.
/* 基础样式 (移动设备) */
.site-header {
padding: 1rem;
text-align: center;
}
.site-main {
padding: 1rem;
}
.widget {
margin-bottom: 2rem;
}
/* 中等屏幕 (平板) */
@media (min-width: 768px) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.site-main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
}
/* 大屏幕 (桌面) */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}Introdurre JavaScript in modo sicuro
Per garantire prestazioni ottimali e evitare conflitti, è consigliabile utilizzare le soluzioni raccomandate da WordPress. wp_enqueue_script() Esistono diversi metodi per caricare i file JavaScript. Questo processo avviene solitamente durante il caricamento della pagina web, in modo che i codici JavaScript possano essere eseguiti e utilizzati correttamente. functions.php Completato in Cina.
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 );
// 为评论回复链接添加条件脚本（如果页面支持评论）
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );Questo metodo consente a WordPress di gestire le dipendenze tra i componenti del sito e fornisce un punto di controllo centrale attraverso il quale i plugin e gli altri temi possono interagire in modo sicuro.
Riassumendo
Sviluppare un tema WordPress personalizzato da zero è un progetto sistematico che richiede di padroneggiare contemporaneamente le tecnologie front-end HTML/CSS/JavaScript, la logica del lato server PHP e una profonda comprensione dell'architettura di base di WordPress. Il processo principale comprende: impostare l'ambiente e comprendere la struttura dei file del tema; creare i file dei template principali, in particolare utilizzando la gerarchia dei template e il ciclo principale per l'output dei contenuti; tramite functions.php Integra funzionalità avanzate come menu, miniature, widget, ecc.; inoltre, organizza gli stili e i script in modo responsive e sicuro, per garantire che il tema sia moderno e ad alto rendimento. Seguendo questi passaggi, non solo creerai un sito web unico che soddisfi esigenze specifiche, ma acquisirai anche una comprensione approfondita del funzionamento di WordPress, gettando le basi per affrontare sfide di sviluppo più complesse.
FAQ - Domande frequenti
Per sviluppare temi per WordPress è necessario conoscere a fondo PHP?
Sì, è essenziale disporre di una solida conoscenza di PHP. WordPress è infatti sviluppato in PHP: le sue funzioni principali, i tag dei template, il sistema di “hook” (meccanismi di integrazione) e l’interazione con il database dipendono tutti da PHP. È possibile effettuare alcune personalizzazioni utilizzando strumenti come i page builder e i sottotempi (subthemes), ma per creare un tema personalizzato completo e ben strutturato, è fondamentale avere una profonda comprensione dei principi fondamentali di PHP.
Come posso far sì che il mio tema supporti la traduzione in più lingue?
Devi utilizzare le funzionalità di internazionalizzazione (i18n) e localizzazione (l10n) di WordPress. Nel codice, tutte le stringhe di testo destinate all’utente devono essere racchiuse all’interno di funzioni di traduzione. Ad esempio: __('文本', 'my-custom-theme') 或 _e('文本', 'my-custom-theme')Allo stesso tempo, assicurarsi di…style.cssLa parte superiore e tutto il resto…load_theme_textdomain()L’impostazione è stata effettuata correttamente durante la chiamata.Text DomainSuccessivamente, è possibile utilizzare strumenti come Poedit per generare il contenuto desiderato..potFile di template, utilizzati dai traduttori per creare i contenuti da tradurre..po和.moFile di lingua.
Cosa è un sottotema (subtopic) e dovrei usarlo?
Un “Child Theme” (Tematica Figlia) è una tematica che dipende da un’altra tematica (Tematica Genitore); contiene soltanto i propri file di stile e alcuni file di template modificati. Quando la Tematica Genitore viene aggiornata, le modifiche apportate alla Tematica Figlia non vengono sovrascritte. Se desideri sostituire gli stili esistenti o apportare piccole modifiche alle funzionalità della tematica (ad esempio, aggiungere funzioni personalizzate o sovrascrivere alcuni file di template), ti consigliamo caldamente di utilizzare una Tematica Figlia: questo approccio è più sicuro e semplifica la manutenzione. Tuttavia, se la struttura e la logica che desideri creare sono completamente diverse da quelle delle tematiche esistenti, allora è meglio sviluppare una tematica indipendente da zero.
Dopo aver completato lo sviluppo, come è possibile pubblicare il tema nel catalogo ufficiale di WordPress?
Inviare un tema al catalogo di temi di WordPress.org è un processo rigoroso. Prima di tutto, il tuo codice deve seguire gli standard di codifica di WordPress e i requisiti di revisione dei temi, inclusi aspetti legati alla sicurezza, all’accessibilità e alla qualità del codice. Devi disporre di un account su WordPress.org e inviare il codice in un repository SVN. Il tema deve essere distribuito sotto una licenza compatibile con la GPL (es. GPL v2 o successiva) e non deve contenere plugin a pagamento né codice maligno nascosto. L’intero processo di revisione può richiedere diverse settimane; gli revisori forniranno dei commenti e tu dovrai apportare modifiche in base a questi commenti fino a quando il tema non verrà approvato.
Il prossimo passo, cosa dovremo fare dopo?
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.
- Guida allo sviluppo di temi per WordPress: costruire siti personalizzati da zero
- Guida completa allo sviluppo di temi per WordPress: un corso pratico per passare dall’essere principianti all’essere esperti
- Guida completa allo sviluppo di temi per WordPress: costruire template per siti web di livello professionale da zero
- WordPress Theme Development in Action: Building Responsive Enterprise-Level Websites from Scratch
- Creazione di temi per WordPress senza codice: una guida completa per imparare da zero.
Italiano