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

Kompletní průvodce vývojem WordPress temat: Od základů po pokročilé praktické návody

Čtení za 3 minuty.
2026-03-17
2026-06-04
1,972
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áklady vývoje témat WordPress a nastavení prostředí

Chcete-li začít s vývojem temát pro WordPress, je nejprve nutné pochopit jejich základní strukturu. Nejjednodušší tematiko vyžaduje alespoň dvě soubory:style.css 和 index.phpMezi nimi jestyle.cssNejde pouze o šablony stylů, ale také o metadata tématu, jako je název tématu, autor, popis atd. Tyto informace jsou definovány pomocí bloků poznámek v CSS a jsou klíčové pro to, aby WordPress rozpoznal dané téma.

Vytvoření lokálního vývojového prostředí

Před zahájením psaní kódu je velmi důležité vytvořit efektivní lokální vývojové prostředí. Doporučujeme použít balíčky, které integrují Apache/Nginx, PHP a MySQL, jako jsou Local by Flywheel, XAMPP nebo MAMP. Tyto nástroje umožňují jednoduchým způsobem nastavit lokální serverové prostředí a simulovat podmínky provozu na webu. Současně je vhodné na lokálním počítači nainstalovat editory kódu, jako je Visual Studio Code nebo PhpStorm, které poskytují výkonné funkce pro výrazové zvýraznění kódu a podporu při psaní kódu v jazycích PHP, HTML, CSS a JavaScript.

Po přípravě vývojového prostředí je nutné postupovat v adresáři instalace WordPressu…wp-content/themesV podkladové složce vytvořte složku určenou k uložení vašeho tématu. Například vytvořte složku s názvem…my-first-themeKatalogu a poté v tomto katalogu vytvořte potřebné soubory.style.cssDokumenty.

Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Vytvořte si personalizované webové stránky od nuly。

Napsat informace do hlavičky tématu

style.cssPoznámky v hlavičce souboru představují “občanský průkaz” tématu. Níže je uveden příklad základních informací v hlavičce:

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://example.com/
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Mezi nimi,Text DomainPoužívá se pro internacionalizaci (i18n) a slouží k následnému použití funkcí pro překlad.__()或_e()Jedná se o identifikátor, který je nutný k použití při určitých operacích. Po vytvoření tohoto souboru se váš téma zobrazí v nabídce “Vzhled” -> “Témata” v administraci WordPressu, i když zatím nemá žádné funkce.

Hlavní šablonový soubor a hierarchie šablon

WordPress využívá systém hierarchie šablon k určení způsobu zobrazení různých typů obsahu. Porozumění této hierarchii je základem pro vývoj flexibilních temat. Když uživatel navštíví stránku, WordPress hledá odpovídající soubory šablon podle určitého pořadí priorit.

Poznejte hierarchii šablon.

Například, když se navštíví článek na blogu (jednotlivý příspěvek), WordPress bude postupně hledat:single-post-{post-id}.php -> single-post-{post-type}.php -> single.php -> singular.php -> index.phpVývojáři stačí vytvořit požadované šablonové soubory a WordPress automaticky zvolí tu, která nejvíce odpovídá jejich požadavkům.

Vytvořit základní šablonový soubor

Kromě tohoindex.phpKompletní téma obvykle obsahuje následující základní šablonové soubory:
* header.phpVýšková část webové stránky, která obsahuje…<head>Názvy oblastí a lokalit, navigační menu.
* footer.phpStránkový podpis webové stránky, který obsahuje informace o autorských právech a další podstatné údaje.
* sidebar.phpOblast nástrojů v postranní liště.
* functions.phpFunkční soubor tématu slouží k přidávání funkcí, registraci nabídek (mení), nástrojů a dalších prvků.
* style.cssHlavní stylový soubor.
* page.phpSlouží k zobrazení statických stránek.
* single.phpSlouží k zobrazení jednotlivého blogového článku.
* archive.phpSlouží k zobrazení seznamu archivovaných článků (např. podle kategorií, tagů, stránek autorů).

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

Prostřednictvím šablonových značek lze do jednotlivých šablonových souborů zavádět další části. Například,index.phpZavést záhlaví na vrcholu:<?php get_header(); ?>Tato funkce se automaticky načte.header.phpDokumenty.

Funkce tématu jsou integrovány s jádrem WordPressu.

functions.phpSoubor představuje “mozek” tématu – umožňuje vám rozšířit funkce tohoto tématu a provádět hlubokou integraci s jádrem WordPressu, aniž byste museli měnit samotné základní soubory WordPressu. Tento soubor se automaticky načte po aktivaci daného tématu.

Funkce podporované při registraci tématu:

Použitíadd_theme_support()Funkce mohou určit, které funkce WordPress vaše téma podporuje. To by mělo být uvedeno…after_setup_themeAkce je dokončena v „akčních háčcích“ (action hooks). Například kód pro povolení speciálních obrázků článků a vlastního loga vypadá následovně:

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 mytheme_setup() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 支持HTML5标记（用于评论列表、搜索表单等）
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Registrovat navigační menu a oblast nástrojů

Návhiště a příslušné nástroje jsou důležitou součástí interakce mezi tématem a uživatelem. Nejprve je třeba…functions.phpJe nutné je registrovat v určitém systému, a teprve poté je lze použít v šablonách.

Použitíregister_nav_menus()Umístění pro registraci funkcí:

function mytheme_register_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'init', 'mytheme_register_menus' );

Po registraci mohou uživatelé v administraci v sekci “Vzhled” -> “Menu” spravovat menu na těchto místech. V šablonách (např.)header.php(...) a použijtewp_nav_menu()Funkce pro zobrazení menu.

Doporučujeme k přečtení. Naučte se vývoj WordPress témat od nuly: vytvořte si personalizovanou webovou stránku.。

Použitíregister_sidebar()Oblast pro registraci funkcí:

function mytheme_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; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

V šabloně (např.)sidebar.php(...) a použijtedynamic_sidebar( 'sidebar-1' )Zobrazí se tato oblast s malými nástroji.

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

Správa stylů, skriptů a personalizace témat

Vývoj moderních temát pro WordPress vyžaduje standardizovanou správu souborů se styly (CSS) a skriptů (JavaScript) a plné využití API přizpůsobovacího nástroje WordPress (Customizer), aby byly uživatelům k dispozici možnosti konfigurace s možností okamžitého přehledu výsledků.

Správné zavedení CSS a JavaScript

Nikdy nepoužívejte šablony přímo ve svých dokumentech.<link>或<script>Zdroje s pevně zakódovanými tagy by měly být použity.wp_enqueue_style()和wp_enqueue_script()Funkce, prostřednictvímwp_enqueue_scriptsZa účelem načtení potřebných dat se používají „háčky“ („hooks“). Toto zajišťuje, že závislosti mezi jednotlivými komponentami jsou správně nastaveny a zabraňuje jejich duplicitnímu načítání.

function mytheme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 引入Google Fonts
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
    // 引入主JavaScript文件，依赖jQuery，并在页脚加载
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Integrace s vlastními přizpůsobeními WordPressu

Nástroj na přizpůsobení umožňuje uživatelům v reálném čase měnit nastavení tématu, jako jsou barvy, logo, text na záhlaví stránek atd. Můžete jej použít k úpravám vašeho webového designu.WP_Customize_ManagerK objektu lze přidávat nastavení, ovládací prvky a oblasti.

Níže je jednoduchý příklad možností pro přizpůsobení textu na stránkovém podkladu (footer):

function mytheme_customize_register( $wp_customize ) {
    // 添加一个“页脚设置”区域
    $wp_customize->add_section( 'mytheme_footer_options', array(
        'title'    => __( '页脚设置', 'my-first-theme' ),
        'priority' => 160,
    ) );

// 添加一个“页脚版权文本”设置
    $wp_customize->add_setting( 'mytheme_footer_copyright', array(
        'default'           => __( '© 2026 我的网站。保留所有权利。', 'my-first-theme' ),
        'sanitize_callback' => 'sanitize_text_field', // 数据清理回调函数
        'transport'         => 'refresh', // 或 ‘postMessage’ 用于无需刷新的实时预览
    ) );

// 为这个设置添加一个文本输入控件
    $wp_customize->add_control( 'mytheme_footer_copyright', array(
        'label'    => __( '页脚版权文本', 'my-first-theme' ),
        'section'  => 'mytheme_footer_options',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

在footer.phpV šabloně můžete použít…get_theme_mod()Funkce slouží k získání a výstupu tohoto hodnoty:<?php echo get_theme_mod( 'mytheme_footer_copyright' ); ?>。

Závěr

Vývoj tem pro WordPress je systématický proces, který začíná pochopením základních šablonových souborů a hierarchické struktury a pokračuje dalšími kroky…functions.phpIntegrace klíčových funkcí, následovaná standardním správováním zdrojových kódů a využitím nástrojů na přizpůsobení („customizers“) k poskytnutí uživatelsky přívětivého rozhraní pro konfiguraci, je základem pro vytvoření kvalitních WordPress temát. Dodržování kódovacích standardů a osvědčených postupů WordPressu nejen zvyšuje stabilitu a bezpečnost temát, ale také usnadňuje jejich údržbu a kompatibilitu s dalšími doplňky. Po osvojení těchto základních dovedností máte potřebné znalosti k vytvoření profesionálního, přizpůsobitelného WordPress temátu, které splňuje současné webové standardy.

Časté dotazy

Jaké programovací jazyky je nutné ovládat pro vývoj WordPressových šablon?

Pro vývoj temát pro WordPress je nutné ovládat čtyři základní technologie: PHP, HTML, CSS a JavaScript. PHP je klíčová technologie, která slouží k zpracování dynamických dat a logiky. HTML slouží k vytvoření struktury stránek. CSS se stará o styly a rozvržení stránek. JavaScript používáme k realizaci interaktivních efektů na straně klienta. Kromě toho je i základní znalost SQL užitečná pro pochopení způsobů přístupu k datům.

Jak zajistit, aby můj téma splňovalo oficiální standardy přijímání temat pro WordPress?

Aby téma splňovalo požadavky na přezkum v katalogu temat WordPress.org, je nutné striktně dodržovat příručku pro vývoj temat. Mezi klíčové body patří: kód musí být bezpečný (všechny dynamicky generované obsahy musí být označeny nebo očištěny), dodržování hierarchie šablon, správné použití hookovacích funkcí, podpora přístupnosti (WCAG), zajištění responzivního designu, nedoporučuje se používat zastaralé funkce a je nutné poskytnout plnou podporu internacionalizace.

Co je to dceřiný téma (Child Theme) a proč bych ho měl používat?

Podtémata jsou nezávislé témata, která závisí na mateřském tématu a dědí od něj všechny funkce, styly a soubory šablon. Největší výhodou používání podtemat je, že při aktualizaci mateřského tématu neztratíte žádné vlastní úpravy, které jste v podtematu provedli (např. přepsání stylů nebo nahrazení souborů šablon). Jedná se o nejbezpečnější a nejdoporučenější způsob přizpůsobení a inovace jakéhokoli stávajícího tématu.

Které funkce by se měly použít v tématu k získání cesty k souboru tématu nebo jeho URL?

Je nutné používat funkce pro zpracování cest poskytované WordPressem, aby byla zajištěna správnost.get_template_directory_uri()URL určený k získání adresy adresáře nadřazeného tématu (např. adresy souborů CSS/JS).get_stylesheet_directory_uri()URL určený k získání adresáře aktuálního aktivního tématu (pokud jde o podtémata, pak konkrétněho podtématu).get_template_directory()和get_stylesheet_directory()Slouží k získání fyzické cesty na serveru.

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: