Preparativi e allestimento dell'ambiente.
Prima di iniziare a scrivere il codice, è necessario disporre di un ambiente di sviluppo appropriato. Questo include un ambiente di server locale (come XAMPP, MAMP o Local by Flywheel), un editor di codice (come VS Code o PhpStorm), nonché una nuova installazione di WordPress. Assicurarsi che WordPress sia alla versione più recente per poter utilizzare le funzionalità e le API più aggiornate.
Successivamente, dovrai procedere all’interno di WordPress…wp-content/themesCrea una nuova cartella all’interno del directory; il nome di questa cartella dovrà corrispondere al “slug” del tuo argomento (tema). Ad esempio:my-first-themeQuesta cartella diventerà il luogo in cui verranno archiviati tutti i tuoi file relativi ai temi per WordPress. I file più fondamentali di un tema WordPress sono soltanto due:index.php和style.cssTra questi,style.cssNon si tratta solo di un file di stili, ma anche di un “file di intestazione” che contiene i metadati del tema; le informazioni presenti nelle sue note sono fondamentali affinché WordPress possa riconoscere correttamente il tuo tema.
Creare una struttura di base…style.cssIl file, nella sua parte iniziale (header), deve contenere le seguenti informazioni:
Si consiglia di leggere Creare un tema WordPress perfetto: una guida completa allo sviluppo, da zero a padroneggiamento。
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/Text DomainUtilizzato per l’internazionalizzazione, deve essere in linea con il nome della tua cartella tematica. Inoltre, crea il file più semplice possibile.index.phpIl file deve contenere soltanto una frase.<?php get_header(); ?>E uno<h1>Ciao mondo!</h1>In questo momento, nella sezione “Aspetto” -> “Temi” del pannello di amministrazione di WordPress, dovresti essere in grado di vedere il tuo tema e attivarlo. Tuttavia, al momento non mostra nulla (poiché non l’abbiamo ancora creato).header.phpQuesto rappresenta soltanto il primo passo, ma segna che hai già compiuto con successo il primo passo verso il tuo obiettivo.
Comprendere i file di template principali e la struttura gerarchica dei template
WordPress utilizza un sistema intelligente chiamato “struttura gerarchica dei template” 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 sistema inizia la ricerca dal file di template più specifico; se non viene trovato, ricorre a un file più generico.
I file di template più basilari includono:
* index.phpIl modello di ultima risorsa: verrà utilizzato per tutte le richieste per cui non si trova un modello più specifico.
* header.phpChe contiene il documento.<head>Parti del sito e l’area del titolo della pagina. Attraverso…get_header()Introduzione alle funzioni.
* footer.phpInclude l’area del piede di pagina del sito web.get_footer()Introduzione alle funzioni.
* sidebar.phpInclude i componenti della barra laterale. Attraverso…get_sidebar()Introduzione alle funzioni.
* functions.phpQuesto non è un file di template, bensì la “libreria di funzionalità” del tuo tema, utilizzata per aggiungere nuove funzionalità, registrare menu, strumenti aggiuntivi (widget) e altro ancora.
Esistono template più specifici per i diversi tipi di pagine.
* 单篇文章：查找顺序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php(Custom Template) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（博客首页、分类页等）：查找顺序是home.php(Per la pagina elenco articoli del blog) -> front-page.php(Usato per impostare una pagina statica come pagina iniziale) -> index.php。
Creare template per la parte superiore e quella inferiore della pagina (header e footer).
Prima di tutto, creiamo…header.phpDeve iniziare con…<!DOCTYPE html>Inizia includendo le chiamate alle funzioni chiave di WordPress, come…wp_head()。
Si consiglia di leggere Creazione di temi personalizzati per WordPress di livello avanzato: guida pratica per progettazione, sviluppo e ottimizzazione。
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<p><strong>Questo è un testo di prova</strong></p>
</head>
<body no numeric noise key 1004>
<header>
<h1><a href="/it/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
<nav>
'primary')); ?>
</nav>
</header>Allo stesso modo, creare…footer.phpE assicurarsi che la chiamata venga effettuata correttamente.wp_footer()Funzione.
<footer>
<p>© . All rights reserved.</p>
</footer>
<p><strong>Questo è un testo di esempio.</strong></p>
<p>Io non sono un'attrice.</p>
<p>Questo testo è stato tradotto automaticamente.</p>Ora puoi aggiornare il tuo…index.phpUtilizza questi componenti template.
<p><strong>Questo è un testo di esempio.</strong></p>
<main>
<h1>“Hello World” da Main!</h1>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
the_title('<h2>', '</h2>');
the_content();
endwhile;
else :
echo '<p>No content found.</p>';
endif;
?>
</main>Migliorare le funzionalità del tema tramite functions.php.
functions.phpI file rappresentano il “cervello” del tuo progetto: è qui che aggiungi le funzionalità desiderate, registri i componenti fondamentali di WordPress (come i menu e le aree per gli strumenti aggiuntivi), nonché inserisci i codici necessari per modificare gli stili grafici (style sheet) e i file di script.
Aggiungere il supporto per i temi e il menu di navigazione per la registrazione.
Innanzitutto, attiviamo alcune funzionalità di base relative ai temi (temi). Utilizziamo…add_theme_support()La funzione viene utilizzata per dichiarare le funzionalità supportate dal tema.
<?php
// functions.php
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support('title-tag');
// 启用文章和页面的特色图像功能
add_theme_support('post-thumbnails');
// 为文章中的图像添加响应式图片支持
add_theme_support('responsive-embeds');
// 添加对HTML5标记的支持
add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');Successivamente, è necessario registrare una posizione per un elemento del menu di navigazione. Questo consente agli utenti di configurare il menu nella sezione “Aspetto” -> “Menu” dell’interfaccia di amministrazione, in modo da poterlo utilizzare nei modelli.wp_nav_menu()La funzione la chiama.
function my_first_theme_menus() {
register_nav_menus(array(
'primary' => __('Primary Menu', 'my-first-theme'),
'footer' => __('Footer Menu', 'my-first-theme'),
));
}
add_action('init', 'my_first_theme_menus');Inserire nel foglio di stile e nei script
Il modo corretto per caricare gli stili e i script è…wp_enqueue_style()和wp_enqueue_script()La funzione, che li monta suwp_enqueue_scriptsSul gancio.
Si consiglia di leggere Analisi completa dello sviluppo di temi per WordPress: una guida pratica dall’approccio iniziale all’espertizzazione。
function my_first_theme_scripts() {
// 排入主样式表
wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
// 排入自定义JavaScript文件
wp_enqueue_script('my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');Creare cicli e template di contenuto
“Il ciclo” è una struttura di codice PHP in WordPress utilizzata per recuperare e visualizzare gli articoli dal database. È praticamente il “cuore” di quasi tutti i file di template.
Comprendere la struttura del ciclo principale
Nel testo precedente…index.phpNell’esempio, abbiamo già visto un ciclo di base. Analizziamolo in dettaglio:
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
<article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
<h2><a href="/it/</?php the_permalink(); ?>"><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></a></h2>
<?php the_post_thumbnail(); ?>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
<!-- 分页链接 -->
<!-- 如果没有文章 -->
<p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>
<?php endif; ?>Creare un modello per un singolo articolo
Ora, creiamo un template dedicato alla visualizzazione di un singolo articolo.single.phpÈ più dettagliato del ciclo presente sulla pagina della lista.
<p><strong>Questo è un testo di esempio.</strong></p>
<main id="primary">
<?php
while (have_posts()) : the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
<header>
<h1><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h1>
<div class="entry-meta">
<?php
printf(
__('Posted on %s by %s', 'my-first-theme'),
get_the_date(),
get_the_author_posts_link()
);
?>
</div>
<?php the_post_thumbnail('large'); ?>
</header>
<div class="entry-content">
<?php
// 分页，适用于使用 <!--nextpage--> 标签的长文章
wp_link_pages(array(
'before' => '<div class="page-links">' . __('Pages:', 'my-first-theme'),
'after' => '</div>',
));
?>
</div>
<footer>
<?php the_tags('<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?>
</footer>
</article>
</main>Riassumendo
Attraverso questa guida, hai completato il percorso fondamentale per creare da zero un tema WordPress di base. Abbiamo iniziato dall’installare l’ambiente di sviluppo e dalla creazione dei file necessari, per poi approfondire il sistema di struttura dei template di WordPress, che rappresenta la base per costruire temi flessibili. Hai imparato come creare elementi grafici e funzionalità riutilizzabili all’interno di un tema.header.php和footer.phpComponenti di template, e grazie a una potente…functions.phpIl file ha aggiunto funzionalità essenziali al tuo tema, come il menu di navigazione e il caricamento dei style. Infine, abbiamo esplorato il meccanismo di “loop” di WordPress e creato template per visualizzare elenchi di articoli e singoli articoli.
Questo è solo un punto di partenza. In seguito, potrai esplorare la possibilità di creare ulteriori modelli specifici (ad esempio…).page.php, archive.phpNella sezione dedicata all’ registrazione degli strumenti aggiuntivi, è possibile inserire tipi di articoli personalizzati e sistemi di classificazione, nonché implementare un design responsive più avanzato e interazioni basate su JavaScript. Ricorda che consultare la documentazione ufficiale per gli sviluppatori e praticare costantemente rappresenta il modo migliore per migliorare le proprie competenze.
FAQ - Domande frequenti
Cosa devo fare se, dopo l’attivazione del mio tema, il sito mostra uno schermo vuoto (bianco)?
Di solito, questo problema è causato da un errore fatale in PHP. Per prima cosa, controlla il tuo codice per individuare l’errore e risolverlo.functions.phpCi sono errori di grammatica nel file, ad esempio la mancanza di punti e virgola o parentesi? Apri WordPress…WP_DEBUGI modelli possono aiutarti a visualizzare informazioni dettagliate sugli errori che si verificano.wp-config.phpNel documento, verrà indicato che...define('WP_DEBUG', false);Cambia in:define('WP_DEBUG', true);。
Come posso aggiungere la funzionalità di un Logo personalizzato al mio tema?
Nel tuofunctions.phpI documenti deladd_theme_support“Alcune parti…” – Aggiungi una riga: “…richiedono un’attenzione particolare.”add_theme_support('custom-logo');È anche possibile passare un array di parametri per definire le dimensioni del Logo, nonché se la sua altezza deve essere flessibile. Successivamente, l’utente potrà caricare il Logo nella sezione “Aspetto” -> “Personalizzazioni” -> “Identità del sito” e utilizzarlo nei modelli.the_custom_logo();La funzione la chiama.
Perché il menu di navigazione che ho registrato non viene visualizzato nel backend?
Per favore, controlla i seguenti punti: Primo, assicurati che il tuo codice di registrazione sia valido.functions.phpE… è stato correttamente montato.initGancio o…after_setup_themeSul gancio… In secondo luogo, assicurati che ciò che hai definito sia corretto.theme_location(Per esempio)'primary'Durante la chiamata…wp_nav_menu()Il tempo deve corrispondere esattamente a quanto indicato. In terzo luogo, dopo la creazione del menu, è necessario assegnarlo alla posizione registrata da te nella sezione “Aspetto” -> “Menu” -> “Gestione posizioni” presente nel backend.
Come creare una piccola area per gli strumenti (barra laterale)?
Prima di tutto,functions.phpUtilizzare nel contestoregister_sidebar()La funzione permette di registrare una piccola area di utilità (tool) all’interno di un sito web. È necessario fornire un array di parametri che definiscano l’ID, il nome, la descrizione e altre informazioni relative a tale area. Successivamente, questi dati vengono utilizzati nel file del template in cui si desidera visualizzare la barra laterale (sidebar).sidebar.phpNel testo fornito, non è presente alcun contenuto specifico da tradurre. Potresti fornire il testo che desideri tradurre in italiano, così potrò eseguire il lavoro per te.dynamic_sidebar()Chiamare la funzione passandole l’ID dello strumento ausiliario. Infine,index.php或single.phpUtilizzato nei modelli di attesa.<?php get_sidebar(); ?>Introduciamo il template per la barra laterale.
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.
- Come scegliere e personalizzare il tema WordPress perfetto per te?
- Guida allo sviluppo di temi per WordPress: costruire siti personalizzati da zero
- Guida completa allo sviluppo di temi per WordPress: un corso pratico per passare dall’essere principianti all’essere esperti
- Guida completa allo sviluppo di temi per WordPress: costruire template per siti web di livello professionale da zero
- Dallo zero all’uno: Una guida completa e pratica per costruire siti web professionali con WordPress
Italiano