Partire da zero: La guida completa e le tecnologie fondamentali per lo sviluppo di temi per WordPress

I temi di WordPress rappresentano lo scheletro fondamentale per costruire l’aspetto e le funzionalità di un sito web. Possedere le competenze necessarie per svilupparli significa poter personalizzare completamente ogni aspetto del sito, liberandosi dai limiti dei temi predefiniti e realizzando progetti grafici e funzionalità unici in base alle proprie esigenze. Il primo passo per intraprendere questo percorso è comprendere i concetti di base e la struttura dei file dei temi di WordPress.

Ogni tema WordPress è un insieme di file che definiscono l'aspetto e il comportamento di un sito web WordPress./wp-content/themes/I folder presenti all’interno del directory. Un tema funzionale di base richiede soltanto due file:style.css和index.phpTra questi,style.cssNon viene utilizzato soltanto per archiviare i file di stile, ma le note presenti nella parte iniziale di tali file contengono anche informazioni meta relative al tema stesso; queste informazioni sono fondamentali per che WordPress possa riconoscere correttamente il tema.

在style.cssNella parte iniziale del testo, è necessario utilizzare commenti specifici per definire l’argomento principale. Ecco un esempio tipico:

Si consiglia di leggere Guida completa allo sviluppo di temi per WordPress: un corso pratico dall’introduzione all’approfondimento。

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

Questa informazione apparirà nell’elenco “Aspetto > Temi” dell’interfaccia di amministrazione di WordPress.index.phpQuesto è il file del modello principale del tema, utilizzato come soluzione di fallback quando non sono disponibili modelli più specifici. Man mano che lo sviluppo prosegue, verrà gradualmente sostituito o integrato da file di modelli più dettagliati.

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 gerarchica dei modelli relativi al tema in questione.

WordPress utilizza un sofisticato sistema di gerarchia dei template per determinare quale file di template utilizzare per rendere una pagina specifica. Comprendere questa gerarchia è fondamentale per sviluppare temi in modo efficiente; ti permette di capire come denominare i file quando crei pagine particolari, come le dettagli di un articolo o le pagine dei cataloghi.

Regole di denominazione dei file di template principali

I livelli dei template seguono il principio “dalle specifiche alle generali”. Ad esempio, quando si accede a un articolo di blog con l’ID 123, WordPress cerca i template nell’ordine seguente:single-post-123.php、single-post.php、single.phpE, infine,singular.phpVerrà utilizzato soltanto se tutte queste condizioni non sono soddisfatte.index.php。

I file di template principali più comunemente utilizzati includono:
- front-page.phpUtilizzato per impostare la pagina principale del sito web.
- home.phpPagina di indice degli articoli del blog.
- single.phpUn singolo articolo di blog o un articolo di un tipo di articolo personalizzato.
- page.phpPagina singola.
- archive.phpTemplate generico per varie pagine di archiviazione (classificazione, etichette, autori, ecc.).
- category.phpPagina di un catalogo di categorie specifiche.
- 404.phpPagina di errore 404.
- header.php、footer.php、sidebar.phpQuesti sono solitamente frammenti di template locali.

Funzioni comuni per richiamare template locali

Per mantenere il codice modulare e facilmente mantenibile, WordPress fornisce alcune funzioni chiave per caricare file di template locali. La più importante di queste è…get_header()、get_footer()和get_sidebar()Vengono utilizzati rispettivamente per introdurre…header.php、footer.php和sidebar.php。

Si consiglia di leggere I concetti fondamentali dello sviluppo di temi per WordPress。

Un’altra funzione di fondamentale importanza è…get_template_part()Permette di introdurre qualsiasi frammento di template in modo più flessibile. Ad esempio, all’interno di un ciclo di articoli per un blog, potresti voler utilizzare un template dedicato al contenuto dell’articolo stesso.

<?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'template-parts/content', get_post_type() ); ?>
<?php endwhile; ?>

Questo codice cercherà prioritariamente…template-parts/content-post.php(Assumendo che il tipo di articolo sia…)postSe non viene trovato, verrà caricato.template-parts/content.php。

Utilizzare funzioni di base e meccanismi di hooking per gestire le funzionalità del sistema.

Le potenti funzionalità di WordPress derivano dalla sua vasta libreria di funzioni e dal sistema di “ganci” (hook) basato sull’evento. Nello sviluppo di temi, utilizzare con abilità le funzioni di base e i ganci è fondamentale per realizzare funzionalità complesse, ottimizzare le prestazioni e garantire la sicurezza del sistema.

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

Funzioni di base per l’acquisizione e l’output di contenuti

Nei file di template, utilizzi frequentemente una serie di funzioni per ottenere e visualizzare contenuti dinamici. Ad esempio,the_title()Utilizzato per visualizzare il titolo dell’articolo o della pagina attuale.the_content()Ecco il contenuto principale, elaborato e formattato in modo appropriato. L’equivalente della funzione che produce il risultato diretto è rappresentato da…get_Le funzioni iniziali, come…get_the_title()Restituiscono i dati affinché tu possa elaborarli ulteriormente nel codice.

Il ciclo degli articoli del blog è il cuore dei template di WordPress; la sua struttura di codice standard è la seguente:

<!-- 在这里输出文章内容 -->
        <h2><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h2>
        <div><p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p></div>
    <?php endwhile; ?>
    <!-- 这里可以放置分页导航 -->
<?php else : ?>
    <!-- 如果没有找到文章，显示的内容 -->
    <p>Non ci sono contenuti disponibili.</p>
<?php endif; ?>

Estensione delle funzionalità tramite hook (meccanismi di interazione programmabili).

Gli “hook” si dividono in due tipi: “azioni” (actions) e “filtri” (filters). Gli hook di tipo “azione” ti permettono di inserire il tuo codice quando si verifica un evento specifico, ad esempio…wp_headNel codice, è possibile inserire tag meta aggiuntivi all’output generato dai “hook”. Per farlo, basta utilizzare le opportune strutture di programmazione disponibili.add_action()Una funzione che permette di “montare” (ovvero utilizzare) un’altra funzione propria.

Si consiglia di leggere Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero。

Ad esempio, nel tema…functions.phpAggiungere il supporto per i link di tipo Feed al file:

add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
    // 为文章和评论添加Feed链接到head中
    add_theme_support( 'automatic-feed-links' );
}

I “filter hooks” ti permettono di modificare i dati. Ad esempio, utilizzandoli…excerpt_lengthI filtri possono modificare la lunghezza della traccia degli articoli.

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

add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );
function mytheme_custom_excerpt_length( $length ) {
    return 30; // 将摘要长度设置为30个单词
}

functions.phpIl file rappresenta il “centro funzionale” del tema: tutte le funzioni personalizzate, le chiamate ai hook e le dichiarazioni relative alle funzionalità del tema devono essere inserite qui.

La funzionalità di dichiarazione dei temi è supportata.

Usareadd_theme_support()È una buona pratica di sviluppo dichiarare, tramite funzioni, quali funzionalità di base di WordPress il tuo tema supporta. Questo non solo abilita l’utilizzo di tali funzionalità, ma garantisce anche la compatibilità con futuri versioni di WordPress.

Le dichiarazioni di funzionalità comuni includono:

add_action( 'after_setup_theme', 'mytheme_theme_support' );
function mytheme_theme_support() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5语义化标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}

Integrazione di stili personalizzati e file di script

Un tema moderno deve gestire correttamente i propri file di stile CSS e i script JavaScript, in modo che vengano caricati solo quando necessario, evitando conflitti tra di essi e rispettando le migliori pratiche per l’ottimizzazione delle prestazioni del lato client.

Registrazione sicura e caricamento dei risorse

Assolutamente non utilizzare direttamente i contenuti all’interno dei file di template.<link>或<script>Per codificare i dati relativi ai risorse in modo statico (cioè senza che cambino in base alle condizioni dell’ambiente), il metodo corretto è utilizzare dei tag.wp_enqueue_scriptsAction hook, in combinazione con…wp_enqueue_style()和wp_enqueue_script()Funzione.

在functions.phpIn questo contesto, è necessario definire una funzione per gestire la fila di attesa dei richiesti di risorse.

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
function mytheme_enqueue_assets() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载Google字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );

// 加载主JavaScript文件，并依赖jQuery，在页脚加载
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );

// 如果需要传递PHP变量到JS，可以使用wp_localize_script
    wp_localize_script( 'mytheme-script', 'myThemeData', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'home_url' => home_url(),
    ));
}

Questo approccio garantisce che le dipendenze siano corrette, evita il caricamento ripetuto dei file e consente ai plugin e ad altri temi di essere gestiti tramite le relative dichiarazioni di dipendenza.

Aggiungere il supporto per lo stile all’editor Gutenberg

Con la diffusione degli editor a blocchi, è diventato essenziale aggiungere il supporto per lo stile grafico (front-end) agli editor per il lato server, al fine di ottenere un’esperienza di editing “vedi quello che ottieni” (visualizzazione in tempo reale dei risultati delle modifiche). Puoi utilizzare…add_theme_support( ‘editor-styles’ )E aggiungi anche una lista di stili per gli editori in coda.

add_action( 'after_setup_theme', 'mytheme_editor_styles' );
function mytheme_editor_styles() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'assets/css/editor-style.css' );
}

Riassumendo

