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

Podrobný přehled vývoje temát pro WordPress: Kompletní průvodce od základů až po pokročilé znalosti

Čtení za 3 minuty.
2026-03-14
2026-06-04
2,026
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.

Základy vývoje témat WordPress a nastavení prostředí

Témata WordPressu jsou klíčová pro ovládání vzhledu a funkcí webové stránky. Kompletní téma vyžaduje alespoň dvě soubory:index.php和style.css。style.cssNejenže se jedná o šablony stylů (style sheets), ale také blok komentářů umístěný na jejich vrcholu definuje metadata tématu – jako je název tématu, autor, popis a verze. To je nezbytné pro to, aby bylo téma rozpoznáno a spravováno systémem WordPress.

Vytvořte základní soubor se šablonami stylů.

Vytvořte novou složku pro témata, například…my-first-themeVytvořit uvnitř toho…style.cssSoubor a zadejte následující hlavičkové informace:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的入门主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Tento komentář se týká “identifikačního dokladu” daného tématu. Poté můžete do tohoto souboru přidat běžná CSS pravidla pro navrhování vzhledu webové stránky. Textové pole (Text Domain) slouží k internacionalizaci a mělo by odpovídat názvu složky s tématem.

Doporučujeme k přečtení. Vytvoření responsiveho WordPress tématu: Kompletní průvodce vývojem od nuly。

Dále vytvořteindex.phpJako výchozí šablonový soubor může být v počáteční fázi velmi jednoduchý – obsahuje pouze základní HTML strukturu a volání funkcí WordPressu. Například:

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 
<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h1><p><strong> Řekněte mi něco o sobě.</strong></p></h1>
        <div><?php the_content(); ?></div>
    
</body>
</html>

wp_head()和wp_footer()Jedná se o dva zásadně důležité „akční háčky“ (action hooks), které umožňují pluginům a temám (themes)…<head>和\nVložit kód před značku.body_class()Funkce vypíše řadu CSS tříd, které usnadňují detailní kontrolu stylů podle typu stránky.

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

Abychom se vyhnuli testování na online serverech, doporučujeme výrazně používat lokální vývojové prostředí. Můžete rychle nastavit lokální server s PHP a MySQL pomocí nástrojů jako XAMPP, Local by Flywheel nebo Docker. Umístěte složku s vaším tématem do adresáře instalace WordPressu na vašem počítači.wp-content/themes/Stáhněte si soubor, poté se přihlaste do administrace a vyberte “Vzhled” -> “Témata”, kde můžete dané téma aktivovat.

Kerní šablonové soubory a hierarchická struktura

WordPress využívá systém hierarchie šablon (Template Hierarchy), který určuje, který soubor šablony se má použít pro konkrétní typ stránek. Porozumění této hierarchii je klíčové pro vývoj temát (tém).

Nejzákladnějším souborem šablony jeindex.phpJe to výchozí záložní šablona pro všechny stránky. Když WordPress nenajde konkrétnější šablonu, použije právě tuto. Pro přesnější kontrolu vzhledu jednotlivých stránek je třeba vytvořit konkrétnější šablony.

Doporučujeme k přečtení. Od nuly: Postupně vás naučíme, jak vytvořit profesionální téma pro WordPress。

Vytvořit šablonu pro jednotlivý článek

Pokud chcete přizpůsobit zobrazení konkrétního článku, můžete vytvořit soubor s názvem…single.phpSoubor „“. Když návštěvník klikne na čtení konkrétního článku, WordPress použije tento šablonu jako prioritu. V tomto souboru můžete provádět různé úpravy a přizpůsobení.the_post()Funkce slouží k nastavení globálních hodnot.$postProměnné, a poté použijte něco jako…the_title()和the_content()Používají se šablony a značky k výstupu obsahu.

Vytvořit…page.phpSoubory mohou být speciálně využity k ovládání zobrazení jednotlivých stránek. Pro domovskou stránku můžete vytvořit…front-page.php(Když je v pozadí nastaveno, že “Hlavní strana” zobrazuje “jednu statickou stránku”)home.php(Když je na hlavní stránce zobrazen seznam nejnovějších článků), stránky s archivem (jako jsou kategorie, tagy, seznam článků od autorů) jsou obvykle…archive.phpMůžete také vytvořit konkrétnější řešení, například:category.php或tag.php。

Porozumění procesu hierarchie šablon

Proces práce s úrovněmi šablon funguje podobně jako rozhodovací strom. Například při navštěvě třídní stránky (stránky určené k rozdělování obsahu) WordPress prohledává šablony v určitém pořadí:category-{slug}.php -> category-{id}.php -> category.php -> archive.php -> index.phpVývojáři mohou pomocí vytváření těchto souborů snadno dosáhnout diferencovaného designu různých typů stránek, aniž by museli psát složitou logiku podmínek do jediného souboru.

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

Používání funkcí a hooků v WordPressu

WordPress poskytuje tisíce předdefinovaných funkcí a hooků, které slouží jako most mezi tematikami a jádrem systému a umožňují rozšiřování funkcionalit.

Zavést soubor s tematickými zdroji

Správný způsob zavedení je prostřednictvím hooků. Vytvořte je v složce se svým tematem.functions.phpTento soubor není šablonovým souborem, ale konfiguračním souborem, který se automaticky načte při aktivaci tématu. Zde můžete používat…wp_enqueue_style()和wp_enqueue_script()Funkce slouží k registraci a řazení stylových šablon a skriptů. Například:

function my_theme_enqueue_assets() {
    // 引入主题主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 引入自定义JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

add_action()Jedná se o funkci, která slouží k převodu vaší funkce (např.)my_theme_enqueue_assets“Připojit” k názvu…wp_enqueue_scriptsNa konkrétním akčním háčku. Když WordPress dosáhne tohoto háčku, automaticky zavolá všechny připojené funkce.

Doporučujeme k přečtení. Kompletní průvodce výstavbou webových stránek pro rok 2026: Výběr technologií a praktické pokyny od nuly až po jejich spuštění。

Vytvoření vlastní funkční oblasti

Témata často vyžadují některé konfigurovatelné oblasti, jako jsou boční panely nebo panely s nástroji v podní části stránky. K jejich vytvoření je potřeba dvoukrokový postup: Nejprve…functions.phpPoužijte to v čínštině.register_sidebar()Funkce registruje boční panel. Poté, ve šablonových souborech (např.)…sidebar.phpPoužívá se v…)dynamic_sidebar()Funkce slouží k jejímu volání.

// 在functions.php中注册侧边栏
function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; '主侧边栏',
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; '在这里添加小工具。',
        '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>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Poté můžete v záložce “Vzhled” -> “Příslušenství” v administraci přetáhnout různé příslušenství do “Hlavního postranního panelu” a jejich obsah se automaticky zobrazí v šabloně, kde jsou použity.dynamic_sidebar( 'sidebar-1' )Umístění…

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

Implementovat responsivní design a personalizaci témat

Moderní webové stránky musí dobře vypadat na různých typech zařízení. Dosažení responzivního designu se především opírá o CSS media queries.style.cssV tomto dokumentu můžete vytvářet pravidla stylizace určená pro různé šířky obrazovek.

Přidání funkce pro vlastní nastavení tématu

WordPress Customizer umožňuje uživatelům v reálném čase předvídat a upravovat určité nastavení témat.functions.phpMůžete přidat vlastní možnosti pro nastavení tématu. K tomu je potřeba použít…WP_Customize_ManagerAPI poskytované třídou. Například přidání možnosti výběru barvy titulku stránky:

function my_theme_customize_register( $wp_customize ) {
    // 添加一个设置
    $wp_customize->add_setting( 'header_textcolor', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

// 添加一个控件来控制这个设置
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'    => '页眉文字颜色',
        'section'  => 'colors',
        'settings' => 'header_textcolor',
    ) ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );

A poté,header.phpBuď v daném souboru, nebo v souvisejících šablonách potřebujete získat tuto hodnotu a vynést ji ve formátu CSS.

<style type="text/css">
    .site-title a { color: <?php echo esc_attr( get_theme_mod( 'header_textcolor', '#000000' ) ); ?>; }
</style>

get_theme_mod()Funkce slouží k získávání hodnot nastavených v přizpůsobovacích nástrojích z databáze.

Ujistěte se, že produkt je kompatibilní s různými prohlížeči a zařízeními.

Během vývoje by měly být testy průběžně prováděny v reálných prohlížečích a zařízeních (nebo v simulátorech s použitím nástrojů pro vývojáře). Použití CSS Flexboxu nebo Grid layoutu usnadňuje vytváření flexibilních komponent. Mějte na paměti výkon a přístupnost webové stránky – ujistěte se, že velikosti obrázků jsou vhodné a interaktivní prvky (jako jsou tlačítka) mají dostatečnou velikost na dotykových zařízeních.

Závěr

Vývoj tem pro WordPress začíná pochopením základní struktury souborů, postupným zvládáním hierarchie šablon, klíčových funkcí a „hooků“ a nakonec vede k možnosti vytvářet pokročilé personalizace a responzivní design.style.css、index.phpDíky klíčovým souborům mohou vývojáři vytvořit základní strukturu webové stránky. Dobré pochopení hierarchie šablon umožňuje vytvářet přesné zobrazení obsahu pro různé typy obsahu. A pokud je návyk používat tyto šablony správně…functions.phpFunkce a „hooky“ obsažené v tématu hrají klíčovou roli při rozšiřování funkcí tématu a při propojení backendu s frontendem. Nakonec, v kombinaci s moderními technologiemi CSS a prostřednictvím přizpůsobovacích nástrojů („customizers“), lze vytvořit profesionální a flexibilní moderní WordPress téma, které nabízí uživatelsky přívětivé možnosti konfigurace.

Časté dotazy

Které soubory musí obsahovat nejzákladnější WordPress téma?
Nejzákladnější téma, které je rozpoznatelné systémem WordPress, musí obsahovat dvě soubory:index.php和style.cssMezi nimi jestyle.cssVrchní část vašeho tematického souboru musí obsahovat správně formátovaný blok komentářů, který slouží k deklaraci metadat tématu – jako je název tématu, autor atd. Bez těchto dvou souborů WordPress nebude schopen váš tematický design zobrazit a použít v seznamu temat v administraci.

Co je to hierarchie šablon v WordPressu?

Systém úrovní šablon (template hierarchy) v WordPressu slouží k určení toho, který soubor šablony bude použit pro danou stránku požadovanou uživatelem. Funkcionuje jako logický strom – WordPress začne hledat šablonu podle typu stránky (např. úvodní stránka, jednotlivý článek, stránka kategorie) od nejkonkrétnějšího souboru šablony. Pokud daná šablona není nalezena, bude hledání pokračovat směrem k obecnějším šablonám, až nakonec se vrátí k základní šabloně WordPressu.index.phpNapříklad u konkrétního článku bude WordPress postupně vyhledávat…single-{post-type}-{slug}.php、single-{post-type}.php、single.phpA nakonec...singular.php和index.php。

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

functions.phpSoubory jsou součástí konkrétního tématu a jejich funkce jsou úzce spojeny s aktivním tématem. Při změně tématu tyto funkce obvykle přestanou fungovat. Soubory se obvykle používají k přidání funkcí a vzhledových prvků specifických pro toto téma – např. umístění registračního formuláře, boční lišty, možnosti přizpůsobení tématu atd. Naopak funkce poskytované pluginy jsou nezávislé na konkrétním tématu a jejich cílem je přidat webové stránce samostatné funkční moduly (např. kontaktní formuláře, funkce pro optimalizaci SEO), které zůstávají dostupné i po změně tématu. Pokud je nějaká funkce potřeba ve všech tématech, je vhodnější ji implementovat jako plugin.

Jak správně vložit soubory JavaScript a CSS do tématu?

Absolutně nepoužívejte žádné prvky přímo v souborech šablon.<link>或<script>Zavádění tagů. Správný způsob je prostřednictvím…functions.phpDokumenty, použijtewp_enqueue_style()和wp_enqueue_script()Funkce a jejich připojení kwp_enqueue_scriptsTato akce je napojena na určité „háčky“ (hooks) v systému WordPress. Výhody tohoto přístupu jsou následující: WordPress může spravovat závislosti mezi různými komponentami, předcházet opakovanému načítání obsahu, a podle potřeby řídit pořadí a umístění načítaných elementů (např. umístění skriptů do patice stránky). Zároveň to je podmínkou pro kompatibilitu pluginů s vaším tématem (theme).

Proč po provedení změn v tématu nevidím žádné změny na stránce?

Obvykle je to způsobeno mezipamětí prohlížeče nebo mezipamětí objektů v WordPressu. Nejprve zkuste provést nucené obnovení prohlížeče (Ctrl+F5 nebo Cmd+Shift+R). Pokud problém přetrvává, zkontrolujte, zda provádíte vývoj lokálně, a ujistěte se, že soubory byly uloženy do správného adresáře. U souborů CSS/JS…wp_enqueue_style/scriptV funkci přidáme parametr verze k URL souboru (např.)time()Je možné donutit prohlížeč, aby načetl nový soubor. Kromě toho, pokud server nebo WordPress používají nějaké pluginy pro ukládání do mezipaměti (cache), možná bude potřeba tyto cache data smazat.

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: