Kompletní průvodce pro začátečníky v vývoji WordPress temat: Postavte si své první téma od nuly

Příprava prostředí a základní koncepty

Než začnete psát kód, potřebujete vhodné lokální vývojové prostředí. Doporučujeme použít integrované balíčky pro lokální servere, jako jsou Local by Flywheel, XAMPP nebo MAMP. Váš lokální web by měl obsahovat nainstalované základní soubory WordPressu.

Každý WordPress téma musí obsahovat dvě nejzákladnější soubory:style.css 和 index.php。style.css Není to jen šablona stylů, ale také “občanský průkaz” tématu – prostřednictvím speciálního hlavičkového souboru (Theme Header) sděluje informace o tomto tématu systému WordPress.index.php Jedná se o výchozí šablonový soubor daného tématu, který zpracovává všechny požadavky na stránky, pro které nebyla určena žádná speciální šablona.

Typické téma bude v struktuře adresáře dodržovat jasné hierarchie. Základní šablonové soubory se obvykle nacházejí přímo v kořenovém adresáři tématu, zatímco soubory s kódem CSS, JavaScript a obrázky jsou uloženy v samostatných adresářích. /css、/js 和 /images V takových pod adresářích. U složitějších témat můžete také narazit na další podklady. /template-parts Katalog slouží k ukládání znovupoužitelných fragmentů šablon./inc Katalog slouží k uložení souborů obsahujících vylepšení funkcí.

Doporučujeme k přečtení. Ultimátní průvodce vývojem WordPress temat: Vytvoření vlastních šablon od nuly。

Porozumění struktuře a hierarchii šablon v WordPressu

WordPress využívá inteligentní systém nazývaný “Řádírnost šablon” (Template Hierarchy), který rozhoduje, který soubor šablony se má na dané stránce použít. Tento systém představuje klíčovou logiku při vývoji temát (tém).

UltaHost – hosting služby pro weby postavené na platformě WordPress

Záruka vrácení peněz do 30 dnů, neomezený šířka pásma a databáze, bezplatná ochrana proti DDoS útokům. Sleva 501 TP4T při nákupu na 3 roky.

přístupová stránka

Například, když uživatel navštíví domovskou stránku blogu, WordPress nejprve zkontroluje, zda existuje soubor s názvem… front-page.php Soubor… Pokud ho nenajde, bude pokračovat v hledání. home.phpPokud to pořád nebude fungovat, nakonec se systém vrátí k použití výchozích nastavení. index.phpPro jednotlivý článek je pořadí vyhledávání v WordPressu následující:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。

Pochopení a správné využití struktury šablon vám umožní vytvářet vysoce přizpůsobené rozložení a vzhled stránek různých typů (jako jsou blogové články, statické stránky, archivy podle kategorií, stránky výsledků vyhledávání atd.) bez nutnosti psaní složité logiky podmínek.

Prohlášení o informacích k tématu

style.css Na začátku souboru musí být obsažena část textu ve formátu CSS komentářů, která slouží k definování metadat tématu. Zde je příklad tohoto minimálního formátu:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是我的第一个 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

V tomto textu se uvádí, že “Text Domain” slouží k internacionalizaci a je identifikátorem, který je nutný při následném volání funkcí pro překlad. Záhlaví tohoto souboru je jediným základem, na základě kterého WordPress rozpozná a aktivuje váš téma.

Doporučujeme k přečtení. Vývoj tem pro WordPress: Od základů k mistrovství: Klíčový průvodce vytvářením personalizovaných webových stránek。

Vytvoření základní šablonové soubory

Začněme s nejdůležitějším souborem šablony. Nejprve… index.php Vytvořte základní strukturu v kódu. Standardní šablonový soubor by měl obsahovat odkazy na hlavičku, hlavní obsahovou oblast, boční lištu a patu stránky.

Základní šablony soubory obvykle obsahují následující volání klíčových funkcí WordPress:get_header()、get_footer()、get_sidebar() příliš get_template_part()Tyto funkce načtou příslušné šablonové soubory, čímž se struktura stránky modularizuje.

Vytvořit šablonu hlavičky

header.php Soubor obsahuje obsah, který se zobrazí na vrcholu každé stránky. Musí obsahovat alespoň deklaraci typu dokumentu v formátu HTML5. <!DOCTYPE html>、<head> Začíná se oblastí a hlavním obsahem stránky. <body> 及 <header> Tagy.

Shared hosting na hosting.com

Vysoký výkon, vybavený procesorem AMD EPYC, úložištěm NVMe SSD a LiteSpeedem, nepřetržitá interní podpora odborníků 24 hodin denně a 7 dní v týdnu, pokročilá bezpečnostní opatření včetně SSL, ochrany proti útokům hrubou silou, malwaru a DDoS, úspora až 731 TB/měsíc.

přístupová stránka

在 <head> V této oblasti je zásadní používat… wp_head() „Hook“ (ukazatelka). Tato funkce umožňuje jádru WordPressu, pluginům a vaší vlastní tématice vložit do hlavičky stránky potřebný kód – např. odkazy na stylové soubory (CSS), metatagy a skripty. Zde je příklad jednoduché šablony hlavičky:

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1003>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/cs/</?php echo esc_url( home_url( '/' ) ); ?>"><p><strong> Název blogu: </strong><br><br><img src='images/logo.png'> <br><br><strong> Kategorie: </strong><br><br><strong></a></h1>
</header>

body_class() Funkce vypíše sadu CSS tříd závislých na typu aktuální stránky, což velmi usnadňuje řízení vzhledu stránek.

Vytvořit hlavní cyklus a zobrazení obsahu

WordPress používá “hlavní cyklus” (The Loop) k procházení a zobrazení aktuálně vyhledaného seznamu článků. Tento cyklus je nejzákladnější částí šablonových souborů a obvykle se nachází… index.php、single.php 或 archive.php Čína.

Doporučujeme k přečtení. Ovládnutí vývoje temát pro WordPress: Kompletní průvodce výstavbou a použitím od nuly。

Typická struktura hlavního cyklu vypadá následovně:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <p>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

Uvnitř cyklu můžete používat řadu šablonovacích značek začínajících slovem “the_”, například: the_title()、the_content()、the_excerpt() 和 the_post_thumbnail()Pro výstup jednotlivých částí článku potřebujete jeho obsah. Pokud mi poskytnete text článku, mohu vám pomoci s jeho překladem do češtiny.

Shared hosting od InterServeru

Sdílený hosting za 1 TB + 5 TB měsíčně za 2,50 USD, slevový kód tryinterserver pro první měsíc za 1 TB + 5 TB za 0,1 USD, a 461 skriptů cloudových aplikací k jednoduché instalaci.

přístupová stránka

Přidání stylů a funkcí

Vizuální vzhled tématu je řízen CSS. Kromě toho… style.css Kromě psaní stylů v kódu, existuje i profesionálnější způsob, jak to provést… functions.php Soubory slouží k uspořádání do fronty za účelem načítání šablon a skriptů, aby byly zajištěny správné závislosti a pořadí načítání.

functions.php Tento soubor je “vylepšovacím nástrojem” pro vaši temu. Není to šablonový soubor, ale PHP soubor, který se automaticky načte při inicializaci tématu. Slouží k definování funkcí, tříd, hooků a filtrů.

Správné zavádění stylů a skriptů

Měl byste použít… wp_enqueue_style() 和 wp_enqueue_script() Funkce slouží k přidávání zdrojů (resурсů). Tyto funkce by měly být nakonfigurovány tak, aby byly aktivní („montovány“)… wp_enqueue_scripts Tato funkce je napojena na „akční háčky“ (action hooks). Výhodou tohoto přístupu je, že WordPress může spravovat zdroje jednotně, čímž se eliminuje opakované načítání dat a konflikty mezi různými závislostmi (dependencies).

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载一个自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Registrovací menu a boční panel

Menü a boční panel (oblast nástrojů) v WordPressu musí nejprve být nastaveny… functions.php Nejprve je nutné se “zaregistrovat”, a teprve poté lze obsah zobrazit v odpovídajícím šablonovém souboru.

Použití register_nav_menus() Funkce pro registraci umístění jídelních jednotek:

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

A poté, header.php V tom můžete použít… wp_nav_menu() Funkce slouží k zobrazení hlavního menu.

Použití register_sidebar() Funkce pro registraci oblasti pro přidávání doplňkových funkcí („plug-in“):

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here.', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>'function my_first_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'My first theme',  
            'id' =&gt; 'my_first_theme',  
            'desc' =&gt; 'Sidebar for my first theme',  
        ),  
    ) );  
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Poté, sidebar.php V čínštině se používá dynamic_sidebar() Funkce slouží k volání této oblasti.

Testování a vydávání témat

Po dokončení vývoje je nutné provést komplexní testování. To zahrnuje ověření vzhledu tématu v různých prohlížečích (Chrome, Firefox, Safari, Edge) a na různých velikostech zařízení (počítače, tablety, mobilní telefony). Ujistěte se, že všechny odkazy fungují správně, formuláře fungují bez chyb a že menu správně reagují na malé obrazovky.

Aktivovat režim ladění

Během vývoje je vysoce doporučeno zapnout režim ladění WordPressu. To vám pomůže rychle odhalit chyby, varování a upozornění v PHP kódu. wp-config.php V souboru najděte a změňte následující řádky:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误

Zapnout WP_DEBUG_LOG Chybové informace lze zaznamenat do souborů protokolů (log files), čímž se zabrání jejich přímému zpřístupnění návštěvníkům webové stránky.

Proveďte kontrolu standardů tématického zaměření.

Před publikací nebo uvedením do provozu by vaše téma mělo co nejvíce dodržovat „Specifikace pro vývoj WordPress témat“. To zahrnuje, ale není omezeno na: ujištění, že všechna data zobrazovaná na stránce byla řádně eskalována (použitím vhodných metod). esc_html()、esc_url() Funkce jako „čekat“), veškerý překladatelný text by měl být použit… __() 或 _e() Funkce jsou zabaleny do speciálních „obalů“ (wrappers), a kód týkající se daného tématu neobsahuje žádné pevně zakódované (hardcoded) adresy URL.

Můžete použít oficiální plugin “Theme Check” k automatické kontrole souladu vašeho tématu se stanovenými normami. Ten prohledá váš kód a upozorní vás na potenciální problémy, bezpečnostní chyby nebo nedostatky, které nesplňují požadavky standardů.

Připravujeme se na vydání.

Jakmile bude vývoj tématu, jeho testování a revize dokončeny, můžete se rozhodnout, zda ho zveřejníte v adresáři temat WordPress.org, nebo ho zabalíte pro osobní použití nebo pro zákazníky. Balíček určený k publikaci by měl obsahovat pouze potřebné složky a soubory daného tématu a měly by z něj být odstraněny všechny soubory související s systémem řízení verzí (např. soubory typu `.git`). .gitVytvořte konfigurační soubory pro vývojové nástroje a záložní kopie dat. Zároveň se ujistěte, že… style.css Tématické informace v textu jsou úplné a přesné, a je připravena jasná, čitelná fotografie. screenshot.png(1200 × 900 pixelů) jako zkrácená verze tématu (tematický thumbnail).

Závěr

Od vytvoření obsahuho souboru… style.css 和 index.php Začněme od základní složky, poté se podívejme na strukturu šablon, vytvořte klíčové šablonové soubory, použijte hlavní cyklus k zobrazení obsahu a nakonec… functions.php Přidání stylů, skriptů a funkcí, a nakonec provedení přísných testů a kontrol standardizace – to je kompletní postup při vytváření základního WordPress tématu. Tento proces vám nejenom poskytne funkční téma, ale co je důležitější, poskytne vám také hluboké pochopení architektury WordPress témat. Na základě tohoto pochopení můžete pokračovat v zkoumání pokročilejších funkcí, jako jsou vlastní typy článků, API pro přizpůsobení témat, podpora blokového editoru (Gutenberg) atd., a postupně se stát profesionálním vývojářem WordPress témat.

Časté dotazy

Jaké jsou minimální počty souborů potřebných pro WordPress téma?

Témata, která jsou rozpoznatelná a aktivovatelná systémem WordPress, musí obsahovat alespoň dvě soubory:style.css 和 index.phpMezi nimi jestyle.css Musí obsahovat správné hlavičkové poznámky s informacemi o tématu.

Proč moje vlastní styly neplatí (tj. nejsou aplikovány na webové stránky)?

To je obvykle způsobeno nedostatečnou prioritou CSS selektorů nebo nesprávným načtením šablony stylů. Nejprve zkontroluj nástroje pro vývojáře v prohlížeči, abys se ujistil, že byl soubor šablony stylů úspěšně načten a zda tvoje CSS pravidla nebyla překryta jinými pravidly s vyšší prioritou. Poté se ujisti, že používáš správný způsob načítání šablony stylů… functions.php Něco v čínštině (zjednodušené) wp_enqueue_style() Funkce slouží k načítání stylů, místo aby byly přímo zapsány do HTML kódu. <link> Tagy.

Jak přidat vlastní šablonu stránky ke konkrétnímu tématu?

Vytvořte nový PHP soubor, například „new_file.php“. page-fullwidth.phpNa nejvyšším místě tohoto souboru přidejte následující PHP komentář, který deklaruje název šablony:<?php /* Template Name: 全宽页面 */ ?>Poté můžete do tohoto souboru napsat kód, který se liší od výchozího šablónu stránky. page.php Layout a kód této šablony. Při vytváření nebo úpravě stránek můžete tuto novou šablonu vybrat v modulu “Vlastnosti stránky”.

Jaký je rozdíl mezi souborem functions.php a pluginy?

functions.php Je součástí daného tématu a jeho funkce jsou úzce propojeny s aktuálním tématem. Pokud změníte téma,functions.php Kód obsažený v této části textu již nebude fungovat. Funkce poskytované pluginy jsou nezávislé na použitém tématu – bez ohledu na to, které téma je aktivováno, budou tyto funkce stále dostupné. Obvykle jsou funkce, které jsou úzce spojeny s vizuálním vzhledem webové stránky, umístěny do samotného tématu, zatímco univerzální a nezávislé funkce jsou vhodnější pro implementaci formou pluginů.

Jak zajistit, aby můj web nebo aplikace podporovaly více jazyků ( internacionalizaci)?

Musíte udělat dvě věci: připravit a načíst soubory s překlady. Nejprve ve všech řetězcích určených pro uživatele v kódu… ('Read More', 'my-first-theme')Všechny musí používat něco jako… () 或 _e() Takovou funkci překladu je třeba zabalit do vhodného obalu a druhý parametr (textové pole) je potřeba propojit s… style.css Je to v souladu s “Text Domainem” uvedeným v dokumentaci. Poté použijte nástroje, jako je Poedit, k vytvoření požadovaných souborů. .pot Šablony souborů, a přeložte je do odpovídajícího českého textu. .po 和 .mo Dokumenty. Nakonec v functions.php Použijte to v čínštině. load_theme_textdomain() Funkce slouží k načtení souborů s překlady.