La guida definitiva allo sviluppo di temi WordPress: dall'introduzione alla personalizzazione pratica.

Lo sviluppo di temi per WordPress rappresenta il cuore della creazione di siti web personalizzati. A differenza dell’utilizzo di temi pronti, lo sviluppo autonomo permette di avere il pieno controllo sull’aspetto, sulle funzionalità e sulle prestazioni del sito web. Questo guida ti accompagnerà dalle nozioni di base fino alle personalizzazioni più avanzate, illustrando le migliori pratiche e gli strumenti essenziali per lo sviluppo di temi moderni.

Fundamenti e struttura dei temi per WordPress

Un tema WordPress è essenzialmente un insieme di file che definiscono l'aspetto e l'organizzazione di un sito web creato con WordPress./wp-content/themes/I folder presenti nel directory contengono una serie di file specifici che, insieme, determinano l’aspetto visivo (l’interfaccia grafica) del sito web.

Il file che costituisce il nucleo del tema

Ogni tema deve contenere due file di base:style.css和index.phpTra questi,style.cssNon solo contengono i dettagli relativi allo stile grafico del tema, ma le note presenti all’inizio dei file vengono anche utilizzate per comunicare a WordPress le informazioni meta relative al tema stesso.

Si consiglia di leggere Come scegliere e personalizzare il tuo primo tema per WordPress。

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.phpQuesto è il file del modello principale del tema, che funge da modello di riserva predefinito per tutte le richieste di pagina. Il più semplice…index.phpÈ possibile includere soltanto le funzioni di base che richiamano la parte iniziale di WordPress (header), il ciclo principale del codice e la parte finale della pagina (footer).

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

<h2><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h2>

Comprendere la struttura gerarchica dei template

WordPress utilizza una struttura gerarchica intelligente dei template per selezionare il file template più adatto alla visualizzazione dei contenuti. Ad esempio, quando si accede a un singolo articolo, WordPress cerca i file template in base a un ordine di priorità prestabilito:single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.phpPadroneggiare queste regole è la chiave per uno sviluppo efficiente.

Core development technologies and functions

Nello sviluppo di temi per WordPress moderni, si consiglia caldamente l’utilizzo dell’architettura dei “temi a blocchi” (block-based themes). Tuttavia, il metodo tradizionale di sviluppo basato su template PHP e funzioni rimane una competenza fondamentale da padroneggiare.

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

The LoopSi tratta della struttura del codice PHP presente in WordPress, utilizzata per recuperare e visualizzare gli articoli dal database. Costituisce il cuore di tutto il processo di output dei contenuti.

<?php
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        // 模板标签在这里使用，如 the_title(), the_content()
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <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>
        &lt;?php
    }
} else {
    echo &#039;<p>暂无文章。</p>';
}
?&gt;

Integrazione delle funzionalità del menu e della barra laterale

Attraversoregister_nav_menus()È possibile registrare più posizioni per i menu di navigazione all’interno di un tema, ad esempio “Menu principale” e “Menu del piede della pagina”.

Si consiglia di leggere Guida all’intero processo di creazione di siti web: costruire siti professionali ad alte prestazioni partendo da zero。

function my_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主要菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Nel modello, utilizzarewp_nav_menu()La funzione richiama il menu registrato. Per la barra laterale dei gadget, è necessario utilizzarla prima.register_sidebar()Effettua la registrazione e successivamente utilizzala nel modello.dynamic_sidebar()Verrà visualizzato.

Funzionalità tematiche e personalizzazioni avanzate

Una volta completata la costruzione della struttura di base, l’aggiunta di funzionalità e la personalizzazione approfondita tramite i file delle funzioni tematiche (theme functions) e gli hook di WordPress rappresentano la chiave per distinguere un tema ordinario da uno di qualità superiore.

Aggiungere il supporto per i temi tramite un file di funzioni

functions.phpIl file rappresenta il “centro di controllo” del tuo argomento. Qui puoi…add_theme_support()Le funzioni vengono utilizzate per dichiarare le varie funzionalità supportate da un determinato tema.

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

function my_theme_features() {
    // 支持文章和评论的Feed链接
    add_theme_support( 'automatic-feed-links' );
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_features' );

Utilizzare gli action hook e i filter hook

Gli “hook” (ganci) rappresentano il cuore dell’architettura dei plugin per WordPress e sono ampiamente utilizzati anche nello sviluppo di temi (temi grafici per il sito web).add_action()Ti consente di eseguire del codice (hook di azione) in momenti specifici.add_filter()Ti è permesso modificare i dati (utilizzando i “filter hooks”).

Ad esempio, puoi utilizzare…wp_enqueue_scriptsGli “action hooks” vengono utilizzati per caricare in modo sicuro i file di stile e i file di script, evitando di inserirli direttamente nella parte iniziale dei template.

function my_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    // 加载自定义JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Un altro esempio comune è l’utilizzo di…excerpt_lengthUn filtro viene utilizzato per modificare il numero di caratteri predefinito utilizzati per la sintesi dei riassunti degli articoli.

Si consiglia di leggere Guida completa alla creazione di siti web: il processo per costruire un sito professionale da zero e le tecnologie fondamentali。

function my_custom_excerpt_length( $length ) {
    return 30; // 将摘要字数改为30个词
}
add_filter( 'excerpt_length', 'my_custom_excerpt_length' );

Pratiche di sviluppo moderne e ottimizzazione delle prestazioni

Con la diffusione dell’editor di WordPress (Gutenberg) e l’evoluzione delle tecnologie front-end, i metodi di sviluppo dei temi (temi per i siti web) stanno continuando a cambiare.

Adottare temi basati su blocchi e un sistema di editing su tutto il sito web.

A partire da WordPress 5.9, i temi a blocchi (Block Themes) rappresentano la direzione futura dello sviluppo di temi per siti web. I temi a blocchi si basano principalmente sull’uso di file di template HTML.theme.jsonI file di configurazione vengono utilizzati per definire gli stili e le impostazioni globali del sito web, riducendo notevolmente il numero di file di template PHP. Creare uno di questi file permette di gestire in modo centralizzato tutte le caratteristiche estetiche e funzionali del sito, semplificando la manutenzione e la gestione del codice.theme.jsonPer i file, è possibile gestire in modo centralizzato il pannello dei colori, il layout, gli spazi tra gli elementi, e altre impostazioni.

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

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                { "slug": "primary", "color": "#007cba", "name": "主色" },
                { "slug": "secondary", "color": "#1e1e1e", "name": "次色" }
            ]
        }
    }
}

Assicurarsi che il tema sia responsive (adattabile a diversi dispositivi) e che abbia buone prestazioni (veloce da caricare e funzionale su tutti i dispositivi).

Tutti i temi moderni devono essere responsive, il che significa che il CSS utilizzato deve contenere query di media (Media Queries) per adattarsi a diverse dimensioni di schermo. Inoltre, l’ottimizzazione delle prestazioni è di fondamentale importanza.
- 图片优化：使用the_post_thumbnail()Quando si utilizzano tali funzioni, WordPress genera automaticamente immagini responsive (adattative a diversi dispositivi e dimensioni di schermo).srcsetAttributi.
- 脚本与样式管理：如前所述，使用wp_enqueue_script()和wp_enqueue_style()Eseguire la gestione e aggiungere i script nei punti appropriati.async或deferAttributi.
- 减少HTTP请求：合并CSS/JS文件，并利用浏览器缓存。

Riassumendo

Lo sviluppo di temi per WordPress inizia dalla comprensione della struttura di base dei file, per poi passare gradualmente al controllo degli strati dei template, delle funzioni principali e dei cicli di esecuzione, fino all’utilizzo efficace di queste componenti per personalizzare l’aspetto e le funzionalità del sito web.functions.phpIl processo di estensione delle funzionalità tramite l’utilizzo di “hook” (meccanismi di interazione tra componenti). Man mano che lo sviluppo prosegue, è necessario tenere conto delle pratiche moderne, come l’architettura tematica a blocchi (block theme architecture).theme.jsonConfigura il tema in modo appropriato, dando sempre la priorità al design responsivo e alle prestazioni del sito web. Seguendo questi passaggi e le migliori pratiche, sarai in grado di creare temi personalizzati per WordPress che siano funzionali, ben scritti in codice e offrano un’esperienza d’uso eccellente agli utenti.

FAQ - Domande frequenti

Quali sono le conoscenze preliminari necessarie per sviluppare temi per WordPress?

È necessario possedere conoscenze di base di HTML e CSS per costruire la struttura e gli stili delle pagine web. Inoltre, è importante avere una conoscenza di base di PHP, poiché il nucleo di WordPress e il suo sistema di template sono sviluppati principalmente in PHP. La conoscenza di JavaScript, in particolare per interagire con gli editori di blocchi, è sempre più importante nello sviluppo di temi moderni.

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

Il tema padre è un tema WordPress completo e installabile in modo indipendente. I temi figli ereditano tutte le funzionalità e gli stili del tema padre, permettendoti di modificarli e personalizzarli senza dover modificare i file di codice sorgente del tema stesso. Quando desideri apportare modifiche personalizzate a un tema popolare esistente (come Twenty Twenty-Four) mantenendo al contempo la possibilità di ricevere aggiornamenti dal tema padre in modo sicuro, è consigliabile creare e utilizzare un tema figlio.

Come creare un modello di pagina personalizzato all’interno di un tema?

Basta creare un file PHP che inizi con una specifica annotazione del tipo “header”. Ad esempio, per creare un file chiamato…template-custom.php的文件，在文件顶部添加注释/* Template Name: 全宽页面 */Dopo aver salvato i cambiamenti, quando modificherai la pagina nell’interfaccia di back-end di WordPress, potrai vedere e selezionare il template personalizzato “Pagina a larghezza piena” nell’elenco a discesa “Template” delle “Proprietà della pagina”.

Perché il cambio del mio tema non è apparso dopo l’aggiornamento?

Di solito, il problema è dovuto ai meccanismi di cache del browser o di WordPress. Prima di tutto, prova a eseguire un “ricarico forzato” del sito nel browser (solitamente con Ctrl+F5 o Cmd+Shift+R). Se il problema persiste, verifica se stai utilizzando plugin di cache o servizi CDN, e prova a cancellarne i dati di cache. Inoltre, assicurati che tu stia modificando il file del tema corretto e che le modifiche siano state salvate.