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

Úvod do vývoje WordPress temat: Postupný návod, jak vytvořit své první vlastní téma

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

Přípravné práce a konfigurace prostředí

Než začnete psát první řádek kódu, potřebujete vhodné vývojové prostředí. To zahrnuje lokální serverové prostředí a editor kódu. Doporučujeme použít nástroje jako XAMPP, MAMP nebo Laragon k nastavení lokálního serveru, které umožňují jednoduchou instalaci a spuštění serverů Apache, MySQL a PHP. Vyberte si editor kódu, který vám vyhovuje – např. Visual Studio Code, Sublime Text nebo PHPStorm – jejich podpora výrazného zvýraznění kódu a automatického doplňování textu výrazně zvýší vaši výkonnost při vývoji.

Následně musíte v lokální instalaci WordPress vytvořit adresář pro své nové téma. Všechna WordPress témata jsou uložena na určitých místech v systému. /wp-content/themes/ V této složce vytvořte novou složku pro téma, které chcete vytvořit, například ji nazvěte… my-first-themeNázev této složky bude vaším identifikačním značkem tématu, který se zobrazí v seznamu témat v pozadí.

Zároveň je důležité pochopit dvě základní složky vývoje WordPress temát: soubory šablon a soubory stylů. Nejzákladnější WordPress téma potřebuje pouze dva soubory:style.css 和 index.php。style.css Nejenže ovládají vzhledový styl webové stránky, ale také bloky komentářů v hlavičce souborů slouží jako “občanské doklady” daného tématu – obsahují metadaty jako název tématu, autora, popis a další informace.index.php Jde o výchozí hlavní šablonový soubor.

Doporučujeme k přečtení. Kompletní průvodce vývojem témat WordPressu: vytvořte si vlastní téma od nuly。

Vytvoření hlavního tematického souboru

Definování stylů a informací pro téma

Vše začalo… style.css Začněte. V hlavním adresáři složky s tématem vytvořte tento soubor a na začátku souboru přidejte formátovaný blok poznámek. Tento blok poznámek je klíčový pro to, aby WordPress tento motiv rozpoznal a načetl. Níže uvedený kód ukazuje základní část hlavičky šablony stylů:

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 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Mezi nimi,Text Domain Slouží k internacionalizaci (i18n) a připravuje se tak na budoucí překlady do více jazyků. Po vytvoření tohoto souboru se přihlaste do administrace WordPressu a navštivte stránku “Vzhled” -> “Témata”. Tam byste měli vidět své téma, i když zatím nemá žádné funkce.

Vytvoření základní struktury šablony

Následně vytvoříme skeletový soubor pro dané téma. index.phpToto je nejzákladnější šablona – použije se tehdy, když WordPress nenajde konkrétnější šablonový soubor (např. single.php 或 page.phpKdyž to bude potřeba, použijeme ho. Jeden z nejjednodušších… index.php Může obsahovat pouze základní funkce určené k načtení hlavičky WordPressu, provádění cyklů a vytvoření závěrečné části kódu.

<!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á základní šablonovací značky WordPressu, jako např. bloginfo() Získat informace o webových stránkáchthe_title() 和 the_content() V cyklu vypíšte nadpisy článků a jejich obsah.wp_head() 和 wp_footer() Jedná se o zásadně důležité „hooky“ (spojovací body), které umožňují jádru WordPressu, pluginům a dalším skriptům ovlivňovat obsah stránek. <head> 和 <footer> Regional code injection.

Rozdělení šablony a funkce na samostatné části

Modulární šablony

将 index.php Pokud bude veškerý kód umístěn do jediného souboru, bude jeho údržba obtížná. Optimální postup je rozdělit kód na více částí, které lze použít jako šablony (Template Parts). Vytvořte následující soubory, aby byla struktura kódu organizována:
* header.phpUchovávat <head> Společné nadpisy obsahující informace o oblasti, navigaci na vrcholu webové stránky a další prvky.
* footer.phpSlouží k uložení informací o autorských právech a dalších společných obsahových prvků, které se zobrazují na spodní části webové stránky.
* sidebar.phpPro uložení nástrojů do postranního panelu (volitelné).
* functions.phpFunkční soubor týkající se funkce tématu.

Doporučujeme k přečtení. Od nuly: Postupná příručka pro vývoj vlastního WordPress tématu。

Poté použijte… get_header()、get_footer() 和 get_sidebar() Až bude funkce k dispozici, oznamte to prosím všem uživatelům. index.php Zavádíme je do tohoto systému. Po úpravě… index.php Klíčová část bude velmi stručná:

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article>
            &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        </article>
    <?php endwhile; else : ?>
        <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

Všimněte si, že jsme použili… esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) Toto je standardní postup internacionalizace.

Vylepšení funkcí tematického nastavení

functions.php Soubor představuje “centrálu řízení” vašeho tématu. Slouží k přidávání funkcí podporujících dané téma, registraci menu a bočních panelů, načítání šablon a skriptů atd. Nejedná se o šablonový soubor, ale o soubor, který je automaticky načten při inicializaci tématu.

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

Níže je základní informace. functions.php Příklad:

__( '主导航菜单', 'my-first-theme' ),
    ) );

// 添加对 HTML5 标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 添加标题标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册侧边栏小工具区域
function my_first_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; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

// 加载主题的样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?&gt;

V tomto souboru jsme definovali funkci. my_first_theme_setupA prostřednictvím… add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) Připojte ho k určitému akčnímu háčku (action hook) inicializačního tématu WordPress. Stejně tak použijeme… register_sidebar Funkce registrovala oblast pro přidávání malých nástrojů a poté… wp_enqueue_style Funkce správně načetla šablonu stylů tématu.

Vytvoření speciálních šablon a stylů

Vytvářet šablony přizpůsobené různým typům stránek

Hierarchie šablon v WordPressu vám umožňuje vytvářet specifické šablonové soubory pro různé typy stránek. Například:
* front-page.phpSlouží jako statická domovská stránka.
* home.phpStránka se seznamem blogových článků.
* single.phpStránka s detaily jednotlivého článku.
* page.php: Jedna stránka.
* archive.phpArchivní stránky s kategoriemi, štítky, autory atd.
* search.phpStránka s výsledky vyhledávání.
* 404.phpStránka s chybou 404.

Doporučujeme k přečtení. Praktický průvodce vývojem temát pro WordPress: Vytvoření vlastní architektury a šablon temát od nuly。

Vytvořit page.php umožňuje vám nezávisle ovládat vzhled všech stránek, aniž by to ovlivnilo stránky s články. Jeho struktura je… index.php Podobně, ale obvykle není nutné zobrazovat metadata o zveřejnění článku (jako je datum, autor).

Návrh reaktivního rozvrhu a interakcí

Moderní témata pro WordPress musí být responzivní. To znamená, že váš CSS musí být přizpůsoben všem velikostem obrazovek – od mobilních telefonů po počítače. Doporučujeme použít strategii „Mobile First“ („Mobilní přednost“), což znamená nejprve vytvořit základní styly pro malé obrazovky a poté pomocí mediálních dotazů (Media Queries) přidat další styly pro větší obrazovky.

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

Zároveň bude vaše téma pravděpodobně vyžadovat použití JavaScriptu pro poskytnutí interaktivních funkcí, jako jsou rozbalovací menu, rotující obrázky atd. Správný postup je tedy… functions.php Použijte to v čínštině. wp_enqueue_script() Funkce slouží k registraci a zařazování skriptů do fronty na spuštění, a zároveň zajistí správné deklarování jejich závislostí (např. na knihovně jQuery). Tím se předchází konfliktům mezi skripty a jejich duplicitnímu načítání, a zároveň je zajištěna kompatibilita se funkcemi optimalizace skriptů v WordPressu.

Závěr

Prostřednictvím výše uvedených kroků jste dokončili nejzákladnější, funkční vlastní téma pro WordPress. Naučili jste se, jak vytvořit a definovat informace o tématu. style.cssVytvořit základy… index.php Šablony – rozdělte šablony na modulární části. functions.php Byla zvýšena funkčnost tematických nastavení. Také jste se seznámili s silnou hierarchií šablon v WordPressu, což otevírá možnosti pro vytváření složitějších, speciálně navržených stránek pomocí šablon.

