Imparare passo dopo passo lo sviluppo di temi WordPress: creare un tema personalizzato da zero.

Per molti utenti di WordPress che desiderano personalizzare in modo approfondito il proprio sito web, i limiti offerti dai temi preesistenti diventano sempre più evidenti. Imparare a sviluppare temi per WordPress significa poter costruire il proprio sito esattamente secondo i propri concetti di design e le proprie esigenze funzionali, ottenendo un controllo totale sia sull’aspetto che sull’interfaccia di utilizzo. Questa abilità non solo è di grande valore, ma rappresenta anche un ottimo modo per comprendere i principi fondamentali di funzionamento di WordPress. In questo articolo, vi guideremo dalla struttura dei file di base fino alla creazione di un tema personalizzato completo e funzionale.

Ambiente di sviluppo e struttura dei file di base

Prima di iniziare a scrivere il codice, è fondamentale creare un ambiente di sviluppo efficiente e isolato. Consigliamo l’uso di software per server locali, come Local by Flywheel, XAMPP o MAMP. Questi strumenti permettono di configurare rapidamente un ambiente di esecuzione per WordPress su un computer personale, che include PHP, MySQL e Apache/Nginx, senza influenzare il sito web online.

Un tema WordPress di base, che richiede soltanto due file per essere riconosciuto dal sistema. Si trova nella directory di installazione di WordPress. <code>wp-content/themes</code> All’interno della cartella, crea una nuova cartella, ad esempio chiamandola… <code>my-custom-theme</code>In questa cartella, devi creare i seguenti due file principali.

Si consiglia di leggere La struttura di base e il funzionamento di WordPress.。

Il primo file è un file di stili. style.cssQuesto file non serve soltanto a contenere i file di stile CSS, ma anche il blocco di commenti in cima contiene le informazioni essenziali relative al tema: il nome del tema, l’autore, una descrizione e altre informazioni meta.

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: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习而创建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Il secondo file necessario è… index.phpAnche se questo file inizialmente è vuoto, WordPress è in grado di riconoscere il tuo tema. Di solito, però, vi inseriamo del codice PHP di base e la struttura HTML necessaria per visualizzare i contenuti del sito web. A questo punto, il tuo tema apparirà nell’elenco “Aspetti” -> “Temi” dell’interfaccia di amministrazione di WordPress e potrà essere attivato. Tuttavia, un tema efficace richiede l’uso di ulteriori file di template per completare la struttura delle pagine.

File di template principali e relazioni gerarchiche

WordPress utilizza un sistema gerarchico di template per determinare quale file template utilizzare per visualizzare il contenuto in risposta a una specifica richiesta di pagina. Comprendere questa struttura gerarchica è fondamentale per lo sviluppo di temi. Il sistema inizia la ricerca dal file template più specifico; se non viene trovato, ricorre a un file più generico, e infine, se nemmeno questo è disponibile, utilizza il file template predefinito. index.php。

Le diverse parti di una pagina sono solitamente gestite da file di template diversi. La parte superiore (header) e la parte inferiore (footer) comuni a tutte le pagine del sito possono essere collocate in file separati. header.php 和 footer.php Successivamente, utilizzarlo in altri template. get_header() 和 get_footer() Introduzione delle funzioni: La barra laterale può essere posizionata… sidebar.php In cinese, usare get_sidebar() Introduzione.

Per quanto riguarda il contenuto dell’articolo, il file template più importante è… single.phpViene utilizzato per visualizzare un singolo articolo di blog. Per le pagine statiche, invece, viene impiegato un metodo diverso. page.phpI template utilizzati per visualizzare l’elenco degli articoli (ad esempio, la pagina iniziale di un blog, le pagine dei cataloghi di categorie, le pagine delle etichette, ecc.) sono… archive.phpLa pagina principale del sito web è piuttosto particolare: WordPress cercherà automaticamente le informazioni da visualizzare in modo prioritario. front-page.phpSe non esiste, allora utilizzalo. home.phpE infine… index.php。

Si consiglia di leggere Imparare a sviluppare temi per WordPress: una guida completa e un tutorial pratico, dall'introduzione all'applicazione pratica.。

Dividendo questi file di template in modo appropriato, è possibile massimizzare il riutilizzo del codice e gestirlo in modo efficiente. Ad esempio, un caso tipico… single.php La struttura potrebbe essere la seguente:

<p><strong>Questo è un testo di esempio.</strong></p>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        while ( have_posts() ) :
            the_post();
            // 加载专门用于文章内容的模板部分
            get_template_part( 'template-parts/content', 'single' );
            // 显示文章导航（上一篇/下一篇）
            the_post_navigation();
            // 如果评论开放，则加载评论模板
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;
        endwhile;
        ?>
    </main>
</div>

Funzionalità tematiche e cicli in WordPress

