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

Průvodce vývojem tem pro WordPress: Jak si postavit vlastní temu od nuly

Čtení za 3 minuty.
2026-03-17
2026-06-04
1,978
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.

Průvodce vývojem tem pro WordPress: Jak si postavit vlastní temu od nuly

Co je to WordPress tema a jeho základní struktura?

WordPress téma není pouze vzhledem webové stránky – jedná se o souborovou sadu, která společně funguje a zajišťuje vizuální podobu a interaktivní funkce obsahu vaší webové stránky. Téma určuje celkový rozvrh stránky, barvy, písma a styly a zároveň pomocí šablon řídí způsob zobrazení různých typů obsahu. Porozumění složení tématu je prvním krokem při jeho vývoji.

Standardní WordPress téma obsahuje alespoň dvě základní soubory:style.css和index.php。style.cssSoubor neobsahuje pouze šablony stylů tématu, ale co je důležitější, tak i blok komentářů umístěný na jeho začátku – tento blok je klíčový pro to, aby WordPress rozpoznal dané téma. Tento blok komentářů musí obsahovat metadatové informace o tématu, jako je název tématu, autor, popis, verze atd.index.phpJedná se o výchozí šablonový soubor daného tématu. Pokud neexistuje žádná konkrétnější šablona, která by odpovídala požadavkům, WordPress ji použije k zobrazení stránky.

Doporučujeme k přečtení. Od nuly: Získejte kontrolu nad základními postupy a osvědčenými praktikami vývoje moderních temát pro WordPress。

Kromě těchto dvou nezbytných souborů obvykle obsahuje plně funkční téma i další šablonové soubory, například ty používané k zobrazení jednotlivých článků.single.phpSlouží k zobrazení seznamu článků.archive.php…a také to, co se používá k zobrazení stránek.page.phpTéma může také obsahovat…functions.phpSoubory slouží k přidání funkcí specifických pro dané téma, registraci menu, bočních panelů a dalších prvků.header.php和footer.phpSlouží k modularizaci kódu pro hlavičku a patičku webové stránky, což usnadňuje údržbu a opakované využití.

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í základní téma.

Vytvoření tematického adresáře a klíčových souborů

Nejprve v adresáři instalace WordPressuwp-content/themes/Vytvořte v dané cestě novou složku, která bude sloužit jako adresář pro vaše téma. Název složky by měl obsahovat pouze malá písmena, čísla a spojovníky a neměl by obsahovat mezery. Například můžeme vytvořit složku s názvem „my-project-folder“.my-first-theme„Složky.“

Následně v této složce vytvořte…style.cssSoubor a na začátek souboru přidejte potřebné poznámky s informacemi o tématu. To je “občanský průkaz” tohoto tématu.

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

Vytvoření základní šablonové soubory

Následně se provede vytvoření.index.phpSoubor. Toto je nejzákladnější šablona – začneme s nejjednodušší HTML strukturou a poté do ní vložíme klíčové funkce WordPressu, které budou sloužit k dynamickému načítání obsahu. Jedná se o velmi minimalistický přístup.index.phpMůže to vypadat následovně:

<!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 používá několik základních funkcí WordPressu:wp_head()和wp_footer()Slouží k tomu, aby jádro WordPressu, pluginy a další komponenty mohly vkládat kód (např. styly, skripty) do horní a dolní části stránek.the_post()和the_content()Slouží k výstupu dat článků v cyklu. Nyní stačí tento tematický složek nahrát na server a poté ho uvidíte a můžete ho aktivovat v sekci “Vzhled” -> “Témata” v administraci WordPressu.

Doporučujeme k přečtení. Průvodce celým procesem tvorby webových stránek: kompletní návod k vytvoření profesionálních webových stránek od nuly.。

Používejte hierarchii šablon a šablonové značky.

Poznejte systém hierarchie šablon.

WordPress využívá sofistikovaný systém hierarchie šablon (Template Hierarchy), který určuje, který šablonový soubor by měl být použit k zobrazení konkrétní stránky. Tento systém provádí vyhledávání na základě principů od nejkonkrétnějších po nejobecnější možnosti. Například při přístupu k článku s ID 123 WordPress postupně hledá:single-post-123.php -> single-post.php -> single.php -> singular.php -> index.phpVývojáři mohou využít tuto vlastnost k přesnému ovládání zobrazení různých obsahů tím, že vytvoří konkrétnější šablonové soubory.

Ovládněte běžné šablónové značky.

Šablony (Template Tags) jsou vestavěné PHP funkce v WordPressu, které slouží k dynamickému zobrazení různých dat v šablonách témat. Jsou základním nástrojem při vývoji témat. Kromě těch, které byly použity v předchozím příkladu…the_title()和the_content()A také spousta dalších tagů.

Například,the_permalink()Slouží k vytvoření fixního odkazu na aktuální článek.the_post_thumbnail()Obrázky používané k zobrazení charakteristických prvků článku;the_category()Slouží k výstupu seznamu kategorií, ke kterým patří daný článek. Tagy určené k určování podmínek jsou také velmi důležité, např.is_home()、is_single()、is_page()、is_category()Atd. Umožňují vám provádět různou kódovou logiku v závislosti na typu aktuální stránky.

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 if ( is_single() ) : ?>
    <div class="post-meta">
        发布于： | 分类：
    </div>
