Hlavní stránka/Znalosti/WordPress/Podrobnosti o obsahu

Ultimátní průvodce vývojem WordPress temat: Vytvoření vlastních šablon od nuly

Čtení za 3 minuty.
2026-03-19
2026-06-04
2,403
Získávám provize, když nakupujete prostřednictvím níže uvedených odkazů, aniž by vás to něco stálo navíc.

Vývojové prostředí a základní struktura souborů

Před zahájením vývoje tématu pro WordPress je nezbytné vytvořit efektivní a dobře strukturované vývojové prostředí. To nejenže napomáhá organizaci kódu, ale také položí základy pro následnou údržbu a rozšíření. Standardní téma pro WordPress se nachází na/wp-content/themes/Soubory v adresářích v této složce dodržují určitá pravidla pojmenovávání a struktury.

Klíčové soubory a adresáře

Každý WordPress téma musí obsahovat alespoň dvě soubory:index.php和style.cssMezi nimi jestyle.cssNení to jen šablona stylů, ale také “občanský průkaz” daného tématu – blok komentářů v hlavičce souboru slouží k deklaraci informací o tomto tématu systému WordPress. Typický příklad…style.cssZáhlaví souboru vypadá následovně:

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始构建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Kromě těchto dvou nezbytných souborů obsahuje funkční a dobře strukturované téma obvykle následující adresáře a soubory:
* functions.phpFunkční soubor tématu slouží k přidávání funkcí, registraci nabídek (mení), bočních panelů a dalších prvků rozhraní.
* header.phpŠablona hlavičky webové stránky.
* footer.phpŠablona spodní části webové stránky.
* sidebar.phpŠablona bočního panelu.
* page.php: Stránkový šablon.
* single.phpŠablona stránky s detaily článku.
* archive.phpŠablona stránky pro archivaci článků.
* 404.phpŠablona stránky s chybou 404.
* search.phpŠablona stránky s výsledky vyhledávání.
* assets/Obsah: Slouží k uložení statických zdrojů (static resources), obvykle obsahuje…css/、js/、images/Zahrnujte také podřízené adresáře.

Doporučujeme k přečtení. Začínáme od nuly: praktický návod k vytvoření vlastního WordPressového tématu.。

Nastavení lokálního vývojového prostředí.

Doporučujeme použít software určený k nastavení lokálního serverového prostředí (např. Local by Flywheel, XAMPP, MAMP) pro vytvoření vývojového prostředí. Díky tomu můžete na svém počítači nainstalovat WordPress, databázi (např. MySQL) a PHP a provádět offline vývoj a ladění. Toto je mnohem efektivnější než přímá úprava na online serveru. Současně je osvědčenou praxí používat systém pro správu verzí kódu (např. Git) k údržbě a sledování změn ve vašich tematických souborech.

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.
LOGO UltaHostu přístupová stránka

Vytvoření základní šablony pro téma

Jádrem vývoje temát pro WordPress je systém hierarchie šablon. Systém automaticky vybere odpovídající šablonový soubor podle typu stránky, kterou uživatel navštíví, a na základě toho renderuje stránku. Porozumění a správné vytvoření těchto šablonových souborů je klíčové pro vývoj temát.

Šablony pro horní a dolní část stránky

Hlavičkový šablonheader.phpJe zodpovědný za vytvoření začáteční části každé stránky, která obvykle zahrnuje deklaraci HTML dokumentu.<head>Oblast (zahrnující nadpis, soubor znaků, nastavení zobrazení, zavedené styly a skripty), stejně jako logo webové stránky a hlavní navigační menu.header.phpNa konci se obvykle provádí volání…<body>Začátek části označené jako „tag“…wp_body_openHák.

Nízký šablonfooter.phpJe zodpovědný za vytvoření koncové části každé stránky, která obvykle zahrnuje oblast s podpůrnými nástroji v podvodu, informace o autorských právech, zaváděné soubory JavaScriptu a také odkaz na zavření stránky.<body>和<html>Tagy.

V jiných šablonových souborech se to provádí pomocí…get_header()和get_footer()Použijte funkce k jejich zavádění, abyste zajistili konzistenci struktury webové stránky.

Doporučujeme k přečtení. Návod k vývoji témat WordPressu: kompletní proces vytvoření vlastního tématu od nuly a nejlepší postupy.。

Hlavní cyklus a zobrazení obsahu

“Hlavní cyklus” WordPressu je jádrem témat (templatů), který slouží k načítání a zobrazování článků z databáze. Tento cyklus se obvykle používá…if ( have_posts() ) : while ( have_posts() ) : the_post();Struktura: Uvnitř cyklu můžete použít řadu šablonovacích značek k výstupu obsahu článku.the_title()、the_content()、the_excerpt()、the_permalink()、the_post_thumbnail()Atd.

index.phpJako nejzákladnější náhradní šablona by měla obsahovat kompletní cyklickou strukturu. Konkrétnější šablony pak mohou obsahovat další detaily a funkce podle požadavků.single.php(Použito pro jednotlivé články) Apage.php(Používá se pro samostatné stránky), pak lze podle potřeb přizpůsobit způsob zobrazení obsahu v cyklu. Například:single.phpObvykle se zobrazí celý obsah článku a seznam komentářů.page.phpV takovém případě se může zobrazit pouze obsah, bez dat vydání a informací o autorovi.

// 在 single.php 中一个典型的主循环示例
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        ?&gt;
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <header class="entry-header">
                <h1 class="entry-title"><p><strong> Řekněte mi něco o sobě.</strong></p></h1>
                <div class="entry-meta">
                    | 作者:
                </div>
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
        &lt;?php
        // 显示评论区
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile;
endif;

Využijte soubor functions.php k rozšíření funkcionalit tématu.

functions.phpSoubor je “centrem řízení” vašeho tématu – veškerý kód funkcí, který nepatří do přímo zobrazovaného formátu, by měl být přidán do tohoto souboru. Jeho funkce je podobná funkci vždy aktivního pluginu.

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.
LOGO hosting.com přístupová stránka

Registrování témat podporuje integraci s menu.

projít (účtem, kontrolou atd.)add_theme_support()Funkce – můžete deklarovat, které základní funkce WordPressu vaše téma podporuje. Například povolení využití speciálních obrázků u článků, personalizovaných logů nebo různých formátů článků jsou standardními vlastnostmi moderních temat.

function my_theme_setup() {
    // 添加文章特色图像支持
    add_theme_support( 'post-thumbnails' );
    // 添加自定义徽标支持
    add_theme_support( 'custom-logo' );
    // 添加标题标签支持（由WordPress自动管理）
    add_theme_support( 'title-tag' );
    // 添加HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Zde se také provádí registrace a nastavení pozic navigačních položek. Použijte tuto funkci k úpravě struktury navigace.register_nav_menus()Umístěte definici funkce do příslušného místa, a poté ji můžete používat.header.phpPoužijte to v čínštině.wp_nav_menu()Pojďte to spustit.

Přidání šablon stylů a skriptů

Správný postup je uložit soubory se styly (style sheets) a kódy JavaScript prostřednictvím…wp_enqueue_style()和wp_enqueue_script()Funkce jsou registrovány a zařazeny do fronty. Tím je zajištěno správné zpracování závislostí, předchází se duplicitnímu načítání a je zajištěna kompatibilita s doplňky. Tuto operaci by mělo provést…wp_enqueue_scriptsProvádí se na háčku.

Doporučujeme k přečtení. Od nuly: Kompletní návod k vytvoření vysoce výkonného a přizpůsobitelného WordPressového tématu.。

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 引入自定义CSS文件
    wp_enqueue_style( 'my-custom-css', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0.0' );
    // 引入jQuery（WordPress已内置）和自定义JS
    wp_enqueue_script( 'my-custom-js', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0.0', true ); // true表示在底部加载
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Vytvoření vlastních šablon a šablon stránek

WordPress vám umožňuje vytvořit jedinečný vzhled pro konkrétní stránky nebo články, a to především prostřednictvím vlastních šablon a šablon stránek.

Vlastní šablony typů článků a systémů klasifikace

Pokud jste pomocí kódu nebo pluginů registrovali vlastní typ článku (např. “Produkt”) nebo vlastní kategorii (např. “Kategorie produktů”), platí stejná struktura šablon v WordPressu. Například můžete vytvořit…single-product.phpChceme zvlášť ovládat zobrazení jednotlivých stránek typu “Produkt” – takže vytvoříme tuto funkci.archive-product.phpPro ovládání stránky se seznamem produktů je nutné vytvořit…taxonomy-product-category.phpUmožňuje řízení stránek určených k archivaci produktů konkrétních kategorií. To poskytuje velkou flexibilitu při vytváření složitých webových stránek zaměřených na obsah, jako jsou portfolio nebo e-shopy.

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.
Logo InterServeru přístupová stránka

Podmínkové značky a vlastní šablony stránek

Podmínkové značky (jako např.)is_front_page()、is_page()、is_single()To vám umožňuje v jednom šablonovém souboru vypisovat různý obsah v závislosti na různých podmínkách. Jevším ještě výkonnějším způsobem však je vytvoření vlastních šablon stránek.

Můžete v adresáři s tematikou vytvořit PHP soubor a do začátku tohoto souboru přidat specifický blok komentářů, který ho označí jako šablonu stránky. Poté v administraci WordPressu můžete tuto šablonu vybrat pro konkrétní stránku.

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽度页面模板
 */
get_header(); ?>
<div class="full-width-content">
    <?php
    while ( have_posts() ) : the_post();
        the_content();
    endwhile;
    ?>
</div>
<?php get_footer(); ?>

Kromě toho, od verze WordPress 5.0 se editor Gutenberg stává součástí jádra systému. Můžete vytvářet šablony bloků (block templates), pomocí kterých lze stránky formátovat a organizovat obsah jednodušším způsobem.block-template-canvas.php) nebo využíttheme.jsonSoubory umožňují globální definování stylů, palet barev a blokových struktur tematických nastavení, čímž je dosaženo modernějšího a vizuálně přívětivějšího způsobu vytváření tematických designů.

Závěr

Vývoj WordPress tématu od nuly je systématický proces, který vyžaduje, aby vývojáři ovládali nejen PHP, HTML, CSS a JavaScript, ale také měli hluboké pochopení základních konceptů WordPressu, jako jsou struktura šablon, hlavní cyklus, háčky a akce, šablonské značky atd. Začíná se vytvořením standardní struktury adresářů a postupně se budují hlavičkové, závěrečné a klíčové šablony. Při tom se využívají…functions.phpPro zlepšení funkcionalit a správné načítání zdrojových souborů se nakonec pomocí vlastních šablon a podmínkové logiky dosáhne složitého uspořádání stránek. Dodržováním tohoto postupu budete schopni vytvořit vlastní téma, které plně odpovídá designovým požadavkům, má vynikající výkon a je snadno udržovatelné, čímž získáte maximální volnost a kontrolu ve světě WordPressu.

Časté dotazy

Musí se vývoj témat vždy začínat od nuly?

Nemusí to být nutné. Pro začátečníky nebo vývojáře, kteří chtějí rychle začít, je skvělou volbou začít s existujícím základním tématem (např. Underscores, _s) nebo nadřízeným tématem (jako je Genesis, Astra). Ty již obsahují standardní strukturu souborů a základní kód, na kterém můžete dále pracovat a přizpůsobovat, což je mnohem efektivnější než začínat úplně od nuly.

Může být soubor style.css zcela prázdný?

Není to možné. Ačkoli může být styl prázdný, blok s poznámkami o tématu na začátku souboru musí existovat a být správně formátován – jinak WordPress nebude schopen vaše téma rozpoznat. Tento blok obsahuje informace, které se zobrazují u vašeho tématu v seznamu v administraci WordPressu, jako je název, autor, popis atd.

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

Potřebujete použít funkce internacionalizace v WordPressu (např.__()、_e()Použijte závorky (`}`) k obalení všech textových řetězců, které je třeba přeložit. Poté…style.css和functions.phpSprávně nastavte v ČíněText DomainA použijte nástroje jako Poedit k vytvoření..potŠablony a odpovídající soubory….po和.moPřeklad souborů je nezbytnou vlastností pro profesionální aplikace v daném oboru.

Proč se moje vlastní šablona nezobrazuje v atributech zadní stránky?

Nejprve si prosím ověřte, zda je váš soubor s vlastním šablonovým formulářem umístěn v kořenovém adresáři tématu. Také je důležité, aby formát poznámkového bloku na začátku souboru byl správný, zejména řádek “Template Name:”. Chyby v názvu souboru, cestě k souboru nebo formátu poznámek mohou zabránit WordPressu v rozpoznání této šablony.

Jak lze publikovat nebo sdílet dokončené téma pro použití ostatními?

Nejstandardnější způsob je sbalit vaši tematickou složku do souboru typu ZIP. Uživatelé mohou tento soubor nahrát a nainstalovat přímo v administraci WordPressu v sekci “Vzhled” -> “Témata” -> “Přidat nové téma” -> “Nahrát téma”. Pokud chcete své téma zveřejnit do oficiálního repozitáře temat WordPressu, musíte dodržovat přísnější kódové standardy a postupy přezkumu, včetně bezpečnosti, kvality kódu a podpory internacionalizace.

Jaký je další krok? Co bych měl udělat dál?

Pokud právě vytváříte nebo optimalizujete webové stránky pomocí WordPressu, doporučujeme vám pokračovat ve čtení o optimalizaci výkonu, konfiguraci pluginů a přizpůsobování témat.

Další čtení a praktické znalosti

Následující obsah souvisí s tématem tohoto článku a je vhodný k dalšímu prostudování. Obvykle je lepší začít čtením článku, který je nejblíže vašemu aktuálnímu problému, a poté postupně přecházet k souvisejícím tématům.

Štítky: