Kompletní průvodce vývojem WordPress temat: Praktický návod na vytvoření vlastního tematu od nuly

Základy vývoje WordPress temat: Prostředí a klíčové koncepty

Než začnete s kódováním, je nutné si nastavit vhodné vývojové prostředí a pochopit základní strukturu témat WordPressu. Lokální vývojové prostředí je standardní volbou – můžete použít nástroje jako XAMPP, MAMP, Local by Flywheel nebo Docker. Díky tomu budete moci vyvíjet a testovat bez ovlivnění webové stránky online.

Téma WordPressu je v podstatě něco, co se nachází na/wp-content/themes/Souborová složka v adresáři. Tato složka musí obsahovat alespoň dvě základní soubory:style.css和index.phpMezi nimi jestyle.cssNejde pouze o šablony stylů (style sheets), ale také o “občanské doklady” daného tématu (theme). Poznámky v hlavičce souboru definují metadaty tématu, jako je jeho název, autor, popis a další informace.

Porozumění strukturám šablon v WordPressu je klíčové pro správný vývoj. WordPress automaticky vybírá odpovídající soubory šablon podle typu aktuálně navštěvované stránky (např. úvodní stránka, stránka článku, kategorie atd.) a na základě toho renderuje obsah. Například, když uživatel navštíví konkrétní článek, WordPress postupně hledá potřebné šablony.single-post.php、single.phpA nakonec je…index.phpTento mechanismus vám umožňuje navrhovat jedinečné rozložení (layouty) pro různé části webové stránky.

Doporučujeme k přečtení. Ultimátní průvodce vývojem WordPress temát: Systémový kurz od základů až po praktické aplikace。

Základní soubor tématu

functions.phpSoubor se týká vašeho tématu “Řídicí centrum”. Není to soubor, který by nutně musel existovat, ale téměř každé téma na něj závisí. Do něj můžete přidávat vlastní funkce, registrovat menu, boční panely (oblasti s nástroji), načítat skripty a styly, stejně jako volat různé další funkce.add_action和add_filterTento soubor obsahuje „hooky“ (speciální funkce), které umožňují rozšířit nebo upravit základní chování WordPressu. Tento soubor se automaticky načte po aktivaci daného tématu.

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

Dalším zásadně důležitým dokumentem jestyle.cssPoznámky v hlavičce souboru slouží jako deklarativní oblast tématu a mají následující formát:

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

Z tohoText DomainSlouží k internacionalizaci témat a je potřeba jej následně použít pro volání funkcí překladu.__()或_e()Identifikátor používaný při určitém čase.

Základní struktura a šablona pro vytvoření tématu

Typická struktura tematického souboru začíná vytvořením nejzákladnější šablony. Nejprve…header.phpObsahuje záhlaví HTML dokumentu.Regiony a veřejné oblasti na vrcholu webové stránky, jako je logo a hlavní navigace. Používejte…wp_head()Klíčovým bodem tohoto souboru je to, že funkce vypisuje skripty a styly potřebné pro jádro WordPressu a jeho pluginy.

odpovídajícífooter.phpTakto je zahrnuta společná část spodní části webové stránky a na konci je proveden volání (tzv. „call“).wp_footer()Funkce. Hlavní obsah webové stránky je uzavřen mezi tímto “hlavovým” a “závěrečným” částí.

Doporučujeme k přečtení. Vývoj tem pro WordPress: Kompletní průvodce vytvářením vlastních tem od nuly。

Kerní šablona stránky určené k sestavení

index.phpJedná se o nejzákladnější šablonu pro tvé téma a zároveň o ultimátní alternativu v případě, že žádné jiné, konkrétnější šablony neexistují. Její hlavní úkol spojit všechny jednotlivé části dohromady. Klasická varianta…index.phpStruktura je následující:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 展示每篇文章的内容
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>

<?php get_sidebar(); // 如果不需要侧边栏，可以删除此行 ?>
<?php get_footer(); ?>

Tento šabloně využívá cyklus (The Loop) z jádra WordPressu k procházení a výpisu seznamu článků. Abychom zachovali modulárnost a udržovatelnost kódu, použili jsme…get_template_part()Funkce slouží k načtení nezávislých šablonových souborů obsahu.

Vytvoření znovupoužitelných šablon obsahu

Obvykle vytvoříme složku v adresáři s tematikou.template-partsSložka, do které uložíte věci jako…content.phpTakový soubor. Tento soubor se zaměřuje na to, jak zobrazit shrnutí nebo celý text článku nebo stránky.

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

<article id="post-<?php the_ID(); ?>" no numeric noise key 1003>
    <header class="entry-header">
        <h2 class="entry-title">
            <a href="/cs/</?php the_permalink(); ?>" rel="bookmark"><p><strong> Řekněte mi něco o sobě.</strong></p></a>
        </h2>
    </header>
    <div class="entry-content">
        <?php the_excerpt(); ?>
    </div>
</article>

Tímto způsobem můžete snadno nastavit různé typy článků (např.…)post、pageVytvořte různé šablony obsahu (např.)content-post.php、content-page.phpSystém provede automatické porovnání.

Přidejte do svého tématu základní funkce.

Funkční soubory jsou ten „motor“, díky kterému se váš projekt může změnit ze statické šablony na dynamickou aplikaci.functions.phpV tomto kontextu je nutné systémově připojit („mount“) různé funkce do systému.

Základní podpora inicializace tématu

První krok je použít…after_setup_theme„Hooky“ prvky slouží k deklaraci funkcí, které vaše téma podporuje. Tím informujete WordPress, jaké vlastnosti vaše téma může využívat.

Doporučujeme k přečtení. Podrobný průvodce vývojem temat pro WordPress: Kompletní praktický průvodce od základů až po pokročilé znalosti。

add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
    // 让主题支持自动生成<title>标签
    add_theme_support( 'title-tag' );
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5的语义化标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'menu-1' => esc_html__( '主导航', 'my-custom-theme' ),
    ) );
}

Správa skriptů a stylových tabulek

Správné zařazení souborů CSS a JavaScript do fronty je požadavkem profesionálního vývoje. Měli byste použít…wp_enqueue_scriptsPro dokončení této práce použijte „háčky“ (anglicky „hooks“), místo aby bylo všechno napsáno přímo do šablony.Tagy:

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

// 引入自定义的JavaScript文件
    wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true );

// 如果需要使用jQuery（通常由WordPress核心提供），可以声明依赖
    wp_enqueue_script( 'my-theme-custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), wp_get_theme()->get('Version'), true );
}

Registrační nástrojová oblast

I oblasti nástrojů v postranní liště nebo v patičce stránky potřebují být zahrnuty do tohoto plánu.functions.phpZaregistrujte se a používejte to.widgets_initHook:

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

add_action( 'widgets_init', 'my_theme_widgets_init' );
function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( '侧边栏', 'my-custom-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( '在此添加小工具。', 'my-custom-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>',
    ) );
}

Po registraci budete moci v šablonách používat…dynamic_sidebar( 'sidebar-1' )或get_sidebar()Funkce byla použita k jejímu volání.

Pokročilý vývoj a vlastní funkce

Po dokončení základního nastavení tématu můžete použít pokročilejší techniky k zvýšení jeho profesionality a flexibility.

Vytvoření vlastního šablónu stránky

Stránkové šablony vám umožňují přidělit konkrétním stránkám jedinečný vzhled (tj. specifické uspořádání obsahu). Vytvořte tedy soubor, například…page-fullwidth.phpDo hlavy souboru přidejte následující poznámku s názvem šablony:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽页面模板。
 */
get_header(); ?>
<main class="full-width">
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h1><p><strong> Řekněte mi něco o sobě.</strong></p></h1>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <?php endwhile; ?>
</main>
<?php get_footer(); ?>

Při vytváření nebo úpravě stránky můžete v sekci “Vlastnosti stránky” vybrat tento šablon “Celoplošná stránka”.

Implementace podpory přizpůsobení tématu

WordPress Customizer poskytuje uživatelům rozhraní pro konfiguraci s možností přímého přehledu výsledků změn v reálném čase. Můžete takcustomize_registerHooky nástroj umožňuje snadné přidávání nastavení, například textu s autorskými právy do patra stránky:

add_action( 'customize_register', 'my_theme_customize_register' );
function my_theme_customize_register( $wp_customize ) {
    // 添加一个设置项
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 我的网站. 保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

// 为设置项添加一个控件（输入框）
    $wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'my-custom-theme' ),
        'section'  => 'title_tagline', // 放到“站点身份”区域
        'type'     => 'text',
    ) );
}

A pak vfooter.phpV čínštině se používáget_theme_mod( 'footer_copyright_text' )Vyveďte tuto hodnotu.

Zavedení moderních pracovních postupů v oblasti front-end vývoje

U složitých témat se ruční správa souborů CSS a JS stává neefektivní. Můžete zvážit využití Node.js a nástrojů na vývoj, jako jsou Webpack nebo Vite, k balení zdrojových souborů, kompilaci stylových jazyků (Sass/Less), automatickému přidávání předpon pro prohlížeče, kompresi kódu atd. Obvykle to zahrnuje vytvoření odpovídajících souborů v kořenovém adresáři daného tématu.package.jsonVytvořte konfigurační soubory a výsledné soubory uložte do určitého adresáře tématu (např.…)/assets/dist/) a poté…functions.phpZde jsou uvedeny tyto sestavené (buildované) soubory.

Závěr

Vývoj temát pro WordPress je proces, který začíná pochopením základní struktury šablon a souborového uspořádání, pokračuje vytvářením jednotlivých šablon, integrací funkcí a nakonec v dosažení profesionálního vzhledu pomocí pokročilých úprav a nástrojových sad. Klíčové je dodržovat kódovací standardy a osvědčené postupy WordPressu – např. správné používání hookovacích funkcí, zařazování skriptů a stylů do vhodných časových rámců, a také udržování kódu čistým a organizovaným pomocí šablonových komponent. Počínaje vytvořením jednoduché tematy…index.php和style.cssZačněte a postupně přidávejte jednotlivé části.header.php、footer.phpvfunctions.phpOd aktivace základních funkcí přes vytváření vlastních šablon až po nastavení přizpůsobovacích možností – každý krok vám pomůže udělat váš WordPress téma ještě silnějším a snadněji použitelným. Po zvládnutí těchto dovedností budete schopni vytvářet kvalitní WordPress téma, které splňuje nejrůznější požadavky.

Časté dotazy

Je nutné ovládat PHP pro vývoj temát pro WordPress?

Ano, PHP je základním jazykem pro vývoj temat pro WordPress. Potřebujete alespoň ovládat základy PHP syntaxe a porozumět tomu, jak pracovat s klíčovými funkcemi WordPressu.the_post()、the_title()) a globální proměnné (např.$postInterakce, stejně jako způsob použití akčních a filtrovacích hooků. HTML a CSS jsou nezbytné pro vytvoření vzhledu stránek, zatímco JavaScript slouží k realizaci interaktivních funkcí.

Proč se změny mého tématu nezobrazí po obnovení stránky?

To je obvykle způsobeno mezipamětí prohlížeče nebo mezipamětí objektů v WordPressu. Nejprve zkuste provést silné obnovení stránky v prohlížeči pomocí klávesové kombinace Ctrl+F5 (nebo Cmd+Shift+R). Pokud to nepomůže…functions.phpVe zdrojovém kódu byl zaveden systém správy verzí (např.…)wp_get_theme()->get('Version')), prosím, ujistěte se, že po každé změně dojde k aktualizaci.style.cssVerze čísla v hlavičce souboru. Kromě toho zkontrolujte, zda ve vašem kódu nejsou syntaxové chyby, které by mohly způsobovat problémy.functions.phpPři spuštění souboru došlo k chybě.

Jak zajistit, aby můj webový design („témata“) podporovalo více jazyků?

Musíte udělat dvě věci: první je “ internacionalizace” a druhá je “ lokalizace”. Nejprve ve všech řetězcích, které je potřeba přeložit, v tématu použijte funkce pro překlad v WordPressu, jako např.esc_html__(‘文本’, ‘my-text-domain’)或_e(‘文本’, ‘my-text-domain’)A ujistěte se, že…style.cssDefinované v Číně.Text DomainV souladu s textovými poli zde. Poté použijte nástroje jako Poedit k prohledání vašeho tématu a vytvoření požadovaných výstupů..potPřekladový šablonový soubor – podle něj může překladatel vytvořit překlad pro příslušný jazyk..poA po kompilaci.moSoubor by měl být umístěn do tématu./languages/Nastavení bude platné ihned po umístění do adresáře.

Jak by měly být témata a pluginy rozděleny z hlediska funkcí?

Jedním z jednoduchých principů je: Témata ovládají vzhled a způsob zobrazení webové stránky, zatímco pluginy ovládají její funkce a chování. Konkrétně by měly věci přímo související s vizuálním zpracováním (jako je rozvržení, barvy, písma, šablony) být umístěny do temat. Funkce, které mohou existovat nezávisle na tematu (jako jsou kontaktní formuláře, optimalizace pro vyhledávače, e-shopové funkce, vykonnostní cache), by měly být vytvořeny jako pluginy. Díky tomu jsou při změně tematu zachovány základní funkce webové stránky, což zvyšuje flexibilitu a znovupoužitelnost kódu.