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

Úvodní průvodce vývojem WordPress temat: Postavte si své první téma od nuly

Čtení za 3 minuty.
2026-03-11
2026-06-05
2,512
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.

Pokud chcete své webové stránky na WordPressu hluboce přizpůsobit, je nezbytné ovládnout vývoj temat (témů) pro WordPress. Na rozdíl od použití hotových temat vám vlastní vývoj umožňuje plně ovládat design, funkce a uživatelské prostředí webu. Tento článek vás provede od základů a pomůže vám pochopit základní strukturu temat pro WordPress a postupně vytvořit své vlastní, kompletně funkční základní téma.

Porozumění základní struktuře témat WordPress

Jedno z nejjednodušších témat pro WordPress se skládá ze souborů, které dodržují určitá pravidla pojmenovávání a strukturu. Právě tyto soubory společně určují vzhled webové stránky a některé její funkce.

Analýza základních, nezbytných souborů

Funkční základní téma vyžaduje alespoň dvě soubory:style.css和index.php。style.cssNejde jen o soubory se styly (CSS), ale také o blok komentářů umístěný na jejich začátku – ten představuje vlastně “občanský průkaz” této tématiky. V něm je uvedeno jméno tématu, autor, popis a další metadata. Právě na základě těchto informací WordPress rozpoznává vaše téma v seznamu témat v administraci.index.phpJde o hlavní šablonový soubor tématu, který je zodpovědný za zobrazení obsahu hlavních stránek webového stránek. WordPress nejprve hledá konkrétnější šablonové soubory; pokud takové neexistují, použije tento hlavní šablonový soubor.index.phpJako finální náhradní šablona.

Doporučujeme k přečtení. Nezbytné pro vytvoření profesionální webové stránky: Kompletní průvodce vývojem a personalizací temát pro WordPress。

Princip fungování hierarchie šablon

Porozumění struktuře šablon je klíčem k efektivnímu vývoji. Když uživatel navštíví konkrétní stránku – např. blogový článek nebo katalog – WordPress bude v adresáři s tematikou hledat odpovídající šablony podle předem určeného pořadí priorit. Toto pořadí sahá od konkrétních šablon k obecnějším. Například u článku s ID 123 bude WordPress postupně hledat…single-post-123.php、single-post.php、single.phpPoslední, který se použijeindex.phpTento mechanismus umožňuje vývojářům vytvářet vysoce přizpůsobené rozložení (layouty) pro různé typy obsahu.

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

Začněte vytvářet své první téma.

Následně budeme v lokálním prostředí nebo v testovacím prostředí začínat s budováním tématu od nejzákladnější struktury. Ujistěte se, že máte k dispozici funkční prostředí pro instalaci WordPress.

inicializace složky s tematikou a souborů se šablonami

Nejprve, ve složce s instalací WordPressu:wp-content/themesV této složce vytvořte novou složku a pojmenujte ji například „NováSložka“.my-first-themeV této složce vytvořte…style.cssSoubor a do jeho začátku napište následující poznámky:

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

In this piece of code…Text DomainSlouží k internacionalizaci témat (překladu). Po uložení souboru byste měli v administraci WordPressu, v sekci “Vzhled” -> “Témata”, vidět prázdné téma s názvem “Moje první téma”.

Vytvoření základního šablónového souboru indexu

Nyní vytvoříme hlavní soubor pro dané téma.index.phpZačneme s nejzákladnějšími strukturami HTML a základními funkcemi WordPressu:

Doporučujeme k přečtení. Jak vybrat a hloubkově přizpůsobit své první téma pro WordPress: Průvodce pro vývojáře。

<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
    <?php wp_body_open(); ?>

<header>
        <h1><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>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 文章内容循环
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无内容。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>

<?php wp_footer(); ?>
</body>
</html>

Tento soubor zavádí několik klíčových částí:wp_head()和wp_footer()Jedná se o klíčový „hook“, který umožňuje pluginům a temám vložit kód právě zde.body_class()Přidejte kontextové CSS třídy k označkám (tagům).the_post()和the_content()Šablony a značky slouží k výstupu dynamického obsahu. Po aktivaci tohoto tématu bude váš web vypadat velmi základně, ale bude funkční.

Pokročilý vývoj: Vylepšení funkcí a struktury témat

Po spuštění základního tématu lze jeho profesionalitu, udržovatelnost a uživatelský zážitek vylepšit přidáním dalších šablonových souborů a funkcí.

Zavedení struktury oddělení šablonových komponent

Oddělení hlavičky (Header) a patičky (Footer) na samostatné komponenty je dobrou praxí. Vytvořeníheader.phpSoubor, bude…index.php中到Část, která končí, by měla být vložena. Podobně by mělo být vytvořeno…footer.phpUchovávatA následující obsah. Poté…index.phpV čínštině se používáget_header()和get_footer()Funkce nahrazuje původní blok kódu. Díky tomu budou všechny ostatní šablony (např.)single.php, page.phpVšechny tyto stránky mohou využívat stejný nadpis (header) a podpis (footer).

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

Vytvořte a používejte soubor functions.php.

functions.phpJde o “funkční centrum” vašeho projektu. Zde můžete přidávat vlastní funkce, registrovat menu a boční panely, stejně jako bezpečně načítat skripty a styly. Například je doporučeno…wp_enqueue_scriptsHooky mechanism for loading resources:

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 加载自定义JavaScript文件
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Přidání navigačního menu a podpory pro zobrazení speciálních obrázků

在functions.phpZaregistrujte pozici pro téma, aby uživatelé mohli navigaci spravovat v záložce “Vzhled” -> “Menu” v administraci:

function my_first_theme_setup() {
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5的搜索表单、评论表单等标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

A poté,header.php的V rámci dané oblasti se používá.wp_nav_menu()Funkce slouží k zobrazení menu. Během cyklu článků lze tuto funkci použít.the_post_thumbnail()Zobrazte speciální obrázky.

Doporučujeme k přečtení. Odhalení tajemství vývoje doplňků: Vytvořte si svůj první rozšíření od nuly。

Debugging and Best Practices

Během vývojového procesu je klíčem k zajištění kvality témat dodržování správných metod a provedení důkladných testů.

Aktivujte a využívejte režim ladění.

V vývojovém prostředí se důrazně doporučuje…wp-config.phpV souboru je aktivován režim ladění. To vám pomůže rychle lokalizovat chyby v PHP, varování a volání zastaralých funkcí.

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 
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误日志写入 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误（日志文件更安全）

Provedení komplexních testů a revizí kódu

Před uvedením tématu na trh proveďte testy kompatibility mezi různými prohlížeči (Chrome, Firefox, Safari, Edge) a různými zařízeními (telefony, tablety, počítače). Ujistěte se, že všechny klíčové funkce, jako je např. přetáčení stránek (…) fungují správně.the_posts_pagination()Comment templatescomments_template()Všechny funkce včetně vyhledávání fungují správně. Dodržujte oficiální kódovací standardy WordPressu, abyste zajistili čitelnost a udržovatelnost kódu. Zvažte použití mechanismu podtemat (subthemes) pro další přizpůsobení a aktualizace tématu, místo přímého úpravování souborů mateřského tématu (parent theme).

Závěr

Postupem podle tohoto článku jste začali z prázdné složky a postupně vytvořili kompletní WordPress téma, které obsahuje deklarace stylů, základní šablony, funkční funkce a standardizovanou strukturu. Naučili jste se koncepty hierarchie šablon, jak správně zavádět zdroje, jak přidávat funkce podpory tématu a základní metody ladění během vývoje. To vám poskytlo solidní základ pro další zkoumání složitějšího vývoje témat – např. vytváření vlastních šablon typů článků, integraci stylů Gutenberg bloků nebo použití API pro přizpůsobení témat. Pamatujte, že vývoj témat je iterativní proces – začněte jednoduše a postupně přidávejte funkce; to je nejefektivnější způsob učení.

Časté dotazy

Je nutné být zdatný v PHP, abyste vytvořili temu pro WordPress?

Není nutné mít dokonalé znalosti, ale je nutné mít solidní základy v PHP. Musíte rozumět proměnným, funkcím, cyklům, podmínkovým výrazům a způsobům načítání souborů. Sám WordPress poskytuje velké množství šablonovacích značek (např.the_title()) a funkce (např.get_header()Tyto funkce zahrnují složitou logiku a vy potřebujete pouze naučit se, jak je volat. Jak se vývoj pokračuje, postupně se seznámíte s pokročilejšími koncepty PHP.

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

Nejčastější příčinou je to, že se šablona stylů nenahrála správně. Ujistěte se, že jste ji stáhli a nainstalovali správným způsobem.functions.phpNěco v čínštině (zjednodušené)wp_enqueue_style()Funkce „queuing“ načetla soubor se styly a tato funkce byla správně připojena („mounted“).wp_enqueue_scriptsZa prvé, zkontrolujte, zda byl soubor CSS úspěšně načten. K tomu použijte nástroje pro vývojáře webových stránek ve vašem prohlížeči – konkrétně kartu “Síť” (Network). Za druhé, podívejte se také na kartu “Prvky” (Elements) a zjistěte, zda byly CSS pravidla v této kartě překryta pravidly s vyšší prioritou.

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

Jedním z jednoduchých principů je: Funkce, které jsou úzce spojeny s vizuálním vzhledem a uspořádáním stránek, by měly být umístěny do tématu (theme), zatímco funkce související s datovou logikou nebo nezávislé funkce by měly být umístěny do doplňků (plugins). Například vlastní typy článků a klasifikace, které slouží pouze k uspořádání obsahu na konkrétních webových stránkách, mohou být součástí tématu; avšak funkce, které jsou univerzální (jako je “kontaktní formulář”), jsou vhodnější pro implementaci pomocí doplňků. Tím je zajištěno, že i po změně tématu tyto funkce zůstanou dostupné.

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

Potřebujete využít funkce pro internacionalizaci (i18n) v WordPressu. Ve vašem kódu by měly být všechny texty určené pro uživatele zabaleny do příslušných funkcí pro překlad.__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )Zde‘my-first-theme’Musí být v souladu s…style.cssNěco v čínštině (zjednodušené)Text DomainSouhlasné. Poté můžete použít nástroje, jako je Poedit, k vytvoření požadovaných souborů..potPřevodní šablonový soubor určený k vytvoření pro překladatele..po和.moJazykové soubory.

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: