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

Od nuly: Kompletní příručka pro postupné učení vývoje temát pro WordPress

Čtení za 3 minuty.
2026-03-19
2026-06-03
2,106
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.

Témata pro WordPress tvoří jádro vzhledu a funkcí webové stránky. Skládají se z sady šablon, stylových souborů, skriptů a obrázků, které spolupracují na tom, aby obsah z databáze (jako jsou články, stránky) zobrazily návštěvníkům v určitém uspořádání a designu. Na rozdíl od doplňků, které se zaměřují na přidávání nových funkcí, temata hlavně ovlivňují vizuální podobu webové stránky; avšak moderní temata často obsahují i některé základní funkce. Naučit se vytvářet temata znamená, že budete mít plnou kontrolu nad designovou logikou, optimalizací výkonu a strukturou kódu webové stránky, což je zásadní pro vytvoření jedinečných, efektivních a bezpečných webů.

Vytvoření vývojového prostředí

Než začnete psát první řádek kódu, je nezbytné mít profesionální lokální vývojové prostředí. Díky němu můžete volně testovat a ladit své výtvory, aniž by to ovlivnilo fungování webové stránky online.

Konfigurace lokálního serveru

Doporučujeme použít integrované balíčky pro lokální serverové prostředí, jako jsou Local by Flywheel, XAMPP nebo MAMP. Tyto nástroje umožňují jednoduchou instalaci Apache/Nginx, PHP a MySQL. Například po instalaci Local můžete rychle vytvořit nový web pomocí WordPressu a databáze i nastavení PHP budou automaticky konfigurovány. Ujistěte se, že verze PHP (doporučujeme verzi 7.4 nebo vyšší) a verze MySQL odpovídají nejnovějším požadavkům WordPressu.

Doporučujeme k přečtení. Průvodce vývojem a personalizací WordPress temat: Od základů až po pokročilé návody na vytvoření vlastní webové stránky。

Kódové editory a nástroje

Výběr silného editoru kódu je klíčem ke zvýšení efektivity. Visual Studio Code je v současnosti velmi populární volbou – disponuje bohatým množstvím rozšíření, jako jsou šablony kódu pro WordPress, funkce PHP Intelephense pro inteligentní podporu při psaní kódu a možností reálného časového přehledu („real-time preview“). Kromě toho budete potřebovat také nástroje pro vývojáře v prohlížeči (např. Chrome DevTools), které vám umožní v reálném čase ladit kód v jazycích HTML, CSS a JavaScript. Nástroj pro správu verzí kódu, Git, by měl být používán hned od začátku; verze kódu můžete spravovat pomocí služeb jako GitHub, GitLab nebo Bitbucket.

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

Základní struktura a soubory témat WordPressu

Nejzákladnější WordPress téma vyžaduje pouze dvě soubory, avšak funkčně kompletní téma obsahuje řadu standardizovaných souborů, které plní své specifické úkoly.

Kerní stylové soubory a soubory s funkcemi

“Průkaz totožnosti” tématu je… style.css Soubor obsahuje blok hlavičkových poznámek, který nejenže poskytuje styly, ale také metadata tématu – jako je název tématu, autor, popis, verze atd. WordPress čte tyto informace a na základě nich identifikuje a spravuje témata v pozadí.

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A simple, clean WordPress theme for learning.
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Dalším klíčovým souborem je functions.phpNení to žádný plugin, ale soubor určený k rozšíření funkcí daného tématu. Zde můžete přidávat funkce podporované tímto tématem, registrovat menu a boční panely, načítat styly a skripty, definovat vlastní funkce atd. Jedná se o “mozek” tohoto tématu, který spojuje šablonové soubory s základními funkcemi WordPressu.

Kerní šablonový soubor

