Tutorial completo per lo sviluppo di temi WordPress: creare un tema personalizzato da zero.

Preparativi e allestimento dell'ambiente.

Prima di iniziare a scrivere il codice, è essenziale disporre di un ambiente di sviluppo locale stabile ed efficiente. Questo non solo ti permette di effettuare test senza influenzare il sito web online, ma aumenta anche notevolmente l’efficienza dello sviluppo.

Configurazione dell’ambiente di sviluppo locale

Si consiglia di utilizzare strumenti di sviluppo locali integrati, come Local by Flywheel, XAMPP o MAMP. Questi strumenti installano in un solo passo PHP, MySQL e i server web necessari per il funzionamento di WordPress (ad esempio Apache o Nginx). Prendendo Local by Flywheel come esempio, offre un’interfaccia intuitiva per creare e gestire facilmente più siti WordPress, nonché funzionalità utili come la possibilità di passare da un sito all’altro, l’attivazione automatica di HTTPS (SSL) e la cattura delle email, rendendolo particolarmente adatto allo sviluppo di temi per WordPress.

Scegliere un editor di codice e gli strumenti appropriati è fondamentale per un lavoro efficace nello sviluppo software. Ecco alcuni aspetti da considerare:

Un potente editor di codice rappresenta uno strumento essenziale per gli sviluppatori. Visual Studio Code (VS Code) è molto popolare grazie alla sua leggerezza, alla sua gratuità e all’ampia gamma di estensioni disponibili. Per lo sviluppo di temi per WordPress, si consiglia di installare le seguenti estensioni: PHP Intelephense (che offre funzionalità di riconoscimento intelligente del codice PHP e suggerimenti automatici), WordPress Snippet (che contiene numerosi frammenti di codice per le funzioni utilizzate in WordPress), nonché estensioni dedicate ai linguaggi di pre-elaborazione del CSS (come Sass). Inoltre, l’utilizzo di Git per la gestione del controllo delle versioni rappresenta lo standard del settore per la gestione dei cambiamenti nel codice, la collaborazione tra sviluppatori e il ripristino delle versioni precedenti.

Si consiglia di leggere Sviluppo di temi per WordPress: Da principianti a esperti: Una guida completa per la creazione di temi personalizzati。

Creare la struttura di base di un tema e i file principali

Un tema WordPress è essenzialmente un insieme di file che definiscono l'aspetto e il funzionamento di un sito web WordPress. /wp-content/themes/ I folder presenti nel directory contengono una serie di file specifici; questi file insieme definiscono l’aspetto e le funzionalità del sito web.

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 informazioni sul tema

Ogni argomento deve contenere un elemento chiamato… style.css Il file in questione non serve soltanto a definire gli stili grafici (i “style”), ma è soprattutto importante perché, nella parte iniziale del file, tramite blocchi di commenti specifici, vengono dichiarati i metadati del tema a WordPress. Questo è fondamentale affinché WordPress possa riconoscere correttamente il tema stesso.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始构建的 WordPress 自定义主题，用于学习主题开发。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
*/

Tra questi,Text Domain Utilizzato per l’internazionalizzazione (i18n) e per l’utilizzo successivo di funzioni di traduzione (come…) __() 或 _e()Questo è l’identificatore che deve essere utilizzato quando si esegue l’operazione.

File del modello principale

Oltre a… style.cssUn altro file necessario è… index.phpÈ il modello predefinito di un tema; viene utilizzato automaticamente da WordPress quando non riesce a trovare file di modelli più specifici. Tuttavia, un tema completo e funzionale include una serie di file di modelli che permettono di controllare in modo preciso l’aspetto delle diverse pagine del sito.

• header.phpDefinire l’area del titolo (header) di un sito web, che di solito contiene: <!DOCTYPE html> Dichiarazione,<head> “Parte e inizio” <body> E il menu principale.
• footer.phpDefinire l’area del piede di pagina di un sito web, che di solito contiene informazioni sul copyright, l’inclusione dei script e i relativi tag di chiusura. <p>Io non sono un'attrice.</p><p>Questo testo è stato tradotto automaticamente.</p> Tag.
• functions.phpQuesto è il “Centro di funzionalità” del tema, utilizzato per aggiungere caratteristiche al tema stesso, creare menu di registrazione, gestire le barre laterali, nonché per importare file di stili (CSS) e script.
• page.phpUtilizzato per visualizzare una singola pagina.
• single.phpUtilizzato per visualizzare un singolo articolo di blog.
• archive.phpUtilizzato per visualizzare l’elenco degli archivi degli articoli (ad esempio, archiviati per categoria, tag o data).
• front-page.phpUtilizzato per personalizzare la pagina iniziale del sito web.
• style.cssFile di stile principale.

