Da zero a uno: spiegazione dettagliata dei passaggi fondamentali e delle tecniche pratiche per lo sviluppo di temi WordPress.

Preparativi e allestimento dell'ambiente.

Prima di iniziare a scrivere il codice, è fondamentale creare un ambiente di sviluppo corretto. Questo non influisce solo sull’efficienza, ma anche sulla facilità di debug e sulla manutenzione futura del progetto. È necessario disporre di un ambiente server locale per eseguire WordPress. Si consiglia l’uso di software professionali per lo sviluppo locale, come Local by Flywheel, XAMPP o Laragon. Installa e configura correttamente PHP (si consiglia la versione 7.4 o successiva), MySQL e un server web (ad esempio Apache o Nginx).

Successivamente, scarica il pacchetto di installazione più recente di WordPress, crea un nuovo sito nel tuo ambiente di server locale e completa l’installazione. Ricorda la directory radice del tuo sito. Per facilitare la modifica del codice e il controllo delle versioni, si consiglia di utilizzare editor di codice professionistici come VS Code o PhpStorm, nonché di installare gli strumenti aggiuntivi necessari per PHP e WordPress (come frammenti di codice e plugin di debug).

Infine, è necessario comprendere qual è il punto di partenza assoluto per creare un tema per WordPress. Un tema richiede almeno due file per essere riconosciuto dal sistema: uno di questi è il file delle style sheet (i file di stile). style.cssL’altro file è il file del modello della pagina principale. index.phpSul sito… /wp-content/themes/ All’interno del catalogo, crea una nuova cartella per il tema che stai per creare, ad esempio… my-first-theme。

Si consiglia di leggere Partire da zero: Acquisire in modo efficace le conoscenze fondamentali e le tecniche pratiche per lo sviluppo di temi per WordPress。

Il file principale per la creazione di un tema

File di definizione delle informazioni sull’argomento “###”
L’identificativo di ogni argomento e la dichiarazione delle relative informazioni sono presenti in… style.css Il file contiene le informazioni necessarie per il funzionamento del tema WordPress. La sezione dei commenti in cima al file è obbligatoria: WordPress utilizza queste informazioni per leggere il nome del tema, l’autore, la descrizione del tema, e altri dettagli correlati. style.css Il file dovrebbe iniziare in questo modo:

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-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个从零开始开发的 WordPress 主题演示。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Text Domain Utilizzato per l’internazionalizzazione, questo file deve avere lo stesso nome della cartella dei tuoi temi. Conterrà anche tutti i tuoi codici di stile CSS.

Costruzione dei file di template di base

I file di template controllano l’aspetto delle diverse pagine del sito web. Creiamo ora i file più essenziali. Il primo è il file di template della pagina principale. index.phpÈ il modello di ritorno predefinito per tutte le pagine. Uno dei più semplici, ma comunque funzionante… index.php Il contenuto del file è:

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

Questo codice introduce tre funzioni principali per i componenti delle template:get_header(), get_sidebar(), get_footer()Questo significa che devi creare i contenuti corrispondenti. header.php, sidebar.php 和 footer.php Documenti.

header.php I file di solito contengono una dichiarazione del tipo di documento e le informazioni della parte testuale HTML (header HTML), fornite tramite… wp_head() La funzione restituisce i dati di output, il titolo del sito web e il menu di navigazione principale. Questo è il contenuto di base di un sito web. header.php Il file è il seguente:

Si consiglia di leggere Ti insegnerò passo dopo passo come creare un potente tema WordPress personalizzato.。

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<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>
</header>

footer.php Il file chiude la struttura della pagina e richiama… wp_footer() Molte estensioni (plugin) fanno affidamento su questo “hook” per inserire script.

Implementare la funzionalità e lo stile di un tema

Menu di registrazione e barra laterale per ###
Per permettere agli utenti di gestire i menu tramite l’interfaccia di amministrazione backend, è necessario utilizzare delle funzioni per registrare le posizioni dei menu. Questo processo avviene solitamente all’interno delle configurazioni del tema (theme settings). functions.php Il file è stato completato; è stato creato. functions.php E aggiungi il seguente codice:

<?php
function my_theme_setup() {
    // 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

// 支持文章特色图像
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?>

Successivamente, dovrai… header.php Chiamare il menu nella posizione appropriata (ad esempio, dopo il titolo del sito), utilizzando… wp_nav_menu() Funzione.

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

Allo stesso modo, per abilitare l’area dedicata ai widget (ad esempio, la barra laterale), è necessario… functions.php Registra una barra laterale:

function my_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' );

In seguito, sidebar.php Utilizzato nel file. dynamic_sidebar( 'sidebar-1' ) Per mostrarlo.

Aggiungere stili e script

Inserire correttamente i file CSS e JavaScript nella coda di elaborazione è una buona pratica per lo sviluppo su WordPress: questo permette di evitare conflitti di dipendenze tra i codici e di sfruttare al meglio le funzionalità di caching. functions.php Crea una nuova funzione:

Si consiglia di leggere Rivelazioni sullo sviluppo di temi per WordPress: le tecnologie chiave per creare siti personalizzati da zero。

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

// 引入一个自定义脚本
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

In questo modo, WordPress aggiungerà automaticamente il link al tuo file di stile nella parte iniziale della pagina. Inoltre, verrà creato… /js/ Crea un indice e aggiungi i tuoi contenuti al suo interno. navigation.js Documenti.

Livelli di template e tecniche avanzate

###: Comprendere i livelli delle strutture di template.
WordPress seleziona il file del template corrispondente in base al tipo della pagina visitata, seguendo un ordine gerarchico preciso. Questo è uno dei concetti più potenti nello sviluppo di temi per WordPress. Ad esempio, quando si visita un singolo articolo, WordPress cerca sequenzialmente:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> Alla fine, si torna indietro a… index.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

Per creare un modello personalizzato per un singolo articolo del tuo blog, puoi seguire questi passaggi: single.phpPer creare un modello per una pagina specifica, ad esempio la pagina “Informazioni su di noi”, è possibile creare un file con il nome… page-about.php Il file in questione (presumendo che l’alias della pagina sia “about”).

Utilizzare la funzionalità di estensione tramite “hook”.

L’API per gli plugin di WordPress (ganci e filtri) ti consente di modificare in modo sicuro gli temi o le funzionalità di base del sistema. I ganci d’azione (Action Hooks) ti permettono di eseguire determinate operazioni in momenti specifici del ciclo di elaborazione del contenuto. Ad esempio, se vuoi aggiungere automaticamente un testo alla fine di un articolo, puoi sfruttare i ganci d’azione disponibili per farlo. the_content Filtro:

function my_theme_add_footer_text( $content ) {
    if ( is_single() ) {
        $content .= '<p class="custom-footer">Questo articolo è stato generato dal mio sistema di generazione di contenuti.</p>';
    }
    return $content;
}
add_filter( 'the_content', 'my_theme_add_footer_text' );

Riassumendo

Seguendo i passaggi descritti in questo articolo, hai completato il percorso di base nello sviluppo di temi per WordPress: dalla preparazione dell’ambiente locale alla creazione delle informazioni che definiscono il tema stesso. style.css E i file di template che costituiscono la struttura della pagina… fino a… functions.php Ho imparato a utilizzare le funzionalità di registrazione (come menù e barre laterali), nonché gli script per l’impostazione dello stile grafico; inoltre, ho compreso il funzionamento dei livelli dei template e del meccanismo dei “hook” (meccanismi di collegamento tra componenti del sito). Ricordarsi sempre i concetti fondamentali di “livelli dei template” e di “impostazione corretta degli script/stili” ti aiuterà ad evitare molti problemi comuni durante lo sviluppo. Lo sviluppo di temi per siti web è un processo iterativo: con continui esperimenti e l’analisi di temi esistenti e di successo, potrai migliorare rapidamente le tue competenze.

FAQ - Domande frequenti

Deve iniziare tutto da zero lo sviluppo di un tema per ###?
Non è affatto così. Puoi scegliere di utilizzare il tema di base ufficiale (Underscores) o un framework come Genesis come punto di partenza. Questi offrono una struttura di codice standardizzata e funzionalità di base, il che può migliorare notevolmente l’efficienza dello sviluppo e la qualità del codice, soprattutto per i principianti.

Come posso testare il mio tema senza doverlo codificare?

Nell’ambiente di sviluppo locale, è possibile utilizzare i “dati per i test unitari dei temi” integrati in WordPress per importare un gran numero di articoli, pagine, menu e commenti di esempio che contengono vari formati ed elementi. Questo ti aiuterà a testare in modo completo il funzionamento del tema in diverse situazioni.

Perché le modifiche apportate ai miei stili non vengono applicate immediatamente in background?

Di solito questo problema è causato dal cache del browser. Puoi provare a eseguire il raffrescamento forzato premendo “Ctrl + F5” o “Cmd + Shift + R”. Se il problema è dovuto al plugin di cache di WordPress, è necessario eliminare il cache di quel plugin. Inoltre, controlla anche il tuo… style.css È stato aggiornato il numero di versione del file?

Come si procede per confezionare e distribuire il prodotto una volta completato lo sviluppo del tema?

Prima di tutto, devi assicurarti che… style.css Le informazioni relative ai temi presenti nel file sono complete e accurate. Successivamente, eliminare tutti i file di backup creati durante il processo di sviluppo, nonché le cartelle relative al controllo delle versioni (come…). .gitInoltre, creare dei file temporanei utilizzando gli strumenti forniti dal sistema. Infine, comprimere la cartella contenente il tema in formato ZIP. Questo file ZIP può essere installato tramite il pannello di amministrazione di WordPress, andando su “Aspetto” -> “Temi” -> “Aggiungi” -> “Carica tema”.