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

Ovládněte klíčové techniky: Vytvořte si svůj první WordPress téma od nuly

Čtení za 3 minuty.
2026-03-19
2026-06-04
2,800
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říprava vývojového prostředí a základních souborů

Než začnete psát kód, je velmi důležité si nastavit stabilní lokální vývojové prostředí. To vám umožní provádět testy bez ovlivnění webové stránky online. Doporučujeme použít nástroje jako Local by Flywheel, XAMPP nebo MAMP, které vám rychle pomohou vytvořit lokální serverové prostředí obsahující PHP a MySQL.

Následně budete potřebovat přistoupit do adresáře s instalací WordPress. wp-content/themes V té složce vytvořte novou složku pro své téma – například ji nazvěte „MyProject“. my-first-themeTento adresář je vaším základním adresářem pro vaše tematické materiály. Poté musíte vytvořit dvě nejzákladnější a nezbytné soubory:style.css 和 index.php。

style.css Soubor není pouze vaším šablonovým souborem pro témata, co je důležitější, obsahuje také hlavičku informací o tématu (Theme Header), která je napsána pomocí CSS komentářů. Tato hlavička je jediným způsobem, jakým WordPress rozpozná vaše téma.

Doporučujeme k přečtení. Od nuly ke jedničce: Průvodce celým procesem vývoje WordPress temat a praktické tipy。

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://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
*/

index.php Jedná se o hlavní šablonový soubor vašeho tématu a zároveň o poslední záložní soubor, který WordPress použije při hledání vhodných šablon. Tento soubor by měl obsahovat alespoň volání základních funkcí WordPressu, které jsou potřebné k zobrazení hlavičky stránky, obsahu a patice.

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 
<!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>
    
</body>
</html>

Rozumění úrovni struktur šablon daného tématu

Než začnete vytvářet další šablonové soubory, je zásadní pochopit hierarchii šablon v WordPressu (Template Hierarchy). Ta určuje, který šablonový soubor WordPress použije k zobrazení různých typů stránek – domovské stránky, článkových stránek, speciálních stránek apod. Například při návštěvě konkrétního článku WordPress postupně hledá odpovídající šablonu v určitém pořadí:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> index.phpPokud zvládnete tento pravidlo, budete schopni vytvořit konkrétní soubory (např.…) single.php 或 page.php) pro přesnou kontrolu vzhledu různých stránek.

Vytvoření základní šablony pro téma

Kompletní téma by nemělo obsahovat pouze jediný element. index.phpPro lepší organizaci a opakované využití kódu je potřeba rozdělit stránku na více částí a ty poté zavést pomocí funkcí.

Oddělit hlavičku a patičku stránky

Vytvořit header.php Soubor slouží k uložení hlavy HTML dokumentu (DOCTYPE, …)., <head> Části stránky, stejně jako úvodní část hlavního obsahu (např. nadpis webové stránky a hlavní navigace). Podle toho vytvořte… footer.php Soubor slouží k uložení obsahu umístěného na spodní část stránky (např. informací o autorských právech) a uzavíracích značek.

Poté, index.php V tom případě můžete použít… get_header() 和 get_footer() Použijte funkce k jejich zavádění, aby byla struktura jasnější.

Doporučujeme k přečtení. Kompletní průvodce pro začátečníky v vývoji WordPress temat: Postavte si své první téma od nuly。

Vytvořit šablonu pro boční panel

Pokud téma vyžaduje boční panel, můžete ho vytvořit. sidebar.php Soubor, ve kterém se to používá dynamic_sidebar() Funkce slouží k volání bočního panelu registrovaného v oblasti nástrojů. V hlavním šabloně se tato funkce používá. get_sidebar() Použijte funkci k jejímu zavedení.

Implementace cyklu článků a šablon obsahu

Cyklus článků je srdcem WordPressových temát – slouží k načítání a zobrazování článků z databáze. index.php 或 single.php V tomto případě používáme standardní cyklické struktury. Pro modularnější kontrolu zobrazení článků na seznamech (např. na domovské stránce, stránce archivu) a na stránkách jednotlivých článků lze vytvořit… content.php Nebo vytvořit každý z nich zvlášť. content-single.php 和 content-excerpt.php。

Uvnitř cyklu použijte… get_template_part() Funkce slouží k načtení těchto šablonových souborů obsahů, například:get_template_part( 'content', get_post_format() );。

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

Integrace tematických funkcí a stylů

Výborné téma by mělo nejen dobrý vzhled, ale také mělo být posíleno prostřednictvím funkčních souborů, které rozšiřují jeho možnosti.

Zavést soubor funkce pro správu témat

Vytvořit functions.php Soubor. Tento soubor není šablonový soubor, ale představuje “mozek” tématu – slouží k přidávání funkcí daného tématu, registraci menu, nastavení bočního panelu, stejně jako k načítání skriptů a stylů. Bude automaticky načten WordPressem při inicializaci tématu.

V tomto souboru můžete používat… add_theme_support() Funkce slouží k aktivaci funkcí tématu, jako jsou zkratky článků (Featured Image), vlastní loga (Custom Logo) a podpora HTML5 značek.

Doporučujeme k přečtení. Vývoj tem pro WordPress: Od základů k mistrovství: Klíčový průvodce vytvářením personalizovaných webových stránek。

function my_first_theme_setup() {
    // 添加文章和评论的 RSS feed 链接到 head
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Registrační nástrojová oblast

在 functions.php V čínštině se používá register_sidebar() Funkce může definovat jednu nebo více oblastí pro widgety (Widget Areas), což umožňuje uživatelům přetahovat komponenty na pozadí v rozhraní určeném k správě widgetů.

Funkce my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hlavní postranní panel', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Zde přidejte widgety.', 'my-first-theme' ),
        'before_widget' =&gt; '  Funkce my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hlavní postranní panel', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Zde přidejte widgety.', 'my-first-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>'function my_first_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'My first theme',  
            'id' =&gt; 'my_first_theme',  
            'desc' =&gt; 'Sidebar for my first theme',  
        ),  
    ) );  
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Správné načtení stylů a skriptů

Nikdy nepoužívejte nic přímo v souborech šablon. <link> 或 <script> Tagy slouží k hardcodování zavádění souborů CSS a JavaScript. Správný způsob, jak to provést, je… functions.php Použijte to v čínštině. wp_enqueue_style() 和 wp_enqueue_script() Funkce a její nasazení… wp_enqueue_scripts Na háčku. To zajišťuje správné nastavení závislostí a zabrání duplicitnímu načítání.

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_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载导航脚本，依赖 jQuery
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Internationalizace témat a příprava k jejich publikaci

Implementace překladu témat

Aby vaše aplikace nebo produkt mohl být používán uživateli po celém světě, je internacionalizace (i18n) nezbytným krokem. To znamená, že všechny textové stránky určené pro uživatele musíte obalit pomocí funkcí pro překlad. Nejčastěji používanou funkcí je… __()(Použito k zobrazení překladu v PHP) a _e()(Použito k výstupu překladu v PHP.) Zároveň, style.css „Hlava a…“ functions.php Ve funkci na načtení je nutné správně nastavit textové pole (Text Domain), například tak, jak jsme to udělali dříve. my-first-theme。

Provedení finálního testování a komprese

Před vydáním je nutné provést důkladné testy v různých prostředích (různé verze PHP, různé verze WordPress) a na různých zařízeních (počítače, tablety, mobilní telefony). Zkontrolujte, zda všechny šablony fungují správně, zda funkce pracují podle očekávání a zda splňují oficiální standardy přijímání temát pro WordPress.

Na závěr odstraňte veškerý ladící kód a poznámky (pokud to pro uživatele není užitečné) a pomocí nástrojů, jako je CodeKit nebo online kompresory, zkompresujte vaše soubory CSS a JavaScript, abyste snížili jejich velikost. Poté sbalte celou složku s tématem do ZIP souboru a můžete ji připravit k odeslání do adresáře s tematy na WordPress.org nebo ji distribuovat mezi uživatele.

Závěr

Vytvoření WordPress tématu od nuly je systematický proces učení, který zahrnuje nastavení prostředí, pochopení struktury šablon, vytvoření základních šablonových souborů až po další kroky v rozvoji tématu. functions.php Celý proces integrace pokročilých funkcí spočívá v dodržování kódovacích standardů a osvědčených postupů WordPressu – např. v používání vestavěných funkcí, správném načítání zdrojových souborů a implementaci funkcí internacionalizace. Díky praktickému provedení kroků popsaných v tomto článku získáte nejen funkční téma, ale také hluboké pochopení základních principů fungování témat WordPressu, což vám poskytne solidní základ pro vývoj složitějších a profesionálnějších témat.

Časté dotazy

Je nutné ovládat PHP pro vytvoření témat?

Ano, důkladné pochopení PHP je nezbytné pro vývoj vlastních temát pro WordPress. Protože WordPress samotný je napsán v PHP, všechny soubory šablon (jako…) index.php, single.php) a funkční soubory (functions.phpVšechny funkce pro dynamické generování obsahu, přístup k databázi a zpracování logiky jsou realizovány přímo pomocí PHP kódu. Bez znalostí PHP nebudete schopni porozumět a pracovat s klíčovými částmi tohoto systému.

Musí se při vývoji tématu psát veškerý kód od nuly?

Nemusí to být nutné. Pro začátečníky je sice nejlepší začít od nuly, ale v praxi vývojáři často používají “základní témata” (Starter Themes) nebo “rodičovská témata” (Parent Themes) jako výchozí bod. Například oficiální téma _Underscores (_s) je velmi jednoduché a splňuje standardy kódování; již obsahuje základní strukturu souborů a běžně používané funkce. Na tomto základě můžete dále přistupovat ke vlastnímu vývoji, což výrazně zvyšuje efektivitu a zaručuje kvalitu kódu.

Chyba v souboru functions.php může mít následující důsledky:

functions.php Gramatické chyby nebo závažné chyby v souborech mohou způsobit, že webová stránka WordPress zobrazí “bílou obrazovku smrti” (White Screen of Death), což znamená, že není možné přistupovat k žádnému z rozhraní – ani k frontálnímu (uživatelskému) rozhraní, ani k administrativnímu rozhraní. Je to proto, že tyto chyby jsou vyřešeny již v počáteční fázi načítání tématu. V takovém případě musíte pomocí FTP nebo správce souborů hostitele přejmenovat chybné téma nebo jej nahradit funkčním tématem (např. Twenty Twenty-Six), abyste obnovili přístup k webové stránce, a poté opravit chybný kód.

Jak zajistit, aby můj tematický design podporoval editor Gutenberg?

Aby téma lépe podporovalo editory typu Gutenberg, je nejprve třeba… functions.php Použijte to v čínštině. add_theme_support( ‘editor-styles’ ) Chcete povolit podporu editorových stylů. Poté použijte… add_editor_style() Funkce zavádí váš tematický stylový soubor nebo CSS soubor speciálně vytvořený pro editor do backendového editoru, což zajišťuje, že styl, který uživatel vidí při editování, je co nejvíce v souladu se zobrazením na straně klienta. Kromě toho můžete také přidat podporu pro funkce, jako je zarovnávání textu podle šířky, vlastní nastavování barev a další blokové 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: