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

Kompletní návod k vývoji témat pro WordPress: analýza celého procesu od nuly až po nasazení.

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

Porozumění základní struktuře a klíčovým souborům tematického balíčku WordPress

WordPress téma je v podstatě soubor kolekce souborů v jazycích PHP, CSS, JavaScript a obrázků, které spolupracují na vytvoření vzhledu a uspořádání webové stránky. Každé téma musí dodržovat základní pravidla struktury souborů a adresářů WordPressu, což je podmínkou pro správné rozpoznání a fungování tématu. Klíčem při vytváření nového tématu je začít s nejzákladnějšími soubory.

Pro každé téma jsou nezbytné dva základní typy souborů:style.css和index.phpMezi nimi jestyle.cssTento soubor je velmi důležitý – nejenže obsahuje šablony stylů daného tématu, ale co je ještě důležitější, jeho záhlaví (header) obsahuje metadatové informace o tomto tématu, které lze považovat za jeho “občanský průkaz”. Když vidíte snímky obrazovky, název a popis tématu v sekci “Vzhled” > “Témata” v administraci WordPress, tyto informace pocházejí právě z poznámek v záhlaví tohoto CSS souboru.

Níže je příklad. style.css Kód záhlaví souboru:

Doporučujeme k přečtení. Vytvořte profesionální webové stránky: kompletní návod k vytvoření vlastního WordPressového tématu od nuly.。

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

Dalším klíčovým souborem je index.phpToto je výchozí šablonový soubor daného tématu a zároveň slouží jako “rezervní” soubor pro všechny šablony. Pokud WordPress v adresáři s tématy nenajde žádné konkrétnější šablony (např.single.php或page.php), který se automaticky vrátí k používání původní verze.index.phpAby se stránka zobrazila.

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

Hlavní systém úrovní šablon tématu

Rozhraní šablon v WordPressu je klíčovým konceptem při vývoji temat. Určuje pořadí, ve kterém WordPress hledá soubory šablon při zobrazování různých typů obsahu. Nejjednodušší…index.phpSoubor může obsahovat základní HTML strukturu a nějakou logiku cyklů. Například, jeden z nejjednodušších příkladů…index.phpMožná to vypadá následovně:

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1005>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>
        <div><?php the_content(); ?></div>
    
</body>
</html>

V tomto úryvku kódu…wp_head()和wp_footer()Jedná se o klíčové funkce typu „hook“, které umožňují jádru WordPressu, pluginům a dalším skriptům vložit potřebný obsah do vrchní a dolní části stránky – např. šablony stylů a skripty.

Nastavení funkce temat a vytvoření základních šablon

Funkčně dokonalé téma musí podporovat základní funkce WordPressu (jako jsou menu, miniatury, widgety) a musí obsahovat sadu specifických šablon, které umožní elegantní zpracování různých typů stránek.

Než začneme s vytvářením tématu, obvykle… functions.php V tomto souboru jsou provedena inicializační nastavení funkcí tématu. Tento soubor není pro použití tématu nutný, ale představuje “mozek”, který zlepšuje funkce daného tématu.functions.phpZde můžete použít…add_theme_support()Funkce slouží k deklaraci toho, které funkce dané téma podporuje.

Doporučujeme k přečtení. Získejte přehled o základních principech vývoje webových stránek: od základů až po profesionální technická řešení。

Například následující kód deklaruje, že daný téma podporuje speciální obrázky u článků, a zároveň registruje pozici pro navigační položku:

function my_theme_setup() {
    // 支持文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个名为“primary”的菜单位置
    register_nav_menus( array(
        'primary' => __('主导航菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_theme_setup');

Díky této nastavení budete moci tuto funkci používat v šablonách témat.the_post_thumbnail()Funkce slouží k zobrazení speciálních zkrácených obrázků a k jejich použití.wp_nav_menu()Funkce slouží k volání menu umístěného na pozici “primary”.

Vytvořte šablony pro domovskou stránku a stránku s detaily článku.

Když se návštěvník přihlásí na hlavní stránku vašeho webu, WordPress nejprve hledá…front-page.phpPokud neexistuje, použijte…home.phpA teprve nakonec se vrátí zpět…index.phpPro stránky jednotlivých článků WordPress preferuje hledání v určitých částech systému.single-post.phpTyto konkrétní šablony vám umožňují přizpůsobit rozložení stránek zcela odlišným způsobem podle jejich typu.

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, typický…header.phpSoubor může obsahovat identifikaci webové stránky a navigační menu:

<!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>
<header id="site-header">
    <h1><a href="/cs/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
    <nav id="primary-menu">
        'primary',
            'menu_class'     =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>
<main>

A poté,index.php或single.phpZde můžete použít…get_header()Funkce slouží k zahrnutí tohoto souboru do programu.

Správa šablon, skriptů a šablonových komponent

Vývoj moderních WordPress temat klade důraz na modularitu a opakované využití kódu. Správné načítání souborů CSS a JavaScript, stejně jako používání šablonových komponent, jsou nezbytnými dovednostmi pro vytváření udržovatelných a vysokokvalitních temat.

Doporučujeme k přečtení. Vytvořte WordPress téma od nuly: Podrobné vysvětlení nejlepších postupů pro vývoj moderních témat.。

WordPress důrazně doporučuje používat…functions.phpDokumenty, použijtewp_enqueue_style()和wp_enqueue_script()Funkce slouží k “registraci a zařazování” šablon stylů a skriptů do fronty. Tento přístup umožňuje efektivní správu závislostí mezi jednotlivými prvky, předchází konfliktům a umožňuje pluginům a podtemám přepisovat stávající nastavení.

Správné zavádění CSS a JavaScript

Následující úryvek kódu ukazuje, jak bezpečně zavést hlavní stylový soubor tématu a vlastní soubor JavaScript do tohoto tématu:

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() {
    // 引入主题的主样式表，依赖（空数组），版本号为主题版本
    wp_enqueue_style('my-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));

// 引入一个自定义脚本，依赖jQuery，在页脚加载
    wp_enqueue_script('my-theme-custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Všimněte si, že byl použit URI hlavního stylového souboru.get_stylesheet_uri()Funkce slouží k získávání dat, zatímco skripty tyto data využívají.get_template_directory_uri()Použijte tyto informace k vytvoření kompletní cesty. Posledním parametrem skriptu je…trueZnamená to, že skript je umístěn na určité místo.\nTo pomáhá zlepšit výkonnost načítání stránek před přidáním tagů.

Využitím šablonových komponent k dosažení modularity

Šablony a jejich komponenty jsou velmi účinným nástrojem pro organizaci kódu. Umožňují vám vyjmout obecné části stránek (jako je nadpis, podpis, boční lišta) do samostatných souborů a následně je používat opakovaně v různých šablonách. WordPress k tomu poskytuje vhodné nástroje a funkce.get_header()、get_footer()、get_sidebar()和get_template_part()Funkce.

To, co bylo zmíněno dříveheader.phpPo uložení kódu do samostatného souboru…single.phpŠablony mohou být velmi přehledné:

<?php get_header(); ?>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
    <header class="entry-header">
        &lt;?php the_title(&#039;<h1 class="entry-title">', '</h1>'); ?&gt;
        <div class="entry-meta">
            |
        </div>
    </header>
    <?php if ( has_post_thumbnail() ) : ?>
        <div class="post-thumbnail">
            <?php the_post_thumbnail('large'); ?>
        </div>
    <?php endif; ?>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
</article>

Internationalizace témat, testování a balení pro nasazení

Po dokončení vývoje tématu je posledním klíčovým krokem zajistit, aby splňovalo specifikace ekosystému WordPress a bylo přívětivé pro uživatele. To zahrnuje internacionalizaci, testování kompatibility s různými zařízeními a prohlížeči, stejně jako přípravu tématu k finálnímu balení.

Internationalizace znamená, že váš produkt (nebo jeho část, např. tematická stránka) bude podporovat více jazyků. To zahrnuje to, že všechny textové stránky zobrazované uživatelům (např. hlavní navigační menu) musí být zabaleny do speciálních struktur pomocí určitých funkcí, aby je překladové nástroje mohly správně zpracovat. V předchozím příkladu jsme k tomu použili…__('主导航菜单', 'my-first-theme')Zde…my-first-themeJe to tak.style.cssTextové pole definované zde slouží k jedinečné identifikaci překladových řetězců vašeho tématu.

Postup vytvoření kompletního překladatelského souboru:

Jeho pracovní postup je následující: V kódu se používají nástroje nebo techniky, jako…esc_html_e('Hello World', 'my-first-theme')Taková funkce; poté se pomocí nástrojů jako Poedit prohledají textové soubory temat (theme files) hledající výrazy, které lze přeložit, a na základě toho se vytvoří potřebné překladatelské data..potSoubor; Překladatel na základě tohoto souboru vytvořil překlad do příslušného jazyka..poSoubory jsou nakonec zkompilovány do formátu čitelného pro počítače..moSoubor..moSoubory byly zařazeny do tématu./languages/Když uživatel změní jazyk webové stránky, texty v tématu se automaticky přepnou podle nového jazyka.

Závěrečná kontrola a příprava k publikování

Před nasazením je nutné provést důkladné testy.
1. Funkční testování: Ujistěte se, že všechny funkce podporované jednotlivými tematikami (menü, nástroje, záhlaví atd.) fungují správně v administraci WordPressu.
2. Rezponzivní testování: Pomocí nástrojů pro vývojáře v prohlížeči nebo skutečných zařízení zkontrolujte, jak se téma zobrazuje na různých velikostech obrazovek.
3. Testování kompatibility s prohlížeči: Zkontrolujte, zda v hlavních moderních prohlížečích (Chrome, Firefox, Safari, Edge) neexistují chyby v rozložení stránek nebo nefungují některé funkce.
4. Kontrola kvality kódu: Dodržování standardů kódování WordPressu je volitelné, ale velmi doporučené. Díky tomu bude váš kód snazší pro ostatní pochopit a udržovat.
5. Příprava náhledového obrázku: Vytvořte obrázek o rozměrech 1200 × 900 pixelů.screenshot.pngTento soubor bude zobrazen v vybrávači témat v pozadí WordPressu.
6. Nakonec soubory zabalte do jednoho archivu: Odstraňte všechny soubory protokolů, záloh a nepotřebné konfigurační soubory IDE vytvořené během vývoje. Ponechte pouze soubory a adresáře nezbytné k normálnímu fungování tématu. Poté celý adresář s tímto tematem komprimujte do jednoho archivu..zipTento soubor může být nahrán na jakýkoli web WordPress a následně tam nainstalován.

Závěr

Vývoj temát pro WordPress je celý proces, který začíná pochopením struktury základních souborů, postupným vytvářením funkcionalit a šablon, správou systémových zdrojů a končí jejich standardizovaným zabalením (zabalením do formátů určených k použití v rámci WordPressu). Získání dobrých znalostí v této oblasti je zásadní pro efektivní vstyle.css、index.phpNa základě toho… až po využití toho.functions.phpVytvářet bohaté funkce pomocí šablon a následně přizpůsobovat produkt globálním uživatelům prostřednictvím internacionalizace je nezbytnou cestou každého vývojáře tematických řešení. Dodržování osvědčených postupů, jako je použití…wp_enqueue_scriptsSpráva zdrojů pomocí „hooků“, využití šablonových komponent k opakovatelnému využití kódu a důkladné testování na různých platformách nejen zlepší kvalitu vašeho tématu, ale také usnadní jeho údržbu a spolupráci s ostatními. Nakonec, po pečlivém zabalení vašeho díla, získá potenciál k použití na webových stránkách WordPress po celém světě.

Časté dotazy

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

Ano, dokonalá znalost PHP je nezbytnou podmínkou pro vývoj temát pro WordPress. Samotný jádro WordPressu je napsáno v PHP a všechny soubory šablon (např.index.php、single.phpVšechny tyto soubory jsou PHP skripty. Potřebujete pomocí PHP volat šablony WordPress (např.the_title()Funkce a „hooky“ slouží k dynamickému získávání a zobrazování dat z databáze. Základními požadavky jsou také znalosti HTML, CSS a základních prvků JavaScriptu.

Jak vybrat pluginy pro vývoj témat a tvorbu stránek?

Záleží to na vašich cílech a požadavcích projektu. Vývoj tematických stránek vám poskytuje plnou kontrolu, nejlepší výkon a čistotu kódu, což je ideální pro projekty, které vyžadují vlastní design, složité funkce nebo extrémně rychlé načítání stránek. Nicméně proces učení je v tomto případě poměrně náročný. Na druhou stranu, pluginy pro vytváření stránek (jako je Elementor) umožňují rychlé vytváření stránek pomocí vizuálního rozhraní typu „přetáhnout a upustit“, bez potřeby psaní kódu, což je velmi vhodné pro začátečníky, rychlé vytváření prototypů nebo situace, kdy klienti potřebují sami upravovat obsah. Tyto nástroje však mohou zvýšit zátěž webové stránky a vést ke vzniku zbytečného kódu.

Jak ověřit, že temata ve vývoji neovlivňují webové stránky v provozu?

Nejbezpečnějším a nejprofesionálnějším způsobem je provádět vývoj v lokálním vývojovém prostředí. Můžete použít nástroje jako Local by Flywheel, XAMPP nebo MAMP k vytvoření webové stránky WordPress na svém osobním počítači, která bude odpovídat stránce fungující online. Tímto způsobem žádné aktivity spojené s vývojem a laděním neovlivní webovou stránku provozovanou online. Další možností je provádět vývoj v “testovacím” nebo “dočasném” prostředí webové stránky online, které je úplnou kopií hlavní webové stránky a slouží k bezpečnému testování aktualizací a změn.

Potřebuje můj téma podporu editoru Gutenberg?

V roce 2026 je důrazně doporučeno, a dokonce lze říct, že je nezbytné, podporovat editor Gutenberg (blokový editor). Stal se výchozím způsobem úprav obsahu v WordPressu a je používán miliony uživatelů a správců webů. Vaše téma by mělo správně zobrazovat základní bloky a zajistit, aby vzhled obsahu v blokovém editoru byl v podstatě totožný s vzhledem po jejich zveřejnění na webových stránkách (princip “co vidíš, to dostaneš”). Můžete aktivovat rozšířenější možnosti formátování a úprav bloků přidáním příslušných deklarací do nastavení vašeho tématu.

Jaký je rozdíl mezi souborem functions.php v hlavní části stránek („tema“) a funkcemi přidávanými pomocí pluginů?

functions.phpKód uvedený v textu slouží funkcím určeným konkrétnímu tématu webové stránky. Po změně tématu tyto funkce již nebudou dostupné. Obvykle se používá k definování podpory rozložení stránek, registračních menu, načítání stylových skriptů a dalších funkcí úzce souvisejících s vzhledem stránek. Naopak funkce pluginů jsou nezávislé na zvoleném tématu – jejich funkce budou fungovat bez ohledu na to, které téma je aktivní. Pokud je nějaká funkce silně spojena s “vzhledem” nebo “rozložením” webové stránky, pak patří do kategorie funkcí, které jsou součástí samotného pluginu.functions.phpPokud nějaká funkce poskytuje nezávislou, univerzální obchodní logiku (např. kontaktní formulář, optimalizace pro vyhledávače – SEO), je vhodnější ji vytvořit jako plugin. Toto oddělení zajišťuje, že při změně tématu webové stránky zůstanou základní funkce nedotčeny.

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: