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

Ultimátní průvodce vývojem temát pro WordPress: Od základů až po praktické využití při personalizaci

Čtení za 2 minuty.
2026-03-11
2026-06-03
2,083
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.

Vývoj tem pro WordPress je klíčovým nástrojem při vytváření personalizovaných webových stránek. Na rozdíl od použití hotových tem znamená vlastní vývoj plnou kontrolu nad vzhledem, funkcemi a výkonností webu. Tento průvodce vás provede od základních konceptů až po pokročilé úpravy, a pokryje nejlepší postupy a základní nástroje používané při vývoji moderních tem.

Základy a struktura tem WordPress

Téma WordPressu je v podstatě něco, co se nachází na/wp-content/themes/V adresáři se nacházejí složky, které obsahují sadu konkrétních souborů. Tyto soubory společně určují vzhled webové stránky z pohledu jejího front-endu (tj. části webové stránky, která je zobrazena uživateli).

Klíčový soubor tvořící obsah tématu

Každé téma musí obsahovat dvě základní soubory:style.css和index.phpMezi nimi jestyle.cssNejenže tyto soubory určují vzhled stránek, ale jejich poznámky v hlavičce souboru (header comments) slouží také k zadání metadat tématu pro WordPress.

Doporučujeme k přečtení. Jak vybrat a přizpůsobit si své první téma pro WordPress?。

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.phpJedná se o hlavní šablonový soubor tématu, který slouží jako výchozí rezervní šablona pro všechny požadavky na stránky. Nejjednodušší varianta tohoto souboru…index.phpMůže obsahovat pouze základní funkce pro načtení hlavičky WordPressu, hlavního cyklu a patice stránky.

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 
<h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>

Porozumění hierarchii šablon

WordPress využívá inteligentní hierarchii šablon k výběru nejvhodnější šablony pro zobrazení obsahu. Například při návštěvě konkrétního článku WordPress prohledává šablony podle jejich priority následovně:single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.phpZvládnutí těchto pravidel je klíčem k efektivnímu vývoji.

Klíčové vývojové technologie a funkce

Při vývoji moderních témat pro WordPress se důrazně doporučuje používat architekturu založenou na “blokových strukturách” (block-based themes), avšak tradiční způsob vývoje založený na PHP šablonách a funkcích zůstává základem, který je nutné ovládnout.

Využití cyklů v WordPressu k výstupu obsahu

The LoopJedná se o strukturu PHP kódu v WordPressu, která slouží k načítání a zobrazování článků z databáze. Tvoří jádro všeho obsahu, který je na webu zobrazen.

<?php
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        // 模板标签在这里使用，如 the_title(), the_content()
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
        &lt;?php
    }
} else {
    echo &#039;<p>暂无文章。</p>';
}
?&gt;

Integrace funkcí menu a bočního panelu

projít (účtem, kontrolou atd.)register_nav_menus()Funkce: V tématu můžete registrovat více pozic pro navigační položky, například “Hlavní menu” a “Menu v patě stránky”.

Doporučujeme k přečtení. Průvodce celým procesem výstavby webových stránek: Vytvoření vysokokvalitních, profesionálních webových stránek od nuly。

function my_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主要菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

V šabloně použijte In the template, usewp_nav_menu()Funkce volá registrovaný menu. Pro panel nástrojů na boku je nutné nejprve použít…register_sidebar()Zaregistrujte se a poté použijte to v šabloně.dynamic_sidebar()Zobrazit.

Funkce temat a pokročilá personalizace

Po dokončení výstavby základní struktury je klíčem k rozlišení běžných témat od vynikajících možnost přidávání funkcí a provádění detailního přizpůsobení pomocí souborů s tematickými funkcemi a WordPress hooků.

Přidání podpory temat prostřednictvím souboru funkcí

functions.phpSoubor je “centrem řízení” vašeho tématu. Zde můžete prostřednictvím něj…add_theme_support()Funkce slouží k deklaraci různých funkcí, které dané téma podporuje.

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_theme_features() {
    // 支持文章和评论的Feed链接
    add_theme_support( 'automatic-feed-links' );
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_features' );

Použití akcí a filtrovacích hooků

Hooky prvky („Hooks“) jsou jádrem architektury pluginů v WordPressu a jsou také široce využívány při vývoji tem („Themes“).add_action()Umožňuje vám provádět kód (akční háčky) v určitých okamžicích.add_filter()Umožňuje vám upravovat data (funkce pro práci s filtry).

Například můžete použít…wp_enqueue_scriptsAkční háčky slouží k bezpečnému načítání souborů se styly a skripty, aby se předešlo jejich přímému vložení do hlavy šablony.

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

Dalším běžným příkladem je použití…excerpt_lengthFiltr slouží k úpravě výchozího počtu slov v shrnutí článku.

Doporučujeme k přečtení. Kompletní průvodce výstavbou webových stránek: Celý proces vytvoření profesionálních webových stránek od nuly a základní technologie。

function my_custom_excerpt_length( $length ) {
    return 30; // 将摘要字数改为30个词
}
add_filter( 'excerpt_length', 'my_custom_excerpt_length' );

Moderní vývojové postupy a optimalizace výkonu

Se šířením editoru WordPress (Gutenberg) a vývojem front-end technologií se také neustále mění způsob vývoje temat (tém).

Tematické bloky a celosálové editování

Od verze WordPress 5.9 se blokové tématy (Block Themes) staly směrem, kterým se WordPress ubírá do budoucna. Blokové tématy využívají především soubory HTML šablon k vytváření stránek.theme.jsonKonfigurační soubor slouží k definování globálních stylů a nastavení webové stránky, což výrazně snižuje počet PHP šablonových souborů. Vytvořte jeden takový soubor.theme.jsonSoubory umožňují centrální kontrolu nad paletou barev, formátem textu, mezerami mezi prvky a dalšími vlastnostmi.

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 
{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                { "slug": "primary", "color": "#007cba", "name": "主色" },
                { "slug": "secondary", "color": "#1e1e1e", "name": "次色" }
            ]
        }
    }
}

Ujistěte se, že je téma responzivní a má dobrou výkonnost.

Všechny moderní designové styly (témata) musí být responzivní. To znamená, že vaše CSS by mělo využívat mediální dotazy (Media Queries) k přizpůsobení vzhledu stránek různým velikostem obrazovek. Zároveň je velmi důležité optimalizovat výkon stránek.
– Optimalizace obrázků: Použitíthe_post_thumbnail()Při použití těchto funkcí automaticky WordPress vytvoří responzivní obrázky.srcsetAtributy.
– Správa skriptů a stylů: Jak již bylo uvedeno, používejte…wp_enqueue_script()和wp_enqueue_style()Spravujte to a přidejte skripty na vhodná místa.async或deferAtributy.
– Omezení počtu HTTP požadavků: Sloučte soubory CSS a JS a využívejte vyhlížečové mezipaměti.

Závěr

Vývoj tem pro WordPress začíná pochopením základní struktury souborů, postupným zvládnutím hierarchie šablon, klíčových funkcí a cyklů, až po jejich efektivní využití.functions.phpProces rozšíření funkcionalit pomocí „hooků“. S postupem vývoje je důležité věnovat pozornost moderním praktikám, jako je architektura blokových témat (block theme architecture).theme.jsonKonfigurujte své webové stránky a vždy upřednostňujte responsivní design a výkonnost webu. Dodržováním těchto kroků a osvědčených postupů budete schopni vytvořit vlastní tematiku pro WordPress, která je funkční, elegantně napsaná a poskytuje skvělý uživatelský zážitek.

Časté dotazy

Jaké jsou předpokládané znalosti potřebné k vývoji témat pro WordPress?

Potřebujete mít základní znalosti HTML a CSS pro vytváření struktury a stylu webových stránek. Kromě toho byste měli mít základní povědomí o PHP, protože jádro WordPressu a jeho systém šablon je primárně napájeno PHP. Porozumění JavaScriptu, zejména pokud jde o interakci s blokovými editory, je v dnešním vývoji temát stále důležitější.

Jaký je rozdíl mezi podtématem a nadtématem? Kdy použít podtéma?

Příslušná „matiční“ tema je plně funkční a samostatně instalovatelné WordPress tema. Dceřiná tema dědí všechny funkce a vzhledy matičního tématu a umožňuje vám je přepisovat a upravovat, aniž byste museli měnit základní soubory matičního tématu. Pokud chcete osobní úpravy existujícího, populárního tématu (např. Twenty Twenty-Four) a zároveň si zachovat možnost bezproblémového přijímání aktualizací matičního tématu, měli byste vytvořit a používat dceřiné tema.

Jak vytvořit vlastní šablonu stránky v tématu?

Stačí vytvořit PHP soubor, který začíná konkrétním hlavičkovým komentářem. Například, vytvořte soubor s názvem…template-custom.phpK souboru přidejte poznámku na začátku souboru./* Template Name: 全宽页面 */Po uložení bude možné v administraci WordPressu, při úpravě stránky, v rozbalovacím menu “Vlastnosti stránky” a pod položkou “Šablona” vidět a zvolit vlastní šablonu “Celoplošná stránka”.

Proč se změny mého tématu po aktualizaci nezobrazí?

Obvykle je to způsobeno mehanizmy cache v prohlížeči nebo v systému WordPress. Nejprve zkuste provést “nucené obnovení” obsahu stránky v prohlížeči (obvykle pomocí klávesových kombinací Ctrl+F5 nebo Cmd+Shift+R). Pokud problém přetrvává, zkontrolujte, zda nepoužíváte nějaké doplňky pro správu cache nebo služby typu CDN, a zkuste je vyprázdnit. Také se ujistěte, že upravujete správný soubor tematického nastavení („theme file“) a že vaše změny byly uloženy.

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: