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

Podrobný rozbor vývoje temat pro WordPress: Od začátků až po pokročilé znalosti

Čtení za 3 minuty.
2026-03-18
2026-06-03
2,905
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ákladní složky tématu WordPress

WordPress téma není pouze otázkou vzhledového stylu – jedná se o software balíček složený z konkrétních souborů, který dodržuje určitou strukturu. Porozumění jeho základnímu složení je prvním krokem při jeho vývoji. Každé téma se nachází…wp-content/themes/Soubory se nacházejí v daném adresáři a existují ve formě samostatného složku. Ze všech souborů jsou dvě nutně povinné:style.css和index.php。

style.cssSoubor není pouze vrstveným souborem šablon, který definuje vizuální vzhled webové stránky, ale také “souborem deklarací metadat” tématu. Blok poznámek v hlavě tohoto souboru obsahuje veškeré informace potřebné k rozpoznání tématu WordPressem – např. název tématu, autora, popis a verzi. Bez správně formátovaných informací v hlavě nebude WordPress schopen vaše téma rozpoznat v seznamu témat v administraci.

Kromě těchto dvou nutných souborů obsahuje funkční téma obvykle také sadu šablonových souborů, které slouží k ovládání výstupu různých částí webové stránky. Například…header.phpJe zodpovědný za vytvoření hlavy dokumentu (včetně…)Části a nastavení záhlaví stránek („Parts and Header Layout“)footer.phpZodpovídá za podstránku (footer).sidebar.phpJe zodpovědný za správu bočního panelu.functions.phpJedná se o zvláštní a výkonný soubor, který umožňuje vývojářům přidávat funkce a registrovat vlastnosti pro konkrétní témata, aniž by bylo nutné měnit samotné základní soubory.

Doporučujeme k přečtení. Ultimátní průvodce vývojem WordPress temat: Od principů až po praktické aplikace。

Porozumění funkci souborů šablon

Šablony jsou „kostrou“ témat. Jedná se o soubory, které obsahují kombinaci kódu PHP a HTML značek..phpSoubory. Základní zpracovatelský proces WordPressu automaticky vybere nejvhodnější šablonový soubor pro zobrazení stránky na základě typu navštívené stránky (např. úvodní stránka, stránka článku, stránka kategorie) pomocí sady pravidel nazývaných “šablonové hierarchie”. Například, když uživatel navštíví blogový článek, WordPress nejprve vyhledá a načte odpovídající šablonu.single.phpPokud tento soubor neexistuje, bude systém vrácen na předchozí stav.singular.php… a nakonec se vrátit zpět na…index.phpTento mechanismus poskytuje vývojářům velkou flexibilitu, neboť umožňuje navrhnout zcela odlišné uspořádání (layouty) pro různé typy stránek.

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

Vytvořte si své první téma: Od nuly

Teď se pustíme do vytvoření nejjednoduššího tématu. Nejprve…wp-content/themes/V adresáři vytvořte novou složku s názvem “my-first-theme”. Poté v této složce vytvořte další složky nebo soubory dle potřeby.style.cssSoubor a zároveň do něj zapište následující záhlaví (header informace):

/*
Theme Name: 我的第一个主题
Theme URI: https://yourwebsite.com/themes/my-first-theme/
Author: 你的名字
Author URI: https://yourwebsite.com/
Description: 这是一个用于学习WordPress主题开发的简单主题。
Version: 1.0.0
Text Domain: my-first-theme
*/

Dále vytvořteindex.phpSoubor. Toto je výchozí šablona pro návrat na předchozí verzi všech stránek. Můžeme začít s velmi jednoduchou strukturou a pomocí funkcí šablon WordPressu přidat další části stránek.

<!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>

V tuto chvíli již můžete tuto temu vidět a aktivovat v záložce “Vzhled” -> “Témata” v administraci WordPressu. I když je velmi jednoduchá, již obsahuje základní funkce potřebné k zobrazení nadpisů a obsahu článků.

Rozklad fungování hlavního cyklu

