Imparare gradualmente lo sviluppo di temi per WordPress: una guida completa dall’introduzione alla pratica

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

Prima di iniziare a scrivere qualsiasi codice, è fondamentale creare un ambiente di sviluppo solido e affidabile. Un ambiente di sviluppo professionale non solo migliora l’efficienza, ma aiuta anche a seguire le migliori pratiche. Per lo sviluppo di temi per WordPress, consigliamo caldamente l’uso di strumenti di sviluppo locali come Local by Flywheel, XAMPP o MAMP. Questi strumenti permettono di simulare un ambiente server completo sul proprio computer personale, includendo PHP, MySQL e Apache/Nginx.

Successivamente, dovrai installare una nuova versione di WordPress nel tuo ambiente locale. Questo garantisce che il tuo lavoro di sviluppo non influisca sul sito web online e ti permette di eseguire test e debug in totale libertà. Una volta completata l’installazione, dovresti passare alla fase fondamentale dello sviluppo di un tema: comprendere la struttura dei suoi file. Un tema standard per WordPress deve contenere almeno due file:style.css和index.phpTra questi,style.cssI file non sono soltanto fogli di stile (style sheets); il loro ruolo più importante è fornire informazioni meta (meta-information) al tuo tema.

Hai bisogno di…style.cssNel blocco di commenti in cima al file vengono definiti il nome del tema, l’autore, la descrizione, il numero di versione e la licenza. Questo è l’unico modo per cui WordPress riesce a riconoscere il tuo tema. Ecco un esempio di informazioni di base da inserire nella parte iniziale del file dello stile (style sheet):

Si consiglia di leggere Vuoi imparare a sviluppare temi per WordPress? Una guida pratica completa per passare da principiante a esperto.。

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: A custom WordPress theme built from scratch.
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Oltre ai due file essenziali menzionati, un tema completo e funzionale di solito include anche altri file di template.header.php、footer.php、sidebar.phpE inoltrefunctions.phpPuoi creare una nuova cartella (ad esempio “my-custom-theme”) all’interno della directory wp-content/themes per conservare questi file. Infine, non dimenticare di attivare il tema appena creato nella sezione “Aspetto” -> “Temi” dell’interfaccia di amministrazione di WordPress: questo sarà il punto di partenza per tutti i lavori di sviluppo successivi.

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

File di template principali e struttura gerarchica dei temi

Il motivo per cui il sistema di temi di WordPress è così potente è, in gran parte, dovuto alla sua chiara struttura gerarchica dei template. Questa struttura determina quale file di template PHP WordPress utilizzerà automaticamente per rendere il contenuto delle diverse tipologie di pagine presenti sul sito. Comprendere questa gerarchia è fondamentale per creare temi flessibili e funzionali.

Il file di template più basilare è…index.phpÈ il file di riserva finale per tutte le pagine del sito web. Se WordPress non trova un template più specifico, utilizza questo file di riserva. Tuttavia, per ottenere diversi layout per il sito, creiamo template più personalizzati. Ad esempio, quando si accede all’elenco degli articoli del blog (la pagina iniziale), WordPress cerca innanzitutto i template specifici per quella pagina.front-page.php或home.phpQuando si accede a un singolo articolo di un blog, il sistema cerca…single.phpQuando si accede a una pagina statica, il sistema cerca…page.php。

Per modularizzare il contenuto delle pagine, abbiamo utilizzato…get_header()、get_footer()和get_sidebar()Utilizza tag di template per includere le parti comuni del codice. Questo significa che…header.phpIl file dovrebbe contenere l’intero codice HTML all’inizio del sito web, fino al punto in cui inizia la sezione principale dei contenuti. Di solito, questo include…<head>Alcuni elementi, il logo del sito web e il menu di navigazione principale.footer.phpQuindi, vengono inclusi tutti i contenuti presenti dopo la fine del corpo principale del testo, come le informazioni sul copyright, l’importazione dei script, ecc.

Un esempio tipico…index.phpLa struttura del file è la seguente:

Si consiglia di leggere Guida definitiva allo sviluppo di temi per WordPress: dalle principi alle pratiche pratiche。

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 显示每篇文章的内容
        endwhile;
    else :
        // 没有找到文章时的内容
    endif;
    ?>
</main>

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

Creare un modello di pagina personalizzato.

A volte, potrebbe essere necessario progettare un layout completamente diverso per una pagina specifica. In questi casi, è possibile creare un modello di pagina personalizzato. Basta aggiungere un blocco di commenti specifico all’inizio di qualsiasi file di template PHP per dichiararlo come modello di pagina. Ad esempio, per creare un modello chiamato “Pagina a larghezza piena”:

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

Salva questo file come…template-fullwidth.phpSuccessivamente, quando si modifica la pagina nell’interfaccia di back-end di WordPress, è possibile selezionare l’opzione “Pagina a larghezza piena” dal menu a discesa “Template” all’interno delle “Proprietà della pagina”.

Funzionalità tematiche e cicli in WordPress

functions.phpIl file rappresenta la “cabina di controllo” del tuo tema: viene utilizzato per aggiungere funzionalità specifiche al tema, configurare il menu di registrazione, gestire l’area degli strumenti (widget), abilitare l’utilizzo di immagini di rappresentazione, nonché per gestire l’ordine di caricamento dei file di stile (style sheet) e dei file di script. Questo file viene caricato automaticamente all’avvio del tema. Grazie alle varie funzionalità offerte da WordPress, è possibile personalizzare in modo efficace l’aspetto e le funzionalità del tuo sito web.add_theme_support()Funzioni e “hook” (meccanismi di interazione): puoi espandere notevolmente le capacità di un tema (un insieme di componenti grafici e funzionalità predefiniti).

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

Una funzione fondamentale è quella di permettere la registrazione dei menu di navigazione. Questo consente agli amministratori del sito di gestire i contenuti dei menu tramite l’interfaccia “Aspetto” -> “Menu” presente nell’area di back-end. Devi quindi…functions.phpUtilizzare nel contestoregister_nav_menus()Una funzione viene utilizzata per dichiarare la posizione degli elementi del menu.

function my_custom_theme_setup() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-custom-theme' ),
            'footer'  => __( '页脚菜单', 'my-custom-theme' ),
        )
    );
    // 启用文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 为文章摘要添加支持
    add_theme_support( 'excerpt' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Comprendere e utilizzare i cicli (loop) in WordPress

L’output di tutto il contenuto dinamico ruota attorno al “loop di WordPress”. Si tratta di una struttura di codice PHP che verifica se la pagina attuale contiene articoli (o pagine) da visualizzare; in caso affermativo, esegue un ciclo che percorre ciascun articolo e ne visualizza il contenuto. Questo ciclo rappresenta il cuore del file di template. Ecco un esempio…index.php或archive.phpEsempio di ciclo standard utilizzato in…

<?php if ( have_posts() ) : ?>
    <div class="posts-list">
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
                <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-meta">
                    <?php the_time( 'Y年m月d日' ); ?>
                </div>
                <div class="entry-content">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        <?php endwhile; ?>
    </div>
    
    <p><?php _e( '抱歉，没有找到符合条件的文章。', 'my-custom-theme' ); ?></p>
<?php endif; ?>

All’interno del ciclo, è possibile utilizzare una serie di tag di template.the_title()、the_content()、the_excerpt()和the_permalink()Per visualizzare le varie informazioni dell'articolo. Nella pagina dell'articolo singolo (single.phpNel contesto in cui ti trovi, di solito utilizzi…the_content()Per ottenere il contenuto completo dell'articolo.

Si consiglia di leggere Guida all’approccio allo sviluppo di temi per WordPress: un corso completo per passare da principiante a esperto。

Personalizzazione degli stili, degli script e dei temi

Un tema WordPress moderno deve gestire correttamente l’importazione dei file CSS e JavaScript, tenendo conto anche delle esigenze di personalizzazione da parte degli utenti. La pratica migliore consiste nel…wp_enqueue_style()和wp_enqueue_script()Esistono funzioni per gestire la sequenza di caricamento dei risorse, il che permette di garantire che le dipendenze tra i vari elementi vengano rispettate correttamente e di evitare il caricamento ripetuto delle stesse risorse.

Hai bisogno di…functions.phpCrea una funzione all’interno di… e utilizzala.wp_enqueue_scriptsOccorre utilizzare un “gancio” per montarlo.

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

function my_custom_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Implementare il supporto per i personalizzatori

Il personalizzatore di temi per WordPress è uno strumento molto potente che consente agli utenti di visualizzare in tempo reale e modificare alcune impostazioni del tema, come il titolo del sito, i colori, l’immagine di sfondo, ecc. Integrando le impostazioni del tuo tema nel personalizzatore, è possibile migliorare notevolmente l’esperienza di utilizzo del sito.

Per implementare il supporto per i personalizzatori, è necessario utilizzare principalmente…WP_Customize_ManagerClasse… Puoi…functions.phpCrea una funzione che, tramite…customize_registerGli “hook” (ganci) vengono utilizzati per aggiungere impostazioni e controlli. Ad esempio, per aggiungere un’opzione che permetta di modificare il colore dello sfondo:

function my_custom_theme_customize_register( $wp_customize ) {
    // 添加一个设置项（存储在数据库中）
    $wp_customize->add_setting( 'background_color', array(
        'default'           => '#ffffff',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 支持实时预览
    ) );
    // 添加一个颜色选择器控件（显示在定制器界面）
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
        'label'    => __( '背景颜色', 'my-custom-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_custom_theme_customize_register' );

Poi, devi…header.phpOppure all’interno di uno stile inline.get_theme_mod()La funzione ottiene questo valore e lo visualizza in formato CSS.

<style type="text/css">
    body {
        background-color: <?php echo esc_attr( get_theme_mod( 'background_color', '#ffffff' ) ); ?>;
    }
</style>

Riassumendo

Lo sviluppo di temi per WordPress è un processo graduale che inizia dalla configurazione dell’ambiente di lavoro, dalla comprensione della struttura dei template, dalla scrittura delle funzionalità principali fino all’implementazione delle interazioni con l’utente. È fondamentale acquisire dimestichezza con tutte le fasi di questo processo, a partire dalla creazione dei componenti più basilari…style.css和index.phpDall’inizio del file fino all’uso abile dei tag dei template e dei cicli di WordPress per generare contenuti dinamici, si stabilisce la base fondamentale per creare temi personalizzati.functions.phpLa funzionalità di registrazione dei file, i menu e gli strumenti aggiuntivi, nonché l’utilizzo corretto del sistema wp_enqueue per l’introduzione dei risorse necessarie, contribuiscono a garantire la stabilità e le prestazioni del tema. Infine, l’integrazione delle opzioni del tema all’interno del WordPress Customizer offre agli amministratori del sito un’interfaccia di configurazione intuitiva e facile da utilizzare, migliorando notevolmente la professionalità e l’usabilità del tema stesso. Seguendo questi principi fondamentali e passaggi, sarà possibile creare un tema WordPress potente, flessibile nel design e in linea con gli standard moderni, partendo da zero.

FAQ - Domande frequenti

Per sviluppare temi per WordPress è necessario imparare PHP?

Sì, conoscere PHP è una competenza essenziale per lo sviluppo di temi per WordPress. Il nucleo principale di WordPress è scritto in PHP, e tutti i file di template (.php) utilizzano codice PHP per generare dinamicamente il contenuto HTML, chiamare le funzioni di WordPress e gestire i dati. È possibile utilizzare strumenti di creazione di pagine per progettare la struttura delle pagine, ma per avere un controllo approfondito sulla struttura del tema, sulle sue funzionalità e sulla logica personalizzata, è fondamentale padroneggiare bene PHP.

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

Per rendere il tuo tema compatibile con più lingue, è necessario prepararlo per l’internazionalizzazione (i18n). Il metodo principale consiste nell’utilizzare le funzioni di traduzione fornite da WordPress per incapsulare tutte le stringhe che vengono visualizzate agli utenti all’interno del tema. La funzione più comune per questo scopo è…()Utilizzato per visualizzare la stringa tradotta.()Utilizzato per restituire la stringa tradotta. È necessario che…functions.phpUtilizzare nel contestoload_theme_textdomain()Esistono funzioni per caricare i file di traduzione. Successivamente, è possibile utilizzare software come Poedit per creare i file di template .pot, i quali vengono poi utilizzati dai traduttori per generare i file .mo per la lingua desiderata (ad esempio, zh_CN). È anche importante assicurarsi che…style.cssNel dominio del testo (Text Domain) e in tutte le chiamate alle funzioni di WordPress, è consigliabile utilizzare lo stesso dominio del testo; di solito, questo corrisponde al nome della directory del tuo tema.

Come posso far sì che il mio tema soddisfi i requisiti ufficiali di WordPress e venga inviato al repository dei temi?

Per rendere il tuo tema conforme ai requisiti e inviarlo alla directory ufficiale dei temi di WordPress, è necessario rispettare rigorosamente gli standard di revisione dei temi. Ciò include: il codice deve seguire gli standard di codifica di WordPress e le migliori pratiche PHP; assicurarsi che il tema sia sicuro e che tutti i dati dinamici siano correttamente evasi e disinfettati; la funzionalità deve essere completa e non dipendere da plug-in di terze parti specifici per funzionare; il codice front-end deve essere reattivo e accessibile; è necessario utilizzare una licenza open source GPLv2 o versione successiva. Durante lo sviluppo, puoi utilizzare il plug-in Theme Check per una revisione preliminare. Prima dell'invio, leggi attentamente il manuale ufficiale di sviluppo dei temi e la lista di controllo della revisione, quindi procedi tramite la pagina di invio del sito web di WordPress.

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

Il tema “padre” (parent theme) è un tema WordPress completo e indipendente, dotato di tutte le funzionalità necessarie. Il tema “figlio” (child theme), invece, si basa su un tema padre specifico: eredita tutte le funzionalità, gli stili e i file di template del tema padre e consente di modificare o aggiungere nuove funzionalità senza dover modificare i file del tema padre stesso. Quando si desidera personalizzare un tema esistente (soprattutto uno popolare o basato su un framework), è consigliabile utilizzare un tema figlio. Il vantaggio principale di questo approccio è che, in caso di aggiornamenti del tema padre, il codice personalizzato (presente nel tema figlio) non verrà perso e il processo di aggiornamento avverrà in modo sicuro. Per creare un tema figlio, è sufficiente utilizzare un file che contenga le informazioni di intestazione (header) necessarie.style.cssFile, e tramite…@importOppure, i stili del tema principale possono essere caricati tramite la procedura di inserimento in coda (queueing).