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

Úvodní průvodce vývojem temát pro WordPress: Vytvořte si vlastní webovou stránku od nuly

Čtení za 2 minuty.
2026-03-18
2026-06-03
2,645
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.

Proč si vybrat vývoj vlastního WordPress tématu?

V ekosystému WordPress je sice používání hotových témat pohodlné a rychlé, ale ovládnutí dovedností vývoje témat vám může přinést neporovnatelné výhody. Vlastní vývoj znamená, že máte plnou kontrolu nad vzhledem, výkonem a funkcemi webové stránky a můžete vytvořit design, který stoprocentně odpovídá požadavkům vašeho podnikání, bez omezení vyplývajících z použití třetích stran a zbytečného kódu. Vytvářením přehledných a efektivních témat můžete výrazně zvýšit rychlost načítání webové stránky a zlepšit její výkon v vyhledávačích. Kromě toho hluboké pochopení principů fungování témat vám umožní je flexibilněji přizpůsobovat a udržovat; v případě problémů tak můžete rychle lokalizovat a vyřešit jejich příčiny. To jsou základní dovednosti potřebné k tomu, abyste se stali pokročilými vývojáři WordPress nebo odborníky na výstavbu webových stránek.

Z technického hlediska se standardní WordPress téma skládá z sady šablonových souborů, stylových souborů a skriptových souborů, které dodržují určitou strukturu adresářů a pravidla pojmenovávání. Zvládnutí těchto základních znalostí je prvním krokem na cestě k vývoji vlastních témat.

Základní adresář a klíčové soubory pro vytvoření tématu

Jedno základní WordPress téma potřebuje alespoň dvě klíčové soubory. Nejprve musíte vytvořit složku se stejným názvem jako vaše téma, například… my-first-themeVšechny soubory budou uloženy v této složce.

Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Vytvoření vlastní webové stránky od nuly。

Deklarace informací o tématu

V složce s tématy musíte vytvořit soubor s názvem style.css Soubor, který obsahuje šablony. Tento soubor není pouze souborem se šablonami, ale také blokem poznámek v hlavičce souboru, který slouží jako “občanský průkaz” tématu – slouží k deklaraci metadat tohoto tématu pro systém WordPress. Typická deklarace vypadá následovně:

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 
/*
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
*/

Mezi nimi,Text Domain Používá se pro mezinárodní překlady a musí být v souladu s názvem složky obsahující příslušné materiály.

Hlavní šablonový soubor obsahu webové stránky

Dalším nezbytným souborem je index.phpToto je výchozí hlavní šablona pro dané téma. Pokud WordPress nenajde konkrétnější šablonový soubor, použije právě tuto šablonu. I když tento soubor zpočátku obsahuje pouze nejjednodušší HTML strukturu, musí být přítomen.

<!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>
        <h1>Název mé webové stránky</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>Obsah patičky webové stránky</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Tento základní šablonový soubor obsahuje několik klíčových funkcí, které jsou nezbytné pro fungování WordPress témat. wp_head()、wp_body_open() 和 wp_footer()Zajišťují, že skripty a styly potřebné pro pluginy a základní funkce WordPressu jsou správně načteny.

Prohloubení tématu: Využití úrovní šablon a funkcí

Kompletní téma je daleko víc než jen… index.phpSystém úrovní šablon v WordPressu vám umožňuje vytvářet speciální šablonové soubory pro různé typy stránek, což poskytuje ještě přesnější kontrolu nad jejich vzhledem a funkcemi.

Doporučujeme k přečtení. Průvodce vývojem a personalizací WordPress temat: Od základů po pokročilé praktiky。

Vytvoření šablon pro záhlaví a patičku stránky

Abychom dodrželi zásadu DRY (Don’t Repeat Yourself – Nepoužívejte stejný kód vícekrát), měli byste kód pro záhlaví a patičku stránek oddělit do samostatných souborů. Vytvořte soubory s názvy… header.php Soubor slouží k uložení… <head> Kód pro regionální a horní navigaci na webových stránkách. V souladu s tím vytvořte také potřebné prvky navigace. footer.php Slouží k uložení informací o podkladové části stránky („footer“). Poté se tyto informace použijí v hlavním šablonovém souboru („main template“). get_header() 和 get_footer() Funkce slouží k jejich načtení (zavádění).

// 在 index.php 顶部引入页眉
<?php get_header(); ?>

<!-- 页面主要内容 -->

// 在 index.php 底部引入页脚
<?php get_footer(); ?>

Vytvořte speciální šablony pro články a stránky.

Při přístupu k jednotlivému článku WordPress nejprve hledá a volá funkce potřebné k jeho zobrazení. single.php Šablony. Stejně tak pro statické stránky bude hledat odpovídající šablony. page.phpMůžete vytvořit tyto soubory pro přizpůsobení rozvrhu článků a stránek. V těchto šablonách můžete využívat výkonný hlavní cyklus WordPressu k zobrazení obsahu.

// 在 single.php 中
while ( have_posts() ) :
    the_post();
    the_title( '<h1 class="entry-title">', '</h1>' );
    the_content();
endwhile;

Funkční soubor pro vylepšení funkcí tématu

functions.php Soubor představuje “centrum řízení” vašeho tématu. Není to samostatná šablona, ale PHP soubor, který se automaticky načte při inicializaci tématu. Slouží k přidávání funkcí, registraci menu a bočních panelů, stejně jako k načítání stylů a skriptů.

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

Například, pokud chcete tematu přidat podporu pro navigační menu, musíte… functions.php Použijte to v čínštině. register_nav_menus() Funkce.

function my_theme_setup() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '页脚菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Poté, ve šablonovém souboru (např. header.phpV tomto případě se používá wp_nav_menu() Zobrazí menu.

Přidejte styl a interakci ke svému tématu.

Krásný a dobře interagující design tématu není možný bez CSS a JavaScript. Klíčem je správné začlenění těchto technologií do samotného tématu.

Doporučujeme k přečtení. Co je to vývoj tem (témů) pro WordPress?。

Správné zavedení šablony stylů

Ačkoliv style.css Soubor již existuje, ale WordPress ho automaticky nenačte jako šablonu do front-endu. Musíte to provést ručně. functions.php Použijte to v čínštině. wp_enqueue_style() Funkce slouží k registraci a zařazování do fronty.

function my_theme_scripts() {
    // 为主题主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义样式
    wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Bezpečné zavádění JavaScriptu

Pro soubory v JavaScriptu by se mělo používat totéž. wp_enqueue_script() Funkce slouží k načtení potřebných závislostí. Tím je zajištěno správné zpracování těchto závislostí a předchází opakovanému načítání skriptů.

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 
function my_theme_scripts() {
    // ... 样式表代码 ...
    // 引入一个自定义脚本，依赖 jQuery
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Poslední parametr true Znamená to umístit skript na spodní část stránky. <body> Načítání probíhá před ukončením značky, což pomáhá zlepšit výkonnost načítání stránek.

Závěr

Díky této příručce jste prošli základními kroky vývoje temát pro WordPress: od pochopení důvodů vývoje až po vytvoření temat, která obsahují… style.css 和 index.php Základní strukturální schéma tématu; začněte u pochopení systému úrovní šablon a poté vytvořte… header.php、footer.php、single.php Od speciálních šablon až po využití výkonných nástrojů… functions.php Tyto soubory slouží k registraci funkcí, menu a stylů skriptů. Pamatujte, že vývoj temat (témů) je iterativní proces – začněte s nejjednodušší strukturou a postupně přidávejte složitost a funkce. To je nejefektivnější způsob, jak se naučit. Neustále praktikujte, referujte se na oficiální dokumentace a analyzujte kód vydařených temat; vaše vývojové dovednosti se tak rychle zlepší.

Časté dotazy

K vývoji témat pro WordPress jsou potřebné následující předpokládané znalosti:

Potřebujete mít základní znalosti HTML a CSS, které jsou základem pro vytváření struktury a vzhledu webových stránek. Zároveň je velmi důležité mít základní povědomí o PHP, protože jádro WordPressu a jeho systém šablon jsou napsány v PHP. Počáteční znalosti JavaScriptu vám také pomohou při přidávání interaktivních funkcí.

Jaký je rozdíl mezi souborem functions.php v hlavní složce projektu a pluginem?

functions.php Soubory jsou součástí tématu a jejich funkce jsou úzce spojeny s vzhledem a výkonem daného tématu. Při změně tématu tyto funkce obvykle přestanou fungovat. Naopak pluginy slouží k přidání funkcí, které jsou nezávislé na konkrétním tématu (např. kontaktní formuláře, optimalizace pro vyhledávače – SEO). Tyto funkce budou dostupné vždy, pokud jsou pluginy aktivní, bez ohledu na to, které téma je používáno. Dobrým pravidlem je: Pokud je funkce přímo spojena s vizuálním zpracováním stránek, umístěte ji do samotného tématu; pokud jde o obecné funkce webové stránky, zvažte její implementaci pomocí pluginů.

Jak zajistit, aby můj téma podporovalo vícejazyčné překlady?

Pro přípravu vašeho tématu na internacionalizaci (i18n) v WordPressu musíte v kódu používat funkce určené k správě textových zpráv určených pro uživatele. Všechny textové elementy, které jsou viditelné pro uživatele, by měly být nahrazeny proměnnými, které lze nastavit v rámci systému internacionalizace. Konkrétně by __( ‘文本’, ‘my-first-theme’ ) 或 _e( ‘文本’, ‘my-first-theme’ ) Zabalit funkci do jiné funkce, přičemž… ’my-first-theme’ Je to váš textový domén (Text Domain). A poté… style.css Ve zdrojovém kódu je správně deklarována textová doména a pro vytvoření požadovaných souborů se používá nástroj jako je Poedit. .pot Šablony a odpovídající soubory… .po 和 .mo Překládání dokumentů.

Jaké jsou doporučené způsoby pro testování témat lokálně?

Důrazně doporučujeme vyvíjet tematika v lokálním vývojovém prostředí. Můžete použít desktopové nástroje jako Local by Flywheel nebo DevKinsta, nebo si sami nastavit lokální prostředí PHP a MySQL pomocí nástrojů jako MAMP nebo XAMPP. Lokální vývoj eliminuje síťové zpoždění online serverů, umožňuje rychlejší ladění kódu a nemá vliv na provoz webových stránek online.

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: