I temi per WordPress rappresentano il cuore dell’aspetto estetico e delle funzionalità di un sito web. Sviluppare i propri temi non solo permette di ottenere un design completamente personalizzato, ma anche di comprendere più a fondo il funzionamento di WordPress, migliorando così le proprie competenze di sviluppo. Questo guida ti accompagnerà passo dopo passo nella creazione di un tema di base che rispetti gli standard di WordPress, partendo da zero.
Configurazione dell’ambiente di sviluppo e dell’infrastruttura di base
Prima di iniziare a scrivere il codice, è necessario disporre di un ambiente di sviluppo locale adatto. È possibile utilizzare XAMPP, MAMP o applicazioni desktop come Local by Flywheel. Assicurarsi che nell’ambiente siano installati PHP, MySQL e Apache/Nginx.
Creare una directory per i temi e i file principali.
Un tema WordPress di base richiede soltanto due file. Per iniziare, trova questi file nella directory di installazione di WordPress.wp-content/themesAll’interno della cartella, crea una nuova cartella, ad esempio…my-first-theme。
Si consiglia di leggere Guida allo sviluppo di temi per WordPress: Creare siti personalizzati da zero。
All’interno di quella cartella, creare il primo file principale:style.cssQuesto file non è solo un foglio di stile, ma contiene anche le informazioni metadati del tema. All’inizio del file deve esserci una nota con il formato corretto.
/*
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
*/Il secondo file principale è…index.phpQuesto è il file di template predefinito per il tema; viene utilizzato quando WordPress non riesce a trovare un template più specifico. Inizialmente, può essere molto semplice.
<!DOCTYPE html>
<html no numeric noise key 1010>
<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 1007>
<header>
<h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
the_content();
endwhile;
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<p><strong>Questo è un testo di esempio.</strong></p>
</body>
</html>Ora il tuo tema è disponibile nell’elenco “Temi” presente nella sezione “Aspetto” dell’interfaccia di amministrazione di WordPress ed è stato attivato.
File di template principali e gerarchia dei template
WordPress utilizza un insieme di regole chiamato “struttura gerarchica dei template” (template hierarchy) per determinare quale file di template utilizzare per una pagina specifica. Comprendere questa struttura gerarchica è fondamentale per lo sviluppo di temi (themes).
Articoli e template di pagine
Quando si accede a un singolo articolo, WordPress cerca per prima cosa…single.phpSe non esiste, tornare indietro a…index.phpPuoi creare.single.phpPer personalizzare l’aspetto della pagina di un singolo articolo.
Si consiglia di leggere Guida all’approccio di base allo sviluppo di temi per WordPress: crea il tuo tema per sito web personalizzato da zero。
<p><strong>Questo è un testo di esempio.</strong></p>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
<header class="entry-header">
<h1 class="entry-title"><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h1>
<div class="entry-meta">
发布于： | 作者：
</div>
</header>
<div class="entry-content">
<p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p>
</div>
<footer class="entry-footer">
<?php the_tags( '标签：', ', ', '<br />' ); ?>
</footer>
</article>Per le pagine indipendenti, WordPress cercherà…page.phpÈ anche possibile creare template per ID di pagine specifici o alias di pagine, ad esempio:page-about.phpVerrà utilizzato esclusivamente per la pagina “Informazioni”.
Template per l’archiviazione e la pagina principale
Pagina di elenco degli articoli del blog (ad esempio, per categorie, tag, archivio degli autori)archive.phpPuoi utilizzare…is_category()、is_tag()Le etichette condizionali vengono distinte all’interno del codice.
La pagina principale del sito web è visualizzata automaticamente da…index.phpControllo… Ma puoi creare.front-page.phpPer definire una pagina iniziale statica, o per crearne una nuova…home.phpEcco come definire la pagina iniziale di un blog che mostra gli articoli più recenti:
Funzionalità tematiche e meccanismo dei “hook”
La flessibilità e l’espandibilità di WordPress sono in gran parte dovute al suo sistema di “hook”, che include sia le “azioni” (Actions) che i “filtri” (Filters). I temi (Themes) possono sfruttare appieno queste funzionalità per personalizzare il comportamento del sito in base alle proprie esigenze.functions.phpI file vengono utilizzati per sfruttare questo sistema.
Inizializzazione dei temi e supporto alle funzionalità
functions.phpI file vengono utilizzati per aggiungere funzionalità relative ai temi, ai menu di registrazione, alle barre laterali, ecc. Di solito, per iniziare, si utilizza…after_setup_themeQuesto “action hook” serve per inizializzare le funzionalità di base del tema.
<?php
function my_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 启用HTML5标记支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 注册一个导航菜单
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );Area di registrazione degli strumenti aggiuntivi
Anche le aree per i widget, come la barra laterale o il piede di pagina, devono essere incluse nel progetto.functions.phpRegistrazione presso… Utilizzo:widgets_initGancio.
Si consiglia di leggere Guida completa allo sviluppo di temi per WordPress: dal principiante all’esperto, con tutorial pratici。
function my_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );Dopo aver completato la registrazione, potrai utilizzare i file di template (come…)sidebar.phpUtilizzato all'interno di…)dynamic_sidebar( 'sidebar-1' )È arrivato il momento di richiamare questa funzionalità/area.
Template components and loop optimization
Per mantenere il codice ordinato e riutilizzabile, WordPress consiglia di suddividere le parti delle template ripetute (come il header, il footer e i sidebar) in file separati.
Dividere i componenti di un template
Creareheader.php、footer.php和sidebar.phpFile.index.phpTrasferisci il relativo segmento di codice nella posizione appropriata. Successivamente, utilizzalo nella posizione originale.get_header()、get_footer()和get_sidebar()Funzioni per includerle.
Progressive handling of article loops
L'uso di cicli di basewhile ( have_posts() ) : the_post(); ... endwhile;Tuttavia, sulla pagina di archiviazione, di solito è necessario visualizzare un riassunto dell’articolo anziché il testo completo. In questi casi si può utilizzare…the_excerpt()Funzione.
Per controllare meglio i cicli, in particolare quelli legati alle query personalizzate, è necessario comprendere…WP_QueryCategoria. Ad esempio, mostrare sugli articoli della pagina principale soltanto quelli appartenenti a una determinata categoria.
<?php
$custom_query = new WP_Query( array(
'category_name' => 'featured',
'posts_per_page' => 3,
) );
if ( $custom_query->have_posts() ) :
while ( $custom_query->have_posts() ) : $custom_query->the_post();
// 显示文章内容
endwhile;
wp_reset_postdata(); // 重置主查询数据
endif;
?>Ricorda: dopo aver eseguito una query personalizzata, utilizza…wp_reset_postdata()Per ripristinare il valore globale…$postLe variabili sono di fondamentale importanza; altrimenti, potrebbero influenzare il corretto funzionamento dei componenti del template successivi (ad esempio, la barra laterale).
Riassumendo
Dalla creazione…style.css和index.phpIniziare, per poi comprendere i livelli dei modelli e imparare a utilizzarli…functions.phpAggiungendo nuove funzionalità, suddividendo i componenti del template e ottimizzando i cicli di esecuzione del codice, hai completato un processo di sviluppo di un tema per WordPress basico ma completo. L’importante è seguire gli standard e le convenzioni di WordPress: questo garantirà che il tuo tema sia compatibile con molte piattaforme e facile da mantenere. Il passo successivo potrebbe essere quello di aggiungere informazioni metadati più dettagliate agli articoli, integrare tipi di articoli personalizzati, oppure utilizzare preprocessor come Sass per gestire i codici di stile, rendendo il tuo tema più professionale e potente.
FAQ - Domande frequenti
Per sviluppare temi per WordPress è necessario conoscere PHP?
Sì, PHP è il linguaggio di programmazione principale di WordPress. I file di template dei temi (file con estensione .php) utilizzano principalmente PHP per generare dinamicamente il contenuto HTML, chiamare le funzioni di WordPress e elaborare i dati. Anche se si utilizza un builder di pagine, comprendere PHP è essenziale per personalizzare in modo avanzato il sito e risolvere eventuali problemi.
Qual è la funzione del file functions.php relativo al tema?
functions.phpSi tratta del “Function Center” del tuo tema. Viene utilizzato per abilitare le funzionalità del tema (come i menu, le immagini in miniatura), per configurare l’area dedicata agli strumenti aggiuntivi (plugins) e i menu di navigazione, per gestire il caricamento sequenziale di script e stili, per definire funzioni personalizzate, nonché per modificare il comportamento predefinito di WordPress tramite degli “hook” (Actions e Filters). Viene caricato automaticamente al momento dell’inizializzazione del tema.
Come posso rendere il mio tema compatibile con la traduzione in più lingue?
Devi fare due cose. Prima di tutto, devi utilizzare la funzione di traduzione di WordPress attorno a tutte le stringhe che devono essere tradotte. Ad esempio:__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )E inoltre…style.css和functions.phpPrima di tutto, è necessario impostare correttamente il “Text Domain”. In seguito, utilizzare uno strumento come Poedit per creare un file di template in formato .pot e generare il relativo file di lingua .mo, posizionandolo all’interno della cartella del tema./languagesAll’interno della directory.
Come introdurre correttamente i file CSS e JavaScript nello sviluppo di un sito web?
Assolutamente non utilizzare direttamente i tag o i contenuti all’interno dei file di template. Il metodo corretto consiste nell’utilizzare… (il testo non è completo; indica che manca l’informazione necessaria per completare la traduzione).wp_enqueue_style()和wp_enqueue_script()Funzioni, e montare queste chiamate (questi invocazioni)…wp_enqueue_scriptsQuesto meccanismo di “action hook” garantisce che le dipendenze siano gestite correttamente, evitando il caricamento ripetuto dei file e mantenendo la compatibilità con il sistema di gestione degli script di WordPress.
PHP
function my_theme_scripts() {
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . 'https://www.likacloud.com/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
Il prossimo passo, cosa dovremo fare dopo?
Per una lettura approfondita e conoscenza pratica
I seguenti contenuti sono correlati all'argomento di questo articolo e sono adatti per una lettura approfondita. È consigliabile iniziare con l'articolo più vicino al tuo problema attuale, per poi passare gradualmente agli argomenti correlati, il che di solito dà risultati migliori.
- Perché scegliere WordPress come piattaforma preferita per il proprio sito web?
- Guida di base a WordPress: Costruisci il tuo primo sito web professionale da zero
- Soluzione completa per la creazione di siti web: guida all’implementazione passo dopo passo, da zero alla messa in funzione.
- Prefazione: Perché scegliere WordPress per lo sviluppo?
- Come scegliere e personalizzare il tuo tema WordPress esclusivo: una guida completa per principianti ed esperti
Italiano