Preparativi e allestimento dell'ambiente.
Prima di iniziare a scrivere il codice per il tema, è essenziale disporre di un ambiente di sviluppo locale stabile ed efficiente. Questo ti permetterà di visualizzare rapidamente i risultati dei tuoi modifiche e di evitare di influenzare negativamente il sito web online. Ti consigliamo di utilizzare strumenti come Local by Flywheel, XAMPP o MAMP per configurare facilmente un server locale che includa PHP e MySQL con un solo clic.
Successivamente, è necessario determinare la struttura del catalogo del tema. Un tema standard per WordPress contiene generalmente i seguenti file principali:style.css(Stili di tema e intestazioni di informazioni),index.php(File del modello principale),functions.php(Tema Function File) e ancheheader.php、footer.php、sidebar.phpI file relativi ai modelli (template files) si trovano nella directory di installazione di WordPress.wp-content/themes/Crea una nuova cartella, ad esempio “my-custom-theme”, e inizia a creare i file all’interno di questa cartella.
Creare un file di intestazione per le informazioni sul tema
L“”identificativo” di un argomento (o tema) è…style.cssQuesto file non solo definisce lo stile del tema, ma anche il blocco di commenti presente nella parte superiore è fondamentale per il riconoscimento del tema da parte di WordPress. L’intestazione del file (header) deve seguire rigorosamente il formato specificato.
Si consiglia di leggere Come scegliere e personalizzare un tema WordPress adatto a te?。
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始构建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/Tra questi,Text DomainUtilizzato per l’internazionalizzazione (i18n), deve essere in linea con il nome della cartella del tema: questo è l’identificatore chiave per il caricamento dei file di traduzione. Dopo aver compilato questo file, il tuo tema potrà apparire nell’elenco “Aspetto” -> “Temi” dell’interfaccia di amministrazione di WordPress, anche se al momento non dispone di alcuna funzionalità concreta.
Creare un file di template di base
WordPress utilizza un sistema a livelli di template per determinare quale file di template utilizzare in risposta alle diverse richieste di pagina. Creare i template di base costituisce la struttura fondamentale su cui si basa la costruzione di un tema (theme).
Prima di tutto…index.phpÈ il modello di ritorno finale per tutte le pagine; il più semplice possibile.index.phpÈ possibile includere chiamate a altre parti del template.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?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>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Creare modelli per la parte superiore e quella inferiore della pagina (header e footer).
header.php I file di solito contengono una dichiarazione del tipo di documento.Le aree comuni, nonché la parte superiore del sito web. È fondamentale utilizzarle.wp_head()Questa funzione consente agli plugin e ai temi di inserire il codice necessario in questo punto (ad esempio, stili, script, meta-tag).
<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
<p><strong>Questo testo è stato tradotto automaticamente.</strong></p>
<header id="masthead" class="site-header">
<!-- 你的导航菜单、Logo等代码在这里 -->
</header>Di conseguenza,footer.phpDovrebbe essere chiuso.header.phpApri i tag necessari e assicurati di eseguire le chiamate (o le funzioni) richieste.wp_footer()I “ganci” (hooks) sono essenziali per molti plugin (ad esempio quelli utilizzati per analizzare il codice) nonché per le funzionalità principali di WordPress.
Si consiglia di leggere Guida allo sviluppo di temi WordPress di prim'ordine: dall'inizio alla perfezione nella creazione e nella personalizzazione.。
Rafforzare le funzionalità tematiche e la personalizzazione
functions.phpIl file rappresenta il “centro di controllo” per il tuo tema: viene utilizzato per aggiungere funzionalità di supporto al tema, creare menu di registrazione, barre laterali, nonché per includere fogli di stile (style sheets) e script.
Aggiungere il supporto di base per i temi.
Attraversoadd_theme_support()Per le tue funzioni, puoi dichiarare il supporto per varie funzionalità di WordPress per il tuo tema. Ad esempio, abilitare le immagini in miniatura degli articoli (immagini di rilievo) e un logo personalizzato sono caratteristiche standard di un tema moderno.
function my_custom_theme_setup() {
// 让主题支持文章和评论的RSS feed链接
add_theme_support( 'automatic-feed-links' );
// 启用文章特色图像功能
add_theme_support( 'post-thumbnails' );
// 启用自定义Logo功能
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
// 让WordPress生成和管理文档<title>标签
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Menu di registrazione e barra laterale
I menu di WordPress sono gestiti tramiteregister_nav_menus()Registrazione delle funzioni: È possibile definire più posizioni per i menu, ad esempio “Navigazione principale” e “Navigazione in fondo alla pagina”.
function my_custom_theme_menus() {
register_nav_menus(
array(
'menu-1' => esc_html__( 'Primary Menu', 'my-custom-theme' ),
'menu-2' => esc_html__( 'Footer Menu', 'my-custom-theme' ),
)
);
}
add_action( 'init', 'my_custom_theme_menus' );La barra laterale (o “area degli strumenti”) viene utilizzata per…register_sidebar()Registrazione delle funzioni: Ogni barra laterale richiede un ID unico e una descrizione.
function my_custom_theme_widgets_init() {
register_sidebar(
array(
'name' => esc_html__( 'Sidebar', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', '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' );Livelli di stili, script e template
Per assicurare che lo stile e i script del tema vengano caricati correttamente e che non ci siano conflitti con altri plugin, è necessario utilizzare le funzioni di gestione della coda fornite da WordPress.
Inserire correttamente gli stili e i script
Non utilizzare mai direttamente risorse o tag all’interno dei file di template. Invece, è consigliabile utilizzare…wp_enqueue_style()和wp_enqueue_script()Funzione.
Si consiglia di leggere Guida completa allo sviluppo di temi WordPress: un tutorial pratico da zero alla pubblicazione online.。
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' );Comprendere e utilizzare la struttura gerarchica dei template.
La struttura gerarchica dei template in WordPress rappresenta un sistema davvero potente. Ad esempio, quando si visita un articolo di un blog, WordPress cerca i template nell’ordine seguente:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.php。
È possibile creare file di template specifici per sovrascrivere l’affichage predefinito. Ad esempio, si può creare un file di template che modifichi il modo in cui vengono visualizzati i dati in una pagina web.page-about.phpIl file sarà utilizzato esclusivamente per visualizzare la pagina “Informazioni” (a condizione che l’alias della pagina sia “about”). Un altro strumento molto potente è…front-page.phpViene utilizzato per definire le pagine di visualizzazione front-end del sito web e ha una priorità più alta rispetto ad altri elementi.home.php(Pagina di indice degli articoli del blog).
Riassumendo
Questo manuale fornisce una descrizione sistematica dei passaggi fondamentali per creare da zero un tema personalizzato per WordPress. Partendo dall’installazione di un ambiente locale e dalla creazione di un file contenente le informazioni necessarie…style.css… fino alla fase di costruzione.index.php、header.php、footer.phpQuesti file di template di base hanno costituito lo “scheletro” del tema.functions.phpPer quanto riguarda i file, abbiamo migliorato le funzionalità relative ai temi, aggiungendo il supporto per nuovi temi, nonché la possibilità di personalizzare i menu di navigazione e le barre laterali. Infine, abbiamo sottolineato l’importanza di utilizzare i metodi standard forniti da WordPress per l’impostazione degli stili e dei script, e abbiamo spiegato il potente sistema di gerarchia dei template: questo permette agli sviluppatori di creare modelli di visualizzazione personalizzati per diversi tipi di contenuti. Seguendo queste migliori pratiche, non solo si possono creare temi ben strutturati e facili da mantenere, ma si garantisce anche la compatibilità con il nucleo di WordPress e gli altri plugin.
FAQ - Domande frequenti
Come posso aggiungere un modello di pagina personalizzato al mio tema ####?
Per creare un modello di pagina personalizzato, è necessario prima creare un nuovo file PHP all’interno della directory del tuo tema. Ad esempio…template-fullwidth.phpAll’inizio del file, è necessario aggiungere una nota con il nome del template specifico.
<?php
/**
* Template Name: 全宽页面模板
* Description: 一个没有侧边栏的全宽页面模板。
*/Poi potrai scrivere il codice per il layout della tua pagina a larghezza piena in questo file, solitamente iniziando con…get_header();Dopo aver salvato le modifiche, quando modificherai o creerai una pagina dal pannello di controllo di WordPress, potrai trovare e utilizzare il “Template a larghezza piena” nell’elenco a discesa “Proprietà della pagina” -> “Template”.
Perché il mio menu personalizzato non viene visualizzato?
Ci sono diversi motivi per cui il menu non viene visualizzato. Prima di tutto, assicurati di aver già configurato il menu nel tema utilizzato.functions.phpIl documento è stato approvato dal Consiglio di Stato cinese il 22 novembre 2019.register_nav_menus()La funzione ha registrato la posizione del piatto.
In secondo luogo, devi andare nella sezione “Aspetto” -> “Menu” del pannello di amministrazione di WordPress, creare un nuovo menu, aggiungere dei menu item (come pagine, articoli, link personalizzati) e, nella parte inferiore della sezione “Impostazioni del menu”, assegnare questo nuovo menu alla posizione desiderata all’interno del tema (ad esempio, “Navigazione principale”).
Infine, è necessario modificare il file di template (solitamente…)header.phpSi richiama il menu all’interno di… (Si utilizza per…)wp_nav_menu()Chiamare la funzione specificando il parametro “theme_location” corretto, ad esempio:wp_nav_menu( array( ‘theme_location’ => ‘menu-1’ ) );Solo completando questi tre passaggi, il menu verrà visualizzato correttamente.
Come posso rendere il mio tema compatibile con la traduzione (internazionalizzazione)?
Per rendere il tuo tema compatibile con la traduzione, ovvero per implementare la funzionalità di internazionalizzazione (i18n), sono necessari principalmente tre passaggi. Il primo passaggio è la “preparazione”: in tutti i punti del tema in cui il testo deve essere tradotto, è necessario utilizzare le funzioni di traduzione fornite da WordPress per incapsulare quel testo. La tecnica più comune è…esc_html__( ‘文本’, ‘my-custom-theme’ )(L'output dell'HTML dopo l'escape) e_e( ‘文本’, ‘my-custom-theme’ )(Esporto il testo richiesto e lo formatta in modo che venga visualizzato correttamente nel formato richiesto.)style.cssDefinito in cineseText DomainCompletamente identico.
Il secondo passo è “generare”: utilizzando strumenti come Poedit, si esegue una scansione dei file PHP del tema per creare….potFile di template (Portable Object Template). Il traduttore può utilizzare questo file per creare i file di template per la lingua corrispondente..poE quello compilato….moDocumenti.
Il terzo passo è “caricare”: nel tuo…functions.phpNel file…after_setup_themeNella funzione hook, utilizzare…load_theme_textdomain( ‘my-custom-theme’, get_template_directory() . ‘/languages’ )Il file di traduzione viene caricato in modo che, quando l’utente cambia la lingua del sito web, anche i testi del tema vengano modificati di conseguenza.
Quali conseguenze può avere un errore nel file functions.php?
functions.phpGli errori di sintassi o gli errori fatali presenti nel file causeranno il “blocco del sito” (ovvero la visualizzazione di una pagina vuota) e potrebbero essere visualizzati anche sul lato server (backend). Questo perché il file viene caricato in una fase molto precoce dell’avvio di WordPress, e gli errori presenti in esso interrompono l’intero processo di caricamento del sistema.
Se ti trovi in questa situazione, ci sono diversi modi per ripristinare le cose. Il metodo più diretto è utilizzare FTP o il gestore di file fornito dal server per caricare nuovamente i file corretti.functions.phpRinominare il file (ad esempio, in…)functions.php.bakOppure puoi cancellarne il contenuto. In questo modo, WordPress lo considererà un file vuoto e il sito tornerà accessibile, ma le funzionalità personalizzate del tuo tema saranno temporaneamente disattivate. Successivamente, potrai correggere gli errori nel codice e ripristinare il file. Quindi, prima di apportare modifiche…functions.phpEseguire il backup in anticipo e testare a fondo l’applicazione nell’ambiente di sviluppo locale è davvero una buona abitudine.
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.
- Perché scegliere WooCommerce per costruire il tuo negozio online?
- 7 consigli per plugin WordPress che migliorano le prestazioni del sito web
- Il guida definitiva per creare siti web con WordPress: dall’essere principianti a diventare esperti, per creare siti professionali
- Guida completa per creare un sito web con WooCommerce: costruisci il tuo negozio elettronico professionale da zero
- La guida definitiva per migliorare le prestazioni di WordPress: 16 passaggi per passare da principiante a esperto
Italiano