Prima di iniziare a scrivere il codice, è necessario disporre di un ambiente di sviluppo locale. Questo include solitamente un server locale (come XAMPP, MAMP o Local by Flywheel), PHP, un database MySQL e un editor di codice (come VS Code o Sublime Text). Assicurarsi che la versione di PHP utilizzata sia compatibile con i requisiti ufficiali di WordPress.
Successivamente, all’interno della directory di installazione di WordPress…wp-content/themesAll’interno della cartella, crea una nuova cartella, ad esempio…my-first-themeQuesto folder conterrà tutti i file relativi al tuo argomento (tema).
Un tema WordPress di base richiede soltanto due file:style.css和index.phpPrima di tutto, creare…style.cssAggiungere un'annotazione con le informazioni sul tema all'inizio del file, che è necessaria per consentire a WordPress di identificare il tema.
Si consiglia di leggere Temi personalizzati per WordPress: Una guida completa per creare dall’zero l’aspetto esclusivo del proprio sito web。
/*
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
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Poi, creiamo la versione più semplice possibile.index.phpIl file contiene, per il momento, soltanto uno scheletro HTML e la frase “Hello World”.
<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
<h1>Ciao mondo! Questo è il mio primo tema (tema grafico per un sito web).</h1>
<p><strong>Questo è un testo di esempio.</strong></p>
</body>
</html>Ora, fai login al pannello di amministrazione di WordPress e, nella sezione “Aspetto” -> “Temi”, dovresti vedere apparire il tema “My First Theme” e poterlo attivare. Anche se al momento le sue funzionalità sono molto limitate, hai comunque creato con successo un tema riconosciuto da WordPress.
Costruire il file del modello centrale del tema
Un tema completo è composto da una serie di file di template, i quali controllano l’aspetto di diverse parti del sito web. Iniziamo costruendo da alcuni dei file più importanti.
Separare l'intestazione dal piè di pagina.
Il primo passo consiste nel separare il codice ripetuto (ad esempio, il codice che si trova nella parte iniziale e nella parte finale di una pagina) in file separati.header.phpIl file contiene…<!DOCTYPE html>Aprire.<body>Tutto il contenuto che precede l’etichetta.
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<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>Crearefooter.phpIl file contiene il contenuto del piede di pagina nonché le etichette di chiusura.
Si consiglia di leggere Creare da zero il tuo tema personalizzato per WordPress: guida completa sull’architettura, il design e lo sviluppo。
<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>Poi, modifica il tuo…index.phpDocumenti, utilizzareget_header()和get_footer()Utilizzare le funzioni per introdurre queste parti.
<p><strong>Questo è un testo di esempio.</strong></p>
<main id="primary" class="site-main">
<p>Se ci sono dei post:</p>
<p>Mentre ci sono dei post:</p>
<p>Mostra il post;</p>
<p>Il titolo dell'articolo verrà visualizzato qui:</p>
<p>Mostra il contenuto dell'articolo;</p>
</p>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// Il contenuto dell'articolo verrà visualizzato qui
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>Nessun contenuto trovato.</p>';
endif;
?>
</main>
<?php get_footer(); ?>Creare un ciclo di articoli e una barra laterale
Quello sopra.index.phpÈ già incluso il ciclo principale di base di WordPress (The Loop), che viene utilizzato per recuperare e visualizzare l'elenco degli articoli. Successivamente, crea...sidebar.phpPer aggiungere una barra laterale.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Per introdurre la barra laterale nella pagina, devi fare clic su "Aggiungi barra laterale" nel menu "Elementi" e trascinare l'elemento nella posizione desiderata sulla pagina.index.phpRiarrangiare la struttura dell'area di contenuto principale e utilizzareget_sidebar()Funzione. Allo stesso tempo, è necessario creare unfunctions.phpPer registrare questa area del widget della barra laterale, è necessario fornire i seguenti documenti:
Realizzare un layout e uno stile reattivi.
Il design reattivo garantisce che il tuo tema venga visualizzato correttamente su tutti i dispositivi. Inizieremo con la struttura CSS di base e le query multimediali.
Impostare lo stile di base e il modello di casella elastica.
Nel tuostyle.cssSotto l'annuncio del tema, aggiungere uno stile di reset e un layout di base. Un buon punto di partenza per creare un layout reattivo semplice è utilizzare Flexbox.
/* 基础重置与样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/* 主要布局容器 */
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1;
padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
background-color: #f8f9fa;
padding: 1rem 2rem;
text-align: center;
}Aggiungi una query multimediale.
Le query dei media sono il cuore del design reattivo. Aggiungiamo un semplice punto di interruzione che, quando la larghezza dello schermo è inferiore a 768 pixel (tipica di un tablet), cambia il layout dell'area dei contenuti e della barra laterale da affiancato a impilato.
Si consiglia di leggere Sviluppo di temi WordPress: una guida completa dall'inizio alla perfezione.。
Prima di tutto, modifica la struttura HTML all'interno del tag
.index.phpIn Cina, il contenuto principale e la barra laterale sono avvolti in un unico contenitore.
<div class="content-area">
<main id="primary" class="site-main">
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?>
</div>Poi, aggiungi lo stile corrispondente nel CSS.
.content-area {
display: flex;
flex-wrap: wrap;
}
.site-main {
flex: 3;
min-width: 300px;
}
#secondary {
flex: 1;
min-width: 250px;
padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
#secondary {
padding-left: 0;
padding-top: 2rem;
}
.site-header, .site-footer, .site-main {
padding: 1rem;
}
}Migliorare le funzionalità del tema tramite functions.php.
functions.phpI file sono la “stanza dei motori” del tuo tema, utilizzata per aggiungere funzionalità, registrare le caratteristiche e introdurre script e stili in modo sicuro.
Menù di navigazione registrato e area dei widget
在functions.phpIn cinese, usareregister_nav_menusUna funzione per registrare la posizione della barra di navigazione del tema.
<p> esc_html__( 'Menu principale', 'my-first-theme' ),
'footer' => esc_html__( 'Menu footer', 'my-first-theme' ),
) );
// Registra le aree per i widget nella barra laterale
register_sidebar( array(
'name' => esc_html__( 'Barra laterale principale', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Aggiungi widget qui.', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>Dopo la registrazione, potrai accedere aheader.php和footer.phpUtilizzare nel contestowp_nav_menu()Ora possiamo utilizzare la funzione per richiamare questi menu.
Stili e script di caricamento sicuri
Non collegare mai direttamente i file CSS o JavaScript nei file dei template. È necessario utilizzare invecewp_enqueue_style()和wp_enqueue_script()La funzione, e attraverso di essawp_enqueue_scriptsI ganci vengono utilizzati per caricarli.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载一个自定义JavaScript文件（如果需要）
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Creare più file di modello per arricchire le funzionalità.
Al momento, abbiamo un solo tema.index.phpVerrà utilizzato per tutte le pagine. Il livello dei template di WordPress determina la ricerca di template più specifici per diversi tipi di pagine. Creiamo alcuni di questi template.
Articolo singolo e modello di pagina
Crearesingle.phpUtilizzato per visualizzare un singolo articolo.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'single' );
// 显示文章导航
the_post_navigation();
// 如果评论开启，则加载评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Crearepage.phpViene utilizzato per visualizzare pagine statiche. La sua struttura è simile a quella disingle.phpSono simili, ma di solito non mostrano metainformazioni come categorie e tag.
Per seguire il principio DRY (Non ripetere te stesso), possiamo estrarre la parte di visualizzazione del contenuto degli articoli e delle pagine in un componente del modello (Template Part). Creiamo questo componente nella directory principale del tema.template-partsCrea una cartella e all'interno di essa crea un file.content-single.php和content-page.php。
Modello di pagina di archiviazione degli articoli
Crearearchive.phpPer mostrare le pagine di archivio di categorie, etichette, autori, ecc. Questo può essere riutilizzato.index.phpQuesto è un ciclo nel codice, ma di solito l'intestazione dell'archivio viene visualizzata nella parte superiore.
<p><strong>Questo è un testo di esempio.</strong></p>
<main id="primary" class="site-main">
<header class="page-header">
<p><strong>Titolo dell'archivio:</strong> <span>";
<strong>Descrizione dell'archivio:</strong> <span class='archive-description'>';
?>
</header>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation(); // 显示上一页/下一页导航
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>Riassumendo
Con questa guida, hai completato la creazione di un tema WordPress reattivo di base ma completo. Hai imparato la struttura di base dei file del tema, come separare i componenti del modello (intestazione, piè di pagina, barra laterale), implementare il ciclo principale di WordPress e creare un layout reattivo utilizzando le query CSS. Inoltre, hai imparato a utilizzare ilfunctions.phpIl documento spiega come registrare menu, widget e metodi di caricamento sicuro delle risorse, e come iniziare a utilizzare il potente sistema di gerarchia dei template di WordPress.
Lo sviluppo del tema è un processo che va sempre più a fondo. Successivamente, puoi esplorare ulteriori file di modello (come404.php、search.phpAd esempio, impara a utilizzare le classi Body e Post di WordPress per aumentare il livello di controllo sullo stile, esplora in profondità l'API del personalizzatore per offrire agli utenti opzioni di impostazione visive e prova persino a integrare flussi di lavoro front-end moderni come Sass o ES6 nel tuo processo di sviluppo.
FAQ - Domande frequenti
Quali sono i file minimi necessari per un tema WordPress?
Un tema molto semplice che può essere riconosciuto da WordPress richiede solo due file:style.css和index.php。style.cssLa testa deve contenere le corrette annotazioni sulle informazioni del tema, mentreindex.phpQuindi, questo sarà il modello predefinito per tutte le pagine.
Come posso far sì che il mio tema supporti la traduzione in più lingue?
Devi fare due cose. Prima di tutto, instyle.cssI commenti in testa e tutti i punti in cui viene utilizzato del testo (ad esempio, tramite ) devono essere tradotti in italiano e spiegati in dettaglio:__()或_e()I file .po e .mo vengono creati utilizzando un file .pot, che a sua volta utilizza un dominio di testo (Text Domain). Nel presente tutorial, utilizzeremo il dominio di testo “my-first-theme”. Successivamente, utilizzeremo strumenti come Poedit per creare il file .pot e tradurlo in file .po e .mo, che verranno inseriti nella cartella del tema./languagesNella directory. Infine, infunctions.phpUtilizzare nel contestoload_theme_textdomain()Funzione di caricamento delle librerie (function loading).
Perché il mio stile o script personalizzato non funziona?
Questo di solito accade perché non viene caricato in ordine di priorità, come raccomandato da WordPress. Assicurati di farlo in questo modo:functions.phpNel file, viene utilizzato…wp_enqueue_style()和wp_enqueue_script()Funzioni, e montarle suwp_enqueue_scriptsAggiungere stili e script agli hook. I collegamenti scritti direttamente nei file dei template potrebbero essere ignorati dai plug-in di cache o caricati in ordine errato in alcuni casi.
Come aggiungere il supporto per i loghi personalizzati al mio tema?
Questa è una funzionalità molto comune. Devi farlo infunctions.phpNella funzione di impostazione del tema del documento (attraversoafter_setup_theme(Dopo l'esecuzione dell'hook), aggiungiadd_theme_support( 'custom-logo' )Puoi inserire un array di parametri per definire le dimensioni del logo e altre proprietà. Dopo l'aggiunta, gli utenti potranno caricare il logo nella sezione “Aspetto” -> “Personalizza” -> “Identità del sito”. Sul front-end, puoi utilizzare
per creare un'interruzione di riga.the_custom_logo()Utilizzare una funzione per mostrarlo.
Durante lo sviluppo, come si fa a debuggare gli errori PHP?
Si consiglia di utilizzare un ambiente di sviluppo locale.wp-config.phpAttivare la modalità di debug di WordPress nel file. ImpostareWP_DEBUGLa costante è impostata sutruePuoi anche impostare contemporaneamenteWP_DEBUG_LOG和WP_DEBUG_DISPLAYPer controllare se gli errori vengono registrati in un file di log o visualizzati sullo schermo. Ricorda di disattivare la modalità di debug prima di rendere il tema disponibile online.
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