Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema per il sito web da zero

Concetti di base dello sviluppo di temi per WordPress

Prima di iniziare a scrivere il codice, è fondamentale comprendere la struttura di base di un tema WordPress. Un tema WordPress è essenzialmente un insieme di file che insieme definiscono l’aspetto e le funzionalità di un sito web. Questi file includono file di template, fogli di stile (style sheets), file di funzioni opzionali, script, e altro ancora.

Il file principale è…style.css和index.phpTra questi,style.cssNon si tratta soltanto dello stile del tema, ma anche del suo “cartellino d’identità”: le note presenti all’inizio del file contengono informazioni essenziali come il nome del tema, l’autore, la descrizione e la versione. È proprio grazie alla lettura di queste informazioni che WordPress riesce a riconoscere e gestire i temi in background.

I file di template sono responsabili del controllo della logica di visualizzazione delle diverse pagine. Ad esempio,single.phpUtilizzato per visualizzare un singolo articolo.page.phpUtilizzato per visualizzare pagine indipendenti.archive.phpVengono utilizzati per visualizzare l’elenco degli archivi degli articoli. Questi file seguono il sistema di gerarchia dei template di WordPress; in caso di assenza di un template specifico, il sistema ricorre automaticamente a un template più generico, fino a raggiungere il livello più base.index.php。

Si consiglia di leggere Guida all’approccio di base allo sviluppo di temi per WordPress: crea da zero l’interfaccia del tuo sito web personalizzato。

Un altro file chiave è…functions.phpQuesto file non è un file di template, ma un file funzionale relativo al tema. È possibile aggiungere funzionalità personalizzate, registrare menu e barre laterali (aree per gli strumenti), abilitare il supporto per immagini di riferimento (sintesi di articoli), nonché gestire l’ordine di caricamento dei file JavaScript e CSS. Equivale al “cervello” del tema, responsabile dell’elaborazione dei dati logici e dell’estensione delle sue funzionalità.

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

Comprendere questi file di base e il loro funzionamento è il primo passo per creare un tema stabile e facile da mantenere.

Configurare un ambiente di sviluppo locale e creare la struttura di un tema

Prima di iniziare a codificare, è essenziale creare un ambiente di sviluppo locale efficiente. Si consiglia l’uso di strumenti di sviluppo locali come Local by Flywheel, XAMPP o MAMP, che permettono di configurare rapidamente un ambiente di esecuzione per WordPress sul proprio computer, includendo Apache, MySQL e PHP. Questo permette di sviluppare il sito in modalità offline e di effettuare test e debug in totale libertà, senza influenzare il sito web online.

Una volta che l’ambiente è pronto, è necessario procedere con le operazioni all’interno della directory di installazione di WordPress.wp-content/themes/All’interno della cartella, crea una nuova cartella che fungerà da directory per il tuo argomento di lavoro. Il nome della nuova cartella dovrebbe essere composto da lettere minuscole, numeri e trattini, e dovrebbe essere descrittivo; ad esempio:my-first-theme。

Successivamente, creeremo i due file più basilari. Il primo è…style.cssLa parte iniziale del file deve contenere delle note formattate secondo lo standard seguente:

Si consiglia di leggere Che cos’è lo sviluppo di temi per WordPress?。

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

“Il ”Text Domain’ viene utilizzato per l’internazionalizzazione e di solito coincide con il nome della directory tematica.”index.phpQuesto è il file template più basilare; può contenere temporaneamente soltanto una semplice struttura HTML.

<!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>
        <h1>Il mio primo argomento</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© Copyright Reserved</p>
    </footer>
    <p><strong>Questo è un testo di esempio.</strong></p>
</body>
</html>

In questo momento, fai login al pannello di amministrazione di WordPress e, nella sezione “Aspetto” -> “Temi”, dovresti riuscire a vedere questo nuovo tema e a attivarlo. Anche se è semplice, è già un tema funzionante.

Dettagliato spiegamento dei file di template principali e dei cicli

WordPress utilizza il cosiddetto “The Loop” per recuperare i contenuti degli articoli dal database e visualizzarli sulla pagina. Il “The Loop” rappresenta un concetto fondamentale nello sviluppo di temi per WordPress: quasi tutti i file di template si basano su di esso.

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

Comprendere il ciclo principale di WordPress

La struttura di base di un ciclo è un insieme di istruzioni che vengono eseguite ripetutamente fino a quando non viene raggiunto un determinato condizione di terminazione.if和whileQuesto frammento di codice verifica se esistono articoli nell’query attuale e, in seguito, percorre ciascun articolo per rendere i suoi dati (titolo, contenuto, autore, ecc.) disponibili per l’utilizzo delle etichette del template. Una struttura di ciclo tipica è la seguente:

<!-- 在这里输出文章内容，例如： -->
        <h2><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h2>
        <div><p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p></div>
    <p> </p>
<p></p>
    <p>Non è stato trovato alcun articolo.</p>
<?php endif; ?>

the_post()La funzione viene utilizzata per impostare i dati dell’articolo corrente; solo dopo tale operazione è possibile utilizzarli.the_title()、the_content()Eccetto i tag di template.

Creare file di template utilizzati frequentemente

Per permettere a questo tema di gestire in modo professionale diversi tipi di pagine, è necessario creare alcuni file di template fondamentali. Il primo di questi file…header.php和footer.phpUtilizzato per separare il codice relativo alla parte superiore (header) e alla parte inferiore (footer) della pagina…index.phpVengono separati dal resto.header.phpAll'interno, posizionare il contenuto proveniente da到Il contenuto che segue l’inizio di un tag; in…footer.phpInserire all’interno di…Poi,index.phpIn cinese, usareget_header()和get_footer()Si utilizzano funzioni per introdurle.

Si consiglia di leggere Tutorial completo per lo sviluppo di temi per WordPress: dai codici di base alle tecniche pratiche。

Poi, creasingle.phpUtilizzato per un singolo articolo.page.phpUtilizzato per pagine indipendenti. È possibile utilizzarlo per prime in questi file.get_header()和get_footer()Poi si inserisce il ciclo e la struttura HTML specifica per un singolo articolo o pagina. Ad esempio:single.phpPotrebbe essere necessario effettuare una chiamata (un “call”) all’interno di questo contesto.the_post_thumbnail()Per visualizzare le immagini caratteristiche dell’articolo…page.phpLa data di pubblicazione potrebbe non essere visualizzata.

Infine, crea…archive.phpSi tratta di pagine di archiviazione per la gestione di categorie, etichette, autori, ecc. In questo file, di solito si utilizzano…the_archive_title()Ecco i titoli degli articoli archiviati, presentati in forma di riassunto o elenco:

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

Separando questi template, la struttura del tuo tema diventerà più chiara e facile da mantenere.

Rafforzare le funzionalità e gli stili dei temi.

Una volta completato un framework tematico di base, il passo successivo è aggiungere funzionalità e migliorare l’aspetto estetico del sito. Questo avviene principalmente attraverso…functions.php和style.cssPer realizzarlo…

Aggiungere funzionalità principali tramite file di funzioni

functions.phpI file sono lo strumento principale per aggiungere funzionalità a un tema. Inizialmente, dovresti fornire al tema il supporto per le funzionalità di base, il che avviene attraverso…add_theme_support()Implementazione della funzione.

function my_first_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 让主题支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 让主题支持HTML5的标记格式（用于搜索表单、评论表单等）
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 让主题支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

In secondo luogo, è necessario registrare le posizioni dei menu e delle barre laterali (aree per gli strumenti aggiuntivi) relative al tema. Per registrare i menu, utilizzare…register_nav_menus()Funzione:

function my_first_theme_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'init', 'my_first_theme_menus' );

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

Introduzione di stili e script

Il modo corretto per includere i file CSS e JavaScript è utilizzare i seguenti metodi:wp_enqueue_style()和wp_enqueue_script()La funzione, che li monta suwp_enqueue_scriptsSul gancio… Questo garantisce che le dipendenze siano corrette e evita il caricamento ripetuto dei file.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入Google字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
    // 引入主题的JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Scrivere gli stili di base

Infine,style.cssQui puoi iniziare a scrivere i tuoi stili grafici. Parti da ripristinare i valori predefiniti del browser e poi procedi gradualmente, aggiungendo i tuoi modifiche uno per uno.body、headerMenu di navigazione, contenuto degli articoli, barra laterale e…footerDefinisci gli stili grafici del sito utilizzando query di tipo “media query” per il design responsivo, in modo che il tema risulti ben visualizzato su dispositivi mobili, tablet e desktop. Attraverso continui aggiustamenti e test, la prima “skin” (versione estetica personalizzata) del tuo sito diventerà gradualmente più bella e professionale.

Riassumendo

