Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema da zero

Preparativi e allestimento dell'ambiente.

Prima di iniziare a scrivere qualsiasi codice, è necessario disporre di un ambiente di sviluppo adeguato. Questo include un ambiente di server locale (ad esempio XAMPP, Local by Flywheel o MAMP) nonché un editor di codice (come VS Code, Sublime Text o PHPStorm). Assicurarsi che nell’ambiente locale siano installati PHP, MySQL e Apache/Nginx.

Successivamente, dovrai configurare il server locale in modo che…wp-content/themes/Crea una nuova cartella all’interno del directory. Il nome di questa cartella dovrà essere lo stesso del tuo argomento (tema). Ad esempio:my-first-themeQuesto è il “luogo” in cui si trovano tutti i tuoi file relativi ai temi (topic files).

Un tema WordPress di base richiede soltanto due file:style.css和index.phpTra questi,style.cssNon si tratta solo di un file di stili (stylesheet), ma anche di un “certificato di identità” per un tema specifico; il blocco di commenti in cima al file contiene le informazioni metadati relative a quel tema. Creiamo questo file prima di tutto.

Si consiglia di leggere Imparare a sviluppare temi per WordPress da zero: una guida completa per creare siti web personalizzati。

Creare un file di intestazione per le informazioni sul tema

style.cssIl blocco di commenti in cima al file è fondamentale per che WordPress riconosca un tema. Per favore, crea tale blocco all’interno della cartella del tuo tema.style.cssE scrivi il seguente contenuto:

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: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个用于学习WordPress主题开发的简单入门主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Queste informazioni verranno visualizzate nella sezione “Aspetto” -> “Temi” dell’interfaccia di amministrazione di WordPress.Text DomainUtilizzato per l’internazionalizzazione, rappresenta l’identificatore chiave per il caricamento successivo dei file di traduzione.

Creare un modello di indice di base

Successivamente, creare il file principale del tema.index.phpAnche se questo file contiene temporaneamente soltanto una riga di codice, è comunque in grado di far riconoscere e attivare il tuo tema da WordPress.

<p><strong>Questo è un testo di esempio.</strong></p>
<h1>Ciao, WordPress Theme World!</h1>
<?php get_footer(); ?>

get_header()和get_footer()Si tratta di funzioni di template di WordPress che tentano di caricare file con nomi specifici.header.php和footer.phpI file necessari per il funzionamento del tema non sono stati ancora creati, ma è una prassi standard scrivere i loro nomi in questo modo fin da ora. Ora puoi accedere al pannello di amministrazione di WordPress e, nella sezione “Aspetto” -> “Temi”, trovare e attivare il tema “My First Theme”. Rinfresca la pagina iniziale del sito e vedrai la scritta “Hello, WordPress Theme World!”.

Comprendere i livelli delle strutture di template e creare i file fondamentali

WordPress utilizza un insieme di regole chiamato “struttura dei template” (template hierarchy) per determinare quale file di template utilizzare per visualizzare il contenuto in base alle diverse richieste di pagina (come la pagina iniziale, la pagina di un articolo, la pagina di una categoria). Comprendere questo meccanismo è fondamentale per sviluppare temi (themes) in modo efficiente.

Si consiglia di leggere Introduzione allo sviluppo di temi per WordPress: crea passo dopo passo il tuo primo tema personalizzato。

Il template più comune è…index.phpÈ l’opzione di riserva finale per tutte le pagine. Tuttavia, per controllare più accuratamente l’aspetto delle singole pagine, dovremmo creare file di template più specifici. Iniziamo creando i tre file più basilari e importanti:header.php、footer.php和functions.php。

Creare un template per la parte superiore del sito web (header)

header.phpI file di solito contengono la parte iniziale (il “header”) dei documenti HTML.<head>…e le aree comuni presenti in cima al sito web, come il Logo e il menu di navigazione. Creare un…header.phpFile:

<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
    <header id="site-header">
        <div class="container">
            <h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            <p><?php bloginfo( 'description' ); ?></p>
            <nav>
                'primary',
                    'menu_id'        =&gt; 'primary-menu',
                ) );
                ?&gt;
            </nav>
        </div>
    </header>
    <main id="main-content">

Qui ci sono alcune funzioni chiave:wp_head()I “hook” (ganci) consentono al nucleo di WordPress, ai plugin e ai temi di interagire direttamente con il sistema.<head>Inserisci nel codice necessario per la regione (ad esempio, i link ai file di stile).body_class()Verrà generata una serie di nomi di classi CSS, per facilitare il controllo dello stile delle varie pagine.wp_nav_menu()Utilizzato per visualizzare un menu di navigazione.

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 un template per la parte inferiore del sito web

footer.phpI file di solito contengono la parte inferiore comune di un sito web, come le informazioni sul copyright, e vengono utilizzati per completare la struttura del sito.header.phpTag aperti in “Cina”. Creazione.footer.php：

    </main><!-- #main-content -->
    <footer id="site-footer">
        <div class="container">
            <p>©  . All rights reserved.</p>
        </div>
    </footer>
    <p><strong>Questo è un testo di esempio.</strong></p>
<p>Io non sono un'attrice.</p>
<p>Questo testo è stato tradotto automaticamente.</p>

wp_footer()与wp_head()Analogamente, si tratta di un “hook” (un meccanismo di interazione) importante, utilizzato per…<p>Io non sono un'attrice.</p>Inserire script o codice prima di un tag.

Ora, torniamo al tuo…index.phpAggiornatelo utilizzando i nuovi file per la parte superiore e inferiore della pagina che abbiamo creato.

Si consiglia di leggere Come scegliere e personalizzare un tema WordPress amico dell’SEO?。

<article>
        <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>
    </article>
<?php endwhile; else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>

Questo codice costituisce il ciclo principale (The Loop) di un tema WordPress: verifica se la pagina attuale contiene articoli e, in seguito, visualizza in ciclo il titolo e il contenuto di ciascun articolo.

Rafforzare le funzionalità di un tema tramite file di funzioni.

functions.phpSi tratta del “Control Center” relativo al tuo tema. Non è un file di template, bensì un file PHP che viene caricato automaticamente durante l’inizializzazione del tema. Qui puoi aggiungere funzionalità di supporto per il tema, registrare posizioni per i menu, stilisti per le liste di attesa (queue stylesheets) e script, ecc.functions.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

<?php
/**
 * My First Theme 的功能函数文件
 */

// 主题基础设置
if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让WordPress管理文档标题
        add_theme_support( 'title-tag' );
        // 启用文章和页面的特色图片功能
        add_theme_support( 'post-thumbnails' );
        // 注册一个主导航菜单
        register_nav_menus( array(
            'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
        ) );
        // 为文章摘录添加HTML支持
        add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
    }
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 修改摘录末尾的“更多”链接样式
function my_first_theme_excerpt_more( $more ) {
    return '...';
}

// 注册并加载样式表
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载一个自定义样式表
    wp_enqueue_style( 'my-first-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Questo file di funzioni svolge diverse attività importanti: 1) attraverso…add_theme_support()Sono state attivate le funzionalità comunemente utilizzate dai temi moderni di WordPress; 2) Attraverso…register_nav_menus()Abbiamo registrato una posizione per il ristorante, in questo modo possiamo utilizzarla per quanto fatto in precedenza…header.phpIl metodo chiamato in mezzo…primaryIl menu può essere assegnato nella sezione “Aspetto” -> “Menu” presente nel pannello di configurazione del backend; 3) Utilizzalo.wp_enqueue_style()La funzione aggiunge correttamente i file di stile alla coda, in modo sicuro e conforme alle requisiti di sicurezza.

Creare un modello di articolo indipendente

Per migliorare l’aspetto visivo di un singolo articolo, possiamo creare un file di template dedicato.single.phpIn base alla struttura gerarchica dei template, quando si accede a un singolo articolo, WordPress utilizza prioritariamente i template appropriati per la visualizzazione di quell’articolo.single.php… invece di…index.php。

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

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
        <div class="entry-meta">
            <?php 
            printf( 
                esc_html__( '发布于 %s', 'my-first-theme' ), 
                get_the_date() 
            );
            ?>
        </div>
        <?php if ( has_post_thumbnail() ) : ?>
            <div class="post-thumbnail">
                <?php the_post_thumbnail( 'large' ); ?>
            </div>
        <?php endif; ?>
    </header>
    <div class="entry-content">
        <p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p>
    </div>
</article>

<?php get_footer(); ?>

Questo template mostra in modo più dettagliato le informazioni sull’articolo, come la data di pubblicazione e l’immagine di riferimento (se è stata impostata).post_class()La funzione genera delle classi CSS specifiche per il tipo di articolo.

Aggiungere stili di base e un design responsivo.

Ora che il tuo progetto ha già una struttura di base e le funzionalità essenziali, è il momento di renderlo più attraente esteticamente. Procederemo quindi con…style.cssAggiungere del CSS di base e assicurarsi che il sito abbia un design responsive.

Nel tuostyle.cssAggiungi il seguente stile al file (sotto l’intestazione delle informazioni sull’argomento):

/* 基础重置与排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
#site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}
#site-header h1 a {
    color: #333;
    text-decoration: none;
}

/* 导航菜单 */
#primary-menu {
    display: flex;
    list-style: none;
}
#primary-menu li {
    margin-right: 1rem;
}
#primary-menu a {
    text-decoration: none;
    color: #555;
}

/* 主内容区 */
#main-content {
    padding: 2rem 0;
}
article {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 底部样式 */
#site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    #primary-menu {
        flex-direction: column;
    }
    #primary-menu li {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    article {
        padding: 1rem;
    }
}

Questi stili offrono un aspetto visivo chiaro e moderno, nonché un layout responsive di base per dispositivi con schermi piccoli. È possibile crearne di nuovi a seconda delle esigenze./assets/css/custom.cssIl file è utilizzato per memorizzare ulteriori stili personalizzati; è già stato creato.functions.phpÈ stato caricato in coda.

Riassumendo

Seguendo i passaggi descritti in questo articolo, hai iniziato da una cartella vuota e hai creato con successo un tema WordPress completo e ben strutturato. Hai anche appreso quali siano i file più fondamentali per lo sviluppo di temi WordPress.style.css和index.phpHo imparato il concetto di gerarchia dei template e ne ho creati alcuni.header.php、footer.php、single.phpFile di template chiave, tra gli altri… Li hai anche utilizzati tramite…functions.phpIl file ha aggiunto supporto per le funzionalità e capacità di gestione dei risorse al tuo tema, per poi conferirgli un aspetto visivo grazie all’uso di CSS.

Questo è solo un punto di partenza. In seguito, potrai esplorare la possibilità di creare ulteriori file di template.page.php、archive.php、404.phpApprofondisci la conoscenza dei sistemi di “Hook” e “Action/Filter” di WordPress, nonché il modo per rendere i tuoi temi compatibili con i widget e i customizer. Continuando a praticare e esplorare, diventerai un esperto sviluppatore di temi per WordPress.

FAQ - Domande frequenti

Come modificare il logo di un tema?

在header.phpNel file, trova la riga di codice che mostra il titolo del sito web. Puoi utilizzarla…

Sostituzione degli etichettibloginfo( ‘name’ )E includi un link alla tua immagine del logo. Un approccio più professionale sarebbe…functions.phpUtilizzare nel contestoadd_theme_support( ‘custom-logo’ )Per supportare la funzionalità di caricamento del logo nei personalizzatori di WordPress.

Perché il mio menu di navigazione non viene visualizzato?

Prima di tutto, assicurati di aver già…functions.phpIl documento è stato approvato dal Consiglio di Stato cinese il 22 novembre 2019.register_nav_menus()Sei registrato per indicare la posizione del ristorante (ad esempio...).primarySuccessivamente, dovrai accedere al pannello di amministrazione di WordPress e andare alla sezione “Aspetto” -> “Menu”. Crea un nuovo menu, seleziona gli elementi che desideri includere e, nella sezione “Posizione di visualizzazione”, seleziona la posizione del menu che hai registrato (ad esempio, “Menu Principale”). Infine, salva il menu.

Come aggiungere una barra laterale a un tema?

Prima di tutto,functions.phpUtilizzare nel contestoregister_sidebar()La funzione registra un’area per i componenti della barra laterale. Successivamente, nel file del template in cui si desidera visualizzare la barra laterale (ad esempio…index.php或single.phpNel testo fornito, non è presente alcun contenuto specifico da tradurre. Potresti fornire il testo che desideri tradurre in italiano, così potrò eseguire il lavoro per te.dynamic_sidebar()Questa area è utilizzata per le chiamate di funzioni. Inoltre, è necessario creare…sidebar.phpI file vengono utilizzati per definire la struttura HTML specifica del menu laterale.

Le operazioni contenute nel file functions.php devono essere eseguite utilizzando degli “hook” (meccanismi di integrazione)?

Sì, nella maggior parte dei casi, per garantire che il codice venga eseguito nel momento giusto, è consigliabile incapsulare il codice funzionale all’interno di funzioni e utilizzare apposite “hook” (meccanismi di interazione tra componenti del sistema).after_setup_theme、wp_enqueue_scriptsMontaggio: basta scriverlo direttamente.functions.phpIl codice che è attivo a livello globale potrebbe essere eseguito in momenti inappropriati o causare errori.