La guida definitiva allo sviluppo di temi WordPress: un tutorial completo e le migliori pratiche, dall'inizio all'avanzato.

Fundamenti dello sviluppo di temi per WordPress e configurazione dell’ambiente di sviluppo

Prima di iniziare lo sviluppo di temi per WordPress, è essenziale creare un ambiente di sviluppo locale professionale. Questo non solo migliora l’efficienza dello sviluppo, ma evita anche di causare problemi al sito web online. Si consiglia l’uso di ambienti integrati come XAMPP, MAMP o Local by Flywheel, che offrono una soluzione completa per PHP, MySQL e Apache/Nginx.

Dopo aver configurato l’ambiente, è necessario procedere con l’installazione di WordPress nella directory appropriata.wp-content/themesNella cartella vengono create nuove sottocartelle dedicate ai temi (tema folders). La struttura minima di un tema richiede soltanto due file: il file delle tabelle di stile (style sheet) e un altro file necessario per il funzionamento corretto del tema stesso.style.cssE i file di template principaliindex.php。

style.cssNon si tratta solo di un file di stile: svolge anche la funzione di “carta d’identità” del tema. È necessario inserire delle note con le informazioni relative al tema nella parte iniziale di quel file, in modo che il backend di WordPress possa riconoscere il tuo tema.

Si consiglia di leggere Guida definitiva allo sviluppo di temi per WordPress: un corso completo dall’introduzione alla pratica。

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

index.phpQuesto file rappresenta l’ingresso predefinito del tema e WordPress lo utilizzerà per rendering la pagina in modo prioritario. Anche se all’inizio il contenuto è molto semplice, questo file è comunque essenziale. Dopo aver creato questi due file, potrai visualizzare e attivare il tuo tema nella sezione “Aspetto” -> “Temi” dell’interfaccia di amministrazione di WordPress.

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 la struttura fondamentale dei file relativi al tema in questione.

Un tema WordPress completo e funzionale segue una struttura dei file standard, il che facilita l’organizzazione e la manutenzione del codice. Oltre a questo…style.css和index.phpEcco alcuni altri file chiave:

functions.phpSi tratta del “motore” su cui si basa il tema; non si tratta di uno script che viene eseguito direttamente nel browser, ma di un file che viene caricato automaticamente dal nucleo di WordPress. Tutte le funzionalità aggiuntive del tema – come il menu di registrazione, le barre laterali, le funzionalità per l’aggiunta di supporto al tema, nonché il caricamento di script e stili – avvengono proprio in questo file.

header.php和footer.phpSono rispettivamente responsabili della parte iniziale (“header”) e della parte finale (“footer”) del sito web.get_header()和get_footer()Le funzioni possono essere utilizzate per essere introdotte in altri file di template, al fine di riprodurre il codice in modo più efficiente e ridurre la duplicazione dello stesso.

page.phpUtilizzato per rendere pagine statiche.single.phpUtilizzato per rendere un singolo articolo.archive.phpUtilizzato per rendere pagine di archiviazione contenenti categorie, etichette e altri elementi simili. La struttura gerarchica dei template in WordPress determina quale file di template venga automaticamente selezionato in base al tipo di richiesta ricevuta dal sistema.

Si consiglia di leggere Una guida completa per creare un tema WordPress ad alte prestazioni da zero.。

Sistema di templating e livelli di templating

Il sistema di templati di WordPress si basa su un insieme di regole gerarchiche ben definite, note come “Template Hierarchy” (Gerarchia dei Template). Queste regole determinano quale file di template WordPress dovrà cercare e caricare automaticamente quando si accede a una pagina specifica. Comprendere queste regole è fondamentale per lo sviluppo efficiente di temi per WordPress.

Ad esempio, quando si visita un articolo di un blog, WordPress cerca i file dei template nell’ordine seguente:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.phpUtilizzerà il primo file disponibile che trova. Questo significa che è possibile creare modelli altamente personalizzati per tipi di articoli specifici, o addirittura per un singolo articolo in particolare.

Creare e utilizzare modelli di pagina personalizzati

Oltre ai modelli predefiniti dal sistema, è possibile creare modelli di pagina personalizzati e applicarli a qualsiasi pagina si desideri. Questo offre una grande flessibilità nella progettazione di layout di pagina unici.

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

Per creare un modello di pagina personalizzato, è necessario aggiungere blocchi di commenti PHP specifici all’inizio del file del modello. Ad esempio, per creare un modello chiamato “Pagina a larghezza piena”, è possibile creare un nuovo file con il seguente contenuto:template-fullwidth.phpE scrivere all’inizio:

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

Dopo aver completato la scrittura del codice, quando modifichi la pagina nell’interfaccia di back-end di WordPress, troverai nell’elenco a discesa “Template” delle “Proprietà della pagina” l’opzione “Pagina a larghezza piena”. Selezionandola e aggiornando la pagina, essa verrà visualizzata utilizzando il template che hai personalizzato.

Utilizzare i tag condizionali per generare contenuto dinamico.

Le “Etichette Condizionali” (Conditional Tags) sono un insieme di funzioni booleane fornite da WordPress, utilizzate per verificare se la pagina attuale soddisfa una determinata condizione. Vengono ampiamente impiegate nei file di template per controllare in modo dinamico la visualizzazione dei contenuti.

Si consiglia di leggere Guida allo sviluppo di temi WordPress: creare un'interfaccia di sito web personalizzata da zero.。

Ad esempio,is_front_page()Verificare se si tratta della pagina iniziale di un sito web.is_single()Verificare se si tratta di una pagina contenente un unico articolo.is_page()Verificare se una pagina è statica.is_archive()判断是否为任何归档页。通过它们，你可以用简单的if语句为不同页面定制不同的逻辑和输出。

<?php if ( is_front_page() ) : ?>
    <h1>Benvenuti sulla nostra homepage!</h1>
<?php elseif ( is_single() ) : ?>
    <h1><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h1>
    <div class="post-meta">发布时间：</div>
<?php endif; ?>

Funzionalità tematiche e funzioni principali

functions.phpI file rappresentano il punto di convergenza delle funzionalità relative ai temi (temi di WordPress). Qui è possibile espandere i contenuti dei temi in modo sicuro, senza dover modificare i file principali di WordPress stesso.

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

Registra il menu di navigazione e la barra laterale.

WordPress consente ai temi di specificare le posizioni dei menu di navigazione che supportano, e questo avviene tramite…register_nav_menus()Implementazione delle funzioni. Di solito, noi…functions.phpUtilizzare un elemento montato su…after_setup_themeLa funzione deve essere eseguita tramite il “gancio” (hook) specificato.

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

Dopo l’iscrizione, gli utenti possono assegnare i menu a queste due posizioni nella sezione “Aspetto” -> “Menu”. Nella template, utilizzare…wp_nav_menu( array( 'theme_location' => 'primary' ) )Per visualizzare il menu…

La registrazione nella barra laterale (o “area degli strumenti”) avviene in modo simile.register_sidebar()Successivamente, l’utente può aggiungere vari widget in queste aree tramite “Aspetto” -> “Widget”.

Aggiungere il supporto alla funzionalità dei temi.

Molte funzionalità dei temi WordPress moderni richiedono una dichiarazione esplicita di supporto da parte dell’utente. Ad esempio, per consentire agli articoli e alle pagine di avere immagini caratteristiche ( miniature), è necessario abilitare il relativo supporto. Lo stesso vale per altre funzionalità simili.functions.phpViene completato nella funzione di inizializzazione.

function mytheme_setup() {
    // ... 其他设置代码
    add_theme_support( 'post-thumbnails' ); // 支持特色图像
    add_theme_support( 'title-tag' ); // 让WordPress管理标题标签
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 支持HTML5标记
}

Introdurre script e stili in modo sicuro

Inserire correttamente i file CSS e JavaScript nella coda di elaborazione è una buona pratica per lo sviluppo su WordPress: evita conflitti tra i vari componenti del sito e il caricamento ripetuto dei file stessi.wp_enqueue_style()和wp_enqueue_script()Funzioni, e assicurarsi che vengano montate (ovvero che siano disponibili per l’uso).wp_enqueue_scriptsSul gancio.

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' );

Advanced Theme Development Techniques

Una volta acquisite le basi, alcune tecniche avanzate possono rendere il tuo tema più potente e professionale.

Creare sottotemi per personalizzazioni.

Modificare direttamente il tema principale è pericoloso e non sostenibile, poiché le aggiornamenti del tema sovrascriveranno tutte le tue modifiche. Il metodo corretto è creare un sottotema. Un sottotema contiene soltanto i file personalizzati che hai creato tu stesso.style.css、functions.phpE i file di template che vengono sovrascritti; inoltre, eredita tutte le funzionalità del tema padre.

sottotematicostyle.cssLe note in testa devono contenere…Template:“Linea”, utilizzata per specificare il nome della directory del tema padre.

/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/

sottotematicofunctions.phpVerrà caricato prima del tema principale; puoi aggiungere o modificare funzionalità qui.

Utilizzare WordPress per visualizzare i contenuti in modo ciclico (ossia ripetuto più volte all’interno della pagina).

“The Loop” è una struttura di codice PHP presente nei template di WordPress che permette di recuperare e visualizzare più contenuti dal database. Costituisce il nucleo di quasi tutte le pagine generate da tali template.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article>
        <h2><a href="/it/</?php the_permalink(); ?>"><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></a></h2>
        <div><?php the_excerpt(); ?></div>
    </article>
<?php endwhile; endif; ?>

Nel ciclo, è possibile utilizzare una serie di tag di template, come…the_title()、the_content()、the_excerpt()、the_permalink()Ecco le informazioni sull’articolo attuale:

Implementare la funzionalità di personalizzazione dei temi

Il WordPress Customizer consente agli utenti di visualizzare in tempo reale e modificare alcune impostazioni del tema (come i colori, il logo). È possibile farlo tramite…functions.phpAggiungi opzioni personalizzate al tuo tema.

Questo implica l’utilizzo di…WP_Customize_ManagerPer aggiungere impostazioni, controlli e blocchi, si utilizzano delle classi. Sebbene il codice sia relativamente complesso, offre all’utente un’esperienza di personalizzazione fluida e senza interruzioni. Di solito, si inizia creando una “panella” (un elemento grafico che racchiude tutti gli elementi principali), poi si aggiungono diverse sezioni all’interno di questa panella, e infine, all’interno di ciascuna sezione, vengono specificate le impostazioni e i controlli desiderati.

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置
    $wp_customize->add_setting( 'header_color', array(
        'default' => '#ffffff',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );
    // 添加一个控件来控制这个设置
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label' => __( '头部背景色', 'my-first-theme' ),
        'section' => 'colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Poi, all’interno del template, utilizzate…get_theme_mod( 'header_color' )Per ottenere i valori impostati dall’utente e applicarli alla pagina.

Riassumendo

Lo sviluppo di temi per WordPress inizia dalla comprensione della struttura di base dei file, per poi approfondire il sistema di templati e le funzioni disponibili, fino a padroneggiare tecniche di personalizzazione avanzate. Un sviluppatore di successo non solo deve conoscere bene PHP, HTML, CSS e JavaScript, ma deve anche avere una profonda comprensione dei concetti fondamentali di WordPress, come la gerarchia dei templati, i cicli, gli “hook” e le funzioni. È importante seguire le migliori pratiche, ad esempio utilizzando i sottotemi (subthemes) e altre strategie di organizzazione del codice.functions.phpAggiungere funzionalità e integrare elementi di sicurezza nello stile del codice script permette di garantire che il tema creato sia stabile, efficiente e facile da mantenere. Con la pratica costante, sarai in grado di sviluppare temi WordPress potenti e professionali in grado di soddisfare le esigenze più varie.

FAQ - Domande frequenti

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

Sì, PHP è la lingua fondamentale per lo sviluppo di temi per WordPress. È necessario padroneggiare la grammatica di base di PHP e comprendere come inserire codice PHP all’interno di HTML al fine di generare contenuti in modo dinamico. Sebbene le tecnologie front-end (HTML, CSS, JavaScript) siano altrettanto importanti, tutte le interazioni con i dati di WordPress, le operazioni di valutazione logica e le estensioni delle funzionalità sono possibili solo grazie a PHP.

Il file `style.css` relativo al tema può essere rinominato con un altro nome.

No.style.cssQuesto nome di file è obbligatorio per che WordPress riconosca il tema e i suoi metadati (come il nome del tema, la versione, l’autore). Devi utilizzare esattamente questo nome di file e posizionarlo nella directory radice del tema. Tuttavia, puoi…functions.phpIntroduce altri file CSS aggiuntivi per organizzare il tuo codice di stile.

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

È fondamentale rendere i propri temi compatibili con l’internazionalizzazione (i18n). Durante lo sviluppo, è necessario avvolgere tutte le stringhe di testo destinate all’utente all’interno di funzioni di traduzione apposite.__( ‘文本’, ‘text-domain’ )或_e( ‘文本’, ‘text-domain’ )Nello stesso tempo,style.cssI commenti in testa devono essere impostati correttamente.Text DomainE inoltre…functions.phpUtilizzare nel contestoload_theme_textdomain()Esiste una funzione per caricare i file di traduzione. Una volta completato il processo, i traduttori possono utilizzare strumenti come Poedit per creare le traduzioni definitive..po和.moFile da tradurre.

Perché il mio template personalizzato non appare nell’elenco a discesa delle proprietà della pagina?

Assicurati di aver aggiunto correttamente il blocco di commenti PHP conforme agli standard di formattazione nella parte iniziale del file del template personalizzato. Il blocco di commenti deve contenere la riga “Template Name:”. Inoltre, il file deve trovarsi nella directory principale o in una sottodirectory del tema utilizzato. Controlla anche se il file presenta errori di sintassi, poiché questi potrebbero impedire a WordPress di leggere correttamente le informazioni relative all’inizio del file. Assicurati di essere in modalità di modifica di un “template per pagine” e non di un “articolo”, poiché i template personalizzati sono validi esclusivamente per le pagine.

È corretto scrivere direttamente le query SQL all’interno del tema per ottenere i dati?

Questa è una pratica fortemente sconsigliata. Scrivere direttamente le query SQL permette di aggirare i meccanismi di sicurezza fondamentali di WordPress (come la pulizia dei dati, la cache e i controlli di accesso), aumentando il rischio di vulnerabilità (ad esempio, gli attacchi di tipo SQL injection). Inoltre, potrebbe causare incompatibilità con le strutture dei database nelle future versioni di WordPress. È sempre consigliabile utilizzare le API e le funzioni fornite da WordPress per ottenere i dati.WP_QueryClassi…get_posts()、get_pages()Ecco, sono più sicuri, più efficienti e più facili da mantenere.