Costruire una funzionalità per la creazione di temi e un sistema di template

WordPress utilizza un sistema a livelli di template per determinare quale file di template utilizzare per la pagina richiesta. Comprendere e sfruttare questo sistema è fondamentale per creare temi flessibili.

Si consiglia di leggere Creare un sito web perfetto: Una guida completa per costruire un tema personalizzato per WordPress da zero。

Dettagliato approfondimento sui file delle funzioni tematiche

functions.php Il file viene eseguito automaticamente al caricamento del tema. Uno dei suoi compiti principali è utilizzare… wp_enqueue_style() 和 wp_enqueue_script() Le funzioni vengono utilizzate per importare correttamente i risorse necessarie. Questo è il metodo raccomandato ufficialmente da WordPress: permette di gestire le dipendenze, evitare il caricamento ripetuto dei file e controllare il momento in cui avviene il loro caricamento.

function my_theme_enqueue_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_enqueue_scripts' );

Inoltre, è necessario registrarsi anche per attivare le funzionalità di supporto ai temi, come le miniature degli articoli, la posizione personalizzabile dei menu e il formato degli articoli.

function my_theme_setup() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
    // 支持 HTML5 标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Template tags and loops

I tag di template sono funzioni PHP fornite da WordPress, utilizzate per generare dinamicamente il contenuto all’interno dei file di template. Il più importante di questi tag è “The Loop”, che rappresenta un blocco di codice PHP utilizzato per verificare se la pagina attuale contiene articoli e per visualizzarli uno per uno.

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

在 index.php 或 single.php Nel codice, la struttura di base di un ciclo è la seguente:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article>
        <h2><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h2>
        <div class="entry-content">
            <p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p>
        </div>
    </article>
<?php endwhile; else : ?>
    <p><p><strong>Spiacente, non è stato trovato alcun contenuto.</strong></p></p>
<?php endif; ?>

Questo, qui,the_title() 和 the_content() Si tratta di tag di template che, rispettivamente, visualizzano il titolo e il contenuto principale dell’articolo corrente. Altri tag di template comunemente utilizzati includono… the_permalink()(Link all’articolo)the_post_thumbnail()(Immagine caratteristica) E the_author()(L’autore) e altri.

Realizzare un design responsivo e funzionalità avanzate.

I siti web moderni devono essere ben visualizzabili su diversi dispositivi. Inoltre, al fine di migliorare la robustezza e la manutenibilità dei temi (i layout grafici utilizzati per la presentazione dei contenuti), è necessario adottare alcune pratiche di sviluppo avanzate.

Si consiglia di leggere Guida pratica completa all’approfondimento dello sviluppo di temi per WordPress: dall’introduzione alla maestria。

Utilizzare CSS per realizzare un layout responsivo.

Il cuore del design responsivo sono le query di media (Media Queries). È possibile utilizzarle per… style.css Vengono definite regole di stile diverse in base alla larghezza dello schermo. Un modello comune è quello basato sull“”priorità per i dispositivi mobili” (mobile-first): si inizia scrivendo lo stile di base per i dispositivi mobili e successivamente si aggiungono gradualmente regole di stile per schermi più grandi che ne sovrappongono i valori.

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}
/* 中等屏幕（平板，768px 及以上） */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}
/* 大屏幕（桌面，992px 及以上） */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Introdurre sottotemi per personalizzazioni

Modificare direttamente il codice del tema padre (quello che stai sviluppando) comporta rischi: quando il tema padre viene aggiornato, le tue modifiche verranno sovrascritte. La funzionalità dei temi figli in WordPress risolve perfettamente questo problema. I temi figli ereditano tutte le funzionalità del tema padre, ma ti permettono di modificare soltanto i file che desideri modificare. style.css、functions.php Oppure un file di template).

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

Creare un sottotema è molto semplice: basta… /wp-content/themes/ Crea una nuova cartella e poi crea un file che contenga le seguenti informazioni di intestazione: style.css File, tra cui… Template: La riga deve specificare il nome della directory del tema padre.

/*
Theme Name: 我的自定义主题 - 子主题
Template: my-custom-theme
*/

Poi, nel sottotema… functions.php In questo modo, è possibile aggiungere nuove funzionalità o modificare quelle esistenti in modo sicuro, senza dover modificare il codice del tema principale. Questa rappresenta una strategia di personalizzazione e aggiornamento potente e sicura all’interno dell’ecosistema dei temi WordPress.

Riassumendo