Šablony určují, jak se různé části webové stránky zobrazují. Nejzákladnější šablony zahrnují:
* index.phpVýchozí a záložní šablony pro dané téma – pokud neexistují žádné konkrétnější šablony, WordPress je použije.
* header.phpObsahuje dokument. <head> Části HTML struktury a začátek stránek (např. logotyp, navigační menu). Používejte je v šablonách. get_header() Volání funkce.
* footer.phpObsahuje HTML strukturu na spodní část stránky (např. informace o autorských právech). Použijte ji. get_footer() Volání funkce.
* sidebar.phpDefinujte oblast pro nástroje v postranní liště. Použijte ji. get_sidebar() Volání funkce.
* page.php: Používá se k zobrazení jednotlivých stránek.
* single.php: Používá se k zobrazení jednotlivých článků.
* archive.phpSlouží k zobrazení kategorií článků, tagů, autorů a dalších informací na stránkách archivu.

Doporučujeme k přečtení. Proč zvolit vlastní temu pro WordPress?。

Při kombinování těchto souborů systém úrovní šablon WordPress automaticky vybere pro různé typy obsahu nejvhodnější šablonu pro jejich zobrazení.

Vývoj klíčových funkcí tématu

Po zvládnutí základních funkcí souborů přichází další krok: oživit dané téma tím, že do něj přidáme dynamický obsah a funkce.

Přidání menu a volání dynamického obsahu

在 functions.php V čínštině se používá register_nav_menus() Funkce slouží k registraci umístění nabídky (menu), např. “Hlavní navigace” a “Navigace v patičce 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 
function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Po registraci můžete menu přidělit v administraci v sekci “Vzhled” -> “Menu”. V souborech šablon (např.) header.phpV tomto případě se používá wp_nav_menu() Funkce pro zobrazení menu.

Volání dynamického obsahu je jádrem vývoje tematických stránek. Pro to se v WordPressu používají šablónové značky – jedná se o PHP funkce, které slouží k načtení a zobrazení obsahu z databáze. Například lze je použít v cyklu (The Loop). the_title() Zobrazit nadpis článku.the_content() Zobrazit obsah článku.the_permalink() Získat odkaz na článekthe_post_thumbnail() Zobrazit speciální obrázky.

Oblast pro malé nástroje a podpora speciálních obrázků

Oblast nástrojů (Sidebar) umožňuje uživatelům přidávat obsahové moduly do určitých oblastí (např. postranní lišty, podstránky) pomocí přetahování. functions.php Použijte to v čínštině. register_sidebar() Funkce je registrována.

Doporučujeme k přečtení. Kompletní průvodce vývojem temát pro WordPress: Vytvoření vysokokvalitních, přizpůsobitelných temát od nuly。

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( 'Main Sidebar', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( 'Add widgets here.', '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>'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' );

在 sidebar.php V čínštině se používá dynamic_sidebar( ‘sidebar-1’ ) Pojďte to spustit.

Aby uživatelé mohli nastavit obrázek na obálku článku, je nutné v tématu deklarovat podporu pro “zkrácené obrázky článků” (Post Thumbnails). functions.php 的 after_setup_theme Přidejte to do funkce-háčku. add_theme_support( ‘post-thumbnails’ );Poté můžete tento obsah použít ve svých šablonách. the_post_thumbnail() Vydejte to.

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

Pokročilé techniky vývoje tematických aplikací

Po dokončení základních funkcí mohou následující tipy významně zvýšit profesionalitu, udržovatelnost a uživatelský zážitek této tematiky.

Použití podtémat k personalizaci a aktualizacím

Nikdy nepřímo upravujte soubory třetích stran nebo mateřských témat, protože aktualizace přepsají vaše změny. Správný postup je vytvořit podtema. Podtema obsahuje pouze… style.css A s volitelným functions.php…V podtématech… style.css V horní části použijte… Template: Pole určuje název adresáře mateřského tématu. Styly a funkce podtematů budou automaticky děděny a přepsány z mateřského tématu, což vám umožňuje bezpečně přizpůsobovat vzhled stránek a přitom využívat aktualizace mateřského tématu.

API pro vlastní nastavení témat a správu stylů skriptů

WordPress Customizer umožňuje uživatelům v reálném čase předvídat a upravovat nastavení témat (jako jsou barvy, loga). Pomocí API Customizeru můžete svému tématu přidat tyto možnosti nastavení. To zahrnuje použití… $wp_customize->add_setting() 和 $wp_customize->add_control() Metody jako … slouží k propojení nastavení s ovládacími prvky a k bezpečnému výstupu hodnot na stranu klienta (frontend).

Správné načtení souborů CSS a JavaScript je nezbytné. Nikdy nepište tyto kódy přímo do šablonových souborů. <link> 或 <script> Tagy by měly být umístěny… functions.php Použijte to v čínštině. wp_enqueue_style() 和 wp_enqueue_script() Funkce a její nasazení… wp_enqueue_scripts Na tomto háčku. To zajišťuje správu závislostí, zabrání opakovanému načítání a dodržuje osvědčené postupy WordPressu.

function my_first_theme_scripts() {
    // 加载主题主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载一个自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Závěr

Vývoj tem pro WordPress je systémový proces, který začíná pochopením základní struktury souborů a postupně pokračuje ke způsobům načítání dynamického obsahu, registraci funkcí a využití pokročilých API. Klíčovým aspektem je porozumění hierarchii šablon.functions.php Využití vhodných technik a dodržování kódovacích standardů WordPress je zásadní pro vytvoření profesionálních temat. Pomocí nastavení lokálního prostředí, vytvoření základních šablon, integrace klíčových funkcí a následného rozšíření pomocí podtemat a přizpůsobovacích nástrojů mohou vývojáři vytvořit temata, která jsou nejen esteticky příjemná, ale také funkčně výkonná a snadno udržovatelná. Vždy mějte na paměti správné řazení stylů a skriptů a upřednostňujte strategii využívání podtemat, abyste zajistili udržitelnost projektu.

Časté dotazy

Jaké jsou předpokládané znalosti potřebné k naučení se vývoji tematických designů pro WordPress?

Potřebujete mít základní znalosti HTML a CSS pro vytváření struktury a stylu webových stránek. PHP je základním programovacím jazykem WordPressu, a musíte porozumět jeho základní gramatice, funkcím, cyklům a podmínkovým výrazům. Počáteční znalosti JavaScriptu by mohly pomoci při přidávání interaktivních funkcí, ale nejsou nutné.

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

Nejprve se ujistěte, že je váš téma správně aktivováno (Vzhled -> Témata). Poté prověřte… style.css Je důležité, zda jsou informace v hlavičkových poznámkách (header comments) kompletní a ve správném formátu – to je klíčové pro to, aby WordPress správně rozpoznal daný téma. Nakonec je třeba smazat cache v prohlížeči a také cache z pluginů určených k údržbě WordPressu (pokud jsou používány).

Jak přidat vlastní šablonu stránek ke svému tématu?

Vytvořte v adresáři se svými tematikami nový soubor v formátu PHP, například: template-fullwidth.phpNa začátku tohoto souboru přidejte specifický komentář ve formátu šablony, který definuje jeho název. Poté můžete soubor pokračovat v psaní stejným způsobem, jako byste psali běžný kód. page.php Kód pro vytvoření tohoto šablona je stejný. Při vytváření nebo úpravě stránky můžete tento nový šablon vybrat v modulu “Vlastnosti stránky”.

<?php
/*
Template Name: 全宽页面
*/
?>

Na jaké právní otázky je třeba si dávat pozor při vývoji komerčních témat?

Nejdůležitější je ujistit se, že váš tematický balíček („theme“) dodržuje licenci GNU GPL od WordPressu. To znamená, že část kódu napsaného v jazyce PHP musí být zveřejněna pod stejnou licencí. Můžete svůj tematický balíček prodávat pod licencí GPL, ale uživatelé mají právo svobodně upravovat a dále distribuovat váš PHP kód. Kromě toho musí mít veškeré externí zdroje použité ve vašem tematickém balíčku (např. obrázky, fonty, JS knihovny, které nejsou kompatibilní s licencí GPL) vhodná oprávnění pro komerční využití. Doporučujeme před vydáním tematického balíčku pečlivě prostudovat standardy pro posuzování tematických balíčků na stránkách WordPress.org a příslušná ustanovení licencí.

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: