Imparare a sviluppare temi per WordPress: una guida completa e pratica, da zero a uno

Si consiglia di leggere Creare un sito web perfetto: sviluppare un tema WordPress professionale da zero.。

File di template principali e gerarchia dei template

WordPress utilizza un sistema intelligente chiamato “struttura dei template” per determinare come visualizzare i diversi tipi di contenuti. Quando un utente accede a una pagina, WordPress cerca il file del template corrispondente seguendo un ordine di priorità prestabilito. Comprendere questa struttura è fondamentale per lo sviluppo di temi personalizzati.

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

Principio di funzionamento dei livelli di template

Ad esempio, quando si visita un articolo di un blog, WordPress cerca in sequenza:single-post-{post-type}-{slug}.php -> single-post-{post-type}.php -> single.php -> singular.php -> Alla fine, si torna indietro a…index.phpGli sviluppatori possono personalizzare il modo in cui vengono visualizzati i diversi contenuti creando file di template più specifici. Le pagine di archiviazione, le pagine di ricerca, le pagine 404, ecc., seguono ciascuna le proprie regole di strutturazione.

Creare un file di template di base

Dai concetti più basilari…header.php、footer.php和index.phpInizia a costruire.header.phpNel testo, è assolutamente necessario utilizzare…wp_head()Questa funzione consente al core di WordPress, ai plugin e ai temi di inserire qui il codice necessario (ad esempio, link alle tabelle di stile). Allo stesso modo…footer.phpIn questo contesto, dovrebbe essere utilizzato il termine “dovrebbe essere utilizzato”.wp_footer()Funzione… Nella template principale.index.phpIn Cina, attraversoget_header()、get_footer()、get_sidebar()Aspettate che i tag dei template introducano questi componenti.

Un design estremamente minimalista.index.phpEcco un esempio di rappresentazione strutturale:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 显示文章内容
        endwhile;
    else :
        // 显示未找到内容
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Le funzionalità relative ai temi sono integrate con l’API di WordPress.

functions.phpI file rappresentano il “cervello” di un tema, utilizzati per estendere le funzionalità di questo tema senza modificare i file principali. Qui è possibile intervenire nel flusso di esecuzione di WordPress utilizzando gli “action hooks” e i “filter hooks”.

Si consiglia di leggere Come creare un tema WordPress professionale: una guida completa da zero all’attivazione online。

Funzionalità supportate dall’iscrizione a un argomento (topic):

Attraversoadd_theme_support()Le funzioni permettono di dichiarare le varie funzionalità che un tema supporta. Ad esempio, è possibile abilitare le miniature degli articoli (immagini di rilievo), personalizzare il logo, modificare il formato degli articoli, e molto altro ancora.

function mytheme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'mytheme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Il codice sopra menzionato funziona attraverso…after_setup_themeI “hook” vengono eseguiti durante l’inizializzazione del tema, permettendo di registrare le funzionalità relative a quel tema.

Introdurre script e stili in modo sicuro

Non collegare mai direttamente i file CSS e JS nei file di template. È consigliabile utilizzare altri metodi per includerli nel progetto.wp_enqueue_scriptsGanci di azione (action hooks) e funzioni corrispondenti vengono utilizzati per ordinare il caricamento dei 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

function mytheme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JS文件，并依赖jQuery
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Questo metodo garantisce un efficace controllo delle dipendenze, evita il caricamento ripetuto dei file e rispetta le migliori pratiche di utilizzo di WordPress.

Personalizzazione degli argomenti e funzionalità avanzate

Lo sviluppo di temi per WordPress moderni è indissolubilmente legato all’aggiunta di funzionalità personalizzate. Queste includono, soprattutto, l’opzione di visualizzare in tempo reale le modifiche apportate ai temi tramite il tool di personalizzazione, nonché la creazione di tipi di articoli e categorie personalizzate per gestire contenuti specifici.

Utilizzare l’API del personalizzatore di temi

L’API del Personalizzatore di WordPress (WordPress Customizer) ti consente di aggiungere opzioni di configurazione che possono essere visualizzate in anteprima in tempo reale. Puoi creare pannelli, sezioni e impostazioni, nonché controlli specifici per queste ultime (ad esempio, selettori di colore o elementi per l’upload di file).

Si consiglia di leggere Guida definitiva: Come sviluppare da zero un tema professionale per WordPress。

function mytheme_customize_register( $wp_customize ) {
    // 添加一个节
    $wp_customize->add_section( 'mytheme_colors', array(
        'title' => __( '主题颜色', 'mytheme' ),
    ) );
    // 添加一个设置
    $wp_customize->add_setting( 'primary_color', array(
        'default' => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );
    // 为该设置添加一个颜色控制器
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label' => __( '主色', 'mytheme' ),
        'section' => 'mytheme_colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Nel file tematico, puoi utilizzare…get_theme_mod( 'primary_color' )Per ottenere i valori impostati dall’utente.

Creare un tipo di articolo personalizzato

Per i contenuti non standard, come portfolio, prodotti o informazioni sul team, registrare un tipo di articolo personalizzato (Custom Post Type – CPT) rappresenta la scelta migliore. Questo processo avviene solitamente tramite…register_post_type()Per l’implementazione della funzione, si consiglia di procedere all’interno di un plugin, al fine di garantire che i dati non vengano persi in caso di cambio di tema. Tuttavia, a scopo dimostrativo, è anche possibile farlo direttamente all’interno del tema stesso.functions.phpSi svolge all’interno di…

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

function mytheme_register_portfolio() {
    $args = array(
        'public' => true,
        'label'  => __( '作品集', 'mytheme' ),
        'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'has_archive' => true,
        'menu_icon' => 'dashicons-portfolio',
    );
    register_post_type( 'portfolio', $args );
}
add_action( 'init', 'mytheme_register_portfolio' );

Dopo l’iscrizione, nel pannello di amministrazione apparirà il menu “Galleria di opere”. Potrai gestirla allo stesso modo in cui gestisci gli articoli e creare per essa file di template dedicati.single-portfolio.php。

Riassumendo

Lo sviluppo di temi per WordPress rappresenta un processo sistematico che inizia dalla comprensione della struttura dei file di base e della gerarchia dei template, per arrivare all’uso efficace di tutte le funzionalità disponibili.functions.phpÈ possibile estendere le funzionalità di un tema WordPress utilizzando diversi API, come l’API per i personalizzatori e l’API per i tipi di articoli. Seguire le migliori pratiche – ad esempio, caricare in modo sicuro le risorse tramite gli hook, utilizzare sottotemi per apportare modifiche e scrivere codice traducibile – è fondamentale per sviluppare temi professionali, efficienti e facili da mantenere. Seguendo i passaggi indicati in questa guida, hai già acquisito le conoscenze essenziali per creare un tema personalizzato da zero; il passo successivo consiste nel perfezionare le tue abilità attraverso la pratica costante e l’esplorazione più approfondita degli API disponibili.

FAQ - Domande frequenti

Quali sono i file minimi necessari per un tema WordPress di tipo ###?
Un tema WordPress richiede almeno due file:style.css 和 index.php。style.cssIl blocco di commenti in cima al file deve contenere le informazioni metadati sul tema (ad esempio, il nome del tema), che sono necessarie per che WordPress possa riconoscere il tema stesso.index.phpQuesto è il file del modello principale predefinito.

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

Dovi essere preparato per l’internazionalizzazione del testo. Nei contenuti dedicati agli utenti, tutte le stringhe che vengono visualizzate devono essere racchiuse all’interno di funzioni di traduzione. Ad esempio:__('Hello World', 'mytheme-textdomain')或_e('Hello World', 'mytheme-textdomain')Poi, utilizzando strumenti come Poedit, si procede alla generazione del contenuto desiderato..potTradurre il file del modello e creare la versione corrispondente nella lingua desiderata..po和.moInfine,functions.phpUtilizzare nel contestoload_theme_textdomain()Funzione di caricamento delle librerie (function loading).

Quando si sviluppa un tema, come evitare che le modifiche personalizzate vengano perse dopo l’aggiornamento del tema stesso?

Assolutamente non modificare direttamente i file del tema principale (quello scaricato da terze parti). Il metodo corretto è utilizzare la tecnica dei “sottotemi” (subthemes). Crea una nuova directory per il tuo tema e lavora all’interno di essa.style.cssIl documento è stato approvato dal Consiglio di Stato cinese il 22 novembre 2019.Template:Indica il nome del directory del tema padre. Nel tema figlio, dovrai includere soltanto i file che desideri modificare o aggiungere.style.css、functions.phpOppure utilizzare un file di template che sovrascriva il file esistente. In questo modo, il tema principale può essere aggiornato in modo sicuro, mantenendo al contempo le tue personalizzazioni.

Come posso aggiungere un modello di pagina personalizzato al mio tema?

Prima di tutto, crea un nuovo file PHP nel directory radice del tuo progetto. Ad esempio:page-fullwidth.phpAll’inizio di questo file, aggiungete una nota speciale per dichiarare che si tratta di un modello di pagina. Ad esempio:<?php /* Template Name: 全宽页面 */ ?>Successivamente, scrivi il codice del tuo template in questo file. Dopo aver salvato i cambiamenti, quando creerai o modificherai una pagina nell’interfaccia di back-end di WordPress, potrai vedere e utilizzare il template “Pagine a larghezza piena” nell’elenco a discesa “Template” delle “Proprietà della pagina”.