Dallo zero all’uno: Guida completa allo sviluppo di temi per WordPress e insegnamenti pratici

Fundamenti dello sviluppo di temi per WordPress e configurazione dell’ambiente di sviluppo

Per iniziare a sviluppare temi per WordPress, è necessario prima comprendere i suoi concetti fondamentali. Un tema WordPress è essenzialmente un insieme di file che includono fogli di stile, file di template, immagini e file JavaScript; questi elementi insieme determinano l’aspetto e le funzionalità di un sito web. Sviluppare un tema significa creare un insieme completo di regole che indicano a WordPress come visualizzare i contenuti presenti nel database agli utenti.

La preparazione dell’ambiente prima dello sviluppo è di fondamentale importanza. È necessario disporre di un ambiente di sviluppo locale, che può essere facilmente configurato installando strumenti come XAMPP, MAMP, Local by Flywheel o Docker. L’ambiente locale consente di effettuare sviluppo, test e debug senza interferire con il sito web online. Inoltre, un editor di codice efficiente è essenziale: strumenti come Visual Studio Code,PhpStorm o Sublime Text offrono funzionalità come l’highlighting del codice, suggerimenti automatici e possibilità di debug, migliorando notevolmente l’efficienza dello sviluppo.

Successivamente, è necessario comprendere la struttura del catalogo dei temi. Ogni tema si trova in…/wp-content/themes/Si trova all’interno del directory e esiste come una cartella separata. Il tema più semplice richiede soltanto due file:style.css和index.php…instyle.cssNelle note di testo iniziali, è necessario fornire le informazioni metadati sul tema in questione.

Si consiglia di leggere Analisi approfondita dei campi personalizzati di WordPress: dalla conoscenza di base alle pratiche di utilizzo avanzate。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习WordPress主题开发的简单主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Questostyle.cssI file non sono soltanto fogli di stile, ma rappresentano anche il “cartellino d’identità” del tema utilizzato. WordPress legge queste note per riconoscere e visualizzare correttamente il tema in background.

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

File di template principali e struttura gerarchica dei temi

WordPress utilizza un sistema intelligente chiamato “Struttura Hierarchica dei Template” (Template Hierarchy) per determinare quale file di template utilizzare per visualizzare il contenuto in risposta a una specifica richiesta di pagina. Comprendere questa struttura è fondamentale per lo sviluppo di temi personalizzati.

Il file di template più importante è…index.phpFunge da template di riserva definitivo per tutte le pagine: viene utilizzato quando WordPress non riesce a trovare un template più specifico. La pagina iniziale (la homepage) è solitamente creata utilizzando questo template di base.front-page.php或home.phpControllo: La pagina singola dell’articolo è la scelta preferibile.single.phpPer tipi di articoli specifici, ad esempio “prodotti”, WordPress cercherà…single-product.phpUtilizzo della paginapage.phpSe la pagina dispone di un modello personalizzato, verrà utilizzato tale modello.page-{slug}.php或page-{id}.phpLa pagina di archiviazione degli articoli (come per categorie, tag, autori o data di archiviazione) corrisponde…archive.phpe le sue varianti più specifiche, comecategory.php、tag.phpetc.

Template per la parte superiore e inferiore del contenuto principale (header e footer)

Per rispettare il principio DRY (Don’t Repeat Yourself), i temi di WordPress utilizzano…get_header()、get_footer()和get_sidebar()Utilizza funzioni come `include` per importare le parti comuni del codice. Questo significa che dovrai creare…header.php和footer.phpDocumenti.

header.phpI file di solito contengono il titolo del documento HTML, le meta-tag, collegamenti alle tabelle di stile e ai script, nonché l’area di navigazione in alto del sito web. È di fondamentale importanza che tali file includano anche…wp_head()Chiamata di funzione: questa funzione consente al nucleo di WordPress, agli plugin e ai temi stessi di…<head>Inserire parte del codice necessario.

Si consiglia di leggere Guida introduttiva allo sviluppo di temi WordPress: costruisci il tuo sito web da zero.。

footer.phpIl file contiene le informazioni presenti in fondo al sito web, le referenze ai script, ecc., e termina con…wp_footer()La funzione è terminata; questo corrisponde a…wp_head()Ha lo stesso scopo: viene utilizzato per inserire codice nella parte inferiore della pagina.

Nel file di template, puoi introdurle in questo modo:

<?php get_header(); ?>

<!-- 主内容区 -->

<?php get_footer(); ?>

Funzionalità tematiche e cicli in WordPress

Le funzionalità di un tema non si limitano esclusivamente all’aspetto estetico.functions.phpPer i file relativi ai tuoi temi (temi per la personalizzazione dell’aspetto dell’interfaccia di un software), puoi aggiungere funzionalità specifiche, registrare nuove caratteristiche o integrare plugin. Questi file vengono caricati automaticamente non appena il tema viene attivato, e funzionano come se fossero plugin dedicati esclusivamente a quel tema.

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

Comprendere i cicli di WordPress

Il ciclo in WordPress rappresenta la logica fondamentale nello sviluppo di temi. Si tratta di un frammento di codice PHP utilizzato per verificare se la pagina attuale contiene articoli (o post) da visualizzare; in caso affermativo, il codice esegue un ciclo per iterare su ciascun articolo e visualizzarne i contenuti. La struttura di base del ciclo è 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>
    <p> </p>
<p></p>
    <p>Non è stato trovato alcun articolo.</p>
<?php endif; ?>

Nel ciclo, è possibile utilizzare una serie di tag di template per visualizzare le informazioni sull’articolo. Ad esempio:the_title()Output Titlethe_content()Output del contenuto completo,the_excerpt()Riassunto dell'output,the_permalink()Ottenere il link dell’articolo.the_post_thumbnail()Estrai immagini caratteristiche.

Menu di registrazione e barra laterale

I temi moderni di solito consentono agli utenti di personalizzare i menu e gli strumenti aggiuntivi (plugin) tramite l’interfaccia di amministrazione. Per farlo, è necessario disporre di…functions.phpEffettuare la registrazione qui.

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

Usareregister_nav_menus()Una funzione può registrare una o più posizioni di menu.

function mytheme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
            'footer-menu'  => __( '页脚菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_menus' );

Poi, nel file del template (ad esempio…)header.phpUtilizzato all'interno di…)wp_nav_menu()Per visualizzare il menu…

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

Allo stesso modo, la barra laterale (area per gli appunti/elementi aggiuntivi) funziona in modo simile…register_sidebar()Registrazione di funzioni:

function mytheme_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', 'mytheme_widgets_init' );

Nel modello, utilizzaredynamic_sidebar( 'sidebar-1' )Per chiamare questa area…

Integrazione dei personalizzatori di stili, script e temi

Per rendere il tema più professionale e user-friendly, è necessario gestire correttamente il caricamento degli stili e dei script, nonché integrare al massimo le funzionalità di personalizzazione fornite da WordPress.

Caricamento in coda di stili e script

Il modo corretto per farlo è utilizzare…wp_enqueue_style()和wp_enqueue_script()Funzioni… Aggiungile.functions.phpAll’interno dei “ganci” (hook) correlati, vengono gestite le dipendenze tra i componenti del sistema. Ciò garantisce che tali dipendenze siano soddisfatte correttamente e evita il caricamento ripetuto dei componenti stessi.

function mytheme_enqueue_assets() {
    // 主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );

// 谷歌字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );

// 主JavaScript文件
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

Integrated Theme Customizer

Il personalizzatore di WordPress consente agli utenti di modificare le impostazioni del tema in tempo reale, visualizzando immediatamente i risultati delle modifiche.$wp_customizeAgli oggetti è possibile aggiungere impostazioni e controlli.

Ad esempio, aggiungere un’opzione per selezionare il colore del titolo del sito:

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置（存储在数据库中）
    $wp_customize->add_setting( 'header_color', array(
        'default'           => '#333333',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

// 添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label'    => __( '页眉颜色', 'my-first-theme' ),
        'section'  => 'colors',
        'settings' => 'header_color',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Poi, nel tuo…style.cssOppure utilizzate questo valore nei formati di output dinamico:

function mytheme_customizer_css() {
    ?>
    <style type="text/css">
        .site-header {
            background-color: <?php echo esc_attr( get_theme_mod( 'header_color', '#333333' ) ); ?>;
        }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customizer_css' );

Riassumendo

Lo sviluppo di temi per WordPress rappresenta una competenza interessante che unisce design e programmazione. Tutto inizia con la conoscenza dei file di base del sistema, come…style.css和index.phpPer comprendere appieno WordPress, è necessario conoscere i concetti di base, come la gerarchia dei template, i cicli di WordPress e così via.functions.phpTra le potenti funzionalità di WordPress, è possibile creare temi ben strutturati e ad alte prestazioni organizzando correttamente i file delle template, utilizzando le relative etichette, registrando i menu e le aree per gli aggiuntivi, nonché caricando i risorse in modo sequenziale. Inoltre, l’integrazione di strumenti per la personalizzazione dei temi offre all’utente finale un’esperienza di configurazione semplice e intuitiva. Una volta acquisite queste nozioni di base, sarai in grado di trasformare i tuoi progetti grafici in temi WordPress completi e funzionali, gettando così le basi per lo studio di framework tematici più avanzati (come Underscores o Genesis), nonché per lo sviluppo di temi basati sul modello Block.

FAQ - Domande frequenti

Per sviluppare temi per WordPress è necessario conoscere bene PHP?

Anche se non è necessario raggiungere il livello di un esperto, una solida conoscenza di PHP è fondamentale. È necessario comprendere la grammatica di PHP, le variabili, le funzioni, i cicli e le istruzioni condizionali, poiché il nucleo di WordPress e i file dei temi sono scritti in PHP. Inoltre, è altrettanto importante avere una buona padronanza di HTML, CSS e dei fondamenti di JavaScript.

Come posso far sì che il mio tema sia in linea con gli standard ufficiali di WordPress?

Per far sì che il tuo tema sia conforme agli standard e possa essere incluso nel catalogo ufficiale di temi di WordPress, è necessario seguire le indicazioni presenti nel “WordPress Theme Development Manual” e nei requisiti per la revisione dei temi. Questo include l’utilizzo di pratiche di codifica sicure, la preparazione del tema per l’internazionalizzazione (utilizzo di campi di testo e funzioni di traduzione), la garanzia di un design responsive, l’evitamento di codificare funzionalità chiave direttamente nel tema stesso (si consiglia l’uso di sottotempi o plugin), nonché l’esecuzione di test tramite il plugin ufficiale Theme Check.

Perché i cambiamenti apportati al mio tema non vengono visualizzati dopo il raffresco della pagina?

Di solito, questo problema è causato dal cache del browser o dal meccanismo di cache di WordPress. Per iniziare, prova a premere i tasti contemporaneamente…Ctrl + F5(Windows/Linux) oCmd + Shift + RSu Mac, esegui un “hard refresh” per eliminare la cache del browser. Se il problema persiste, assicurati di essere nell’ambiente di sviluppo locale e verifica se sono installati plugin che influenzano la cache; prova anche a disabilitarli temporaneamente. Infine, controlla se hai modificato il file template corretto e se il file è stato salvato con successo.

Qual è la differenza tra un sottotema (subtopic) e un tema principale (parent topic)? Quando utilizzarli?

Il tema padre è un tema completo e indipendente, con tutte le funzionalità necessarie. Il tema figlio, invece, dipende dal tema padre e contiene soltanto un numero limitato di file (almeno uno è obbligatorio).style.cssI sottotemi (subthemes) vengono utilizzati per sovrascrivere o estendere gli stili e le funzionalità di un tema genitore (parent theme). Quando si desidera apportare modifiche personalizzate a un tema esistente, ma si vuole evitare che tali modifiche vengano cancellate con l’aggiornamento del tema genitore, è consigliabile creare un sottotema. Questa rappresenta la migliore pratica per aggiornare e personalizzare i temi.

Come posso aggiungere il pieno supporto per l’editor Gutenberg al mio tema?

Per migliorare il supporto per l’editor Gutenberg, è necessario…functions.phpUtilizzare nel contestoadd_theme_support()Una dichiarazione di funzione specifica una serie di caratteristiche, ad esempio l’aggiunta di…align-wide和align-fullSono supportate funzionalità come la personalizzazione dei pannelli di colori, lo sviluppo di sfondi a gradiente e il controllo delle dimensioni dei caratteri. Inoltre, vengono creati fogli di stile separati per gli editor di articoli e pagine, che vengono poi utilizzati durante la modifica dei contenuti.add_editor_style()Aggiungilo. Per personalizzazioni più avanzate, potrebbe essere necessario imparare a creare blocchi personalizzati.