Guida all’approccio di base allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero

Iniziare lo sviluppo di temi per WordPress significa non essere più limitati all’uso di temi pronti, ma essere in grado di creare un aspetto e funzionalità del sito web esclusivi in base alle proprie esigenze. Questo guida ti accompagnerà attraverso i passaggi fondamentali necessari per creare un tema personalizzato semplice ma completo, coprendo l’intero processo, dalla preparazione dell’ambiente di sviluppo all’organizzazione dei file delle template.

La struttura di base e i file di un tema WordPress

Un tema WordPress il più semplice possibile richiede soltanto due file per essere riconosciuto dal backend. Comprendere la funzione di questi file fondamentali è il primo passo nella fase di sviluppo.

File di definizione dello stile e delle informazioni del tema

Il primo file necessario è…style.cssNon si tratta soltanto di uno stile per il tema, ma anche di un “file di intestazione delle informazioni” (header file); il blocco di commenti presente in cima a tale file definisce i metadati del tema stesso. Senza queste informazioni, WordPress non sarà in grado di riconoscere il tuo tema.

Si consiglia di leggere Dall’approccio iniziale alla padronanza: una guida completa allo sviluppo di temi WordPress di livello professionale。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的简单定制WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Sotto il blocco delle note, è possibile aggiungere regole di stile esattamente come si farebbe con il CSS tradizionale.

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

Template per l’indice principale del tema

Il secondo file necessario è…index.phpÈ il file di template predefinito per il tema in questione; viene utilizzato quando WordPress non riesce a trovare un template più specifico.single.php或page.phpQuando viene utilizzato, viene impiegato per rendere la pagina visibile agli utenti. Il caso più semplice…index.phpÈ possibile includere soltanto il ciclo che effettua la chiamata agli articoli del blog.

Oltre a questi due file, un tema completo e funzionale include solitamente anche:header.php(Intestazione),footer.php(Footnote)functions.php(Funzioni di funzionalità)single.php(Articolo) Epage.php(Pagina) ecc.

Configurare un ambiente di sviluppo locale

Prima di iniziare a codificare, è fondamentale creare un ambiente di sviluppo locale. Questo ti permette di eseguire test e debug senza influenzare il sito web online.

Utilizzare software per server locali

Si consiglia di utilizzare pacchetti software per server locali integrati, come Local by Flywheel, XAMPP o MAMP. Questi strumenti permettono di installare in un solo passo Apache/Nginx, PHP e MySQL, e offrono un’interfaccia di gestione intuitiva. Ad esempio, Local by Flywheel è ottimizzato appositamente per WordPress e consente di creare rapidamente siti web e configurare certificati SSL.

Si consiglia di leggere Guida completa allo sviluppo di plugin per WordPress: costruire estensioni professionali da zero。

Installare WordPress e un editor di codice

Nell’ambiente del server locale, scarica l’ultima versione del pacchetto di installazione di WordPress e completa l’installazione seguendo le istruzioni fornite. Inoltre, avrai bisogno di un editor di codice efficiente: Visual Studio Code è una scelta eccellente, poiché dispone di numerose estensioni utili, come PHP Intelephense (suggerimenti intelligenti per il codice), WordPress Snippet (frammenti di codice predefiniti) e Live Server (visualizzazione in tempo reale del sito web in sviluppo), che possono migliorare notevolmente l’efficienza dello sviluppo.

Posiziona la tua cartella tematica (ad esempio, chiamata “my-first-theme”) nella directory di installazione di WordPress./wp-content/themes/Inserire all’interno…style.css和index.phpÈ possibile visualizzarlo e attivarlo nella sezione “Aspetto” -> “Temi” dell’interfaccia amministrativa di WordPress.

Costruire il file del modello centrale del tema

Il tema organizza la logica di visualizzazione delle diverse pagine attraverso una serie di file di template. Comprendere la struttura gerarchica dei template è fondamentale per costruire un tema efficace.

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

Creare modelli per la parte superiore e quella inferiore della pagina (header e footer).

Di solito, separiamo i contenuti della parte superiore e della parte inferiore di un sito web in file indipendenti, al fine di poterli riutilizzare.header.phpIl file deve contenere l’intestazione del documento HTML.Area (chiamata)wp_head()Le funzioni, nonché le parti comuni presenti in cima al sito web (come il Logo e il menu di navigazione).

<!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>
    <header id="masthead">
        <h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    </header>

Allo stesso modo, creare…footer.phpContiene il contenuto del piede di pagina e lo richiama.wp_footer()Funzione… E poi.index.phpIn cinese, usareget_header()和get_footer()Si utilizzano funzioni per introdurle.

Implementare il ciclo degli articoli e la visualizzazione dei loro contenuti

Il cuore di WordPress è il cosiddetto “The Loop”, che viene utilizzato per verificare la presenza di articoli e, in caso ne siano presenti, per elaborarli uno per uno in sequenza.index.phpIn questo contesto, una struttura di ciclo di base è la seguente:

Si consiglia di leggere Come sviluppare un tema WordPress personalizzato: una guida dall'inizio alla perfezione.。

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>">
            <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>
    &lt;?php endwhile;
else :
    echo &#039;<p>暂无文章。</p>';
endif;
?&gt;

Qui è stato utilizzato…the_title()、the_permalink()和the_excerpt()Utilizzando tag di template, è possibile visualizzare le informazioni relative all’articolo.

Rafforzare il tema attraverso i file funzionali

functions.phpIl file rappresenta il “centro di controllo” del tuo tema: permette di aggiungere funzionalità, registrare menu, creare barre laterali, nonché integrare fogli di stile (style sheets) e script.

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

Registrazione del menu di navigazione e della barra laterale

Per consentire al tema di supportare la gestione dei menu visivi nel backend, è necessario…functions.phpRegistra la posizione del ristorante e utilizzala.register_nav_menus()La funzione viene utilizzata per completare il compito richiesto.

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Successivamente, potrai utilizzare i file di template (ad esempio…)header.phpUtilizzato all'interno di…)wp_nav_menu( array( 'theme_location' => 'primary' ) )Per visualizzare questo menu…

Introdurre correttamente gli stili e i script

Non cercare mai di farlo direttamente.<link>或<script>I risorse vengono codificate in modo statico (hard-coded) all’interno delle etichette. È consigliabile utilizzare questo approccio quando…wp_enqueue_style()和wp_enqueue_script()Funzione, e montarla…wp_enqueue_scriptsSu questo gancio… Questo garantisce che le dipendenze siano corrette e evita il caricamento ripetuto dei file.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入自定义的JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Riassumendo

Dall’istante in cui è stato creato il file che contiene i titoli delle informazioni di base…style.cssE quello relativo ai cicli di base…index.phpIniziamo: hai già compiuto il primo passo nello sviluppo di temi per WordPress. Analizzando la struttura della parte superiore e inferiore della pagina (header e footer), creando i file di template fondamentali, e…functions.phpAggiungendo funzionalità e risorse in modo sistematico, è possibile costruire gradualmente un tema personalizzato caratterizzato da una struttura chiara e facile da mantenere. Ricorda che lo sviluppo di temi è un processo iterativo: inizia con la realizzazione delle funzionalità di base, per poi continuare ad espandere e perfezionarlo in base alle esigenze.

FAQ - Domande frequenti

Per creare temi per WordPress è necessario conoscere PHP?

Sì, PHP è il linguaggio di programmazione principale di WordPress. Per sviluppare temi in modo approfondito, è essenziale comprendere la grammatica di base di PHP, le funzioni di base di WordPress (etichette per i template), nonché i meccanismi dei “Hook” e dei cicli (Loop). Anche se puoi iniziare modificando il CSS e i template esistenti di un tema, le funzionalità personalizzate sono impossibili senza l’uso di PHP.

Posso testare il tema senza modificare il codice?

Si consiglia vivamente di sviluppare e testare i temi nell’ambiente di sviluppo locale o nell’ambiente temporaneo/test di un sito web online. Non sviluppare mai nuovi temi o apportare modifiche significative direttamente su un sito web già in funzione, poiché ciò potrebbe causare problemi di funzionalità temporanei o errori nell’aspetto del sito.

Perché l’effetto attivato per il mio tema non è visibile in background?

Per favore, controlla prima se la cartella dei temi è stata posizionata correttamente./wp-content/themes/All’interno della directory… Poi, conferma.style.cssIl formato del blocco di note con le informazioni sul tema in cima al file è corretto? Qualsiasi errore di battitura o la mancanza di un punto e virgola potrebbe causare problemi nell’identificazione dei dati. Infine, assicurati che…index.phpIl file esiste.

Come creare layout diversi per tipi di pagine diversi?

WordPress segue un insieme di regole per la struttura gerarchica dei template. Ad esempio, per creare un layout unico per la pagina di un singolo articolo di blog, è possibile creare…single.phpFile: Per creare un layout per pagine statiche, è necessario procedere con la creazione dei file necessari.page.phpQuando si accede alla pagina corrispondente, WordPress utilizza automaticamente questi file di template più specifici, dando loro la priorità rispetto a quelli predefiniti.index.php。