Introduzione semplice allo sviluppo di temi per WordPress: costruire siti personalizzati da zero.

Comprendere la struttura di base di un tema WordPress

Prima di iniziare a scrivere il codice, è fondamentale comprendere la struttura di un tema per WordPress. Un tema è essenzialmente una cartella che contiene una serie di file con formati specifici; questi file insieme determinano l’aspetto e le funzionalità del sito web. I temi più semplici richiedono soltanto due file:style.css和index.php。

File del foglio di stile principale

style.cssI file non sono soltanto lo spazio in cui vengono memorizzati i codici CSS, ma rappresentano anche l“”identificativo“ di un tema. La parte iniziale di tali file deve contenere un blocco di commenti specifico, noto come ”header del file di stili” (style sheet header), che permette al sistema WordPress di conoscere il nome del tema, l’autore, la descrizione, la versione e altre informazioni di metadati. Senza questo header, WordPress non riconoscerà che quella cartella contiene un tema valido.

Uno dei concetti più fondamentali…style.cssEcco un esempio della parte iniziale di un file:

Si consiglia di leggere Sviluppo di temi per WordPress: Costruisci il tuo primo tema personalizzato da zero。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

File del modello principale

index.phpQuesto è il file di template predefinito per il tema, ed è anche il più importante. Quando WordPress non riesce a trovare un file di template più specifico per la pagina richiesta, ricorre automaticamente a questo file di template predefinito.index.phpÈ responsabile di recuperare i contenuti dal database e di visualizzarli nel browser in formato HTML. La versione più semplice di questo sistema…index.phpIl file potrebbe contenere soltanto lo scheletro di base dell’HTML e del codice PHP che chiama le funzioni di base di WordPress.

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

Oltre a questi due file principali, un tema completo e funzionale include solitamente anche:
* header.phpLa parte in alto della pagina del sito web.
* footer.phpLa parte inferiore della pagina del sito web.
* functions.phpUtilizzato per migliorare le funzionalità dei temi, i menu di registrazione, le barre laterali, ecc.
* page.phpUtilizzato per visualizzare una singola pagina.
* single.phpUtilizzato per visualizzare un singolo articolo di blog.

Configurare un ambiente di sviluppo locale e creare il primo tema

Sviluppare temi direttamente su un server reale è pericoloso ed inefficiente. La pratica migliore consiste nell’installare su un computer locale un ambiente di sviluppo simile a quello online. Puoi utilizzare strumenti come XAMPP, MAMP, Local by Flywheel o DevKinsta, che permettono di installare in un solo clic PHP, MySQL e il server web necessari per il lavoro.

Creare una cartella per i temi e dei file correlati.

Innanzitutto, nel directory di installazione di WordPress locale, trova…wp-content/themes/Per creare una nuova cartella, utilizzate un nome che rappresenti chiaramente il vostro argomento. Si consiglia di utilizzare lettere minuscole e caratteri di collegamento (“-”), ad esempio: “my-new-folder”.my-first-theme。

Poi, all’interno di quella cartella, creare i due file principali menzionati in precedenza:style.css和index.phpCopia il codice della parte iniziale dello stile (il “header” dello stile) nella posizione richiesta.style.cssModifica il contenuto del testo in base alle tue informazioni personali e inseriscilo nel posto appropriato.

Si consiglia di leggere Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema per il sito web da zero。

Creare un file di template di base

Successivamente,index.phpInserisci il seguente codice di base, che contiene i tag delle template necessari per WordPress.

<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
    <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>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            _e( '抱歉，没有找到任何内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>

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

Dopo aver completato i passaggi precedenti, accedi al pannello di amministrazione di WordPress sul tuo computer, seleziona la sezione “Aspetto” -> “Temi”. Dovresti vedere il tema denominato “Il mio primo tema” tra quelli disponibili. Attivalo, quindi visita la pagina principale del sito: i titoli e i contenuti degli articoli dovrebbero essere visualizzati.

Utilizzare i livelli dei template e le funzioni di base.

WordPress utilizza un sistema intelligente di “livelli di template” per determinare quale file di template utilizzare in base alle diverse richieste di pagina (come la pagina iniziale, le pagine degli articoli, le pagine delle categorie). Comprendere questo sistema è fondamentale per lo sviluppo di temi personalizzati.

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

Comprendere l’ordine di caricamento dei template

Ad esempio, quando si visita un articolo di un blog, WordPress cerca i file di template nell’ordine seguente:single-post.php -> single.php -> singular.php -> index.phpUtilizzerà il primo file trovato. Questo approccio ti permette di creare layout altamente personalizzati per diversi tipi di pagine, mantenendo al contempo una certa uniformità nell’aspetto complessivo del sito.index.phpCome opzione di ultima risorsa.

Utilizzare cicli e tag di template

在index.phpIl pezzo di codice PHP che hai visto è il famoso “WordPress Loop”. È il cuore di tutti i file di template e viene utilizzato per iterare attraverso gli articoli o le pagine che devono essere visualizzate sulla pagina attuale, e per stamparli.

in ciclothe_title()、the_content()、the_excerpt()Funzioni come queste vengono definite “etichette template”. Il loro compito è quello di visualizzare in modo sicuro i dati relativi all’articolo corrispondente. Un’altra funzione importante è…the_post()Viene chiamato in ogni iterazione del ciclo e viene utilizzato per modificare i valori globali.$postL’oggetto viene impostato con i dati dell’articolo attuale e il processo prosegue con l’articolo successivo.

Si consiglia di leggere Impara le tecniche essenziali: crea il tuo primo tema per WordPress da zero.。

Modularizzare la struttura delle pagine è un ottimo modo per migliorare la manutenibilità del codice. Ecco come fare…header.php和footer.phpUn luogo in cui poter mettere a frutto le proprie capacità e competenze.

Separare la parte superiore (header) dalla parte inferiore della pagina (footer).

将index.php中的<head>Parte e<header>Estrai la porzione desiderata e incollala in un file nuovo.header.phpNel file… Allo stesso modo, anche questo…<footer>“Parte è stata tagliata e trascritta…”footer.phpSì.

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

Poi, nel testo originale…index.phpIn cinese, usareget_header()和get_footer()Questi due tag di template vengono utilizzati per introdurre i contenuti desiderati.

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

<main>
    &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        <p><?php _e( '抱歉，没有找到任何内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

In questo modo, tutti i template di pagina possono condividere lo stesso set di intestazioni e piedini; per apportare modifiche, è sufficiente modificare un solo file.

Rafforzare le funzionalità di un tema tramite il file Functions.php

functions.phpIl file rappresenta il “centro di controllo” del tuo tema. Non si tratta di un file di template, bensì di una libreria di funzioni che viene caricata automaticamente all’avvio del tema. Qui puoi aggiungere nuove funzionalità o modificare il comportamento predefinito del tema, senza dover modificare i file principali di WordPress.

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

在functions.phpIn questo contesto, puoi utilizzare…add_theme_support()Utilizza funzioni per specificare quali funzionalità di WordPress il tuo tema supporta. Ad esempio, abilitare le immagini di anteprima degli articoli (immagini di rilievo) e i menu personalizzati sono operazioni comuni.

<?php
function my_theme_setup() {
    // 添加对文章缩略图的支持
    add_theme_support( 'post-thumbnails' );

// 添加对自定义菜单的支持
    add_theme_support( 'menus' );

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

Aggiungere stili e script

Il modo corretto per aggiungere CSS e JavaScript è tramite…wp_enqueue_style()和wp_enqueue_script()Funzioni, e montarle suwp_enqueue_scriptsSu questo gancio… Questo garantisce che le dipendenze siano corrette e che i file non vengano caricati più di una volta.

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 引入自定义的JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Dopo aver completato tutto questo, potrai…header.phpUtilizzare nel contestowp_nav_menu()Una funzione per visualizzare il menu che hai registrato, da utilizzare nel ciclo degli articoli.the_post_thumbnail()È il momento di visualizzare le immagini di rilievo.

Riassumendo

Lo sviluppo di temi per WordPress è un processo graduale che parte dalla struttura e arriva ai dettagli. Prima di tutto, è necessario comprendere…style.css和index.phpCostituisce il nucleo fondamentale di tutto il processo e permette di configurare un ambiente di sviluppo locale efficace. Successivamente, imparando il concetto di sistemi di gerarchia dei template e di “cicli”, sarai in grado di creare layout precisi per diverse pagine web.header.php和footer.phpLa modularizzazione rende il codice più chiaro e facile da mantenere. Infine…functions.phpI file ti hanno aperto le porte all’espansione delle funzionalità del sito: dal menu di registrazione al caricamento sicuro dei contenuti, hanno permesso di trasformare i temi da semplici template statici in skin dinamiche e potenti per i siti web. Segui questa strada, continua a praticare e esplorare i file dei template più specifici (ad esempio…).single.php、page.php、archive.phpIn questo modo, potrai costruire gradualmente un sito WordPress personalizzato con funzionalità complete e un design unico.

FAQ - Domande frequenti

Quali sono le conoscenze preliminari necessarie per sviluppare temi per WordPress?

È necessario padroneggiare le basi di HTML e CSS per costruire la struttura e gli stili delle pagine web. Inoltre, è importante avere una conoscenza di base di PHP, poiché i file di template di WordPress sono composti principalmente da codice PHP, utilizzato per generare contenuti in modo dinamico. Conoscere JavaScript ti permetterà di aggiungere funzionalità interattive ai temi; questo non è obbligatorio all’inizio, ma diventa molto importante in seguito.

Perché il mio tema non viene visualizzato nel backend?

La causa più comune è…style.cssIl formato della parte iniziale del file che contiene le informazioni sul tema non è corretto o manca del tutto. Assicurati che all’inizio del file ci sia un blocco di commenti completo e conforme ai requisiti di formattazione. Inoltre, verifica se la cartella contenente i temi è stata posizionata nel posto giusto.wp-content/themes/Il file si trova all’interno di una cartella, e il nome della cartella non contiene caratteri speciali.

Come posso aggiungere una zona per gli strumenti (barra laterale) al mio tema?

Devi prima…functions.phpUtilizzare nel contestoregister_sidebar()La funzione registra una o più aree per gli strumenti aggiuntivi (o “widget”). Successivamente, questi strumenti vengono inseriti nei file di template corrispondenti.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()Utilizziamo una funzione per richiamarla e visualizzarne i risultati. Infine, all’interno del template della pagina, incorporiamo tale funzione per eseguirla e mostrare i dati ottenuti.get_sidebar()Importa questo file.

Cosa posso fare se modificare il file functions.php ha causato il problema del “white screen” (schermo bianco) sul sito web?

Di solito, questo accade perché…functions.phpIl file contiene errori di sintassi PHP. Poiché il file viene eseguito all'inizio del caricamento del tema, gli errori possono causare l'interruzione dell'intero sito web. La soluzione consiste nel sostituire il file che contiene gli errori tramite FTP o il gestore di file del pannello di controllo dell'host.functions.phpRinominare (ad esempio, in…)functions.php.bakIn questo modo, WordPress ignorerà il file problematico e il sito tornerà accessibile. A quel punto potrai caricare nuovamente la versione corretta del file.

Come posso far sì che il mio tema supporti la traduzione in più lingue?

Devi fare due cose. Prima di tutto, utilizza la funzione di traduzione di WordPress in tutti i punti in cui viene visualizzato il testo relativo al tema.__()、_e()E specificare in quale posizione devono essere posizionate.style.cssIl “Text Domain” definito nella parte iniziale del file. In secondo luogo, utilizzare uno strumento come Poedit per analizzare i file dei temi e generare il necessario contenuto..potI file di template vengono utilizzati per creare contenuti in diverse lingue, in base alle esigenze del progetto.zh_CN.po和.moI file di traduzione vanno posizionati all’interno della sezione dedicata al tema./languages/All’interno della directory.