Sviluppo di temi per WordPress: Costruisci il tuo primo tema personalizzato da zero

Comprendere la struttura fondamentale di un tema WordPress

Prima di iniziare a scrivere il codice, è necessario comprendere i fondamenti di un tema WordPress: i file di template e i file di stile. WordPress utilizza una serie di file specifici per rendere diversi parti del sito web, e questi file seguono convenzioni di denominazione standardizzate. Un tema minimizzato richiede soltanto due file:index.php(I principali file di template) estyle.css(I file del foglio di stile principale e delle informazioni sul tema), ma per creare un sito web funzionale e completo, abbiamo bisogno di altro.

style.cssIl file non contiene soltanto regole CSS, ma anche un blocco di commenti nella parte iniziale del file che definisce i metadati del tema: nome del tema, autore, descrizione e versione. È in questo modo che WordPress riconosce un tema. Ecco un esempio di commenti di apertura di base:

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Oltre ai file principali, una struttura tipica di un tema include anche:header.php(Annuisce con la testa)footer.php(Nella parte inferiore del sito)sidebar.php(Sidebar) Efunctions.php(File contenente le funzioni relative alle funzionalità tematiche). Capire come utilizzare questi file tramite etichette di template (ad esempio…)get_header(), get_footer()Combinare i componenti in modo modulare è la chiave per uno sviluppo efficiente.

Si consiglia di leggere Guida all’approccio di base allo sviluppo di temi per WordPress: crea da zero l’interfaccia del tuo sito web personalizzato。

Creare file tematici e directory

Prima di tutto, dobbiamo trovarci nella directory di installazione di WordPress.wp-content/themes/Crea una nuova cartella nella posizione desiderata. Il nome di questa cartella dovrà essere l’identificatore del tuo argomento; si consiglia di utilizzare lettere minuscole, numeri e trattini, ad esempio:my-first-themeTutti i file relativi ai vari argomenti (temi) verranno posizionati in questo luogo.

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

Creare il file di stile principale.

Come sottolineato in precedenza,style.cssÈ necessario creare questo file nella cartella dei temi e compilare tutti i dati relativi alle informazioni del tema stesso. Successivamente, potrai iniziare a scrivere il codice CSS di base per definire l’aspetto del sito web. Per evitare interferenze da parte degli stili predefiniti dei browser, è consigliabile iniziare resettando gli stili del sito (cioè cancellando tutti i valori preesistenti).

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

Creare il file del template principale

Successivamente, creare…index.phpQuesto è il file di template predefinito e più importante. La sua struttura di base dovrebbe includere le chiamate alle parti relative alla testa del sito, al ciclo che contiene il contenuto principale, e alla parte inferiore del sito. I tag dei template sono funzioni integrate di WordPress, utilizzate per inserire contenuti dinamici.
Un design estremamente minimalista.index.phpLa versione iniziale potrebbe essere la seguente:

<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;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

Decomposizione del template: parte superiore, parte inferiore e barra laterale

Per garantire il riutilizzo del codice e una maggiore chiarezza, i temi di WordPress solitamente separano le parti comuni delle pagine in file indipendenti.

Implementare il template per la parte superiore del sito web

Creareheader.phpQuesto file contiene la parte iniziale (il “header”) di un documento HTML.到La parte iniziale che attiva i tag, nonché l’area di navigazione in cima al sito web. I tag chiave del modello includono…bloginfo()Utilizzato per ottenere informazioni sul sito, nonché…wp_head()Il “hook” consente ai plugin e ai temi di inserire codice in modo selettivo (cioè in parti specifiche del codice sorgente).
Un elemento di baseheader.phpEsempio:

Si consiglia di leggere Guida completa allo sviluppo di temi per WordPress: costruire siti personalizzati da zero。

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
<p><strong>Questo testo è stato tradotto automaticamente.</strong></p>
<header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a href="/it/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p class="site-description"><?php bloginfo('description'); ?></p>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

Implementare il template per la parte inferiore del sito

Crearefooter.phpContiene tutto il contenuto che segue la fine della zona principale del testo, come le informazioni sul copyright nella parte inferiore della pagina, nonché elementi di estrema importanza.wp_footer()Le chiamate di tipo “hook” sono essenziali per il corretto funzionamento di molti plugin (ad esempio, quelli utilizzati per analizzare il codice).

<footer class="site-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>

Rafforzare le funzionalità tematiche e la personalizzazione

functions.phpSi tratta del “cervello” del tuo progetto, utilizzato per aggiungere funzionalità, registrare caratteristiche (come menu di navigazione, aree per gli strumenti aggiuntivi) e impostare gli stili grafici dei script, senza dover modificare i file principali del progetto stesso.

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

在functions.phpIn questo contesto, puoi utilizzare…add_theme_support()Le funzioni servono per dichiarare le funzionalità supportate da un tema. Ad esempio, l’abilitazione delle miniature degli articoli (immagini di rilievo) e dei loghi personalizzabili sono caratteristiche standard dei temi moderni.

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

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

Inserire nel foglio di stile e nei script

Il modo corretto per caricare gli stili e i script è utilizzare…wp_enqueue_style()和wp_enqueue_script()Funzioni, e montarle suwp_enqueue_scriptsSul gancio… Questo garantisce che le dipendenze vengano gestite correttamente e evita il caricamento ripetuto dei file.

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-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Riassumendo

Dall’creazione della cartella per i temi…style.cssDall’inizio, fino alla fase di costruzione.index.php…decomporre in…header.php和footer.phpFile di template, e poi procedere con…functions.phpIl file contiene le funzionalità e i risorse essenziali per il tuo tema WordPress, costituendo così il quadro di riferimento per lo sviluppo di temi per WordPress. Ogni passaggio sottolinea il concetto di struttura gerarchica dei template di WordPress nonché le migliori pratiche da seguire, come l’uso corretto dei tag dei template e degli “hook” (meccanismi di integrazione). Una volta acquisite queste basi, avrai una solida partenza per personalizzare ed estendere qualsiasi funzionalità del tuo tema, in modo da soddisfare le esigenze di progetti diversi.

FAQ - Domande frequenti

Quanti file sono necessari almeno per un tema WordPress di tipo ###?
Un tema WordPress funzionante richiede almeno due file:index.php和style.cssTra questi,style.cssIl blocco di commenti in cima al file deve essere presente e contenere le informazioni sul tema corretto; questa è una condizione necessaria affinché WordPress possa riconoscere il tema.

Si consiglia di leggere Da zero a uno: la guida definitiva e il tutorial pratico per lo sviluppo di temi WordPress.。

Come posso aggiungere una piccola area per gli strumenti al mio tema?

Devi passare attraverso…functions.phpFile utilizzati per registrare gli strumenti aggiuntivi nell’area degli strumenti (barra laterale).register_sidebar()Definisci la funzione e specifica i suoi parametri, come il nome, l’ID e la descrizione. Successivamente, potrai utilizzarla nei file di template appropriati (ad esempio…).sidebar.phpUtilizzato all'interno di…)dynamic_sidebar()Una funzione viene utilizzata per chiamarla (ossia per eseguirla).

Perché il mio menu di navigazione personalizzato non viene visualizzato?

Questo succede solitamente perché non è stato effettuato alcun passaggio necessario…functions.phpRegistra correttamente l’indirizzo del ristorante. Assicurati di aver utilizzato l’indirizzo esatto.register_nav_menus()Una funzione per registrare una posizione di un piatto (ad esempio ‘primary’) e, inoltre…header.phpChiamata in…wp_nav_menu()Quando…‘theme_location’I valori impostati per i parametri sono esattamente gli stessi utilizzati durante la registrazione. Infine, è necessario assegnare un menu a questa posizione nelle impostazioni di “Aspetto > Menù” presente nell’interfaccia amministrativa di WordPress.

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

我应该在什么时候使用get_template_part()函数？

get_template_part()Le funzioni servono a modularizzare frammenti di codice riutilizzabili, risultando particolarmente utili per l’output di contenuti in formati diversi all’interno di cicli di articoli. Ad esempio, è possibile creare una funzione che…content.phpUtilizziamo un file per definire la struttura HTML comune di ogni articolo, e poi…index.phpUtilizzato all'interno di un ciclo.get_template_part(‘content’)Per chiamarlo… Questo aumenta la riutilizzabilità e la manutenibilità del codice, e permette inoltre di creare template più professionali.content-page.phpQuesto diventa possibile.