Il punto di forza di WordPress risiede nel suo potente sistema di gestione dei contenuti, e il meccanismo fondamentale che permette l’interazione tra i temi e i contenuti è il cosiddetto “loop”. Il loop è un frammento di codice PHP che verifica se sulla pagina attuale ci sono articoli da visualizzare; in caso affermativo, esamina tutti questi articoli e utilizza una serie di tag di template per visualizzare il contenuto di ciascuno di essi.

La struttura di ciclo più basilare è la seguente. Utilizza… have_posts() 和 the_post() Le funzioni servono a controllare e far avanzare il ciclo.

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

<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>
    <p> </p>
<p></p>
    <p>Non è stato trovato alcun articolo.</p>
<?php endif; ?>

All’interno di un ciclo, è possibile utilizzare strumenti o tecniche come… the_title()、the_content()、the_excerpt()、the_permalink()、the_post_thumbnail() Utilizzando tag di template, è possibile visualizzare le varie informazioni relative all’articolo attuale. Queste funzioni stampano automaticamente il contenuto. Se hai bisogno di ottenere questi valori per elaborarli con la logica PHP, utilizza le funzioni “get_” corrispondenti. get_the_title()。

Oltre a visualizzare il contenuto, il tema deve anche essere comunicato attraverso… functions.php Questo file serve per estendere le funzionalità di un tema. Può essere considerato un “plugin” che permette di aggiungere funzionalità personalizzate, di registrare elementi nel menu principale e nelle aree dedicate ai widget della barra laterale, nonché di importare file di stili e script. Ad esempio, il codice seguente aggiunge al tema il supporto per un menu di navigazione e un’area per i widget della barra laterale, e importa correttamente i file di stili necessari.

__( '主导航菜单', 'my-custom-theme' ),
            'footer'  => __( '页脚菜单', 'my-custom-theme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_menus' );

// 注册一个小工具侧边栏
function mytheme_widgets_init() {
    register_sidebar(
        array(
            'name'          => __( '主侧边栏', 'my-custom-theme' ),
            'id'            => 'sidebar-1',
            'description'   => __( '在此添加小工具。', 'my-custom-theme' ),
            'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
            'after_widget'  =&gt; '</section>',
            'before_title'  =&gt; '<h2 class="widget-title">',
            'after_title'   =&gt; '</h2>',
        )
    );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

// 引入主题样式表
function mytheme_enqueue_styles() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles' );
?&gt;

Progettazione di stili, ottimizzazione per dispositivi mobili (responsività) e miglioramento delle prestazioni.

Un ottimo tema moderno deve essere responsive, in grado di offrire un’ottima esperienza di navigazione su dispositivi di varie dimensioni. Questo viene principalmente realizzato attraverso le query di media CSS. È possibile adottare una strategia incentrata sui dispositivi mobili: innanzitutto si definiscono gli stili di base per i dispositivi a schermo piccolo, e successivamente, utilizzando le query di media, si aggiungono o si sovrappongono gli stili per i dispositivi a schermo più grande.

Si consiglia di leggere Creare un sito web professionale: Una guida completa per lo sviluppo di un tema personalizzato per WordPress da zero。

在编写 CSS 时，建议遵循 BEM（块、元素、修饰符）等命名方法论，以保持样式代码的组织性和可维护性。同时，充分利用 WordPress 生成的丰富 body class 和 post class，可以为不同页面类型或文章类别精准地添加样式。例如，body_class() La funzione fornirà… <body> La tag restituisce una serie di nomi di classi, ad esempio: .home、.page、.single etc.

Le prestazioni rappresentano un elemento fondamentale dell’esperienza utente. Per quanto riguarda i file di stile (style sheets) e i file JavaScript, è essenziale utilizzare… wp_enqueue_style() 和 wp_enqueue_script() La funzione è attiva/desativa (in base al contesto). functions.php I file vanno aggiunti correttamente alla coda di elaborazione. Questo permette a WordPress di gestire le dipendenze tra i componenti del sito e facilita l’overwriting (l’alterazione dei contenuti) da parte di plugin o sottotemi. Per quanto riguarda le immagini, è necessario assicurarsi che il tema utilizzato supporti il loro caricamento e l’visualizzazione corretta. add_theme_support(‘post-thumbnails’)Inoltre, si incoraggia gli utenti a caricare immagini di dimensioni appropriate; in questo contesto, si potrebbe prendere in considerazione l’utilizzo della tecnologia del “lazy loading” (caricamento differito delle immagini).

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

Inoltre, fornire un buon supporto per i blocchi funzionali principali e per l’editor Gutenberg è diventata una prassi standard nello sviluppo di WordPress per il 2026. Questo è possibile grazie all’integrazione di funzionalità avanzate che permettono di gestire facilmente i contenuti all’interno di WordPress. functions.php Aggiungere nel… add_theme_support(‘wp-block-styles’) 和 add_theme_support(‘responsive-embeds’) Dichiarazioni del genere possono aiutare il tuo tema ad integrarsi meglio con gli editori moderni.

Riassumendo

Lo sviluppo di temi per WordPress è un processo che parte da concetti semplici e si evolve verso soluzioni più complesse, attraverso un percorso di apprendimento graduale. Partendo dalla creazione di due file di base, si passa a una comprensione approfondita della struttura dei template, fino all’uso abile dei cicli e del sistema di hook di WordPress. Ogni passo permette di acquisire una conoscenza più completa su come costruire un sito web flessibile, potente ed efficiente. L’essenza di tutto questo processo consiste nel comprendere come WordPress assembla le pagine attraverso i file di template, nonché come gestire in modo efficace le varie componenti del sistema. functions.php Le funzioni integrate per la sicurezza interagiscono con il sistema in modo appropriato. Adottando le migliori pratiche, come il design responsivo, l’ottimizzazione delle prestazioni e l’organizzazione del codice, sarà possibile creare temi di livello professionale che non solo presentano un aspetto unico, ma sono anche stabili, veloci da utilizzare e facili da mantenere.

FAQ - Domande frequenti

Per sviluppare un tema WordPress, è necessario padroneggiare quali linguaggi di programmazione?

Per sviluppare un tema WordPress completo di funzionalità, è necessario padroneggiare tre lingue principali. La prima è il PHP, che è il linguaggio di programmazione lato server di WordPress, utilizzato per elaborare la logica, chiamare funzioni, eseguire cicli e manipolare i dati. La seconda è il CSS (e possibilmente i preprocessori Sass/Less), che controlla l'aspetto visivo del tema, inclusi il layout, i colori, i caratteri e il design responsivo. Infine, l'HTML viene utilizzato per creare la struttura di base della pagina web e organizzare il contenuto. Inoltre, per rendere il tema interattivo, è necessaria una certa conoscenza del JavaScript (che potrebbe includere jQuery).

Come posso rendere il mio tema compatibile con la traduzione in più lingue?

Per rendere il tuo tema compatibile con più lingue (internazionalizzazione e localizzazione), è necessario preparare i campi per i testi nel codice e utilizzare gli strumenti appropriati per generare i file di traduzione. Inizialmente, style.css Il blocco di commenti e… functions.php Il documento è stato approvato dal Consiglio di Stato cinese il 22 novembre 2019. load_theme_textdomain() La funzione imposta correttamente il “Text Domain” (dominio del testo, solitamente identico al nome della cartella del tema). Successivamente, in tutti i punti del tema in cui sono presenti stringhe da tradurre, si utilizzano le funzioni di traduzione fornite da WordPress per incapsularle. __(‘文本’, ‘my-custom-theme’) 或 _e(‘文本’, ‘my-custom-theme’)Una volta completato lo sviluppo, è possibile utilizzare software come Poedit per analizzare le stringhe traducibili presenti nei file tematici e generare il contenuto da tradurre. .pot File di template, e su di essi creare versioni in diverse lingue. .po 和 .mo Documenti.

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

Un sottotema (subtopic) è un tema che funziona in modo indipendente, ma che dipende da un tema principale (parent theme). Eredita tutte le funzionalità, gli stili e i file di template del tema principale, ma consente di modificare in modo sicuro qualsiasi parte di esso (ad esempio i file di stile, i file di template o le funzioni), senza dover modificare direttamente il codice del tema principale. Il vantaggio principale di questo approccio è che, quando il tema principale viene aggiornato, le modifiche personalizzate apportate al sottotema non vengono perse. Si consiglia vivamente di creare sottotemi quando si desidera personalizzare in modo approfondito un tema esistente, soprattutto se si tratta di un tema popolare o di un tema di framework. Per creare un sottotema, è sufficiente utilizzare un file che contenga le informazioni di commento necessarie. style.css File, e all’interno di esso… Template: Si specifica il nome del directory del tema padre.

Dopo aver completato lo sviluppo del tema, come posso pubblicarlo nella directory ufficiale di WordPress?

Pubblicare un tema nel catalogo ufficiale di temi di WordPress.org richiede un processo di revisione rigoroso. Innanzitutto, il tuo tema deve essere distribuito sotto la licenza GNU GPL 1.0. Inoltre, il codice sorgente deve essere conforme agli standard di codifica di WordPress e deve garantire un buon livello di sicurezza, accessibilità e qualità. È necessario assicurarsi che il tema non contenga link hardcodati, che rispetti le regole relative alla struttura dei template, che sia correttamente internazionalizzato e che non utilizzi funzioni obsolete. Prima di inviare il tema, ti consigliamo di utilizzare il plugin Theme Check per effettuare un’analisi preliminare. Successivamente, invia il pacchetto compresso del tuo tema sul sito ufficiale di WordPress.org; il team di revisione esaminerà il tema manualmente. Una volta superata la revisione, il tuo tema sarà disponibile per essere cercato, installato e utilizzato dagli utenti in tutto il mondo.