Výše uvedeném…index.phpV příkladu,if ( have_posts() ) : while ( have_posts() ) : the_post(); ... endwhile; endif;Tento kód představuje “hlavní cyklus” WordPressu. Je srdcem procesu výstupu dynamického obsahu tematických stránek. Po zahájení tohoto cyklu…have_posts()Funkce zkontroluje, zda aktuální dotaz obsahuje články. Pokud ano,the_post()Funkce nastaví globální data článků, což umožní následném použití šablonovacích značek (např.the_title()、the_content()Tento kód umožňuje vypsat informace o aktuálním článku. Cyklus bude pokračovat, dokud nebudou zpracovány všechny najdené články.

Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Od základů po pokročilé techniky a praktické pokyny。

Zvládněte strukturu šablon a podmínkové značky.

Systém úrovní šablon (template hierarchy) v WordPressu určuje, který soubor šablony má být načten pro konkrétní požadavek. Funkcionuje jako rozhodovací strom (decision tree): hledání začíná u nejkonkrétnějšího souboru šablony a pokud není nalezen, postupuje se na vyšší úrovně, tedy k obecnějším šablonám. Například pro článek s ID 123 bude WordPress hledat v následujícím pořadí:single-post-123.php -> single-post.php -> single.php -> singular.php -> index.php。

Pro vytváření různých obsahů v rámci stejného šablónového souboru v závislosti na různých podmínkách poskytuje WordPress “podmínkové značky”. Jedná se o PHP funkce, které vrací logické hodnoty (true nebo false), díky čemuž můžete flexibilně ovládat průběh vykazování obsahu.

Příklady využití běžných značek určených k určování podmínek

Podmínkové značky vám umožňují přesně ovládat zobrazení obsahu. Například můžete…index.phpPoužijte to v čínštině.is_home()Chceme určit, zda se právě nacházíme na domovské stránce blogového článku. K tomu použijeme následující kritéria:is_single()K určení, zda se jedná o stránku s jedním článkem, použijte následující kritéria:is_page()Zjistit, zda se jedná o nezávislou stránku. V kombinaci s…if/elseS těmito výrazy můžete implementovat složitou logiku uspořádání obsahu na stránce.

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 
<main>
    <?php if ( is_home() && ! is_front_page() ) : ?>
        <h2>Seznam blogových článků</h2>
    <?php elseif ( is_search() ) : ?>
        <h2>搜索结果：</h2>
    &lt;?php
    // 主循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 为搜索页面和首页的文章显示不同的摘要
            if ( is_search() || is_home() ) :
                the_title( sprintf( &#039;<h3><a href="/cs/%s/">', esc_url( get_permalink() ) ), '</a></h3>' );
                the_excerpt(); // 显示文章摘要
            else :
                the_title( '<h2>', '</h2>' );
                the_content(); // 显示全文
            endif;
        endwhile;
    else :
        if ( is_search() ) {
            echo '<p>抱歉，没有找到匹配的结果。</p>';
            get_search_form();
        } else {
            echo '<p>暂无内容。</p>';
        }
    endif;
    ?&gt;
</main>

Rozšíření funkcí tématu prostřednictvím souboru functions.php

functions.phpSoubor představuje “funkční centrum” tématu. Kód přidaný zde se automaticky načte po aktivaci daného tématu. Jeho hlavní účely zahrnují nastavení funkcí podporovaných tímto tématem (např. zobrazení přehledů článků, vlastní nabídky), registraci oblastí pro přidávání doplňků, začlenění do souborů se styly a skriptů, stejně jako definování vlastních funkcí.

Standardní postup je zabalit veškerý kód pro inicializaci do funkce, jejíž název začíná názvem tématu, a poté tento kód používat podle potřeby.after_setup_themeTento „hook“ slouží k provedení dané akce.

&lt;?php
// functions.php
function my_first_theme_setup() {
    // 让主题支持自动生成<title>标签
    add_theme_support( 'title-tag' );

// 启用文章和页面的特色图像（文章缩略图）功能
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' =&gt; __( '主导航菜单', 'my-first-theme' ),
    ) );

// 为文章摘要添加“阅读更多”链接
    add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_excerpt_more( $more ) {
    return sprintf( '... <a class="read-more" href="/cs/%s/">%s</a>',
        esc_url( get_permalink( get_the_ID() ) ),
        __( '继续阅读', 'my-first-theme' )
    );
}

// 正确引入样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入一个自定义CSS文件
    wp_enqueue_style( 'my-first-theme-custom', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?&gt;

Připojení k jádru WordPress pomocí hooků

add_action()和add_filter()Je to most, který spojuje váš kód s jádrem WordPressu.add_action()Umožňuje vám provádět svou funkci v určitých časových okamžicích – např. při inicializaci nebo při načítání hlavičky stránky.add_filter()Je vám dovoleno upravovat data vytvořená během zpracování v WordPressu (např. znaky na konci shrnutí článku). Porozumění a použití „hooků“ (zámkových funkcí) je klíčové pro vývoj pokročilých temat (tématických nastavení).

Doporučujeme k přečtení. Návod k vývoji témat pro WordPress: od začátku až po pokročilé vytváření personalizovaných webových stránek.。

Závěr

Vývoj tem pro WordPress je systémový proces, který vyžaduje, aby vývojáři kombinovali front-end technologie (HTML, CSS, JavaScript) s back-end logikou (PHP) a také pochopení základních principů fungování WordPressu. Počínaje vytvořením těch nejzákladnějších…style.css和index.phpSoubor začíná a postupně se zabývá úrovněmi šablon, hlavním cyklem, podmínkovými značkami a…functions.phpSilné aplikace – každý krok je základem pro vytvoření robustního, flexibilního a udržovatelného tématu. Dodržování osvědčených postupů, jako je organizace souborů pomocí hierarchie šablon, přidávání funkcí pomocí „hooků“ a správné začlenění zdrojových souborů, nejen zvyšuje efektivitu vývoje, ale také zajišťuje, že vaše téma bude dobře kompatibilní s ekosystémem WordPress a jeho budoucími verzemi.

Časté dotazy

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

Není nutné dosahovat úrovně “dokonalého znalostí”, ale musíte mít pevné základy PHP. Musíte porozumět základním konceptům, jako jsou proměnné, funkce, pole, podmínkové výrazy a cykly, protože soubory s tematickými šablonami jsou v podstatě PHP skripty. Ještě důležitější je, abyste byli obeznámeni s funkcemi PHP specifickými pro WordPress (šablony) a globálními objekty.$postPostupem s dalším vývojem se pochopení objektově orientovaného programování (OOP) a systému hooků v WordPressu stane velmi důležitým.

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

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

Aby vaše téma podporovalo více jazyků, je nutné provést přípravu na internacionalizaci (Internationalization, i18n). To znamená, že všechny texty určené pro uživatele v kódu (jako např. texty na tlačítkách, informační zprávy) neměly být napsány přímo, ale měly by být zabaleny pomocí funkcí pro překlad v WordPressu.__('Hello World', 'your-theme-textdomain')Zároveň,style.css„Hlava a…“functions.phpV funkcí na načítání správně nastavte textové pole (Text Domain). Po dokončení mohou vývojáři nebo překladatelé použít nástroje, jako je Poedit, k vytvoření požadovaných výstupních dat..potSoubory a vytvoření verzí v různých jazycích.po/.moPřekládání dokumentů.

Jak zajistit výkon front-end stránky během vývoje aplikace?

Pro zajištění dobrého výkonu tématu je potřeba provést řadu optimalizací. Nejprve je třeba postupovat podle doporučení od samotného WordPressu a používatwp_enqueue_style()和wp_enqueue_script()Je třeba načítat CSS a JavaScript soubory a správně spravovat závislosti mezi nimi i jejich verze. U obrázků by se mělo využít funkce “Výjimečné obrázky” (Featured Images) v WordPressu a nastavení jejich velikostí; na straně klienta by měly být použity vhodné, komprimované verze obrázků. Kromě toho lze zvážit zpožděné načítání nezbytných obrázků a asynchronní načítání JS souborů, které neblokují proces renderování stránky. Výsledný HTML kód by měl být stručný a sémanticky vysvětlitelný, zatímco CSS by mělo být co nejefektivnější – měly by se také vyhnout příliš složitým selektorům.

Jaké testy je třeba provést u dokončeného tématu?

Před publikováním nebo uvedením do provozu musí být téma podrobeno důkladným testům. To zahrnuje: testování responzivního rozvrhu a funkcí v různých prohlížečích (Chrome, Firefox, Safari, Edge) a na různých zařízeních (počítače, tablety, mobilní telefony); také testování v režimu ladění WordPressu (s aktivovanými funkce ladění).WP_DEBUGSpusťte to a zkontrolujte, zda neexistují žádné upozornění, varování nebo chyby v PHP; otestujte kompatibilitu s různými verzemi jádra WordPressu; ověřte, zda správně fungují interakce s běžnými doplňky (jako Yoast SEO, WooCommerce, Contact Form 7); zkontrolujte, zda splňuje základní standardy přístupnosti (WCAG); a ujistěte se, že všechny funkce tématu (jako jsou menu, widgety, nastavení v Customizeru) pracují podle očekávání.

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: