Guida introduttiva allo sviluppo di temi WordPress: dall'inizio alla pubblicazione pratica.

Preparazione dell’ambiente di sviluppo per temi WordPress

Prima di iniziare a scrivere il codice, è fondamentale creare un ambiente di sviluppo locale stabile ed efficiente. Questo ti permetterà di lavorare in modalità offline e di evitare i rischi associati ai test eseguiti sui server online.

Configurazione dell’ambiente di sviluppo locale

Il metodo più comune per avviare un sito web è l’utilizzo di pacchetti software per server locali integrati, come XAMPP, MAMP o Laragon. Questi strumenti installano automaticamente Apache, MySQL e PHP in un’unica operazione, eliminando la necessità di una configurazione complessa. Per lo sviluppo di siti WordPress, si consiglia l’utilizzo di ambienti ottimizzati appositamente per WordPress, come Local by Flywheel o DesktopServer, che offrono funzionalità pratiche per creare siti web, gestire i database e cambiare le versioni di PHP.

Selezione di strumenti e editori essenziali

Hai bisogno di un editor di codice. Ti consiglio di utilizzare Visual Studio Code, PhpStorm o Sublime Text: tutti offrono funzionalità avanzate per l’highlighting del codice, il completamento automatico e la gestione dei progetti. In particolare, Visual Studio Code, abbinato a plugin dedicati a WordPress (come WordPress Snippet e PHP Intelephense), può migliorare notevolmente l’efficienza dello sviluppo.

Si consiglia di leggere Imparare a sviluppare plugin per WordPress: creare la tua prima estensione funzionale partendo da zero.。

Inoltre, il sistema di controllo delle versioni Git è essenziale. Anche se sei un sviluppatore indipendente, utilizzare Git per tracciare i cambiamenti nel codice, creare branch e fare backup del progetto è una buona abitudine. Puoi inizializzare un repository localmente e considerare la possibilità di pubblicarlo in futuro su piattaforme di hosting remoto come GitHub, GitLab o Bitbucket.

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

Comprendere la struttura di base di un tema WordPress

Un tema standard per WordPress è una cartella che contiene file specifici, situata nella directory principale del sito web. /wp-content/themes/ All’interno del directory, anche il tema più semplice deve contenere due file fondamentali.

Il file dello stile del tema

style.css Si tratta dei file che costituiscono l“”identificativo“ di un tema e ne definiscono l’aspetto estetico. Il blocco delle note di testa (header comments) contiene tutte le informazioni metadati relative al tema; queste informazioni vengono lette da WordPress e visualizzate sulla pagina ”Aspetto“ -> ”Temi” nell’interfaccia amministrativa. Ecco un esempio di una nota di testa di base:

/*
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.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

In questo file, continuerai a scrivere tutte le regole di stile CSS necessarie per controllare l’aspetto della parte front-end del sito web, come i font, i colori, la disposizione dei contenuti, ecc.

Il file di template di indice principale

index.php È il modello predefinito per i contenuti di un tema e allo stesso tempo è obbligatorio. Quando WordPress non riesce a trovare un file di modello più specifico… single.php 或 page.phpQuando viene utilizzato, viene impiegato per rendere la pagina. Di solito contiene i tag dei template di WordPress, necessari per richiamare la parte superiore della pagina (header), il contenuto degli articoli in ciclo, la barra laterale e la parte inferiore della pagina (footer).

Si consiglia di leggere Guida completa allo sviluppo di temi WordPress: dalle basi alla pratica, le competenze necessarie per creare un sito web personalizzato.。

Oltre a questi due file, un tema completo e funzionale include solitamente anche i seguenti file di template:
* header.phpLa parte superiore del sito web (header area)<head> (E insieme alla barra di navigazione in alto.)
* footer.phpLa parte inferiore della pagina del sito web.
* functions.phpViene utilizzato per aggiungere funzionalità relative ai temi, menu di registrazione, barre laterali, ecc.
* page.php: Viene utilizzato per rendere le pagine statiche.
* single.php`: Utilizzato per rendere un singolo articolo.
* archive.phpUtilizzato per rendere pagine di archiviazione contenenti categorie, etichette e altri elementi simili.

Crea il tuo primo tema da zero.

Ora, mettiamoci all’opera per creare il tema più semplice possibile, al fine di comprendere il modo in cui le varie parti collaborano tra loro.

Creare file di base e directory.

Prima di tutto, sul tuo sito WordPress locale… /wp-content/themes/ Nel directory, crea una nuova cartella e dale il nome di… my-first-themePoi, all’interno di quella cartella, crea due file vuoti:style.css 和 index.phpScrivi le note di testo relative alla parte CSS menzionate nella sezione precedente nel file di codice. style.css Documenti.

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 modello di indice di base

Successivamente, procedi con la modifica. index.php Un file: una versione molto semplice può contenere chiamate alle funzioni di base di WordPress. Per iniziare, utilizziamo… get_header() 函数来引入头部。

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

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 在这里输出文章内容
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

<?php get_footer(); ?>

Questo codice implementa il “The Loop”, il meccanismo fondamentale di WordPress: verifica la presenza di articoli, ne esamina ciascuno e ne visualizza il titolo e il contenuto. Infine, viene utilizzato… get_footer() Inserire il piede di pagina.

Aggiunta di funzionalità e menù di registrazione

Per rendere l’argomento più pratico, abbiamo creato… functions.php File. In questo file, possiamo utilizzare le funzionalità fornite da WordPress. add_theme_support() Funzioni per abilitare le funzionalità relative ai temi, come le miniature degli articoli (immagini di rilievo) e il logo personalizzato.

Si consiglia di leggere Una guida completa allo sviluppo di temi WordPress: dalla creazione di un tema da zero alla costruzione di un sito web di livello professionale.。

<?php
function my_first_theme_setup() {
    // 让主题支持文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册一个侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( '在此添加小工具。', 'my-first-theme' ),
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Poi, devi… header.php Utilizzato nel file. wp_nav_menu() Una funzione per visualizzare il menu che hai registrato.

Sviluppo avanzato del tema e preparazione alla pubblicazione

Una volta completato il tema di base, è possibile migliorarne le funzionalità e la flessibilità utilizzando modelli più dettagliati e meccanismi di integrazione (noti come “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

Ottimizzare la struttura utilizzando componenti template.

I “Template Parts” rappresentano un ottimo strumento per modularizzare frammenti di template riutilizzabili, come ad esempio le schede con i riassunti degli articoli. È possibile creare… template-parts/content.php Inserisci il codice che visualizza il contenuto di ogni articolo all’interno del ciclo. Dopodiché… index.php Nel ciclo di..., utilizzare... get_template_part() Funzione per chiamarlo:

while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_type() );
endwhile;

Utilizzare gli action hook e i filter hook

Gli “hook” rappresentano la base della personalizzazione e dell’espansibilità di WordPress, venendo ampiamente utilizzati anche nello sviluppo di temi. Gli “Action Hooks” ti permettono di inserire codice in momenti specifici dell’esecuzione del programma, ad esempio per aggiungere contenuti dopo il corpo di un articolo. Gli “Filter Hooks”, invece, ti consentono di modificare i dati, come ad esempio la lunghezza della traccia di un articolo.

Ad esempio, utilizzando… wp_enqueue_scripts Gli “action hooks” vengono utilizzati per importare correttamente i file JavaScript e CSS.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Eseguire i test finali e il packaging.

Prima della pubblicazione, è necessario effettuare test approfonditi. Assicurarsi che il tema venga visualizzato correttamente in diversi browser (Chrome, Firefox, Safari, Edge). Verificare anche il layout responsivo utilizzando sia smartphone che computer. Attivare il modalità di debug nel backend di WordPress. wp-config.php Imposta le opzioni di visualizzazione del testo nel tuo browser. define( 'WP_DEBUG', true );Correggere tutti gli avvisi e gli errori relativi a PHP. Verificare se tutte le funzionalità principali di WordPress (come i commenti, la ricerca e la paginazione) funzionano correttamente.

Infine, elimina i file di log, i file di backup e qualsiasi altro contenuto inutile generato durante il processo di sviluppo. Comprimi l’intera cartella del tema in un file ZIP; questo file potrà essere utilizzato per l’installazione.

Riassumendo

Lo sviluppo di temi per WordPress inizia dalla comprensione della sua struttura di base.style.css, index.phpInizia con un approccio graduale che si addentra gradualmente nei livelli dei template, negli “hook” delle funzioni e nei componenti modulari. Per farlo, è necessario creare un ambiente locale, generare i file fondamentali e sfruttare le risorse disponibili. functions.php Rafforzando le funzionalità e sottoponendole a test rigorosi, è possibile creare temi che soddisfino gli standard richiesti e che siano ricchi di funzionalità. Una volta acquisita una buona padronanza di questi concetti fondamentali, sarai in grado di personalizzare l’aspetto e le funzionalità di qualsiasi sito web desideri, e avrai così una solida base per approfondire lo studio di framework più avanzati, come Underscores e Sage.

FAQ - Domande frequenti

Per sviluppare temi per WordPress è necessario conoscere PHP?

Sì, per sviluppare in modo approfondito i temi per WordPress è necessario conoscere PHP. WordPress è infatti scritto in PHP, e tutti i file di template (.php) contengono codice PHP che viene utilizzato per generare dinamicamente il contenuto. È possibile modificare lo stile di un sottotema senza scrivere troppo codice PHP, ma per creare template personalizzati, implementare funzionalità complesse o modificare la logica delle query, la conoscenza di PHP è essenziale.

Qual è la funzione del file functions.php relativo al tema?

functions.php I file rappresentano il “centro funzionale” di un tema: vengono utilizzati per aggiungere o modificare le funzionalità di un tema, senza dover modificare i file principali dello stesso. Le loro principali funzioni includono: abilitare il supporto per funzionalità specifiche del tema (come immagini di sfondo personalizzate, sfondi personalizzati), registrare elementi del menu di navigazione e delle aree di widget presenti sul lato del sito, gestire l’ordine di caricamento dei file di stile e dei script, definire funzioni personalizzate, nonché utilizzare meccanismi di azione (actions) e filtri (filters) per modificare il comportamento predefinito di WordPress.

Cos’è un sottotema (subtopic) e perché utilizzarlo?

Un sottotema (sub-theme) è un tema che dipende da un altro tema (tema principale, o “parent theme”), ereditando tutte le funzionalità, gli stili e i file di template di quest’ultimo, ma permettendo di sovrascrivere o aggiungere nuove funzionalità in modo sicuro. Lo scopo principale dell’utilizzo dei sottotemi è quello di mantenere le modifiche personalizzate effettuate quando il tema principale viene aggiornato: se si modificano direttamente i file del tema principale, tali modifiche verranno sovrascritte, mentre quelle apportate al sottotema rimarranno intatte. Questa rappresenta la migliore pratica per la personalizzazione e la manutenzione dei temi.

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

Per rendere un tema compatibile con più lingue (internazionalizzazione e localizzazione, ovvero i18n/l10n), sono necessari due passaggi principali. Primo passo: utilizzare le funzioni di traduzione fornite da WordPress per incapsulare tutte le stringhe di testo presenti nel tema. Ad esempio, si può fare utilizzando… esc_html__( ‘文本’, ‘text-domain’ ) 或 _e( ‘文本’, ‘text-domain’ )In secondo luogo, utilizzare strumenti come Poedit per generare il file di template .pot; in base a questo file, i traduttori possono creare i file .po e .mo (ad esempio, zh_CN.po). style.css La parte iniziale (header) è stata impostata correttamente. Text Domain È la chiave.