Guida all’approccio di base allo sviluppo di temi per WordPress: costruisci il tuo primo tema da zero

Preparativi prima di iniziare

Prima di iniziare a scrivere qualsiasi codice, è necessario assicurarsi che l’ambiente di sviluppo sia pronto. Innanzitutto, ti servirà un ambiente di server locale, come XAMPP, MAMP o Docker. Inoltre, è essenziale disporre di un editor di codice; Visual Studio Code o PHPStorm sono entrambe ottime scelte. La cosa più importante è installare la versione più recente di WordPress e verificare che funzioni correttamente.

Successivamente, all’interno della directory di installazione di WordPress…wp-content/themesAll’interno della cartella, crea una nuova cartella che diventerà il tuo catalogo tematico. Ad esempio, puoi chiamarla…my-first-themeIl nome di questo directory diventerà direttamente il tuo identificatore di tema; per questo si consiglia di utilizzare lettere minuscole, numeri e trattini.

All’interno della cartella tematica, ci sono due file essenziali e minimi per avviare un tema WordPress:style.css和index.phpSenza di esse, WordPress non sarà in grado di riconoscere il tuo tema nell’elenco “Aspetto” -> “Temi” presente nell’interfaccia di amministrazione.

Si consiglia di leggere Imparare a sviluppare temi per WordPress da zero: una guida completa per creare siti web personalizzati。

Comprendere la struttura fondamentale dei file relativi al tema in questione.

Un tema WordPress completo e funzionale è composto da una serie di file di template che seguono specifiche convenzioni di denominazione. Ogni file è responsabile della visualizzazione di una parte diversa del sito web.

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

Style Sheets and Theme Information Declarations

style.cssI file non servono soltanto per scrivere i codici CSS; l’area delle note in testa al file è inoltre utilizzata da WordPress per leggere i metadati (meta data) del tema. Quest’area deve trovarsi esattamente all’inizio del file e seguire un formato specifico.

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.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
*/

“Il ”Text Domain“ è utilizzato per l’internazionalizzazione ed rappresenta un identificatore fondamentale per il caricamento successivo dei file di traduzione. Dopo aver inserito tutte queste informazioni, aggiorna la pagina del tema nel pannello di amministrazione di WordPress e dovresti essere in grado di vedere un’immagine in miniatura denominata ”Il mio primo tema’.”

Qual è la funzione del file del modello principale?

index.phpQuesto è il file del modello principale del tuo tema, nonché il modello predefinito per le funzionalità di “ritorno” del sito web. Quando WordPress non riesce a trovare un file di modello più specifico…single.php或page.phpQuando si utilizza…index.phpLa sua struttura di base prevede l’invocazione della parte iniziale (header) di WordPress, il contenuto principale del ciclo principale (main loop) e la parte finale (footer).

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

<main id="main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 输出文章内容
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>没有找到任何文章。</p>';
    endif;
    ?&gt;
</main>

<?php get_footer(); ?>

Estendere i modelli di base e introdurre nuove funzionalità

Soloindex.php、style.cssNon è sufficiente; dobbiamo separare le parti come la parte superiore, la parte inferiore e i sidebar per rendere la struttura più chiara, e introdurre le funzionalità essenziali del tema.

Si consiglia di leggere Partire da zero: Guida passo dopo passo per sviluppare un tema personalizzato per WordPress。

Separare i template della parte iniziale (header) da quelli della parte finale (footer).

Creareheader.phpIl file contiene una dichiarazione del tipo del documento, nonché il codice HTML stesso.Alcune parti del sito, nonché i titoli e le aree di navigazione. Utilizzare…wp_head()Ganci utilizzati per garantire che i plugin e il nucleo di WordPress iniettino correttamente i script e i stili necessari.

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<p><strong>Questo testo è stato tradotto automaticamente.</strong></p>
<header>
    <h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

Crearefooter.phpIl file contiene le informazioni del piede di pagina del sito web e, alla fine, esegue una chiamata (un’azione specifica, probabilmente legata al funzionamento del sito).wp_footer()Gancio.

<footer>
    <p>©</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>

In questo modo,index.phpIn questo contesto, possiamo quindi utilizzarlo.get_header()和get_footer()Si utilizzano funzioni per introdurle.

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

Create a function file.

functions.phpÈ il “cervello” del tema, utilizzato per aggiungere funzionalità, creare menu di registrazione, abilitare immagini personalizzate, definire le barre laterali, ecc. Non si tratta di un file di template, bensì di un file PHP che viene caricato automaticamente all’inizializzazione del tema.

Ecco il contenuto richiesto:functions.phpUn esempio di base:

<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
function my_first_theme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_register_menus' );

// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_enqueue_scripts' );
?>

Creare più file di template.

Per garantire che le pagine di diverso tipo abbiano un layout più appropriato, dobbiamo creare ulteriori file di template dedicati.

Si consiglia di leggere Dall'installazione alla maestria: guida completa a WordPress per la costruzione di un sito web e consigli pratici per un'analisi completa。

Pagina singola dell’articolo e template della pagina

single.phpUtilizzato per rendere un singolo articolo di blog. La sua struttura è simile a…index.phpSimile, ma di solito include modelli per i commenti.comments.phpLa chiamata di…

page.phpUtilizzato per rendere pagine statiche. Di solito non mostra metadati come categorie o tag, ma si concentra principalmente sul contenuto della pagina stessa.

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

Template per la lista di archiviazione degli articoli

archive.phpUtilizzato per visualizzare pagine di archiviazione che includono informazioni su categorie, tag, autori, date, ecc. È possibile utilizzare etichette condizionali (conditional tags) per personalizzare il contenuto in base a specifiche condizioni.is_category()、is_tag()Per distinguere i diversi tipi di archivi e visualizzare i relativi titoli…

Creare una pagina di errore 404.

404.phpÈ la pagina che viene visualizzata quando un utente accede a un URL non esistente. Una buona pagina 404 dovrebbe contenere un messaggio cordiale, un campo di ricerca e link alle pagine principali, al fine di aiutare l’utente a trovare il contenuto desiderato.

Riassumendo

Seguendo questa guida, hai completato l’intero processo: dalla creazione di cartelle e file fondamentali, alla comprensione della struttura gerarchica dei template, fino all’espansione delle funzionalità del tema e alla creazione di template personalizzati. Hai così costruito un tema che presenta una struttura di base, è riconosciuto da WordPress e dispone di funzionalità aggiuntive. Anche se sembra semplice, contiene già tutti i concetti essenziali. Ora puoi approfondire l’utilizzo dei tag dei template, delle query personalizzate, dei cicli di WordPress, nonché il modo per creare tipi di articoli personalizzati e opzioni di personalizzazione del tema, al fine di rendere il tuo tema ancora più potente e personalizzato.

FAQ - Domande frequenti

Perché il mio tema non viene visualizzato nell’interfaccia di amministrazione di WordPress?
Per favore, controlla prima se la tua cartella dei temi è stata posizionata nel posto corretto.wp-content/themes/All’interno della directory. In secondo luogo, verificare se la cartella contiene i file necessari.style.css和index.phpFile… Infine, aprilo.style.cssAssicurarsi che il blocco di note con le informazioni sul tema in cima al file sia formato correttamente, in particolare…Theme Name:Questa riga.

Come aggiungere il supporto per i loghi personalizzati al mio tema?

Devi lavorare sul tema…functions.phpAggiungi una riga di codice al file per abilitare questa funzionalità.add_theme_support( ‘custom-logo’ )Funzione: Una volta abilitata, gli utenti potranno caricare e impostare il proprio Logo nella sezione “Aspetto” -> “Personalizzazioni” -> “Identità del sito”. È necessario anche…header.phpUtilizzalo nella posizione appropriata.the_custom_logo()Utilizzare una funzione per mostrarlo.

Qual è la differenza tra il file functions.php del tema e i plugin?

functions.phpLe funzionalità presenti in questo componente sono strettamente legate al tema attualmente attivo; se cambi tema, queste funzionalità non saranno più disponibili. Al contrario, le funzionalità degli plugin sono indipendenti dal tema: sono attive in qualsiasi tema, purché il plugin sia abilitato. Pertanto, se le tue funzionalità sono strettamente correlate alla rappresentazione visiva del tema (ad esempio, l’ubicazione dei pulsanti di registrazione o la definizione della disposizione della pagina), è consigliabile posizionarle all’interno di un plugin.functions.phpSe si tratta di funzionalità comuni (come moduli di contatto o ottimizzazione SEO), è più appropriato realizzarle sotto forma di plugin.

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

Devi fare due cose. Prima di tutto, durante lo sviluppo, devi avvolgere tutte le stringhe destinate all’utente utilizzando una funzione di traduzione. Ad esempio…__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )E assicurarsi che…‘my-first-theme’与style.cssIn secondo luogo, utilizzando strumenti come Poedit, è possibile estrarre tutte le stringhe da tradurre dal codice del tema e generare il file necessario per la traduzione..potI file vengono poi tradotti dal personale incaricato, che ne crea le versioni nelle rispettive lingue..poE quello compilato….moIl file viene inserito all’interno del tema (theme)./languages/All’interno della directory.