Guida introduttiva allo sviluppo di temi WordPress: crea il tuo primo tema da zero.

Se desideri personalizzare in modo approfondito il tuo sito WordPress, padroneggiare lo sviluppo di temi per WordPress è essenziale. A differenza dell’utilizzo di temi pronti, lo sviluppo personalizzato ti consente di controllare completamente il design, le funzionalità e l’esperienza di utilizzo del sito. Questo articolo ti guiderà passo dopo passo, partendo da zero, per comprendere la struttura di base di un tema WordPress e creare, gradualmente, un tema base completo e funzionale tutto tuo.

Comprendere la struttura di base di un tema WordPress

Un tema WordPress il più semplice possibile è costituito da alcune file che seguono regole di denominazione e strutture specifiche. Questi file, insieme, determinano l’aspetto del sito web e alcune delle sue funzionalità.

Analisi dei file essenziali per il funzionamento del sistema.

Un tema di base funzionale richiede almeno due file:style.css和index.php。style.cssNon si tratta solo degli stili grafici (i cosiddetti “style sheets”), ma anche del blocco di commenti presente in cima a tali file: esso rappresenta, in sostanza, il “cartellino d’identità” del tema, fornendo a WordPress informazioni essenziali come il nome del tema, l’autore, la descrizione, ecc. Queste informazioni sono l’unico elemento su cui WordPress si basa per riconoscere il tuo tema nell’elenco dei temi disponibili nell’interfaccia di amministrazione.index.phpSi tratta del file del modello principale del tema, responsabile della visualizzazione dei contenuti principali del sito web. WordPress cercherà innanzitutto i file di template più specifici; in loro assenza, utilizzerà il file del modello principale.index.phpCome template di riserva finale.

Si consiglia di leggere Elemento indispensabile per la creazione di un sito web professionale: una guida completa allo sviluppo e alla personalizzazione dei temi di WordPress.。

Il funzionamento dei livelli di template

Comprendere la struttura gerarchica dei template è fondamentale per uno sviluppo efficiente. Quando un utente accede a una pagina specifica (ad esempio, un articolo di blog o un catalogo), WordPress cerca i file dei template corrispondenti nelle cartelle dei temi seguendo un ordine di priorità prestabilito, che va da quelli più specifici a quelli più generici. Ad esempio, per un articolo con l’ID 123, WordPress cercherà i file dei template in sequenza:single-post-123.php、single-post.php、single.php…e solo alla fine viene utilizzato.index.phpQuesto meccanismo consente agli sviluppatori di creare layout altamente personalizzati per diversi tipi di contenuti.

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

Crea il tuo primo tema!

Successivamente, costruiremo un tema partendo da uno “scheletro” di base, sia in ambiente locale che in ambiente di test. Assicurati di disporre di un ambiente di installazione di WordPress funzionante.

Inizializzare la cartella dei temi e i file delle tabelle di stile.

Prima di tutto, all’interno della directory di installazione di WordPress…wp-content/themesAll’interno della cartella, crea una nuova cartella, ad esempio chiamandola “nuova_cartella”.my-first-themeAll’interno di quella cartella, crea…style.cssFile, e scrivere le seguenti informazioni di commento all’inizio del file:

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

In questo pezzo di codice…Text DomainQuesto strumento viene utilizzato per l’internazionalizzazione dei temi di WordPress. Dopo aver salvato il file, dovresti essere in grado di vedere un tema vuoto con il nome “Il mio primo tema” nella sezione “Aspetto” -> “Temi” dell’interfaccia di amministrazione di WordPress.

Creare un file di template di indice di base

Ora, creiamo il file principale per la gestione dei temi.index.phpIniziamo dalle strutture HTML di base e dalle funzioni fondamentali di WordPress:

Si consiglia di leggere Come scegliere e personalizzare in modo approfondito il tuo primo tema per WordPress: Guida per gli sviluppatori。

<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <p><strong>Questo è un testo di prova</strong></p>
</head>
<body no numeric noise key 1008>
    <p><strong>Questo testo è stato tradotto automaticamente.</strong></p>

<header>
        <h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 文章内容循环
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无内容。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>

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

Questo file introduce diverse parti chiave:wp_head()和wp_footer()Si tratta di un “gancio” centrale (core hook) che consente ai plugin e ai temi di inserire codice in questo punto.body_class()Aggiungi delle classi CSS contestualizzate ai tag.the_post()和the_content()I tag di template vengono utilizzati per visualizzare contenuti dinamici. Abilitando questo tema, il tuo sito web assumerà una forma estremamente basilare, ma comunque funzionante.

Sviluppo avanzato: Potenziamento delle funzionalità e della struttura dei temi

Dopo l’avvio del tema di base, è possibile migliorarne la professionalità, la manutenibilità e l’esperienza utente aggiungendo ulteriori file di template e funzionalità.

Introdurre una struttura di separazione tra i componenti del template.

Separare il header (parte superiore della pagina) dal footer (parte inferiore della pagina) in componenti indipendenti è una buona pratica. Creare…header.phpIl documento, che verràindex.php中到Inserisci la parte finale che è stata tagliata. In modo simile, crea…footer.phpConservare; StocareE il contenuto che segue… Poi,index.phpIn cinese, usareget_header()和get_footer()La funzione sostituisce il blocco di codice originale. In questo modo, tutti gli altri file di template (ad esempio…)single.php, page.phpÈ possibile riutilizzare lo stesso header e lo stesso footer in tutti i contenuti.

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

Creare e utilizzare il file functions.php

functions.phpQuesto è il “centro funzionale” del tuo tema. Qui puoi aggiungere funzionalità personalizzate, creare menu e barre laterali, nonché importare script e fogli di stile in modo sicuro. Ti consigliamo di utilizzarlo.wp_enqueue_scriptsGanci per il caricamento dei risorse:

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

Aggiungere il supporto per il menu di navigazione e le immagini di carattere speciale.

在functions.phpRegistra una posizione per il tema in modo che gli utenti possano gestire la navigazione nella sezione “Aspetto” -> “Menù” dell’interfaccia amministrativa.

function my_first_theme_setup() {
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5的搜索表单、评论表单等标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Poi, inheader.php的All’interno della regione, è possibile utilizzare…wp_nav_menu()Esiste una funzione per visualizzare il menu. Durante il ciclo degli articoli, è possibile utilizzarla.the_post_thumbnail()Produciamo immagini caratteristiche (o “immagini distintive”).

Si consiglia di leggere Rivelazioni sullo sviluppo di plugin: costruisci il tuo primo estensione da zero。

Debugging e migliori pratiche

Durante il processo di sviluppo, seguire i metodi corretti e effettuare test approfonditi sono fondamentali per garantire la qualità del prodotto.

Attiva e utilizza il modalità di debug.

Nell’ambiente di sviluppo, si consiglia vivamente di…wp-config.phpAbilita il modalità di debug nel file. Questo ti aiuterà a individuare rapidamente gli errori, gli avvisi e le chiamate a funzioni obsolete in PHP.

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

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误日志写入 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误（日志文件更安全）

Eseguire un test completo e una revisione del codice.

Prima di lanciare il tema, effettuare test di compatibilità su diversi browser (Chrome, Firefox, Safari, Edge) e su diversi dispositivi (telefoni, tablet, desktop). Assicurarsi che tutte le funzionalità principali, come la navigazione a pagine, funzionino correttamente su tutti i sistemi.the_posts_pagination()Comment templatecomments_template()Sia la funzione di visualizzazione che quella di ricerca funzionano correttamente. Segui gli standard di codifica ufficiali di WordPress per garantire chiarezza e mantenibilità del codice. Prendi in considerazione l’uso dei sottotempi (subthemes) per personalizzare e aggiornare il tema in futuro, invece di modificare direttamente i file del tema principale (parent theme).

Riassumendo

Seguendo i passaggi descritti in questo articolo, hai iniziato da una cartella vuota per creare gradualmente un tema WordPress completo che include dichiarazioni di stile, modelli di base, funzioni utili e una struttura standardizzata. Hai imparato il concetto di gerarchia dei modelli, come introdurre correttamente le risorse necessarie, come aggiungere funzionalità di supporto al tema e i metodi di debug fondamentali durante lo sviluppo. Questo ti ha fornito una solida base per esplorare ulteriormente lo sviluppo di temi più complessi, come la creazione di modelli per tipi di articoli personalizzati, l’integrazione di stili dei blocchi Gutenberg o l’utilizzo dell’API per la personalizzazione dei temi. Ricorda che lo sviluppo di temi è un processo iterativo: iniziare da qualcosa di semplice e aggiungere funzionalità man mano rappresenta il percorso di apprendimento più efficace.

FAQ - Domande frequenti

Per sviluppare temi per WordPress è necessario conoscere bene PHP?

Non è necessario avere una conoscenza approfondita, ma è essenziale disporre di una solida base di PHP. È necessario comprendere i concetti di variabili, funzioni, cicli, istruzioni condizionali e il modo per includere file all’interno del codice. WordPress fornisce infatti un gran numero di tag per la creazione di template (ad esempio…).the_title()…) e funzioni (come…)get_header()Queste funzioni incapsulano logiche complesse; ti basterà imparare come chiamarle. Man mano che lo sviluppo progredisce, entrerai in contatto con concetti PHP più avanzati.

Perché i miei stili personalizzati non sono stati applicati?

Il motivo più comune è che i file di stile (style sheets) non sono stati caricati correttamente. Assicurati che siano stati caricati con successo.functions.php中的wp_enqueue_style()L’ordinamento delle funzioni ha portato all’importazione dei file di stile, e la funzione in questione è stata correttamente montata (ovvero integrata nel sistema).wp_enqueue_scriptsPrima di tutto, controllare se il file CSS è stato caricato correttamente. Per farlo, utilizzare gli strumenti di sviluppo del browser e selezionare la scheda “Rete” (Network). Verificare inoltre se le regole CSS presenti nella scheda “Elementi” (Elements) non siano state sovrascritte da regole di priorità più alta.

In che modo dovrebbero essere suddivise le funzionalità tra i temi (themes) e i plugin?

Un principio semplice è: le funzionalità strettamente legate all’aspetto visivo e alla disposizione del sito vanno inserite nel tema, mentre quelle relative alla logica dei dati o a funzionalità indipendenti vanno inserite nei plugin. Ad esempio, i tipi di articoli personalizzati e i sistemi di classificazione possono essere inclusi nel tema se sono utilizzati esclusivamente per la struttura di quel sito specifico; tuttavia, funzionalità più generiche (come i moduli di contatto) sono più adatte da essere implementate come plugin, in modo che rimangano disponibili anche in caso di cambio di tema.

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

Devi utilizzare le funzioni di internazionalizzazione (i18n) di WordPress. Nel codice, tutte le stringhe destinate all’utente devono essere racchiuse all’interno delle funzioni di traduzione.__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )Qui.‘my-first-theme’Deve essere associato a…style.css中的Text DomainConcordante. Successivamente, puoi utilizzare strumenti come Poedit per generare il contenuto desiderato..potFile di template per la traduzione, da utilizzare dai traduttori per creare i contenuti da tradurre..po和.moFile di lingua.