<?php endif; ?>

Tento kód zobrazuje datum vydání článku a informace o jeho kategorii pouze na stránce konkrétního článku.

Vylepšení funkcí temat a možností personalizace

Přidat soubor funkce pro správu témat

functions.phpSoubor představuje “nástrojovou skříňku” vašeho tématu. Kód přidaný zde začne fungovat po aktivaci tohoto tématu. Jeden z běžných účelů tohoto kódu je registrace funkcí podporovaných daným tématem – např. vlastních obrázků pro články, umístění vlastních nabídek nebo vlastního pozadí.

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

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

    // 支持HTML5的标记格式
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

    // 为文章摘要添加更多标签支持
    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 '...';
}
?>

Zavedení šablon stylů a skriptů

Aby byl kód úhledný a aby byly dodrženy osvědčené postupy (best practices), měly by být soubory se styly (CSS) a JavaScript odděleny.functions.phpSoubory se načítají do fronty, nikoli přímo v šablonách nebo pomocí příslušných značek. Tím je zajištěno správné zpracování závislostí mezi jednotlivými soubory a předchází jejich duplicitnímu načítání.

Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Praktický návod na vytvoření vlastního tematu od nuly。

Použitíwp_enqueue_style()Funkce slouží k načtení vašeho hlavního stylového souboru (CSS souboru). Obvykle jej nastavíme tak, aby byl automaticky načten při spuštění stránky.style.cssJako závislost. Pro skripty použijte…wp_enqueue_script()Funkce.

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

    // 加载一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Závěr

Vývoj tem pro WordPress je proces kombinující kreativitu, design a technologii. Pochopením základní struktury klíčových souborů témat, zejména…style.css和index.phpUž jsi udělal první, pevný krok. Zvládnutí systému úrovní šablon ti umožňuje vytvářet přesnou logiku zobrazení pro různé části webové stránky, zatímco flexibilní použití šablonových značek umožňuje dynamické vytváření všech obsahů.functions.phpSoubory umožňují bezpečné přidávání různých funkcí a podpory do temat (tém) a správu zdrojů standardizovaným způsobem. Ze základů, které jsou poměrně jednoduché, můžete postupně zkoumat pokročilejší možnosti – např. vytváření podtemat, přizpůsobování navigačních menu pomocí třídy Walker, integraci API Customizer pro možnosti předvádění v reálném čase, nebo využití editoru bloků (Gutenberg) k vytvoření temat určených k celostátní úpravě stránek (FSE – Full Site Editing). Neustálé procvičování a studium oficiálních dokumentací spolu s kódem vysoce kvalitních temat je nejlepším způsobem, jak zlepšit své vývojářské dovednosti.

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

Časté dotazy

Jaké technické znalosti jsou potřebné k vývoji tematických balíčků pro WordPress?

Pro vývoj tem pro WordPress je nutné ovládat základy HTML, CSS a PHP. HTML slouží k vytvoření strukturního uspořádání stránek, CSS řídí vzhled a rozložení stránek, zatímco PHP je klíčovým programovacím jazykem WordPressu, který slouží k zpracování logiky, načítání dat a generování dynamického obsahu. Základní znalosti JavaScriptu také pomohou při přidávání interaktivních funkcí.

Jak provést testování vývoje tematických nastavení na mém lokálním počítači?

Důrazně doporučujeme nejprve provádět vývoj temat v lokálním prostředí. Můžete použít balíčky pro lokální serverové služby, jako jsou XAMPP, MAMP, Local by Flywheel nebo Laragon. Tyto nástroje vám umožní rychle nastavit na vašem počítači prostředí vhodné pro provoz WordPressu s použitím serverů Apache, MySQL a PHP, což vám umožní vyvíjet a ladit funkce temat bez ovlivnění webové stránky online.

Jaký je rozdíl mezi souborem functions.php v hlavní složce projektu a pluginy?

functions.phpFunkce obsažené v souboru jsou aktivní pouze v aktuálně zvoleném tématu. Pokud změníte téma, tyto funkce již nebudou dostupné. Funkce poskytované doplňky (plugins) jsou naopak nezávislé na zvoleném tématu – pokud jsou doplňky aktivní, jejich funkce zůstanou funkční bez ohledu na to, které téma je nastaveno. Obvykle jsou funkce, které jsou úzce spojeny s vizuálním vzhledem a uspořádáním webové stránky, umístěny přímo v samotném tématu.functions.phpKód, který poskytuje nezávislé a univerzální funkce (jako jsou kontaktní formuláře, optimalizace pro SEO, cacheování), je vhodnější vytvořit jako plugin.

Co je to podtémata a proč je používat?

Podtémata jsou témata, která závisí na jiném tématu (nazývaném mateřským tématem). Umožňují vám upravovat nebo rozšiřovat funkce a vzhled mateřského tématu, aniž byste museli přímo měnit soubory tohoto mateřského tématu. Největší výhodou tohoto přístupu je, že pokud dojde k aktualizaci mateřského tématu, vaše vlastní úpravy vzhledu a funkcí (umístěné v podtématu) nezmizí. Chcete-li vytvořit podtémata, stačí…style.cssV souboru se používá deklarace “Template:” k určení názvu adresáře s mateřskými tematikami. Poté můžete vytvořit pouze ty šablony, které potřebujete přepsat, nebo přidat nové funkce.

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: