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

Entrare nel mondo di WordPress e sviluppare il proprio tema rappresenta un traguardo davvero entusiasmante. Non solo ti permette di controllare completamente l’aspetto e le funzionalità del sito web, ma è anche il modo migliore per comprendere a fondo i principi di funzionamento di WordPress stesso. Questo guida ti accompagnerà passo dopo passo nella creazione di un tema base, ma completo, illustrando ogni aspetto cruciale, dalla struttura dei file fino ai modelli fondamentali.

Configurazione dell’ambiente di sviluppo e della struttura dei temi

Prima di iniziare a scrivere il codice, è necessario disporre di un ambiente di sviluppo appropriato. Si consiglia l’uso di software per server locali, come XAMPP, WAMP o MAMP, che permettono di configurare rapidamente un ambiente sul proprio computer che includa Apache, MySQL e PHP. Inoltre, è essenziale disporre di un editor di codice efficace, come Visual Studio Code, Sublime Text o PHPStorm.

Un tema WordPress di base richiede almeno due file:style.css和index.php。style.cssNon si tratta semplicemente di un file di stile (stylesheet), ma piuttosto di un “certificato di identità” del tema utilizzato. WordPress riconosce il tema in base alle informazioni presenti nelle note all’inizio di questo file. Per iniziare, trova il file in questione nella directory di installazione di WordPress locale…wp-content/themesAll’interno della cartella, crea una nuova cartella, ad esempio…my-first-themePoi, creare un nuovo file all’interno di questa cartella.style.cssDocumenti.

Si consiglia di leggere Imparare a sviluppare temi per WordPress: una guida completa e pratica, da zero a uno。

Definizione delle informazioni sull’argomento (Definition of topic information)

在style.cssAll’inizio del file, è necessario aggiungere un blocco di commenti specifico per definire le metadati del tema.

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

/*
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
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Tra questi,Theme Name和Text DomainQuesto campo è obbligatorio. L’area per l’inserimento del testo è utilizzata per le traduzioni internazionali e di solito corrisponde al nome della cartella tematica.

Creazione del file di template principale

index.phpÈ il modello predefinito per i contenuti di un sito web e rappresenta anche il modello di backup più importante. Viene utilizzato quando WordPress non riesce a trovare un file di modello più specifico.single.php, page.phpQuando è necessario utilizzare questo strumento, lo si fa semplicemente inserendo la struttura HTML di base insieme ad alcune funzioni di WordPress per ottenere e visualizzare i contenuti desiderati.

File di template principali e cicli

Il sistema di temi di WordPress è basato sull’utilizzo di template: diversi tipi di pagine sono controllati da file template specifici. Comprendere e creare questi file template fondamentali è essenziale per lo sviluppo di temi.

Il concetto più fondamentale è il “WordPress Loop” (Il Ciclo). Si tratta di una struttura di codice PHP utilizzata per recuperare gli articoli (Posts) dal database e visualizzarli uno per uno. Quasi tutti i file di template utilizzati per l’visualizzazione dei contenuti dipendono da questo ciclo.

Si consiglia di leggere Come creare un tema WordPress professionale: una guida completa da zero all’attivazione online。

Costruzione del template della pagina principale

index.phpIl file dovrebbe contenere lo scheletro HTML completo nonché i cicli necessari per il funzionamento del programma. Ecco un esempio semplice:

<!DOCTYPE html>
<html no numeric noise key 1021>
<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 1018>
    <p><strong>Questo testo è stato tradotto automaticamente.</strong></p>
    <header>
        <h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
                    <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>
            
            <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <p><strong>Questo è un testo di esempio.</strong></p>
</body>
</html>

Questo file definisce la struttura di base di una pagina web e utilizza cicli per visualizzare un elenco di articoli nell’area principale della pagina. Funzioni come…the_title()、the_excerpt()Utilizzato per l’output del contenuto degli articoli.wp_head()和wp_footer()Si tratta di un “hook” di fondamentale importanza, utilizzato per permettere al core di WordPress, ai plugin e ad altri script di inserire il codice necessario.

Articoli e template di pagine

single.phpUtilizzato per visualizzare un singolo articolo.page.phpVengono utilizzati per visualizzare una singola pagina. La loro struttura è simile, ma di solito…single.phpConterrà elementi come categorie e etichette.page.phpAllora è ancora più semplice. Puoi iniziare dalla copia…index.phpInizia a crearle, e poi sostituisci il contenuto all’interno del ciclo con…the_content()Per visualizzare l’intero testo…

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

Introduzione di stili e script

I temi moderni richiedono uno stile visivo accattivante e funzionalità interattive di alta qualità. WordPress offre funzioni standard per inserire in modo sicuro i file CSS e JavaScript, evitando di doverli utilizzare direttamente all’interno del codice HTML.<link>或<script>Tag.

Creazione e utilizzo di file contenenti funzioni

Devi creare qualcosa chiamato…functions.phpQuesto file non è un file di template, bensì un file di “potenziamento delle funzionalità” per un tema, utilizzato per aggiungere nuove funzionalità, abilitare determinate caratteristiche o modificare il comportamento predefinito di WordPress. Qui registriamo gli stili grafici (stylesheet) e i script necessari per modificare l’aspetto e il funzionamento del tema.

Inserire i risorse in modo sicuro

在functions.phpIn cinese, usarewp_enqueue_style()和wp_enqueue_script()Funzione: Un approccio standard consiste nel creare una funzione e successivamente utilizzarla per eseguire determinate operazioni.wp_enqueue_scriptsQuesto “action hook” viene utilizzato per chiamare (eseguire) il relativo funzionalità.

Si consiglia di leggere Guida definitiva: Come sviluppare da zero un tema professionale per WordPress。

<?php
function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入自定义CSS文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 引入JavaScript文件
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Questo codice garantisce che i file CSS e JS vengano caricati nel momento giusto.get_stylesheet_uri()La funzione restituirà l’argomento (il “tema”) specificato.style.cssPercorso del file.get_template_directory_uri()In tal caso, viene restituito l’URL del catalogo dei temi.

Componenti di template e funzionalità tematiche

Quando i temi diventano sempre più complessi, modularizzare i frammenti di codice ripetuti rappresenta una buona pratica. WordPress offre funzionalità come i “Template Parts” (Componenti di Template) e i “Navigation Menus” (Menu di Navigazione).

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

Creare componenti di template riutilizzabili

Ad esempio, è possibile separare la parte superiore (header) e la parte inferiore (footer) di un sito web in file indipendenti. Per farlo, basta creare due file separati contenenti rispettivamente il codice relativo al header e al footer del sito.header.php和footer.phpIl documento, che verràindex.phpTrasferisci il codice corrispondente nella posizione desiderata. Quindi, utilizza le seguenti chiamate di funzione nel punto originale per eseguirle.

<?php get_header(); ?>
<?php get_footer(); ?>

Puoi anche creare componenti più generici, ad esempio…content.php或post-item.phpUtilizzare all’interno di un ciclo.get_template_part()L’utilizzo di funzioni per il caricamento dei dati aumenta notevolmente la riutilizzabilità del codice.

Attiva il menu di navigazione personalizzato.

Il sistema di menu di WordPress è davvero molto potente. Prima di tutto, è necessario…functions.phpUtilizzare nel contestoregister_nav_menus()Funzione per registrare la posizione degli ingredienti nel menu.

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, nel file del template (ad esempio…)header.phpNel punto in cui desideri visualizzare il menu, utilizza…wp_nav_menu()Una funzione per visualizzarne il contenuto.

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) );
?>

Ora, gli utenti possono creare menu nel pannello di amministrazione di WordPress, all’interno della sezione “Aspetto” -> “Menu”, e assegnarli alla posizione “Menu Principale” (Primary Menu).

Riassumendo

Seguendo questa guida, hai completato l’intero processo per passare da una cartella vuota a un tema WordPress dotato di funzionalità di base. Hai imparato a creare i file necessari.style.css和index.phpHo compreso il ruolo fondamentale dei cicli (loops) in WordPress e ho creato (costruito) qualcosa utilizzando questi meccanismi.single.php和page.phpHai anche imparato come fare…functions.phpAggiungere stili e script in modo sicuro, nonché utilizzare componenti template e sistemi di menu di navigazione per organizzare il codice e migliorare le funzionalità del tema, rappresenta soltanto un punto di partenza. In seguito, puoi esplorare elementi più avanzati come barre laterali, aree per gli strumenti aggiuntivi, tipi di articoli personalizzabili, e l’API per la personalizzazione dei temi, per arricchire e perfezionare continuamente il tuo tema.

FAQ - Domande frequenti

Deve iniziare lo sviluppo di un tema da zero?

Non necessariamente. Per i principianti, iniziare da zero è sicuramente il modo migliore per imparare. Tuttavia, in progetti reali, puoi scegliere di utilizzare temi ufficiali e pronti all’uso (come Underscores), framework (come Genesis) o temi di facile utilizzo (come _s) come punto di partenza. Questi temi prevedono già una struttura di codice solida, permettendoti di concentrarti maggiormente sullo sviluppo del design e della logica aziendale.

Il file “index.php” è obbligatorio?

Sì,index.phpSi tratta di un file di template essenziale per i temi WordPress. Costituisce l’ultima linea di difesa all’interno della gerarchia dei template; in caso di problemi con file di template più specifici (ad esempio…archive.php, search.phpSe tale elemento non esiste, WordPress utilizzerà automaticamente un’alternativa predefinita.index.phpQuesto viene utilizzato per visualizzare la pagina e garantire che il sito web produca sempre del contenuto.

Come posso risolvere i problemi che mi vengono incontro nello sviluppo del mio tema?

Prima di tutto, assicurati che nel tuo…wp-config.phpIl modulo WP_DEBUG è attivo nel file.define( ‘WP_DEBUG’, true );Questa riga è impostata su “true”. Questo consentirà che gli errori di PHP e le avvertenze di WordPress vengano visualizzati direttamente sulla pagina, facilitando così la localizzazione dei problemi. È inoltre molto importante utilizzare gli strumenti di sviluppo del browser (attivabili premendo F12) per verificare gli errori presenti nel codice CSS e JavaScript.

Posso fare qualsiasi cosa nel file functions.php del tema?

Teoricamente è possibile, ma la prassi migliore consiste nell’aggiungere soltanto il codice direttamente correlato all’aspetto e alle funzionalità del tema. Le funzionalità complesse che riguardano la logica di business principale o le operazioni sui dati dovrebbero essere sviluppate come plugin separati. Il vantaggio di questo approccio è che, quando l’utente cambia tema, queste funzionalità non vengono perse, migliorando così la manutenibilità e la riutilizzabilità del codice.