La struttura di base dei temi WordPress.

Si consiglia di leggere Nel mondo online altamente competitivo di oggi, un sito web ben progettato e dalle prestazioni eccellenti è fondamentale per il successo di un'azienda.。

Le informazioni di intestazione del foglio di stile del tema

Il tema delstyle.cssL'intestazione del file deve includere un'annotazione formattata in modo standard, che WordPress legge per identificare e visualizzare il tema in background.

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

/*
Theme Name: My Awesome Theme
Theme URI: https://example.com/my-awesome-theme/
Author: Your Name
Author URI: https://example.com/
Description: A modern, responsive WordPress theme built for speed and SEO.
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-awesome-theme
*/

In questo contesto, “Text Domain” viene utilizzato per l'internazionalizzazione ed è un identificatore utilizzato per le traduzioni linguistiche successive, che di solito coincide con il nome della cartella del tema.

Le operazioni più comuni dei file di funzionalità tematica.

functions.phpI file sono il “cervello” del tema. Un'operazione comune consiste nell'utilizzareadd_theme_support()I funzioni vengono utilizzate per dichiarare le funzionalità supportate dal tema. Ad esempio, l'attivazione delle immagini in evidenza degli articoli, dei loghi personalizzati, degli sfondi personalizzati, ecc.

<?php
function my_awesome_theme_setup() {
    // 添加对文章特色图片的支持
    add_theme_support( 'post-thumbnails' );
    // 添加对自定义Logo的支持
    add_theme_support( 'custom-logo' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    // 添加对标题标签的支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );
?>

Questo codice utilizza gli hook perafter_setup_themeViene eseguito dopo il caricamento del tema e abilita in modo sicuro varie funzionalità principali di WordPress.

Levello dei template e template personalizzati

WordPress utilizza un sistema intelligente chiamato “gerarchia dei template” per decidere come rendere diversi tipi di pagine. Quando un utente visita una pagina, WordPress cerca i file dei template corrispondenti in un ordine di priorità specifico. Ad esempio, per un articolo classificato come “News”, WordPress cercherà in ordine i seguenti file dei template:single-post-news.php -> single-post.php -> single.php -> singular.php -> index.phpGli sviluppatori possono utilizzare queste regole per ottenere un controllo preciso delle pagine, creando file di modello con nomi specifici.

Si consiglia di leggere Introduzione allo sviluppo di temi WordPress: creare un sito web personalizzato da zero.。

Oltre ai template predefiniti dal sistema, gli sviluppatori possono anche creare “page template”, che sono template personalizzati progettati per una pagina specifica o per un tipo di pagina. Per creare un page template, è necessario dichiararlo esplicitamente nei commenti dell'intestazione del file del template.

Creare un modello di pagina personalizzato.

Ad esempio, per creare un modello di pagina a larghezza intera, è possibile crearne uno nuovo denominatotemplate-fullwidth.phpAggiungere un'intestazione al file e aggiungere la seguente nota all'inizio del file:

<?php
/**
 * Template Name: 全宽度页面布局
 * Description: 一个没有侧边栏的全宽度页面模板
 */
?>

Dopo di che, quando si modifica la pagina nel pannello di amministrazione di WordPress, sarà possibile visualizzare e selezionare “Layout di pagina a larghezza intera” dal menu a discesa “Modello” nelle “Proprietà della pagina”. Ciò offre una grande flessibilità nella visualizzazione dei contenuti, senza dover modificare i file principali del tema per soddisfare esigenze di layout specifiche.

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

Utilizzare i tag di condizione per il controllo logico.

Nei file dei template, è spesso necessario mostrare contenuti diversi in base a condizioni diverse. A questo scopo, è necessario utilizzare i tag condizionali di WordPress. Ad esempio, inindex.phpIn WordPress, è possibile utilizzare i tag condizionali per determinare se si tratta di una pagina di elenco degli articoli o di una pagina di un singolo articolo, anche se di solito ci sono file di template più specifici che si occupano di questo.

<?php if ( is_home() && ! is_front_page() ) : ?>
    <h1>Elenco degli articoli del blog</h1>
<?php elseif ( is_search() ) : ?>
    <h1>Risultati della ricerca:</h1>
<?php endif; ?>

Le etichette condizionali più comuni includono anche:is_single()、is_page()、is_category()、is_archive()E così via, questi sono i pilastri della creazione di temi dinamici e intelligenti.

La gestione di script e stili per i temi

Per garantire la stabilità e le prestazioni del tema, tutti i file JavaScript e CSS dovrebbero essere caricati in modo ordinato tramite i metodi forniti da WordPress, anziché essere utilizzati direttamente nei file dei template.或Etichette. Questo viene fatto tramitefunctions.php中的wp_enqueue_scriptsQuesto viene realizzato mediante l'uso di hook.

Si consiglia di leggere Concentrarsi sulla pratica: padroneggiare le competenze fondamentali dello sviluppo di temi WordPress moderni, da zero a uno.。

Registrare e mettersi in coda per le risorse in modo corretto.

Usarewp_register_script()和wp_enqueue_script()(Sceneggiatura) o il corrispondentewp_register_style()和wp_enqueue_style()La funzione (style) consente a WordPress di gestire in modo uniforme le dipendenze, il controllo delle versioni e di evitare il caricamento ripetuto.

<?php
function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

    // 注册一个自定义JavaScript文件
    wp_register_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true );
    // 排队这个脚本（仅在需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );
?>

Nell'esempio sopra,get_stylesheet_uri()Ottieni quello dell'attuale argomento.style.cssPercorso,get_template_directory_uri()Ottieni l'URI del catalogo dei temi. Imposta l'ultimo parametro dello script su .trueQuesto significa che il caricamento avviene nel footer, il che aiuta a migliorare le prestazioni di caricamento della pagina.

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

Aggiungere stili o script in linea

A volte, è necessario generare dinamicamente un po' di CSS o JavaScript in base alla logica di PHP. In questo caso, è possibile utilizzarewp_add_inline_style()和wp_add_inline_script()I funzioni, che devono essere associate a una risorsa già in coda.

<?php
function my_dynamic_css() {
    $custom_css = "
        .site-header {
            background-color: #" . get_theme_mod('header_bg_color', 'ffffff') . ";
        }
    ";
    wp_add_inline_style( 'my-awesome-theme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_dynamic_css' );
?>

Il personalizzatore di temi e le funzionalità di personalizzazione.

Il personalizzatore di WordPress offre un'interfaccia di anteprima in tempo reale che consente agli utenti (amministratori) di regolare alcune impostazioni del tema, come i colori, il logo, l'immagine di sfondo, ecc. Tramite l'API del personalizzatore del tema, gli sviluppatori possono aggiungere opzioni configurabili al tema in modo sicuro.

Aggiungere un'impostazione nell'editor personalizzato.

Prima di tutto, è necessariofunctions.phpUtilizzare nel contestocustomize_registerI ganci vengono utilizzati per registrare impostazioni, controlli e aree.

<?php
function my_awesome_theme_customize_register( $wp_customize ) {
    // 添加一个“颜色”板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-awesome-theme' ),
        'priority' => 30,
    ) );

    // 添加一个“链接颜色”设置
    $wp_customize->add_setting( 'link_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'    => __( '链接颜色', 'my-awesome-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'link_color',
    ) ) );
}
add_action( 'customize_register', 'my_awesome_theme_customize_register' );
?>

Nell'argomento, esporre le impostazioni personalizzate.

Dopo aver aggiunto l'impostazione, è necessario visualizzare questo valore nella parte frontale del tema. Di solito, questo viene fatto in HTML.style.cssO tramitewp_add_inline_style()Nella CSS dinamica aggiunta, utilizzare In the added dynamic CSS, use <get_theme_mod()La funzione ottiene il valore.

<?php
function output_customizer_css() {
    $link_color = get_theme_mod( 'link_color', '#0073aa' ); // 第二个参数为默认值
    if ( $link_color !== '#0073aa' ) {
        $css = "
            a { color: {$link_color}; }
            a:hover { color: " . adjust_color( $link_color, -50 ) . "; }
        ";
        wp_add_inline_style( 'my-awesome-theme-style', $css );
    }
}
add_action( 'wp_enqueue_scripts', 'output_customizer_css' );
?>

In questo modo, la funzionalità e l'aspetto del tema diventano altamente configurabili, mantenendo al contempo il codice ordinato e sicuro.

Riassumendo

Lo sviluppo di un tema WordPress è un progetto sistematico che richiede una profonda comprensione dei livelli dei template, delle funzioni principali, della gestione delle risorse e delle API personalizzate. A partire dalla creazione della struttura più basilare,style.css和index.phpInizialmente, per controllare la visualizzazione delle diverse pagine, è necessario creare file di modello specifici e utilizzarli.functions.phpEstendere le funzionalità del tema e seguire le norme di WordPress per gestire script e stili è la base per creare un tema robusto ed efficiente. Inoltre, l'integrazione dell'API del personalizzatore del tema può offrire agli utenti un'esperienza di personalizzazione in tempo reale e di facile utilizzo. Padroneggiare questi concetti e competenze fondamentali è la chiave per diventare uno sviluppatore professionale di temi WordPress.

FAQ - Domande frequenti

Quanti file sono necessari, come minimo, per un tema WordPress di base?

Un tema di base, riconoscibile da WordPress, richiede almeno due file:style.css和index.php。style.cssLa testa deve contenere le corrette annotazioni sulle informazioni del tema, mentreindex.phpÈ il file di ripristino finale a livello di template, utilizzato per visualizzare il contenuto più basilare.

Qual è la differenza tra un sottotema e un tema principale? Come si creano?

子主题继承父主题的所有功能和样式，但允许开发者在不修改父主题文件的情况下进行覆盖和定制。这便于在父主题更新时保留自定义修改。创建子主题，只需在/wp-content/themes/Creare una nuova cartella nella directory e creare un file al suo interno.style.cssIl file, la cui intestazione deve contenere delle annotazioni.Template:La riga successiva specifica il nome della directory del tema padre.

Perché il mio modello di pagina personalizzato non viene visualizzato nell'elenco a discesa di back-end?

Per favore, controlla il file del template della tua pagina (come ad esempiomy-template.phpIl file deve trovarsi nella directory principale del tema e il formato del blocco di commenti all'inizio del file deve essere completamente corretto. Il blocco di commenti deve includere:Template Name:Questa riga, seguita immediatamente dal nome del tuo template. Uno spazio errato o la mancanza di un punto e virgola potrebbero impedire a WordPress di riconoscerlo.

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

Questo viene fatto principalmente attraverso l“”internazionalizzazione (i18n)“ e la ”localizzazione (l10n)". Prima di tutto, instyle.cssIl “Dominio del testo” efunctions.php的load_theme_textdomain()Durante la chiamata, utilizzare un campo di testo con un tema coerente. Quindi, per tutte le stringhe che richiedono una traduzione, utilizzare__()、_e()Dopo aver tradotto la funzione, è necessario incapsularla. Infine, utilizzare strumenti come Poedit per generare il file..potTradurre il file del modello e creare la versione corrispondente nella lingua desiderata..po和.moI documenti, collocati sotto il tema/languages/Nella directory.