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

Kompletní průvodce vývojem temát pro WordPress: Vytvořte vzhled svého webu od nuly

Čtení za 3 minuty.
2026-03-12
2026-06-04
2,703
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 tématu a klíčovým souborům

Jádrem standardního tématu WordPress je složka, která obsahuje určité soubory a nachází se v…/wp-content/themes/Ve složce jsou umístěny soubory týkající se jednotlivých témat. Každé téma musí obsahovat alespoň dva základní soubory, aby bylo rozpoznáno a aktivováno systémem WordPress.

Nejprve je…style.cssNejedná se pouze o šablonu pro vzhled tématu, ale také o informační soubor. Blok komentářů v horní části tohoto souboru definuje základní informace o tomto tématu – název tématu, autora, popis a verzi. Bez správně formátovaných hlavičkových komentářů nebude WordPress schopen vaše téma zobrazit v seznamu temat v pozadí.

Dalším nezbytným souborem jeindex.phpJedná se o výchozí šablonový soubor pro dané téma. Když WordPress nenajde konkrétnější šablonu pro zobrazení obsahu, použije právě tento soubor.

Doporučujeme k přečtení. Průvodce vývojem tem pro WordPress: Od nuly k vytvoření vlastního vzhledu webových stránek。

Kromě toho obsahuje kompletní téma obvykle následující soubory:header.php、footer.php、sidebar.php和functions.php. Dokumentyfunctions.phpNejdůležitější je, že to je “mozek” této aplikace – umožňuje vám přidávat nové funkce, registrovat boční panely, definovat navigační menu atd., aniž byste museli měnit základní kód.

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

Jak navrhnout standardní záhlaví tematických informací?

在style.cssVe souboru musí být formát hlavičkových informací striktně dodržován. Níže je uveden standardní příklad:

/*
Theme Name: 我的第一个主题
Theme URI: https://www.example.com/my-first-theme/
Author: 你的名字
Author URI: https://www.example.com/
Description: 这是一个用于学习WordPress主题开发的简单主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Tyto informace se zobrazí na stránce “Vzhled” -> “Témata” v administraci WordPressu.Text DomainJe to velmi důležité pro internacionalizaci – znamená to, že je nezbytné připravit se na překlad témat do jiných jazyků.

Vytvoření základní struktury šablony stránky

Šablony jsou „kostrou“ WordPress temat a určují, jak jsou různé typy obsahu zobrazeny. Porozumění a použití hierarchické struktury šablon v WordPressu je klíčem k efektivnímu vývoji.

Vytvoření souborů pro hlavičku a závěr stránky

Oddělení opakujících se částí stránky do samostatných souborů je nejlepší praxí pro udržování čistoty a snadné údržby kódu.header.phpSoubory obvykle obsahují deklaraci typu dokumentu.<head>\nVšechny značky dané oblasti (jako jsou nadpisy, odkazy na CSS a JS soubory), stejně jako značky hlavičky webové stránky (jako je logo a hlavní menu).

Doporučujeme k přečtení. Naučte se vývoj tem pro WordPress od nuly: Kompletní průvodce vytvářením vlastních webových tem。

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
    <header id="site-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>
    </header>

Podle toho,footer.phpSoubor obsahuje podkladové informace (např. informace o autorských právech) a končí na…header.phpOtevřené HTML značky v prostředí a jejich současné spuštěníwp_footer()Funkce.

    <footer id="site-footer">
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
\n
<p></p>

wp_head()和wp_footer()Tyto dva „háčky“ (hooky) jsou nutné, protože umožňují pluginům i samotnému jádru WordPressu vložit kód na začátek a na konec stránky.

Implementace šablon pro domovskou stránku a stránky článků

Jako univerzální kontejner pro tematické obsahy…index.phpSoubor využívá šablony WordPress k načítání dalších částí šablony a k cyklickému výstupu článků.

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 
<?php get_header(); ?>

<main id="primary">
    
            <article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
                <h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
                <div class="entry-content">
                    <?php the_content(); ?>
                </div>
            </article>
        
</main>

Pro stránku jednotlivého článku je potřeba vytvořit…single.phpJeho struktura je…index.phpPodobně, ale obvykle se provádí volání (tj. je vyvolán nějaký funkce nebo proces).the_post_thumbnail()Zobrazit speciální obrázky a použít…the_category()和the_tags()Zobrazuje kategorie a tagy.

Rozšířit funkce v souboru s tematickou funkcí

functions.phpSoubor je místo, kam přidáváte všechny vlastní funkce a nastavení pro váš WordPress téma. Je to vlastně jako další plugin, ale určený výhradně pro vaše téma.

Základní funkce podpory nastavování témat

Použitíadd_theme_support()Funkce může deklarovat různé funkce podporované daným tématem, jako jsou speciální obrázky k článkům, vlastní loga, HTML5 značky atd. To se obvykle udává v…after_setup_themeDokončeno ve funkci spuštěné hookem.

Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Vytvoření profesionálních, responzivních webových stránek od nuly。

function my_theme_setup() {
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );

// 支持HTML5标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Implementace bočního panelu a oblasti nástrojů

Malé nástroje jsou důležitou součástí WordPressu. Chcete-li pro téma vytvořit oblast pro malé nástroje (boční panel), musíte…functions.phpPoužijte to v čínštině.register_sidebar()Funkce.

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在这里添加小工具。', 'my-first-theme' ),
        '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' );

Po registraci budete moci…sidebar.phpPoužito v souboru šablonydynamic_sidebar( ‘sidebar-1’ )Nastal čas na volání této oblasti.

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

Integrace šablon stylů a souborů skriptů

Správné přidání souborů se styly CSS a skriptů JavaScript do tematického balíčku je klíčem k zajištění vysokého výkonu a kompatibility. Nikdy nepoužívejte přímé kódování odkazů do souborů šablon, ale raději využívejte systém „enkódování“ (enqueue), který poskytuje WordPress.

Hlavní stylový soubor definující vzhled tématu

Ačkolivstyle.cssJe to nutné, ale obvykle si ponecháváme pouze informace z jejího „hlavičkového“ části (header) pro účely identifikace tématu. Samotný styl je pak uložen v jiném souboru CSS a přenášen pomocí…wp_enqueue_style()Načítání funkce.

function my_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载一个自定义样式表
    wp_enqueue_style( 'my-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array('my-theme-style'), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

get_stylesheet_uri()Funkce se automaticky přesune do kořenového adresáře daného tématu.style.cssSystém frontování umožňuje pluginům nebo podtematům snadno využívat vaše styly nebo je nahrazovat.

Přidání a integrace vlastních skriptů

Pro soubory JavaScript je postup podobný, ale budete potřebovat použít…wp_enqueue_script()Funkce. Dobrou praxí je načítat skripty v patičce stránky (footer), aby se urychlil proces renderování stránky.

function my_theme_scripts() {
    // ... 样式加载代码 ...

// 在页脚加载一个自定义JS文件，并依赖jQuery
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Všimněte si posledního parametru.trueŘíká WordPressu, aby skript umístil do patra stránky (na stránku „footer“). Pokud váš skript potřebuje být spuštěn…<head>\nPokud se něco načte během procesu, nastavte to tak…false。

Závěr

Vývoj tem pro WordPress je proces, při kterém jsou propojeny znalosti designu, HTML, PHP a základů systému WordPress. Začíná se pochopením struktury temy…style.css和index.phpZačněme těmito dvěma nejzákladnějšími soubory a postupně vytvořme strukturu stránek pomocí samostatných šablonovacích souborů. Poté využijeme jejich výkonné funkce k dalšímu vývoji stránek.functions.phpSoubory dodávají vašemu tématu různé funkce a nakonec se styly a skripty spravují pomocí standardních metod řazení. Dodržování kódovacích standardů a struktury šablon WordPress umožňuje vytvořit téma s jasnou strukturou a snadnou údržbou, a zároveň zajišťuje kompatibilitu s celým WordPress ekosystémem. Nejlepším způsobem, jak se této dovednosti naučit, je začít vytvořením co nejjednoduššího složení pro téma a postupně přidávat další funkce.

Časté dotazy

Pro vývoj WordPress témat je potřeba ovládat následující jazyky:

Pro vývoj základního WordPress tématu je nutné ovládat HTML, CSS a PHP. HTML slouží k vytvoření strukturálního uspořádání stránek, CSS určuje vzhled a rozložení stránek, zatímco PHP je serverový skriptovací jazyk WordPressu, který umožňuje realizaci všech dynamických funkcí. Pro složitější a interaktivnější témata je rovněž nezbytné znalost JavaScriptu.

Jak zajistit, aby můj webový design („témata“) podporovalo více jazyků?

Proces, při kterém je vaše aplikace nebo webové stránky přizpůsobeny používání různými jazyky, se nazývá internacionalizace. K internacionalizaci je potřeba:style.cssSprávně nastavit hlavičkové informace v…Text DomainA také…functions.phpPoužijte to v čínštině.load_theme_textdomain()Funkce načítá jazykové soubory.

Následně by ve PHP souboru týkajícím se daného tématu měly být všechny řetězce, které je třeba přeložit, označeny pomocí nějakého konkrétního způsobu – např. pomocí speciálních příznaků nebo šablon.__('Hello World', 'my-theme-text-domain')Takovou funkci překladu je třeba zabalit do vhodného obalu („wrapper“). Nakonec se použije nástroj, jako je Poedit, k vytvoření konečného produktu..po和.moJazykové soubory jsou určeny k použití překladateli.

Je reaktivní design nutný při vývoji temat (tematických nastavení)?

V roce 2026 již není responsivní design pouze “plusovým bodem”, ale nezbytnou podmínkou při vývoji webových stránek. Více než polovina celosvětového internetového provozu pochází z mobilních zařízení. Tema, které není responsivní, vážně naruší uživatelský zážitek a negativně ovlivní pozice webové stránky v vyhledávačích na mobilních zařízeních.

Měl byste využít techniky jako CSS media queries, abyste zajistili, že layout vašeho tématu je přizpůsobivý různým velikostem obrazovek – od stolních počítačů až po chytré telefony – a poskytoval tak dobrý zážitek při prohlížení. Mnoho moderních CSS frameworků (např. Tailwind CSS) také usnadňuje rychlé vytváření responsivních rozhraní.

Jak mohou uživatelé upravit mé téma prostřednictvím administrace?

Poskytování možností vlastního nastavení pro uživatele v pozadí je především realizováno prostřednictvím API “Customizer” v WordPressu. Můžete to udělat…functions.phpPoužijte to v čínštině.$wp_customize->add_setting()和$wp_customize->add_control()Metody pro přidávání nastavení a ovladačů.

Například můžete přidat možnost, která umožní uživateli změnit barvu nadpisu webové stránky. Hodnoty těchto nastavení lze definovat v souboru šablony tématu.get_theme_mod()Funkce získává a vypisuje požadované údaje. To umožňuje uživatelům personalizovat vzhled témat bez nutnosti editovat kód, což výrazně zvyšuje použitelnost a profesionalitu těchto témat.

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: