Guida completa allo sviluppo di temi per WordPress: dall’approccio iniziale alla maestria

Padroneggiare lo sviluppo di temi per WordPress rappresenta una competenza fondamentale per creare siti web personalizzati: ti permette di controllare completamente l’aspetto e le funzionalità del sito, liberandoti dalle limitazioni dei temi preesistenti. In questo articolo verrà spiegato in modo sistematico l’intero processo per creare un tema WordPress da zero.

Concetti di base sui temi per WordPress

Prima di iniziare a scrivere il codice, è fondamentale comprendere la struttura di base e il funzionamento di un tema WordPress. Un tema, in sostanza, è un insieme di file che vengono salvati all’interno della directory dei temi di WordPress.wp-content/themes/I folder presenti all’interno del directory contengono una serie di file che svolgono funzioni specifiche.

La struttura principale del file relativo al tema

Un tema WordPress di base richiede almeno due file:style.css和index.phpTra questi,style.cssNon solo definiscono lo stile del tema, ma le note presenti nell’intestazione del file contengono anche i metadati del tema stesso, come il nome del tema, l’autore, la descrizione, il numero di versione, ecc. Queste note, situate in cima al file, sono fondamentali per WordPress per riconoscere un tema.

Si consiglia di leggere Dall’approccio iniziale alla padronanza: Guida completa e tutorial pratico per lo sviluppo di temi per WordPress。

Man mano che i temi diventano più complessi, vengono introdotti più file di template per costruire pagine diverse. Ad esempio,header.phpResponsabile della parte superiore della pagina web (header).footer.phpResponsabile della zona inferiore.sidebar.phpGestire la barra laterale…functions.phpSi tratta di un file molto potente, utilizzato per aggiungere funzionalità relative ai temi (temi grafici), menù di registrazione, aree per gli strumenti aggiuntivi (widget), nonché per importare script e fogli di stile (style sheets).

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

Livelli di template e meccanismi di ciclo

WordPress utilizza un sistema intelligente chiamato “struttura dei template” per determinare quale file di template utilizzare per rendere la pagina in base alla richiesta attuale. La regola di base prevede di cercare partendo dal template più specifico; se non viene trovato, si passa a un template più generico. Ad esempio, per un articolo con l’ID 123, WordPress cercherà innanzitutto il template specifico relativo a quell’articolo.single-post-123.phpE poi…single-post.phpPoi segue…single.phpInfine, torna indietro a…singular.phpSe nessuno di questi elementi esiste, allora si utilizza l’opzione finale.index.php。

Il concetto centrale che attraversa tutto il contenuto mostrato è il “ciclo” (loop). Il ciclo è una struttura di codice PHP utilizzata da WordPress per recuperare i contenuti (ad esempio articoli, pagine) dal database e visualizzarli sul sito web. La sua forma di base è la seguente:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- 在这里输出文章内容，例如： -->
    <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>
<?php endwhile; endif; ?>

Utilizzando funzioni template, come…the_title()和the_content()È possibile visualizzare le varie parti di un articolo all’interno di un ciclo. Comprendere e utilizzare abilmente i cicli rappresenta la base fondamentale dello sviluppo di applicazioni.

Costruire un framework tematico di base

Diamo il via alla creazione di un tema minimalista chiamato “MyFirstTheme” per mettere in pratica i concetti fondamentali.

Si consiglia di leggere Creare un sito web con caratteristiche uniche: analisi approfondita dell’intero processo di sviluppo dei temi per WordPress。

Creare un file di stili e un file principale.

Prima di tutto,wp-content/themes/Crea una cartella all’interno del directory.myfirstthemePoi, crea un file all’interno di quella cartella.style.cssFile, e aggiungere le informazioni di commento necessarie all’inizio del file.

/*
Theme Name: My First Theme
Theme URI: https://example.com/myfirsttheme
Author: Your Name
Author URI: https://example.com
Description: 一个用于学习的极简WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: myfirsttheme
*/

Successivamente, creare il file principale del tema.index.phpQuesto è il modello di fallback finale per tutte le pagine. Una versione molto semplice può includere la struttura HTML di base e dei cicli (loop).

<!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>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无内容。</p>';
    endif;
    ?&gt;
</body>
</html>

wp_head()和wp_footer()I due “ganci” (hook) sono di fondamentale importanza: consentono al core di WordPress, agli plugin e ad altri script di interagire con il contenuto della pagina in modo appropriato.<head>和<p>Io non sono un'attrice.</p>Inserisci il codice necessario all’inizio del documento, come stili, script e meta-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

Introduzione della separazione tra file funzionali e template.

Per rendere il codice più modulare, dobbiamo suddividere i template. Creiamo…header.php将<head>Alcune parti della struttura comune e l’elemento situato in cima alla pagina (ad esempio, il menu di navigazione) sono stati spostati all’interno di questa nuova area. Creazione completata.footer.phpInserisci il contenuto nel piede di pagina. Poi…index.phpUtilizzare nel contestoget_header()和get_footer()Le funzioni le introducono.

Allo stesso tempo, creare…functions.phpFile: Questo file rappresenta il “centro di controllo” del tema. Inizialmente, possiamo utilizzarlo per aggiungere un menu al tema e per importare i file di stile (i fogli di stile).

<?php
function myfirsttheme_setup() {
    // 让主题支持导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'myfirsttheme' ),
    ) );
    // 为文章和评论RSS feed添加支持
    add_theme_support( 'automatic-feed-links' );
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'myfirsttheme_setup' );

function myfirsttheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'myfirsttheme-style', get_stylesheet_uri() );
    // 引入Google Fonts等外部资源
    wp_enqueue_style( 'myfirsttheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'myfirsttheme_scripts' );
?>

Implementare funzionalità tematiche avanzate

Una volta che il framework di base è stato costruito, è possibile iniziare ad integrare funzionalità più moderne e potenti, al fine di migliorare la professionalità e l’usabilità del tema.

Si consiglia di leggere Cos’è un tema WordPress e quali sono le sue funzionalità principali?。

Aggiungere il supporto per gli strumenti aggiuntivi (widget) e la barra laterale.

I “widget” sono blocchi di contenuto in WordPress che possono essere trascinati e posizionati facilmente all’interno della pagina. Per far sì che un tema supporti i widget, è necessario modificare il codice sorgente del tema stesso.functions.phpÈ possibile registrare una o più “aree per gli strumenti aggiuntivi” all’interno di un sito web, solitamente denominate barre laterali.

function myfirsttheme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'myfirsttheme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'myfirsttheme' ),
        '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', 'myfirsttheme_widgets_init' );

Dopo l’iscrizione, è possibile visualizzare l’area della “Barra laterale principale” nella sezione “Aspetto” -> “Aggiornamenti” presente nell’interfaccia di amministrazione. Per mostrarla anche nell’interfaccia utente, è necessario modificare il template utilizzato (ad esempio…).sidebar.php或index.phpUtilizzato all'interno di…)dynamic_sidebar( 'sidebar-1' )Chiamata di funzione.

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

Integrazione di immagini caratteristiche degli articoli con il logo personalizzato

I temi moderni supportano generalmente le miniature degli articoli (immagini rappresentative) e l’identificativo personalizzato del sito.add_theme_support()Le funzioni permettono di attivare facilmente queste funzionalità.

function myfirsttheme_theme_support() {
    // 启用文章和页面的“特色图像”功能
    add_theme_support( 'post-thumbnails' );
    // 启用自定义Logo功能
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}
add_action( 'after_setup_theme', 'myfirsttheme_theme_support' );

Una volta attivato, sulla pagina di modifica degli articoli apparirà una casella per l’inserimento di un“”immagine di rilievo“ (image di carattere speciale), mentre nella sezione ”Identità del sito“ dell”“Personalizzatore” sarà disponibile l’opzione per caricare il logo. All’interno dei template, è possibile utilizzare questa funzionalità per personalizzare l’aspetto del sito.the_post_thumbnail()Visualizza le immagini di rilievo, utilizzando…the_custom_logo()Visualizza il Logo.

Pratiche di personalizzazione e ottimizzazione dei temi

La conclusione dello sviluppo non significa la fine del lavoro: garantire la flessibilità, la manutenibilità e le elevate prestazioni del prodotto sono aspetti altrettanto importanti.

Utilizzare i personalizzatori per aggiungere opzioni relative al tema.

Il personalizzatore di WordPress consente agli utenti di visualizzare in tempo reale e modificare le impostazioni dei temi.WP_Customize_ManagerGli oggetti permettono di aggiungere svariati impostazioni e controlli a un tema. Ad esempio, è possibile includere un’opzione per modificare il colore del titolo del sito web.

function myfirsttheme_customize_register( $wp_customize ) {
    // 添加一个设置（Setting）用于存储颜色值
    $wp_customize->add_setting( 'site_title_color', array(
        'default'           => '#333333',
        'transport'         => 'postMessage', // 支持实时预览刷新
        'sanitize_callback' => 'sanitize_hex_color',
    ) );
    // 添加一个控件（Control）用于在定制器界面显示颜色选择器
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'site_title_color', array(
        'label'    => __( '网站标题颜色', 'myfirsttheme' ),
        'section'  => 'colors', // 放在已有的“颜色”板块
        'settings' => 'site_title_color',
    ) ) );
}
add_action( 'customize_register', 'myfirsttheme_customize_register' );

Poi, instyle.cssO tramitewp_add_inline_styleFunzione: visualizza questo stile dinamico.

Ottimizzazione delle prestazioni e pratiche di sicurezza

Un ottimo tema deve disporre di buone prestazioni e di una solida base di sicurezza. Per quanto riguarda le prestazioni, è necessario assicurarsi che tutti i file CSS e JavaScript siano caricati correttamente e vengano eseguiti in modo efficiente.wp_enqueue_style()和wp_enqueue_script()È necessario introdurre correttamente i componenti necessari e impostare opportunamente le dipendenze, nonché la posizione in cui vanno caricati (ad esempio, i script possono essere posizionati nella parte inferiore della pagina). Per quanto riguarda le immagini, è importante garantire il supporto per immagini responsive e incoraggiare gli utenti a ottimizzare le loro dimensioni.

Per quanto riguarda la sicurezza, tutti i dati dinamici ottenuti dagli utenti o dal database e visualizzati sulle pagine devono essere “escapati” (cioè modificati in modo da evitare problemi legati all’interpretazione errata dei caratteri). WordPress fornisce una serie di funzioni per l’escapamento dei dati, ad esempio per l’output di URL.esc_url(), per visualizzare gli attributi HTML utilizzati.esc_attr()Utilizza il contenuto dell’area di output per la traduzione.esc_textarea()…infunctions.phpIn questo contesto, tutti i valori ottenuti dal personalizzatore o dalle opzioni devono essere escapati prima di essere visualizzati.

Inoltre, per preparare la traduzione del tema, utilizzate…__( ‘文本’, ‘myfirsttheme’ )和_e( ‘文本’, ‘myfirsttheme’ )Verranno utilizzati dei metodi per “avvolgere” tutte le stringhe visibili agli utenti, al fine di creare….potI file di lingua permettono alla tua tematica di essere utilizzata da utenti in tutto il mondo.

Riassumendo

Lo sviluppo di temi per WordPress è un processo pratico che inizia dalla comprensione dei concetti fondamentali (come la gerarchia dei template e i cicli di elaborazione dei dati), per poi passare alla creazione della struttura dei file, alla suddivisione dei componenti dei template e all’integrazione di funzionalità aggiuntive (come menu, widget, immagini di rappresentazione). Per padroneggiare appieno queste tecniche…functions.phpL’utilizzo degli strumenti disponibili e delle API dei personalizzatori permette di aumentare notevolmente la flessibilità e la professionalità dei temi per WordPress. Infine, prestare costante attenzione alla sicurezza del codice, alle prestazioni del sito e all’internazionalizzazione dei contenuti è fondamentale per diventare un sviluppatore di temi esperto. Seguendo questi passaggi e le migliori pratiche, sarai in grado di creare temi per WordPress che siano sia belli da vedere che funzionalmente avanzati, sia sicuri che efficienti dal punto di vista tecnico.

FAQ - Domande frequenti

Per creare un tema per WordPress è necessario conoscere PHP?

Sì, PHP è essenziale. Sia WordPress che il suo sistema di temi e template sono sviluppati in PHP. Devi padroneggiare la grammatica di base di PHP, in particolare conoscere come inserire codice PHP all’interno di HTML, nonché come utilizzare le migliaia di funzioni e “hook” forniti da WordPress per generare contenuti in modo dinamico, iterare attraverso gli articoli e gestire la logica di funzionamento del sito. HTML e CSS costituiscono la base per la creazione dell’aspetto visivo del sito, mentre PHP rappresenta l’elemento fondamentale per l’implementazione di funzionalità dinamiche.

Perché il mio tema non viene visualizzato nel backend?

Se la cartella tematica è già stata caricata…wp-content/themes/Il menu non è visibile, ma non si trova nella sezione “Aspetto” -> “Temi” dell’interfaccia di amministrazione di WordPress. Per prima cosa, verifica se il menu è stato correttamente configurato e inserito nel file di configurazione del tema.style.cssIl formato delle note relative alle informazioni sul tema presenti in cima al file è corretto? I blocchi di note devono seguire rigorosamente le specifiche stabilite./*Inizia, con…*/Terminare e includere…Theme Name:Questa riga… Inoltre, assicurati che nella cartella dei temi ci siano almeno…style.css和index.phpQuesti due file: problemi con i permessi di accesso potrebbero anche impedire la lettura del contenuto del tema.

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

functions.phpI file fanno parte di un tema e le loro funzionalità sono legate al tema attualmente attivo. Vengono solitamente utilizzati per aggiungere o modificare caratteristiche strettamente correlate all’aspetto visivo e alle funzionalità di quel tema: ad esempio, per definire la posizione dei menu di registrazione, l’area per gli strumenti aggiuntivi, le opzioni di supporto per il tema, nonché gli stili e i script specifici per quel tema. Le funzionalità offerte dai plugin, invece, sono indipendenti dal tema; quindi, anche cambiando tema, le funzionalità del plugin rimangono attive. In generale, se una funzionalità ha lo scopo esclusivo di migliorare le prestazioni del sito web senza modificarne l’aspetto, è più appropriato renderla un plugin. Se, invece, tale funzionalità è strettamente legata alla struttura, allo stile e alla logica di progettazione del tema, dovrebbe essere integrata direttamente all’interno di esso.functions.phpSì.

Come posso rendere il mio tema compatibile con i sottotemi (subtopics)?

Permettere ai tuoi temi di supportare sottotemi rappresenta una buona pratica per incoraggiare gli utenti a personalizzarli senza perdere le eventuali aggiornamenti. Questo concetto è noto come “tema genitore” (parent theme). Prima di tutto, assicurati che il tuo tema segua standard di codifica adeguati e che i file delle template, le funzioni e gli stili siano ben organizzati e facilmente comprensibili. Il passo più importante è…style.cssIn cinese, usare@importIl metodo per introdurre lo stile del tema padre nelle regole è ormai obsoleto. La pratica corretta consiste nel farlo direttamente nel tema figlio.functions.phpUtilizzare nel contestowp_enqueue_scriptsVengono utilizzati “hook” (meccanismi di interazione tra moduli di WordPress) per gestire il caricamento delle tabelle di stile del tema padre in modo ordinato. In qualità di sviluppatore di un tema padre, è sufficiente assicurarsi che la struttura del codice sia chiara e spiegare nei documenti come creare i temi figli. Una volta che gli utenti creano un tema figlio, WordPress caricherà per primo i file contenuti in quel tema, sovrascrivendo i file omonimi presenti nel tema padre.