Guida completa per principianti nel sviluppo di temi per WordPress: costruisci il tuo primo tema da zero.

Preparazione dell'ambiente e concetti di base

Prima di iniziare a scrivere il codice, è necessario disporre di un ambiente di sviluppo locale adatto. Si consiglia l’uso di pacchetti software per server locali integrati, come Local by Flywheel, XAMPP o MAMP. I file fondamentali di WordPress dovrebbero essere già installati sul sito locale.

Qualsiasi tema per WordPress deve contenere due file fondamentali:style.css 和 index.php。style.css Non si tratta solo di un file di stili, ma anche di un “cartellino d’identità” del tema stesso: questo file fornisce informazioni sul tema a WordPress attraverso un’intestazione speciale (Theme Header).index.php Si tratta del file di template predefinito per il tema, responsabile dell’elaborazione di tutte le richieste di pagina per cui non è stato specificato un template dedicato.

Un tema tipico segue una struttura gerarchica chiara nel suo contenuto. I file del modello principale si trovano solitamente direttamente nella directory radice del tema, mentre i file CSS, JavaScript e le risorse grafiche sono archiviati in directory separate. /css、/js 和 /images In sottodirectory di questo tipo… Per argomenti più complessi, potreste anche trovare altri contenuti. /template-parts Il catalogo serve per conservare frammenti di template riutilizzabili./inc Il catalogo viene utilizzato per conservare i file che contengono aggiornamenti o miglioramenti funzionali.

Si consiglia di leggere Guida definitiva allo sviluppo di temi per WordPress: costruire template personalizzati da zero。

Comprendere la struttura gerarchica dei template in WordPress

WordPress utilizza un sistema intelligente chiamato “Template Hierarchy” (Gerarchia dei Template) per determinare quale file di template utilizzare su una pagina specifica. Questo sistema rappresenta la logica fondamentale nello sviluppo di temi (temi per il design e la struttura del sito web).

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

Ad esempio, quando un utente visita la pagina principale del blog, WordPress cerca innanzitutto se esista una pagina con il nome… front-page.php Il file in questione… Se non esiste, continuerà la ricerca. home.phpSe non dovesse funzionare nemmeno in questo caso, alla fine tornerà all’utilizzo dei valori predefiniti. index.phpPer un singolo articolo, l’ordine di ricerca in WordPress è:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。

Comprendere e utilizzare correttamente la struttura gerarchica dei template ti permette di creare layout e aspetti visivi altamente personalizzati per diversi tipi di pagine (come articoli di blog, pagine statiche, archivi di categorie, pagine di risultati di ricerca, ecc.), senza dover scrivere logiche complesse basate su condizioni.

Dichiarazione delle informazioni sull’argomento

style.css All’inizio del file deve essere presente una sezione di testo commentata in formato CSS che contiene le informazioni di intestazione necessarie per definire i metadati del tema. Ecco un esempio minimizzato:

/*
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
*/

In questo file, il “Text Domain” viene utilizzato per l’internazionalizzazione ed è un identificatore obbligatorio da utilizzare quando si chiamano le funzioni di traduzione. L’intestazione di questo file rappresenta l’unico elemento su cui WordPress può basarsi per riconoscere e attivare il tuo tema.

Si consiglia di leggere Sviluppo di temi per WordPress: Da principianti a esperti: La guida essenziale per creare siti web personalizzati。

Creare il file del modello principale.

Iniziamo costruendo dal file di template più importante. Prima di tutto… index.php Si deve scrivere la struttura di base all’interno del file. Un file di template standard dovrebbe contenere le istruzioni per la creazione della parte superiore del sito (header), della zona principale del contenuto, della barra laterale e della parte inferiore del sito (footer).

I file di template di base contengono solitamente le seguenti chiamate alle funzioni di base di WordPress:get_header()、get_footer()、get_sidebar() E inoltre get_template_part()Queste funzioni introducono i file di template corrispondenti, permettendo di modularizzare la struttura della pagina.

Creare un template per la parte iniziale della pagina (header).

header.php Il file contiene il contenuto che apparirà in cima a ogni pagina. Deve contenere almeno la dichiarazione del tipo di documento HTML5. <!DOCTYPE html>、<head> Il testo inizia con le indicazioni relative alle aree (regioni) e al corpo principale della pagina (page body). <body> 及 <header> Tag.

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

在 <head> Nella regione in questione, è di fondamentale importanza utilizzare… wp_head() “Gancio” (Hook): Questo meccanismo consente al core di WordPress, ai plugin e al tuo tema stesso di inserire nel codice della parte iniziale della pagina (header) i componenti necessari, come collegamenti ai file di stile, metatag e script. Ecco un esempio semplice di template per la parte iniziale della pagina:

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 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>

body_class() La funzione restituisce una serie di nomi di classi CSS in base al tipo della pagina corrente, il che offre notevoli facilitazioni per il controllo dello stile.

Creare il ciclo principale e la visualizzazione del contenuto.

WordPress utilizza il “The Loop” per iterare e visualizzare l’elenco di articoli risultanti dalla query attuale. Il ciclo rappresenta la parte più fondamentale dei file di template e si trova solitamente… index.php、single.php 或 archive.php Sì.

Si consiglia di leggere Imparare a sviluppare temi per WordPress: una guida completa alla creazione e all'applicazione da zero.。

Una tipica struttura di ciclo principale è la seguente:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <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">
                <p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p>
            </div>
        </article>
    <p> </p>
<p></p>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

All’interno del ciclo, è possibile utilizzare una serie di tag di template che iniziano con “the_”. the_title()、the_content()、the_excerpt() 和 the_post_thumbnail()Per visualizzare le varie parti dell'articolo.

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

Aggiungere stili e funzionalità

L’aspetto visivo dei temi è controllato dal CSS. Oltre a… style.css Oltre a definire gli stili direttamente nel codice, un approccio più professionale consiste nell’utilizzare file di stile esterni, come i file CSS. functions.php I file vengono utilizzati per creare una coda di attesa al fine di caricare i fogli di stile e i script, al fine di garantire che le dipendenze tra di essi siano rispettate e che il caricamento avvenga nell’ordine corretto.

functions.php Il file rappresenta un “potenziatore di funzionalità” per il tuo tema. Non si tratta di un file di template, bensì di un file PHP che viene caricato automaticamente durante l’inizializzazione del tema, e che viene utilizzato per definire funzioni, classi, hook e filtri.

Introdurre correttamente gli stili e i script

Dovresti utilizzare… wp_enqueue_style() 和 wp_enqueue_script() Sono funzioni utilizzate per aggiungere risorse. Queste funzioni dovrebbero essere montate (ovvero integrate) in un sistema o in un ambiente appropriato. wp_enqueue_scripts Questo meccanismo di “action hook” permette a WordPress di gestire i risorse in modo centralizzato, evitando il caricamento ripetuto dei file e i conflitti di dipendenze tra i diversi componenti del sito.

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载一个自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Menu di registrazione e barra laterale

I menu e le barre laterali (aree con gli strumenti aggiuntivi) di WordPress devono essere configurati in anticipo. functions.php È necessario effettuare la registrazione prima di poter visualizzare i contenuti nel file template corrispondente.

Usare register_nav_menus() Funzione per registrare la posizione del piatto:

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Poi, in header.php In questo contesto, puoi utilizzare… wp_nav_menu() Una funzione per visualizzare il menu principale.

Usare register_sidebar() Funzione per registrare le aree dedicate agli strumenti aggiuntivi (widget):

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here.', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

In seguito, sidebar.php In cinese, usare dynamic_sidebar() La funzione viene utilizzata per richiamare questa area.

Test del tema e pubblicazione

Dopo il completamento dello sviluppo, è necessario eseguire un test completo. Questo include verificare l’aspetto visivo del tema in diversi browser (Chrome, Firefox, Safari, Edge) e su dispositivi di varie dimensioni (desktop, tablet, smartphone). Assicurarsi che tutti i link siano funzionanti, che le funzionalità dei moduli siano corrette e che i menu rispondano correttamente anche su schermi piccoli.

Attiva il modalità di debug.

Durante il processo di sviluppo, si consiglia vivamente di attivare il modalità di debug di WordPress. Questo ti aiuterà a individuare rapidamente errori, avvisi e notifiche in PHP. wp-config.php Nel file, trova e modifica la seguente riga:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误

Accendi WP_DEBUG_LOG È possibile registrare i messaggi di errore in un file di log, per evitare che informazioni sensibili vengano esposte direttamente ai visitatori del sito web.

Verifica gli standard relativi ai temi.

Prima di pubblicare o utilizzare un tema, esso dovrebbe seguire il più possibile le “Norme di sviluppo dei temi per WordPress”. Ciò include, ma non si limita a: assicurarsi che tutti i dati visualizzati sulla pagina siano opportunamente “evasi” (cioè che vengano elaborati in modo da evitare problemi di visualizzazione o di sicurezza). esc_html()、esc_url() Funzioni come…), utilizzando per tutto il testo traducibile il termine “funzioni”. __() 或 _e() I funzionamenti vengono “impacchettati” (ovvero resi più facili da utilizzare e gestire), e il codice sorgente non contiene alcun URL codificato in modo fisso (cioè non sono presenti URL scritti direttamente nel codice).

Puoi utilizzare il plugin ufficiale “Theme Check” per effettuare controlli automatici sulla conformità del tuo tema. Esaminerà il codice e segnalerà eventuali problemi, vulnerabilità di sicurezza o discrepanze rispetto agli standard.

Pronto per la pubblicazione.

Una volta completati lo sviluppo, i test e la revisione del tema, puoi scegliere di pubblicarlo nel catalogo dei temi di WordPress.org oppure di confezionarlo per l’uso personale o da parte di clienti. Il pacchetto di pubblicazione dovrebbe contenere soltanto le cartelle e i file essenziali per il tema, eliminando tutti i file relativi al controllo delle versioni (come…). .gitConfigurazioni degli strumenti di sviluppo e file di backup. Inoltre, assicurarsi che… style.css L’informazione principale contenuta nel testo è completa e accurata; inoltre, è stata preparata un’immagine chiara e leggibile per supportare la comunicazione. screenshot.png(1200x900 pixel) come immagine in miniatura per il tema.

Riassumendo

Dall’istante in cui viene creato… style.css 和 index.php Partendo dalla cartella di base, si inizia a comprendere la struttura dei modelli, si creano i file di template principali, si utilizza il ciclo principale per visualizzare i contenuti, e infine si procede con ulteriori sviluppi… functions.php Aggiungere stili, script e funzionalità, per poi effettuare test rigorosi e controlli di standardizzazione: ecco il percorso completo per creare un tema base per WordPress. Questo processo non solo ti permette di ottenere un tema funzionante, ma cosa più importante, ti fornisce anche una comprensione approfondita dell’architettura dei temi per WordPress. Partendo da qui, puoi esplorare temi più avanzati, come tipi di articoli personalizzabili, l’API per la personalizzazione dei temi, il supporto per l’editor di blocchi (Gutenberg), e gradualmente diventare un sviluppatore di temi per WordPress professionista.

FAQ - Domande frequenti

Quanti file sono necessari almeno per un tema WordPress?

Un tema che possa essere riconosciuto e attivato da WordPress richiede almeno due file:style.css 和 index.phpTra questi,style.css È necessario includere le corrette informazioni relative al tema, nonché i commenti presenti nella parte iniziale del file.

Perché i miei stili personalizzati non sono stati applicati?

Questo problema è solitamente dovuto a un basso livello di priorità dei selezionatori CSS o al fatto che il file di stili non è stato caricato correttamente. Per prima cosa, controlla gli strumenti di sviluppo del browser per verificare se il file di stili è stato caricato con successo e se le tue regole CSS non sono state sovrascritte da altre regole a priorità più alta. Inoltre, assicurati di utilizzare i metodi appropriati per applicare i tuoi stili. functions.php 中的 wp_enqueue_style() Utilizzare funzioni per caricare i stili, invece di scrivere direttamente il codice HTML relativo ai stili. <link> Tag.

Come aggiungere un modello di pagina personalizzato a un tema?

Crea un nuovo file PHP, ad esempio… page-fullwidth.phpAll'inizio del file, aggiungi il seguente commento PHP per dichiarare il nome del template:<?php /* Template Name: 全宽页面 */ ?>Poi, puoi scrivere nel file contenuti diversi da quelli del modello di pagina predefinito. page.php Il layout e il codice relativo a questo nuovo template sono pronti per l’uso. Quando si crea o si modifica una pagina, è possibile selezionarlo direttamente nel modulo “Proprietà della pagina”.

Qual è la differenza tra “functions.php” e i plugin?

functions.php Fa parte dell’interfaccia grafica principale (theme) e le sue funzionalità sono strettamente integrate con quelle del tema attivo. Se cambi tema, le funzionalità di questo componente potrebbero modificarsi o non essere più disponibili.functions.php Il codice contenuto all’interno dei temi non sarà più efficace. Le funzionalità fornite dai plugin, invece, sono indipendenti dai temi: vengono attivate automaticamente non appena il plugin è installato, indipendentemente dal tema utilizzato. Di solito, le funzionalità che sono strettamente legate all’aspetto visivo del sito vengono incluse nei temi, mentre quelle più generali e indipendenti sono più adatte ad essere realizzate come plugin.

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

Devi fare due cose: preparare e caricare i file di traduzione. Prima di tutto, in tutto il codice, tutte le stringhe destinate all’utente (ad esempio…) ('Read More', 'my-first-theme')Devono tutti utilizzare strumenti del genere… () 或 _e() Wrap such a translation function, and pass the second parameter (the text field) as an argument. style.css Il “Text Domain” dichiarato è coerente con quanto indicato. Successivamente, utilizzare strumenti come Poedit per creare il contenuto necessario. .pot File di template, e tradurre il contenuto generato in corrispondenza. .po 和 .mo File… Infine, functions.php Utilizzare nel contesto load_theme_textdomain() Una funzione per caricare i file di traduzione.