Sviluppare un tema personalizzato per WordPress rappresenta il modo migliore per approfondire la conoscenza del framework WordPress e migliorare le proprie competenze di sviluppo front-end. A differenza dell’utilizzo di temi pronti, partire da zero ti offre il totale controllo sul processo di creazione, permettendoti di creare un sito web unico e perfettamente adatto alle esigenze del tuo progetto. Questo articolo ti guiderà passo dopo passo nella realizzazione di un tema WordPress base ma completo di funzionalità.
Configurazione dell’ambiente di sviluppo e della struttura dei temi
Prima di iniziare a scrivere il codice, è necessario disporre di un ambiente di sviluppo locale. Questo include solitamente un insieme di strumenti per il server locale (come XAMPP, MAMP o Local by Flywheel), un editor di codice (ad esempio VS Code) e la versione più recente di WordPress.
Prima di tutto, in WordPress… <code>wp-content/themes</code> Nel catalogo, crea una cartella per il tuo nuovo tema, ad esempio… <code>my-custom-theme</code>Un tema WordPress di base richiede almeno due file fondamentali.
Si consiglia di leggere Tutorial completo per lo sviluppo di temi WordPress: creare un tema personalizzato da zero.。
Creare un file di foglio di stile
Il primo file necessario è… style.cssQuesto file non solo definisce lo stile del tema, ma le note presenti nell’intestazione del file contengono anche i metadati necessari per descrivere il tema a WordPress. Aggiungete le seguenti note in cima al file:
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/“Il ”Text Domain’ viene utilizzato per l’internazionalizzazione dei contenuti e deve assolutamente essere in linea con il nome della tua cartella tematica. Successivamente, potrai inserire tutte le regole CSS all’interno di questo file.”
Create a core functions file.
Il secondo file necessario è… functions.phpQuesto è il “cervello” del tema: serve per importare i file di stile (CSS), i file JavaScript, per registrare le funzionalità del menu e della barra laterale, nonché per aggiungere varie funzionalità di supporto.
Un elemento di base functions.php L'inizio è solitamente il seguente, utilizzato per aggiungere i fogli di stile alla coda:
<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );In questo momento, anche se non esistono ancora file di template, il tuo tema è comunque disponibile nell’elenco “Aspetti” -> “Temi” presente nell’interfaccia di amministrazione di WordPress e può essere attivato. Dopo l’attivazione, la pagina principale del sito mostrerà un contenuto vuoto, poiché mancano i file di template necessari per definire la struttura della pagina.
Si consiglia di leggere Guida pratica allo sviluppo di temi WordPress: creare da zero un'architettura e un modello di tema personalizzati.。
Creare il file del modello principale.
I file di template controllano il modo in cui vengono visualizzati i diversi componenti di un sito web. WordPress utilizza una struttura gerarchica dei template per determinare quale template applicare in base alla richiesta attuale.
Creare la parte superiore e inferiore della pagina per tutto il sito.
La migliore pratica consiste nel separare il codice pubblico di testa e di coda. Creare header.php Un file di solito contiene una dichiarazione del tipo di documento. Area e apertura Tag e navigazione principale.
<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
<header>
<h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
<nav>
'primary' ) ); ?>
</nav>
</header>
<main>Di conseguenza, creare. footer.php Venga chiuso… header.php Il contenitore principale e le etichette aperte all’interno di…
</main>
<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>wp_head() 和 wp_footer() Si tratta di “ganci” fondamentali che consentono al nucleo di WordPress, ai plugin e ai temi stessi di inserire il codice necessario in tali posizioni (ad esempio, stili o script).
Creare un indice e un modello per gli articoli
index.php Questo file rappresenta il punto di ritorno finale nell’ambito della struttura gerarchica dei template e costituisce anche il punto di partenza per la nostra tematica. Viene utilizzato… get_header() 和 get_footer() Per introdurre i moduli separati…
<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> </p>
<p></p>
<p>Non sono disponibili articoli.</p>Per visualizzare un singolo articolo in modo separato, è necessario creare… single.phpLa sua struttura è simile a… index.php Simile, ma utilizzando… the_content() Per visualizzare l’intero testo…
Si consiglia di leggere Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero。
<article>
<h1><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h1>
<div><p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p></div>
</article>Rafforzare le funzionalità tematiche
Una volta creata la struttura di base, procediamo con… functions.php Aggiungendo ulteriori funzionalità pratiche, il tema diventa più professionale ed facile da utilizzare.
Registra il menu di navigazione e la barra laterale.
在 functions.php Aggiungi il seguente codice per registrare una zona del menu principale di navigazione e una barra laterale (area degli strumenti):
// 注册导航菜单
function my_custom_theme_register_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );
// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
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' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' );Dopo l’iscrizione, dovrai utilizzarle all’interno dei modelli. Ad esempio, in… header.php Abbiamo già utilizzato questo strumento/metodo all’interno del nostro progetto. wp_nav_menu È stato richiamato il menu “primary”. Per visualizzare gli strumenti (widget) nella barra laterale, è possibile… sidebar.php Crea un modello per la barra laterale e… index.php 或 single.php Utilizzare nel contesto get_sidebar() Introduzione.
Aggiungere il supporto alla funzionalità dei temi.
WordPress offre molte funzionalità integrate che, per poter essere utilizzate nei temi, richiedono una dichiarazione esplicita di supporto. Ad esempio, il supporto per l’aggiunta di miniature agli articoli (immagini di rilievo), il supporto per loghi personalizzati e il supporto per i tag HTML5.
// 添加主题功能支持
function my_custom_theme_setup() {
// 支持文章缩略图
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 对搜索表单、评论表单等使用HTML5标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 在管理后台提供<title>标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Dopo l’aggiunta del supporto per i “post-thumbnails”, potrai utilizzarli all’interno del ciclo che visualizza gli articoli. the_post_thumbnail() La funzione è stata utilizzata per generare immagini caratteristiche (o “immagini distintive”).
Progettazione di stili e layout responsivi
Un tema esteticamente piacevole e adattabile a diversi dispositivi è di fondamentale importanza. Puoi… style.css Tutti i stili vanno definiti nel codice sorgente. Si consiglia di adottare una strategia incentrata sulle esigenze dei dispositivi mobili (mobile-first).
Stili di base e impaginazione
Innanzitutto, è necessario impostare alcuni stili di riporto e una formattazione di base per garantire un comportamento uniforme in diversi browser.
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: #f8f9fa;
padding: 2rem 0;
border-bottom: 1px solid #dee2e6;
}
/* 导航菜单样式 */
.main-navigation ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
.main-navigation a {
text-decoration: none;
color: #007bff;
}Realizzare un design responsivo
Utilizzare i media query per adattare il layout a diverse dimensioni dello schermo. Ad esempio, quando lo schermo diventa più piccolo, modificare il menu di navigazione in modo che venga visualizzato in modo verticale.
/* 移动端样式 */
@media (max-width: 768px) {
.main-navigation ul {
flex-direction: column;
gap: 0.5rem;
}
.container {
padding: 0 15px;
}
article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
}Assicurarsi che anche le immagini siano responsive (adattative alle diverse dimensioni dello schermo).
img {
max-width: 100%;
height: auto;
}Riassumendo
Attraverso i passaggi descritti, hai creato con successo un tema personalizzato per WordPress completo di funzionalità. Abbiamo iniziato configurando l’ambiente di sviluppo e creando le componenti più basilari del tema stesso. style.css 与 functions.php All’inizio del file, è stato gradualmente costruito il file template principale.header.php, footer.php, index.php, single.phpInoltre, abbiamo migliorato le funzionalità pratiche del tema, come il menu di registrazione, la barra laterale e la possibilità di utilizzare immagini di riferimento. Infine, abbiamo aggiunto uno stile di base e un layout responsive al tema, per garantirne una buona visualizzazione su diversi dispositivi. Questo è solo un punto di partenza: puoi continuare a svilupparlo e creare ulteriori modelli di pagine.page.phpTemplate per l’archiviazione (Archive Template)archive.phpSearch templatessearch.phpÈ possibile personalizzare il sito web utilizzando sottotitoli (subtopics) per creare un’esperienza utente ancora più potente e professionale.
FAQ - Domande frequenti
Per sviluppare temi per WordPress, è necessario padroneggiare alcune tecnologie fondamentali. Ecco alcune delle principali:
Per sviluppare un tema base per WordPress, è necessario padroneggiare HTML, CSS e PHP. HTML viene utilizzato per costruire la struttura delle pagine, CSS per il design e l’impaginazione, mentre PHP è fondamentale per rendere il contenuto di WordPress dinamico. Inoltre, una conoscenza di base di JavaScript è utile per aggiungere funzionalità interattive. Per sviluppare con successo un tema, è essenziale comprendere i concetti fondamentali di WordPress, come la gerarchia dei template, i cicli (The Loop), gli hook e le funzioni.
Qual è la funzione del file functions.php relativo al tema?
functions.php Il file “functions.php” rappresenta il cuore delle funzionalità di un tema WordPress. Le sue principali funzioni includono: l’aggiunta di file CSS e JavaScript alla coda di elaborazione, la registrazione dei menu di navigazione e delle aree per gli strumenti presenti sul lato sinistro della pagina, la definizione delle funzionalità supportate dal tema (come le miniature degli articoli o il logo personalizzato), la creazione di funzioni personalizzate, nonché la modifica del comportamento predefinito di WordPress tramite gli “action hooks” e i “filter hooks”. Questo permette di estendere e personalizzare notevolmente le funzionalità di un tema senza dover modificare i file di codice sorgente di WordPress stesso.
Come posso rendere il mio tema compatibile con più lingue?
Per rendere un tema supporto a più lingue (internazionalizzazione), sono necessari principalmente due passaggi. Prima di tutto, style.css Per il “Text Domain” e in tutti i punti in cui vengono utilizzate le funzioni di traduzione, è necessario utilizzare un dominio di testo (Text Domain) coerente, solitamente lo stesso nome della cartella tematica. Inoltre, quando si preparano le stringhe da tradurre, è consigliabile utilizzare le funzioni di traduzione fornite da WordPress. __()、_e() 或 _x()Poi, puoi utilizzare strumenti come Poedit per creare… .pot File di template, e generare i relativi contenuti. .po 和 .mo Trasferisci il file di traduzione nella cartella relativa al tema. /languages All’interno della directory, WordPress caricherà automaticamente i file in base alle impostazioni di lingua del sito.
Quali sono i vantaggi di creare un sottotema rispetto al modificare direttamente il tema principale?
Creare sottotemi rappresenta una buona pratica per modificare o estendere le funzionalità di un sottotema padre esistente. Il vantaggio principale risiede nella sicurezza delle aggiornamenti: quando il sottotema padre viene aggiornato, è possibile farlo in modo sicuro, senza che le modifiche personalizzate apportate al sottotema (stili, funzionalità, template) vengano perse. Il sottotema stesso richiede soltanto… style.css E uno opzionale. functions.php Il file è funzionante. Nel sottotema… style.css In Cina, attraverso @import Oppure, introducete un metodo di ordinamento più efficiente che applichi lo stile del tema principale, e successivamente aggiungete le vostre regole CSS per sovrascrivere tali impostazioni. Questo permetterà di personalizzare l’aspetto del tema figlio in base alle vostre esigenze. functions.php Verrà caricato contemporaneamente al file omonimo del tema principale, senza sovrascriverlo; questo ti permette di aggiungere nuove funzionalità in modo sicuro.
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.
- Concetti fondamentali e modelli pratici di Tailwind CSS: dalle classi atomiche al design responsive
- La guida definitiva per la creazione di un sito web: dall'ideazione alla pubblicazione, con una spiegazione dettagliata dei processi e delle tecnologie chiave.
- Guida professionale all’intero processo di creazione di un sito web: dalla analisi delle esigenze all’implementazione finale.
- Sviluppo di temi per WordPress da zero: creare un’interfaccia web unica e originale
- La guida definitiva per la creazione di un sito web: un approccio pratico completo, dall'inizio alla pubblicazione professionale.
Italiano