Lo sviluppo di temi per WordPress inizia dalla comprensione della struttura dei file di base, per poi approfondirsi gradualmente nei livelli dei template, nelle funzioni di base del sistema, nei sistemi di “hook” (meccanismi di interazione tra componenti del software) e nella gestione delle risorse. La chiave per imparare questo processo è la pratica: partendo da esempi il più semplici possibile…style.css和index.phpInizia, e poi crea.header.php和footer.phpEsegui una suddivisione modulare del codice. Successivamente, utilizza i livelli dei template per creare modelli dedicati ai diversi tipi di pagine.single.php或page.php…infunctions.phpAttraverso gli “hook” e…add_theme_supportAggiungere funzionalità in modo sicuro, e farlo sempre seguendo i procedimenti appropriati…wp_enqueue_scriptsPer gestire gli stili e i script, segui questi principi e passaggi fondamentali: in questo modo sarai in grado di creare temi per WordPress professionali, efficienti e facilmente mantenibili.

FAQ - Domande frequenti

Per creare un tema per WordPress, sono necessari almeno i seguenti file:

Dal punto di vista tecnico, un tema riconosciuto e attivato da WordPress richiede almeno due file:style.css和index.php。style.cssLe note presenti nella parte iniziale del file (header) devono contenere le informazioni meta relative al tema corretto, ad esempio…Theme NameEindex.phpCome file di template di base, viene utilizzato per rendere tutte le pagine.

Come creare un modello di pagina personalizzato per il mio tema?

Creare un modello di pagina personalizzato è molto semplice. Basta utilizzare qualsiasi file di modello esistente (di solito…).page.phpAggiungere un blocco di commenti PHP specifico in cima al file. Ad esempio, per creare un template per una “pagina a larghezza piena”, è possibile creare un nuovo file con il nome…template-full-width.phpIl file in questione, e all’inizio del file venga scritto:/* Template Name: 全宽页面 */Dopo aver salvato le modifiche, quando si modifica una pagina nel backend di WordPress, sarà possibile visualizzare e selezionare l’opzione “Pagina a larghezza piena” nell’elenco a discesa “Template” presente nelle “Proprietà della pagina”.

Perché utilizzare `add_action` in `functions.php` per aggiungere nuove funzionalità al sito web?

Direttamente…functions.php中编写函数代码可能会在错误的时间执行，导致错误或功能不生效。使用add_action()或add_filter()Montare la propria funzione su un determinato “hook” di WordPress permette di garantire che il codice venga eseguito nel momento e nel modo corretti e sicuri. Ad esempio, questo può essere utile per attivare delle funzionalità in base agli eventi specifici che si verificano durante il funzionamento del sito web.after_setup_themeGli “hook” (ganci) vengono utilizzati per l’inizializzazione dei temi (temi in questo contesto probabilmente si riferiscono a componenti o configurazioni specifiche di un sistema).wp_enqueue_scriptsGli “hook” (ganci) vengono utilizzati per caricare risorse. Questa rappresenta una buona pratica nell’architettura plug-in di WordPress, poiché permette di aumentare il livello di modularità e compatibilità del codice.

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

Per rendere un tema supporto a più lingue, è necessario seguire alcuni passaggi. Prima di tutto,style.cssUtilizzato nella parte iniziale di tutti i file di template.__()、_e()Utilizzate funzioni di traduzione per incapsulare tutte le stringhe di testo da tradurre. In secondo luogo,functions.phpUtilizzare nel contestoload_theme_textdomain()Una funzione viene utilizzata per caricare i file di traduzione. Infine, strumenti come Poedit vengono impiegati per estrarre le stringhe dal codice sorgente e generare i file di traduzione necessari..potFile, e chiediamo al traduttore di creare la versione in lingua corrispondente (ad esempio:zh_CN.po和.mo）的翻译文件。将翻译文件放在主题目录的/languages/Basta inserirlo all’interno della cartella.

开发商业主题需要注意哪些许可和规范？

Per sviluppare temi commerciali da distribuire o vendere, è necessario rispettare rigorosamente i requisiti della licenza di WordPress. Il punto più importante è che i temi devono essere distribuiti sotto la licenza GPL v2 o una versione successiva, identica a quella del codice sorgente di WordPress stesso. Ciò significa che altri utenti hanno il diritto di utilizzare, modificare e ridistribuire il codice del tema. Inoltre, è fondamentale seguire gli standard di codifica ufficiali di WordPress nonché le linee guida per la revisione dei temi, al fine di garantire la qualità, la sicurezza e la compatibilità del codice. È anche essenziale indicare correttamente le licenze di tutti i componenti esterni utilizzati (come font e librerie di icone), assicurandosi che siano compatibili con la licenza GPL o che siano stati acquistati con autorizzazioni commerciali.