Sviluppare un tema personalizzato per WordPress da zero rappresenta un progetto complesso che richiede da parte dello sviluppatore una solida conoscenza non solo delle tecnologie front-end come PHP, HTML, CSS e JavaScript, ma anche una profonda comprensione dei concetti fondamentali di WordPress, come la struttura dei template, i cicli di esecuzione, i tag utilizzati nei template e il sistema di “hook” (meccanismi di integrazione tra moduli). Per iniziare, è necessario creare un ambiente di sviluppo locale, definire la struttura dei file di base del tema e… functions.php Rafforzando le funzionalità esistenti, creando un sistema di template e applicando infine un design responsive nonché strategie per la personalizzazione dei temi, è possibile costruire gradualmente un tema di alta qualità che sia in linea con gli standard e risponda alle esigenze individuali degli utenti. Questo processo non rappresenta soltanto una pratica tecnica, ma anche un’esperienza approfondita della flessibilità e delle potenzialità di espansione offerte da WordPress.

FAQ - Domande frequenti

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

Sì, avere una solida conoscenza di PHP è una condizione necessaria per sviluppare in modo approfondito i temi per WordPress. Poiché WordPress è scritto in PHP, tutti i file di template (come…) page.php, single.php) e i file contenenti le funzionalità principali. functions.php Sono tutti script scritti in PHP. È necessario utilizzare PHP per chiamare le funzioni di WordPress (tag di template e API), elaborare i dati e gestire il flusso logico delle operazioni. È possibile apportare alcune modifiche superficiali utilizzando strumenti di creazione di pagine o sottotempi, ma per realizzare veramente layout e funzionalità personalizzate, la conoscenza di PHP è essenziale.

È possibile avere più file `functions.php` per un determinato tema?

No. Ogni argomento (o sottoggetto) ha esattamente uno e solo uno strumento (o elemento) con il nome… functions.php Il file in questione viene caricato automaticamente durante l’inizializzazione del tema. Se desideri modularizzare le funzionalità per mantenere il codice ordinato, puoi… functions.php Utilizzare nel contesto require_once() 或 include_once() Utilizzare le istruzioni PHP per includere altri file PHP situati nella directory del tema. Ad esempio, puoi creare /inc/ Il catalogo prevede di scrivere le funzionalità quali i tipi di articoli personalizzati, i widget, i shortcode, ecc. in file diversi, e quindi includerli nel file principale. functions.php Verrà introdotto in modo uniforme in tutto il contesto.

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

Per rendere un tema compatibile con più lingue, ovvero per implementare la funzionalità di internazionalizzazione (i18n), sono necessari due passaggi principali. Primo passo: in tutti i punti in cui il tema visualizza del testo, è necessario utilizzare le funzioni di traduzione fornite da WordPress per incapsulare tali stringhe. La tecnica più comune consiste nell’utilizzare le funzioni `wp_translate()` o `get_text_translated()`. __()(Ritorna la stringa tradotta) e _e()Devi specificare nel codice dove avviene l’azione. style.css Definito nella sezione della testa (header) Text Domain。

echo __( ‘这是一个示例文本‘， ‘my-custom-theme‘ );

In secondo luogo, è necessario utilizzare uno strumento come Poedit per analizzare tutte le stringhe traducibili presenti nel tema e generare un elenco delle stringhe da tradurre. .pot(Template) File. Il traduttore può utilizzarlo per creare il file nella lingua corrispondente. .po E quello compilato… .mo File: Posizionare questi file linguistici all’interno del tema. /languages/ All’interno del catalogo, quando l’utente cambia la lingua del sito web, le traduzioni corrispondenti vengono caricate automaticamente.

Dopo il completamento dello sviluppo, come si procede per pacchettizzare e pubblicare il tema?

Prima della pubblicazione, assicurati di rimuovere tutto il codice di debug e le informazioni sensibili presenti nei commenti, e riduci al minimo le dimensioni dei file CSS e JavaScript per migliorare le prestazioni del sito. Successivamente, crea un pacchetto compresso ZIP che includa tutti i file relativi ai temi del sito. I file fondamentali presenti nella directory principale devono contenere:style.css(Con informazioni di intestazione complete e corrette)index.php 和 functions.phpPuoi anche includere un… screenshot.pngL’immagine di anteprima con dimensioni di 1200×900 pixel viene utilizzata come rappresentazione grafica del tema nel backend. Per poter inviare il tema al catalogo ufficiale di temi di WordPress, è necessario seguire rigorose norme di codifica e linee guida di revisione. Nel caso in cui si intenda distribuire il tema in modo autonomo, assicurarsi che il tema sia conforme alla licenza GPL e che venga fornito un documento chiaro che ne spieghi i termini e le condizioni d’uso. readme.txt Descrizione del file: Istruzioni per l’installazione e l’utilizzo.