Guida all’approccio di base allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero

Preparativi e allestimento dell'ambiente.

Prima di iniziare a scrivere il codice, è necessario disporre di un ambiente di sviluppo appropriato. Ciò generalmente significa creare un ambiente server in grado di eseguire WordPress sul proprio computer locale. È possibile scegliere pacchetti software integrati, come XAMPP, MAMP (adatto a Mac) o Local by Flywheel, che consentono di installare in un solo clic Apache, MySQL e PHP. Dopo aver installato il server locale, scaricare la versione più recente di WordPress da WordPress.org e completare l’installazione.

Successivamente, dovrai trovare la directory dei temi di WordPress. Si trova in… wp-content/themes/In questo directory, crea una cartella per il tuo nuovo tema, ad esempio… my-first-themeIl nome di questa cartella rappresenta il tuo identificatore tematico; si consiglia di utilizzare lettere minuscole, numeri e trattini, evitando lo spazio.

I file più fondamentali di un tema WordPress sono soltanto due:style.css 和 index.php。style.css Non si tratta semplicemente di un file di stili (stylesheet), ma anche di un “certificato di identità” del tema stesso: tale file fornisce informazioni dettagliate sul tema a WordPress tramite i blocchi di commenti presenti all’inizio del file.

Si consiglia di leggere Introduzione allo sviluppo di temi per WordPress: costruire temi personalizzati da zero。

Creare un file di informazioni sul tema.

style.css All’inizio del file deve essere presente un’informazione specifica relativa alla testata del foglio di stile. Questo è essenziale affinché WordPress possa riconoscere e caricare il tema corretto. Ecco un esempio molto semplice:

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
Text Domain: my-first-theme
*/

Tra questi,Text Domain Utilizzato per l’internazionalizzazione dei temi (traduzione); di solito coincide con il nome della cartella contenente i temi.Theme Name Apparirà nell’elenco “Aspetto” -> “Temi” presente nella dashboard di WordPress.

Creare il file del modello principale.

index.php Questo è il file di template più importante relativo al tuo tema. Quando WordPress non riesce a trovare un file di template più specifico… single.php 或 page.phpQuando viene utilizzato, diventa il modello di riserva predefinito. Il più semplice… index.php È possibile includere soltanto le funzioni utilizzate per ottenere la parte iniziale del sito web (header), il ciclo principale del codice e la parte finale del sito web (footer).

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

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

A questo punto, il tuo tema è stato riconosciuto e attivato da WordPress. Anche se le funzionalità sono ancora limitate, questa rappresenta comunque la base per costruire tutto il resto.

Comprendere i livelli delle template e i file principali

WordPress utilizza un sistema intelligente chiamato “struttura gerarchica dei template” per determinare quale file di template utilizzare per la pagina richiesta in quel momento. Comprendere questa struttura è fondamentale per uno sviluppo efficiente. Il principio fondamentale è il seguente: più un template è specifico (ossia più dettagliato nella descrizione delle sue funzionalità), maggiore è la sua priorità.

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

Articoli e template di pagine

Per un singolo articolo di blog, WordPress cerca i template nell’ordine seguente:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.phpAd esempio, un articolo con lo pseudonimo “hello-world” verrà utilizzato in modo prioritario. single-post-hello-world.php。

Per le pagine indipendenti (Page), l’ordine è:custom template(Specificato nelle proprietà della pagina) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。

Template per l’archiviazione e la pagina principale

Anche la pagina della lista degli articoli del blog (pagina dell’archivio) segue delle regole specifiche. Pagina iniziale del blog principale:home.php -> index.phpPagina di archiviazione e classificazione:category-{slug}.php -> category-{id}.php -> category.php -> archive.php -> index.phpL’archiviazione dei tag, degli autori e delle date segue un modello simile.

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

Utilizzato sulla pagina di ricerca. search.phpPagina di errore 404 in uso. 404.phpSe questi file specifici non esistono, alla fine verrà eseguito il ripristino (il “backtrack”) alle impostazioni precedenti. index.php。

Creare file di template utilizzati frequentemente

Basandoti su questi livelli di strutturazione, dovresti creare alcuni file di template più utilizzati per potenziare le funzionalità del tema. Il primo di questi file… header.phpContiene un documento HTML. <head> Parti del sito e l’area del titolo della pagina.

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
<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>
    <nav>
        'primary',
            'container'      =&gt; false,
        ) );
        ?&gt;
    </nav>
</header>

footer.php Contiene il contenuto del piede di pagina e le chiamate ai script.

Si consiglia di leggere Padroneggiare i fondamenti dello sviluppo di temi per WordPress: La guida alle migliori pratiche per creare temi personalizzati da zero。

<footer>
    <p>©</p>
</footer>
<p><strong>Questo è un testo di esempio.</strong></p>
<p>Io non sono un'attrice.</p>
<p>Questo testo è stato tradotto automaticamente.</p>

functions.php È il “cervello” del tema, utilizzato per aggiungere funzionalità, menu di registrazione, fogli di stile e script.

Integrazione delle funzionalità tematiche con gli stili grafici

functions.php Il file non è obbligatorio, ma senza di esso le funzionalità del tema saranno molto limitate. Questo file viene caricato automaticamente all’inizializzazione del tema e rappresenta il luogo ideale per ospitare funzionalità aggiuntive, filtri e meccanismi di interazione (cosiddetti “hook”).

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

Registrazione del menu di navigazione e della barra laterale

在 functions.php In cinese, usare register_nav_menus() Funzione per dichiarare le posizioni dei piatti supportate dal tema.

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
    // 为文章和评论添加 RSS feed 链接支持
    add_theme_support( 'automatic-feed-links' );
    // 支持文章特色图像
    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' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Usare register_sidebar() Funzione per registrare le aree dedicate agli strumenti aggiuntivi (barre laterali).

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-first-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', 'my_theme_widgets_init' );

Introduzione dinamica di stili e script

La procedura corretta da seguire è utilizzare… wp_enqueue_style() 和 wp_enqueue_script() Esiste una funzione che aggiunge i file CSS e JavaScript alla coda di elaborazione. Questo garantisce che le dipendenze vengano gestite correttamente e che i file non vengano caricati più di una volta.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 引入一个自定义的 CSS 文件
    wp_enqueue_style( 'my-first-theme-custom', get_template_directory_uri() . '/assets/css/custom.css', array( 'my-first-theme-style' ), '1.0' );

// 引入一个 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );

// 为评论回复功能添加脚本（仅在需要时加载）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Perfezionare i template e approfondire i concetti avanzati…

Con l’implementazione delle funzionalità principali del tema, puoi iniziare a perfezionare i file dei template, ottenendo un layout e delle funzionalità più professionali.

Creare un ciclo per elencare gli articoli

在 archive.php 或 home.php Nel contesto in cui si deve presentare un riassunto di più articoli in forma sintetica, è possibile utilizzare le funzioni di template fornite da WordPress. the_excerpt()、the_post_thumbnail()。

<?php if ( have_posts() ) : ?>
    <div class="posts-list">
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" no numeric noise key 1015>
                <?php if ( has_post_thumbnail() ) : ?>
                    <a href="/it/</?php the_permalink(); ?>">
                        <?php the_post_thumbnail( 'medium' ); ?>
                    </a>
                <?php endif; ?>
                <h2><a href="/it/</?php the_permalink(); ?>"><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></a></h2>
                <div class="entry-meta">
                    |
                </div>
                <div class="entry-summary">
                    <?php the_excerpt(); ?>
                </div>
                <a href="/it/</?php the_permalink(); ?>" class="read-more">Leggi di più</a>
            </article>
        <?php endwhile; ?>
    </div>
    
    <p><?php _e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
<?php endif; ?>

Implementazione del template per i commenti

La funzione dei commenti è una componente fondamentale di un blog. WordPress offre funzionalità avanzate per la creazione di modelli di commenti. comments_template()La migliore pratica è quella di posizionare l’visualizzazione dei commenti e il modulo di inserimento dei commenti in un file separato, di solito… comments.phpPoi… single.php Lo si chiama all’interno di…

在 single.php Dopo aver visualizzato il contenuto dell’articolo, aggiungiamo:

<?php
if ( comments_open() || get_comments_number() ) :
    comments_template();
endif;
?>

Poi crea… comments.php Il file serve per gestire l’elenco dei commenti e la rendering dei moduli. È possibile copiare il codice di base da uno tema già esistente, come Twenty Twenty-One. comments.php E viene modificato; questa è una fase complessa, ma standardizzata.

Aggiungere opzioni personalizzabili per il tema

Per permettere agli utenti di modificare lo stile del sito senza dover modificare il codice sorgente, puoi utilizzare l’API del Personalizzatore (Customizer) di WordPress. WP_Customize_Manager Gli oggetti permettono di aggiungere impostazioni, controlli e aree di visualizzazione (o elementi interattivi).

function my_first_theme_customize_register( $wp_customize ) {
    // 添加一个‘颜色’板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-first-theme' ),
        'priority' => 30,
    ) );

// 添加一个‘主色调’设置
    $wp_customize->add_setting( 'primary_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 实时预览
    ) );

// 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label'    => __( '主色调', 'my-first-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'primary_color',
    ) ) );
}
add_action( 'customize_register', 'my_first_theme_customize_register' );

In seguito, potrai… style.css Oppure è possibile visualizzare dinamicamente questo valore di colore utilizzando lo stile inline.

Riassumendo

Lo sviluppo di temi per WordPress è un processo graduale che parte dalla struttura e arriva allo stile, dalle basi ai dettagli. Cominciando dalle nozioni più fondamentali… style.css 和 index.php All’inizio, hai gettato le basi per lo sviluppo dei temi. La comprensione della struttura gerarchica dei template ti ha permesso di creare modelli precisi adatti a diversi tipi di pagine.functions.php È uno strumento potente per estendere le funzionalità di un tema, utilizzato per integrare navigazioni, widget, script di stile e opzioni personalizzabili. Infine, perfezionando il ciclo di visualizzazione degli articoli, i modelli per i commenti e le opzioni personalizzabili, il tuo tema diventerà sia professionale che user-friendly. Ricorda che consultare costantemente la guida ufficiale e il codice dei temi di qualità esistenti è il modo migliore per migliorare le tue competenze di sviluppo.

FAQ - Domande frequenti

Quanti file sono necessari almeno per un tema WordPress?

Un tema WordPress, in teoria, richiede soltanto due file:style.css 和 index.php。style.css È necessario includere l’header con le informazioni corrette relative al tema, in modo che WordPress possa riconoscerlo correttamente. index.php Come template di riserva predefinito per tutte le pagine… Certo, le funzionalità di questo tema sono molto limitate, ma è comunque possibile attivarlo e utilizzarlo.

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

Devi utilizzare la funzionalità di internazionalizzazione (i18n) di WordPress. functions.php In cinese, usare load_theme_textdomain() Utilizza una funzione per caricare i file di traduzione. Nel codice del tuo tema, sostituisci tutte le stringhe destinate all’utente con i loro equivalenti tradotti. __()(Usato per l’echeggiamento) o _e()(Dato per l’output diretto) Incapsula le funzioni di traduzione e specifica il tuo ruolo all’interno di… style.css Definito in cinese Text DomainSuccessivamente, è possibile utilizzare strumenti come Poedit per generare file di template .pot, che vengono poi utilizzati dai traduttori per creare i file di traduzione .po e .mo.

Perché il mio stile o script personalizzato non viene caricato?

La ragione più comune è che… functions.php La funzione di hook utilizzata per caricare i stili o i script in modo asincrono non è stata collegata correttamente alle azioni pertinenti di WordPress. Assicurati di aver inserito correttamente il codice necessario all’interno dei file appropriati di WordPress. wp_enqueue_style() 或 wp_enqueue_script() La funzione, attraverso… add_action( ‘wp_enqueue_scripts’, ‘your_function_name’ ) Montare su… wp_enqueue_scripts Per quanto riguarda questa azione, è necessario anche verificare il percorso del file.get_template_directory_uri()Verifica se l’indirizzo è corretto e se il file esiste effettivamente in quella posizione.

Come creare un template unico per una pagina specifica?

Esistono principalmente due metodi. Il primo consiste nell’utilizzare dei modelli di pagina: è sufficiente aggiungere un blocco di commenti specifico all’inizio del file PHP. /* Template Name: 全宽页面 */Poi salvatelo nella vostra cartella dei temi. Quando modificate una pagina nel backend di WordPress, potrete selezionarlo dal menu a discesa “Proprietà della pagina” -> “Template”. Un altro metodo consiste nell’utilizzare la gerarchia dei template: ad esempio, per creare un template per una pagina con l’alias “contact”, basta creare un file con il nome… page-contact.php Per i file specificati, WordPress utilizzerà automaticamente quello con priorità per renderizzare la pagina. Il vantaggio del primo approccio è la possibilità di assegnare le risorse in modo flessibile in background, mentre il vantaggio del secondo approccio è che le regole di denominazione dei file vengono applicate in modo automatico.