Dall’istituzione di un contenuto che includa…style.css和index.phpPartendo da una semplice cartella, si procede alla creazione di strutture più complesse.header.php、footer.php、single.phpDai file di template professionali, fino al processo di implementazione…functions.phpHai aggiunto alla tua tema funzionalità per l’impostazione del tema, un menu e dei script, completando così il percorso fondamentale per la creazione della tua prima tema per WordPress. Questo processo non solo ti ha permesso di acquisire conoscenze su concetti chiave come la struttura dei template, i cicli di elaborazione dei dati e gli “action hooks”, ma ti ha anche aiutato a comprendere come le temi di WordPress separino i dati, la logica di funzionamento e l’aspetto visivo del sito web. Continua a praticare e prova ad aggiungere altri elementi al tuo tema, come ad esempio…search.php、404.phpGrazie alle funzionalità di base (come la possibilità di modificare il design del sito) e a quelle avanzate (come il supporto per tipi di articoli personalizzati), sarai in grado di creare skin per siti web più potenti e unici.

FAQ - Domande frequenti

Per sviluppare temi per WordPress è necessario conoscere PHP?

Sì, PHP è il linguaggio di programmazione principale utilizzato per WordPress. Per sviluppare temi completi e funzionali, è necessario padroneggiare la grammatica di base di PHP, in particolare comprendere le funzioni, le istruzioni condizionali, i cicli, nonché come interagire con l’API di WordPress (come le etichette per i template e le funzioni di hook). HTML e CSS costituiscono la base per la creazione dell’interfaccia grafica front-end, mentre JavaScript viene utilizzato per aggiungere effetti interattivi.

Qual è la differenza tra il file functions.php del tema e i plugin?

functions.phpLe funzionalità presenti nel file sono legate al tema attualmente attivo. Se cambi tema, queste funzionalità non saranno più disponibili. Questo strumento è particolarmente adatto per aggiungere elementi che siano strettamente correlati all’aspetto visivo e alla struttura del tema in questione, ad esempio posizioni specifiche per i menu, barre laterali o codici personalizzati (shortcodes) propri di quel tema.

Le funzionalità offerte dai plugin sono indipendenti dal tema utilizzato: indipendentemente dal tema scelto, le funzionalità dei plugin vengono generalmente mantenute. I plugin sono particolarmente adatti per aggiungere funzionalità universali, che non dipendono dall’aspetto estetico del tema stesso, come moduli di contatto, ottimizzazioni per i motori di ricerca (SEO), o meccanismi di caching. Una buona pratica consiste nel creare plugin per le funzionalità che possono essere riutilizzate in altri temi.

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

Per rendere un tema supportato da più lingue, ovvero per implementare la funzionalità di internazionalizzazione (i18n), è necessario “incapsulare” tutte le stringhe destinate all’utente all’interno del codice. Nei file PHP, questo può essere fatto utilizzando diversi strumenti e tecniche.__()、_e()Aspetta che la funzione di traduzione produca il testo. Nel file JavaScript, è necessario anche utilizzarewp_set_script_translations()Eseguire un trattamento simile.

Hai bisogno di…style.cssIl “Dominio del testo” efunctions.phpChiamata in…load_theme_textdomain()Quando si procede, è necessario specificare un dominio di testo (Text Domain) unico. Successivamente, utilizzando strumenti come Poedit, si esegue la scansione del codice del tema per generare i file necessari..potFile di template per la traduzione: i traduttori possono utilizzarli per creare i propri contenuti..po和.moFile di lingua: posizionare questi file di lingua all’interno del tema./languages/Basta trovarlo all’interno della directory.

Come si esegue il debug degli errori in un tema WordPress durante lo sviluppo?

Attivare il modalità di debug di WordPress è fondamentale per individuare e risolvere problemi. Questo può essere fatto modificando alcune impostazioni del sito.wp-config.phpIl documento, che verràWP_DEBUGLa costante è impostata sutruePuoi anche abilitare più funzionalità contemporaneamente.WP_DEBUG_LOG(C registrare i messaggi di errore nel file di log) eWP_DEBUG_DISPLAY(Viene visualizzato un errore sulla pagina.) Si prega di notare che, prima di lanciare il sito web, è necessario disattivare il modalità di debug.

Inoltre, l’utilizzo degli strumenti di sviluppo del browser (attivabili premendo F12) per esaminare la struttura HTML, gli stili CSS e gli errori visualizzati nella console JavaScript è un metodo essenziale per il debug front-end. Per la logica PHP più complessa, è consigliabile ricorrere a strumenti specifici per l’analisi e la gestione dei codici.error_log()Le funzioni o i plugin di debug dedicati (come Query Monitor) possono anche migliorare notevolmente l’efficienza.