Guida completa allo sviluppo di temi per WordPress: dal principiante all’esperto, con tutorial pratici

Comprendere l’architettura di base di un tema WordPress

Un tema WordPress è essenzialmente un insieme di file che insieme definiscono l’aspetto estetico e le funzionalità del sito web. Tra questi file, ci sono due che sono obbligatori in ogni tema:style.css和index.phpCostituiscono la base fondamentale del tema.

A livello di base, i temi di WordPress funzionano attraverso un sistema di file di template. Quando un visitatore richiede una pagina, WordPress determina quale file di template PHP caricare per visualizzare il contenuto in base al tipo di pagina richiesto (come la pagina iniziale, la pagina di un articolo, la pagina dell’archivio, ecc.), utilizzando una struttura gerarchica specifica dei template. Questo approccio consente agli sviluppatori di controllare in modo molto flessibile l’aspetto delle diverse pagine.

Panoramica della struttura del file tematico

I temi standard di WordPress includono una serie di file specifici. Oltre a quelli essenziali…style.css和index.phpUn tema ben strutturato e completo include solitamente anche:functions.php、header.php、footer.php、sidebar.phpNonché i file di template per le diverse pagine, come…single.php(Articolo) Epage.php(Pagina).functions.phpIl file rappresenta il “cervello” del tema: viene utilizzato per aggiungere funzionalità, registrare menu, barre laterali e altri elementi grafici.

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

style.cssIl file non contiene soltanto i fogli di stile, ma anche delle note nel suo header che contengono i metadati del tema: nome del tema, autore, descrizione, versione, ecc. Questi dati sono fondamentali per WordPress per riconoscere correttamente il 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 Custom Theme
 * Author: Your Name
 * Description: A custom theme built from scratch.
 * Version: 1.0
 */

Configurare un ambiente di sviluppo locale

Prima di iniziare a scrivere il codice, è fondamentale creare un ambiente di sviluppo locale professionale. Questo ti permetterà di testare tutte le funzionalità in un ambiente sicuro e isolato, senza influenzare il sito web online.

Il consigliato insieme di strumenti include Local by Flywheel, XAMPP o MAMP, che permettono di installare PHP, MySQL e WordPress con un solo clic. Inoltre, un potente editor di codice (come VS Code o PhpStorm) e un sistema di controllo delle versioni (come Git) sono elementi essenziali per lo sviluppo di temi moderni.

Crea la tua prima cartella per i temi.

Prima di tutto, all’interno della directory di installazione di WordPress…wp-content/themes/All’interno della cartella, crea una nuova cartella, ad esempio…my-first-themeIl nome di questa cartella è proprio il tuo identificatore tematico.

Poi, all’interno di quella cartella, crea due file molto semplici (di base).style.css和index.phpAssicurarsi che…style.cssAssicurati di compilare completamente le informazioni relative alla testata del file. A questo punto, accedi al pannello di amministrazione di WordPress, vai su “Aspetto” -> “Temi” e dovresti vedere il tuo nuovo tema apparire nell’elenco; tuttavia, al momento non possiede ancora alcun stile o funzionalità.

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

Introduzione dei componenti principali del template

Per rispettare il principio DRY (Don’t Repeat Yourself – Non ripeterti), i temi di WordPress utilizzano componenti template per suddividere le parti comuni del codice.header.php、footer.php和sidebar.php。

在index.phpIn cinese, usareget_header()、get_footer()和get_sidebar()Esistono funzioni per importare questi componenti. Queste funzioni fanno parte dei tag di template fondamentali di WordPress e sono in grado di cercare automaticamente e caricare i file di template corrispondenti ai nomi specificati.

// 在 index.php 中的典型结构
<?php get_header(); ?>

<main id="main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 输出文章内容
        endwhile;
    endif;
    ?>
</main>

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

Approfondire i tempi e i cicli di base

Il “ciclo” di WordPress rappresenta il meccanismo fondamentale che gestisce la visualizzazione dei contenuti. Si tratta di una struttura di codice PHP utilizzata per verificare se la pagina attuale contiene articoli (o pagine personalizzate); in caso affermativo, il codice esegue un ciclo che attraversa tutti gli articoli presenti e ne visualizza il contenuto.

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 e le operazioni di query

La struttura di ciclo più basilare è la seguente. Appare in quasi tutti i file di template e viene utilizzata per ottenere e visualizzare elenchi di articoli o il contenuto di un singolo articolo.

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

In questo ciclo,have_posts()和the_post()Le funzioni controllano il flusso degli eventi. I tag delle template, come…the_title()和the_content()Utilizzato per visualizzare le informazioni specifiche dell’articolo attuale.

Creare un modello di pagina personalizzato.

È possibile creare un layout unico per una pagina specifica. Per farlo, è necessario creare un nuovo file PHP e aggiungere, all’inizio del file, una nota che indica il nome del template da utilizzare.

Si consiglia di leggere Guida completa allo sviluppo di temi per WordPress: dalle basi alle tecniche avanzate e ai consigli pratici per diventare esperti。

Ad esempio, creare uno che si chiama…template-fullwidth.phpPer il file in questione, scrivere all’inizio:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */

Dopo aver salvato i cambiamenti, accedi al pannello di amministrazione di WordPress e modifica una qualsiasi pagina. Nella sezione “Proprietà della pagina” -> “Template”, troverai l’opzione “Pagina a larghezza piena”. Selezionandola, la pagina verrà visualizzata utilizzando il tuo template personalizzato.

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

Utilizzare i file di funzioni per potenziare le funzionalità di un tema.

functions.phpÈ la tua cassetta degli attrezzi per la gestione dei temi. Qui puoi aggiungere funzionalità di supporto ai temi, registrare i menu di navigazione, definire le aree per gli strumenti aggiuntivi, gestire l’ordine di caricamento dei file di stile e dei script, nonché creare funzioni personalizzate.

Aggiungere il supporto per i temi e il menu di registrazione.

Usareadd_theme_support()Le funzioni permettono di attivare le funzionalità principali di WordPress. Ad esempio, l’attivazione della funzione delle miniature degli articoli è una caratteristica standard di molti temi.

function mytheme_setup() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5标记（用于评论表单、搜索表单等）
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Per registrare il menu di navigazione e utilizzarlo…register_nav_menus()Dopo l’iscrizione, potrai gestire la posizione di questi menu nella sezione “Aspetto” -> “Menu” presente nell’area di amministrazione, e utilizzarli nei tuoi template.wp_nav_menu()Per effettuare la chiamata.

register_nav_menus( array(
    'primary' => __( '主导航菜单', 'my-theme' ),
    'footer'  => __( '页脚菜单', 'my-theme' ),
) );

Introdurre in modo sicuro stili e script.

Non codificare mai direttamente i link ai file CSS e JS all’interno dei file di template. Il metodo corretto è utilizzare…wp_enqueue_style()和wp_enqueue_script()Funzioni, e montarle suwp_enqueue_scriptsSu questo gancio… Questo garantisce che le dipendenze vengano gestite correttamente e evita il caricamento ripetuto dei file.

function mytheme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Realizzare un design responsivo e la personalizzazione dei temi.

I temi moderni devono essere responsive, il che significa che la loro struttura e il loro stile devono essere in grado di adattarsi a diverse dimensioni di schermo, da quelle dei telefoni a quelle dei computer desktop. Questo viene principalmente realizzato utilizzando i cosiddetti “CSS media queries”.

Creare un CSS ottimizzato per i dispositivi mobili.

Si consiglia di adottare una strategia CSS “mobile-first”. Inizialmente, si devono creare gli stili di base adatti a schermi di piccole dimensioni, e successivamente, utilizzando i media query, si possono aggiungere o sovrascrivere tali stili per schermi più grandi.

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 1rem;
}

/* 中等屏幕（平板） */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 大屏幕（桌面） */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Integrazione con i plugin personalizzati per WordPress

I plugin di personalizzazione per WordPress permettono agli utenti di visualizzare in tempo reale e modificare alcune impostazioni dei temi (come i colori, i font, ecc.).WP_Customize_ManagerGli oggetti permettono di aggiungere opzioni personalizzate ai temi.

Prima di tutto…functions.phpCrea una funzione all’interno di… e utilizzala.customize_registerGancio.

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置项，用于保存主题色
    $wp_customize->add_setting( 'primary_color', array(
        'default' => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

// 添加一个颜色控件到某个面板或节
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label'    => __( '主题主色', 'my-theme' ),
        'section'  => 'colors',
        'settings' => 'primary_color',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Poi, puoi utilizzarlo nel CSS del lato client ( frontend ).get_theme_mod( 'primary_color' )Per ottenere i valori impostati dall’utente e visualizzare lo stile dinamico corrispondente.

Riassumendo

Lo sviluppo di temi per WordPress è un processo che unisce creatività e tecnologia. Partendo dalla comprensione della struttura dei file di base, degli strati dei template e dei cicli centrali del sistema, si passa alla creazione dell’ambiente di sviluppo, alla scrittura dei componenti dei template e, infine, all’implementazione delle funzionalità desiderate.functions.phpDalla funzionalità di inserimento dei contenuti, all’implementazione di un design responsive e di opzioni personalizzabili, ogni passo si basa sulla comprensione dei concetti appresi nel passo precedente. Acquisendo queste competenze fondamentali, sarai in grado di creare temi per WordPress potenti, ben progettati e in linea con le migliori pratiche. Ricorda: la pratica è la chiave per imparare; provare continuamente, consultare i documenti ufficiali e sviluppare progetti rappresentano i modi più efficaci per migliorare le tue abilità.

FAQ - Domande frequenti

Per sviluppare temi per WordPress è necessario conoscere a fondo PHP?

Sì, è essenziale disporre di una solida conoscenza di PHP. Il core di WordPress è infatti scritto in PHP, e tutti i file di template e le funzioni disponibili richiedono l’utilizzo di questa linguaggio di programmazione. Devi almeno comprendere nozioni di base come variabili, array, funzioni, cicli e condizioni logiche, nonché sapere come interagire con le funzioni specifiche di WordPress e i suoi meccanismi di “hooking” (meccanismi per estendere il funzionamento del sistema).

È possibile modificare le informazioni presenti all’inizio del file `style.css` relativo al tema?

Certo, ma bisogna procedere con cautela. L’informazione “Theme Name” presente nell’intestazione del file rappresenta l’unico identificativo con cui il tema viene riconosciuto dal sistema di WordPress in background. Se modifichi questo valore durante lo sviluppo, WordPress potrebbe considerare il tema come un nuovo tema. Per i temi già in uso su un sito web pubblico, modificare direttamente il nome potrebbe causare problemi: gli utenti potrebbero trovarsi con siti non funzionanti o con impostazioni perse.

Come posso far sì che il mio tema supporti la traduzione in più lingue?

È necessario preparare il tema per l’internazionalizzazione (i18n). Nel codice, tutte le stringhe destinate all’utente devono essere avvolte nelle funzioni di traduzione fornite da WordPress. Ad esempio:__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )Poi, utilizzare uno strumento come Poedit per creare il file di traduzione..potI file di template permettono ai traduttori di generare testi in diverse lingue..po和.moFile. Infine, utilizzare…load_theme_textdomain()Funzione di caricamento delle librerie (function loading).

Qual è la differenza tra un sottotema (subtopic) e un tema principale (parent topic)? Quando utilizzarli?

I sottotemi ereditano tutte le funzionalità e gli stili del tema padre e consentono di modificare in modo sicuro il tema padre, di aggiungere nuove funzionalità o di sovrascrivere gli stili esistenti. Quando si desidera personalizzare in modo approfondito un tema esistente e consolidato (il tema padre), mantenendo al contempo la possibilità di aggiornarlo in futuro senza perdere le modifiche apportate, è consigliabile creare un sottotema. Un sottotema richiede soltanto…style.cssE unofunctions.phpIl file è pronto per essere utilizzato.