Vývoj témat je proces neustálé iterace a prohloubování. Následně můžete zkoumat vývoj dceřiných témat (Child Themes), abyste bezpečně mohli upravovat stávající témata, naučit se používat API WordPress Customizer, který umožňuje uživatelům v reálném čase upravovat nastavení témat prostřednictvím administrace, nebo se podrobněji zabývat REST API WordPress za účelem vytváření témat kombinovaných s front-end frameworky. Důležitým faktorem pro neustálé zlepšování svých dovedností je pravidelné sledování oficiálních dokumentací pro vývojáře a aktivní účast v komunitě.

Časté dotazy

Je nutné být zdatným v PHP, abyste mohli vytvářet tematika pro WordPress?

Ano, pevné základy v PHP jsou nezbytné pro vývoj temát pro WordPress. Protože WordPress sám je napsán v PHP, všechny soubory šablon (např. index.php、single.php) a funkční soubory (functions.phpVšechny tyto funkce vyžadují použití PHP kódu k dynamické generaci obsahu, volání funkcí WordPress a manipulaci s daty.

Zároveň musíte být obeznámeni s HTML a CSS pro vytváření struktur a stylů stránek, a mít základní znalosti JavaScriptu (zejména jQuery, protože je součástí jádra WordPressu), abyste mohli přidávat interaktivní funkce.

Proč se změny mého tématu nezobrazují v administraci WordPressu?

To je obvykle způsobeno mezipamětí prohlížeče nebo serveru. Nejprve zkuste v prohlížeči stisknout… Ctrl + F5(Windows/Linux) nebo Cmd + Shift + R(Mac) Pro provedení nuceného obnovení a odstranění mezipaměti prohlížeče:

Pokud problém přetrvává, může být to způsobeno tím, že server nebo některý z pluginů pro cacheování v WordPressu (např. W3 Total Cache, WP Super Cache) uchovává staré soubory. Zkuste tedy vyprázdnit cache všech těchto pluginů. Během vývojové fáze je doporučeno tyto cacheovací pluginy dočasně deaktivovat, aby nedocházelo k žádným překážkám v chodu systému.

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

Zpřístupnění tématu více jazykům ( internacionalizace a lokalizace, tedy i18n a l10n) závisí především na překladových funkcích WordPressu. Ve vlastním tématu by všechny textové řetězce určené pro uživatele neměly být psány přímo, ale měly by být obaleny pomocí překladových funkcí.

Například, pomocí… (‘文本’， ‘my-first-theme’) Proveďte překlad, nebo použijte… echo esc_html(‘文本’， ‘my-first-theme’) Proveďte výstup a uniknutí. Musíte to udělat v style.css „Hlava a…“ load_theme_textdomain() Správné nastavení při volání funkce Text Domain(V textovém poli), poté pomocí nástrojů jako Poedit vytvořte… .pot Translation template and .po/.mo Jazykové soubory.

Jaký je rozdíl mezi funkcemi souboru functions.php v rámci daného tématu a funkcemi pluginů?

functions.php Funkce kódu v souboru jsou podobné funkcím kódu pluginů – oba mohou být použity k rozšíření funkčnosti WordPress. Hlavní rozdíl spočívá v oblasti platnosti („scope“) a účelu jejich použití.

functions.php Funkce uvedené v textu jsou úzce spojeny s aktuálním tématem. Když uživatel změní téma, tyto funkce obvykle přestanou být dostupné. Jsou vhodné pro přidávání funkcí, které jsou přímo související s vizuálním vzhledem tématu, jeho uspořádáním a šablonami (např. umístění registračního formuláře, přidání možností podpory daného tématu).

Funkce poskytované pluginy jsou nezávislé na použitém tématu – bez ohledu na to, které téma je použito, budou tyto funkce dostupné, pokud je plugin aktivován. Jsou vhodné pro přidávání univerzálních funkcí, které nesouvisí s vzhledem tématu (např. kontaktní formuláře, optimalizace pro vyhledávače, funkce pro e-shop). Pokud je nutné nějakou funkci zachovat i po změně tématu, měla by být implementována jako plugin.

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: