Architektura tématu WordPress a základní soubory
Standardní WordPress téma není pouze souborem CSS stylů – jedná se o organický celek složený z řady PHP šablon a dalších souborů, které dodržují určitá pravidla. Tyto soubory spolupracují na tom, aby obsah z databáze spojily s designem a vytvořily webové stránky, které uživatelé nakonec vidí.
Každý téma se nachází v adresáři instalace WordPress.wp-content/themesSoubory se nacházejí v dané složce a existují ve formě samostatných složek. Klíčovým prvkem je systém úrovní šablon – WordPress automaticky vybere nejvhodnější šablonu podle typu stránky, na kterou je požadavek (např. úvodní stránka, stránka článku, kategorie atd.), a na základě této šablony zobrazí obsah.
Mezi nimi jsou dvě nejzákladnější a nezbytné soubory:style.css和index.php。style.cssNejenže definuje vzhled tématu, ale také blok poznámek v hlavičce souboru obsahuje metadata o tomto tématu – jako je název tématu, autor, popis, verze atd. To je jediný způsob, jakým WordPress rozpozná konkrétní téma.index.phpTakže toto je poslední náhradní šablona, která bude použita v případě, že žádné jiné, konkrétnější šablony neexistují. WordPress ji použije jako výchozí.
Doporučujeme k přečtení. Kompletní návod k vývoji témat pro WordPress: praktický tutoriál od nuly až po uvedení do provozu.。
File defining theme information
tématickýstyle.cssNa začátku souboru musí být obsažena poznámka v standardním formátu, která slouží k registraci tématu u WordPressu. Zde je příklad:
/*
Theme Name: My Awesome Theme
Theme URI: https://example.com/my-awesome-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个简洁、响应式的现代化WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-awesome-theme
*/Zde “Text Domain” slouží k internacionalizaci a je potřebný pro následné použití funkcí pro překlad.__()或_e()Identifikátor, který je nutné použít v určitém okamžiku.
Kerní šablónové soubory a jejich hierarchie
Úroveň šablon v WordPressu určuje logiku renderování jednotlivých stránek. Například při návštěvě konkrétního článku hledá WordPress šablony v následujícím pořadí:single-{post-type}-{slug}.php > single-{post-type}.php > single.php > singular.php > index.php。
Mezi běžné základní šablony patří:
* header.phpJe zodpovědný za vytváření hlavičky dokumentu, která obvykle obsahuje:<!DOCTYPE html>Prohlášení,<head>Struktura oblastí a horní části stránek.
* footer.phpOdpovědný za zobrazení informací na spodní části stránky, včetně autorských práv a kódu skriptů.
* sidebar.phpDefinice oblasti bočního panelu.
* functions.phpFunkční vylepšovací soubory pro téma – slouží k přidávání nových funkcí, registraci nabídek (mení), nástrojů a dalších funkcionalit.
* page.phpSlouží k renderování statických stránek.
* single.php„:“ se používá k renderování jednotlivých článků.
* archive.phpSlouží k renderování stránek se seznamy článků, jako jsou seznamy podle kategorií, tagů nebo článků od konkrétních autorů.
* front-page.phpPokud je nastaveno jako statická domovská stránka, má tento šablonový soubor vyšší prioritu než…home.php。
* home.phpHlavní strana seznamu blogových článků.
Podtémata: Nejlepší postupy pro vytvoření bezpečně nastavených tematických nastavení
Přímá úprava souborů třetích stran používaných v tematech WordPress představuje rizikový postup, protože aktualizace těchto temat přepsou všechny vaše vlastní úpravy. Proto WordPress poskytuje mechanismus podtemat (subthemes). Podtemata dědí všechny funkce a styly základního tematu (parent theme) a zároveň vám umožňují bezpečně přepsat libovolné soubory základního tematu nebo přidat nové funkce.
Doporučujeme k přečtení. Programátoři by si neměli nechat ujít: Jak vybrat a přizpůsobit WordPressový motiv, který vám nejlépe vyhovuje.。
Vytvoření podtématu je velmi jednoduché – stačí pouze…themesV adresáři vytvořte novou složku a poté v této složce vytvořte soubor, který obsahuje potřebné hlavičkové informace.style.cssSoubor, který musí být schválen.TemplateDeklaruje své nadřazené téma (parent topic).
Vytvořit základní podtémata
Nejzákladnější podtémata obsahují pouze dvě soubory:style.css和functions.php. Podtémastyle.cssV hlavičkových poznámkách je nutné jasně uvést nadřazené téma.
/*
Theme Name: My Awesome Child Theme
Template: twentytwentyfour // 此行必须，且必须与父主题文件夹名称完全一致
Description: 这是 Twenty Twenty-Four 主题的子主题，用于自定义。
Version: 1.0
*/Dále je potřeba postupovat v rámci podtémat…functions.phpVe souboru jsou nastaveny pořadí na načítání šablon týkajících se nadřazených témat. Jedná se o standardní postup:
<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style',
get_template_directory_uri() . '/style.css' // 加载父主题样式
);
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css', // 加载子主题样式
array('parent-style'), // 声明依赖父样式
wp_get_theme()->get('Version')
);
}Tímto způsobem se styly podtématek načtou po stylech hlavního tématu, což zajišťuje, že vaše vlastní CSS nastavení správně překryje styly hlavního tématu.
Přepsat soubor šablony nadřazené tématiky
Pokud potřebujete změnit strukturu nějaké stránky, stačí zkopírovat odpovídající šablonový soubor z nadřízeného tématu do adresáře podřízeného tématu a následně provést potřebné úpravy. Například, pokud chcete změnit stránku s článkem, stačí…single.phpZkopírujte obsah do kořenového adresáře podtematu a poté jej upravte. WordPress bude při použití preferovat verze souborů obsažené v podtematu.
Klíčové aspekty vývoje tematických stránek: Soubory funkcí a šablony
functions.phpJde o “mozek” tématu (theme’s „brain“), který umožňuje vývojářům přidávat různé funkce do WordPressu bez nutnosti měnit základní soubory. Tento soubor se automaticky načte při inicializaci tématu. Šablony (templates) obsahují značky (template tags), což jsou PHP funkce používané k dynamickému výstupu obsahu.
Doporučujeme k přečtení. Vybraná kvalitní témata WordPressu pro rok 2026: návod k vývoji zdarma i za poplatek.。
Využití souborů s funkčními procedurami
在functions.phpV tomto kontextu můžete rozšířit funkce pomocí akčních háčků a filtrů. Například můžete registrovat oblast hlavního navigačního menu:
<?php
add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
// 注册导航菜单
register_nav_menus( array(
'primary' => __( '主导航菜单', 'mytheme-textdomain' ),
'footer' => __( '页脚菜单', 'mytheme-textdomain' ),
) );
// 添加主题对文章特色图像的支持
add_theme_support( 'post-thumbnails' );
}Další běžnou operací je registrace postranního panelu pro nástroje:
add_action( 'widgets_init', 'mytheme_widgets_init' );
function mytheme_widgets_init() {
register_sidebar( array(
'name' => __( '文章侧边栏', 'mytheme-textdomain' ),
'id' => 'sidebar-1',
'description' => __( '在此添加文章页的小工具。', 'mytheme-textdomain' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}Analýza běžných šablonovacích značek
Šablonové značky se používají v šablonových souborech (jako napříkladheader.php, single.phpVložte dynamická data do textu. Například:
* wp_head() 和 wp_footer()Musí být umístěny odděleně v rámci tématu.header.php的<head>Před koncem a…footer.php的\nPřed značkou se používá k vložení kódu do pluginů a základních funkcí.
* bloginfo(‘name’)Výstup: Název webové stránky.
* the_title()V cyklu vypíšte nadpis aktuálního článku nebo stránky.
* the_content()Výstup: Hlavní obsah článku/nebo stránky.
* the_permalink()Získat fixní odkaz na aktuální článek.
* the_post_thumbnail()Zobrazit charakteristické obrázky článku.
* dynamic_sidebar(‘sidebar-1’)Zobrazí se v šabloně oblast pro widgety se zadaným ID.
Jednoduchý příklad cyklu článků, který se obvykle vyskytuje…index.php或archive.phpStřed:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
<?php the_excerpt(); ?>
</article>
<?php endwhile; endif; ?>Responzivní design a optimalizace výkonu tem (tematických stylů webových stránek)
Moderní WordPress tématy musí být responzivní, aby poskytovaly dobrý zážitek při prohlížení na různých zařízeních. Kromě toho je optimalizace výkonu přímo spojena s uživatelským zážitkem a pozicí webové stránky v vyhledávačích (SEO).
Implementovat responsivní layout
Reaktivní design se obvykle implementuje pomocí CSS media queries.style.cssMěly by být zahrnuty pravidla stylizace přizpůsobená různým velikostem obrazovek. Zároveň je třeba zajistit, aby…header.php的<head>Přidání metakódů pro zobrazení oblasti do zobrazení:
<meta name="viewport" content="width=device-width, initial-scale=1">Pro obrázky lze použít…srcsetAtributy umožňují prohlížeči vybrat obrázek správné velikosti v závislosti na rozlišení obrazovky, a to v rámci systému WordPress.the_post_thumbnail()Funkce automaticky podporuje tuto vlastnost při předání vhodných parametrů.
Strategie optimalizace výkonnosti aplikací
Optimalizace výkonu zahrnuje více aspektů. Za prvé je důležité zajistit, aby se skripty a styly načítaly ve správném pořadí a aby byly určeny správné závislosti, aby se předešlo zpožděnímu renderování stránky.wp_enqueue_script()Poslední parametr funkce lze nastavit na…trueUmístěte skript na konec stránky, aby se načítal až po zobrazení všech ostatních částí stránky.
Za druhé, efektivně využívejte vykazovací mezipaměť (cache) a dočasné API (transient API) WordPressu. Pro výsledky z databáze, které se často nemění, ale jejich vyhledávání je nákladné, můžete použít…set_transient()和get_transient()Ukládejte data, abyste předešli opakovaným dotazům.
Kromě toho je důležité také optimalizovat obrázky, používat techniku „lazy loading“ (zpožděné načítání obsahu), omezit počet HTTP požadavků (např. sloučením souborů CSS/JS) a využívat moderní formáty obrázků, jako je WebP. Mnoho funkcí lze implementovat pomocí pluginů pro vylepšení výkonu (např. WP Rocket) nebo samostatných skriptovacích knihoven, avšak samotný téma by mělo poskytovat dobrou základnu kompatibility pro tyto úpravy.
Na závěr se ujistěte, že kód tématu je stručný a efektivní, a vyhněte se zbytečným dotazům do databáze. Během vývoje můžete používat doplňky, jako je Query Monitor, k monitorování počtu dotazů při načítání stránek a hlavních problémů s výkonem.
Závěr
Porozumění a ovládnutí vývoje temat pro WordPress je klíčovým krokem od běžného uživatele k tvůrci webových stránek. Začínáme základní architekturou temat a úrovně šablon, pokračujeme využíváním podtemat k bezpečnému přizpůsobení a poté přecházíme k dalším aspektům vývoje…functions.phpŠablony a jejich značky poskytují tématům silné dynamické možnosti; každý krok v jejich vývoji je založen na robustním a flexibilním systému WordPress. Nakonec nesmí být při vytváření úspěšného tématu zapomenuto na responzivní design a optimalizaci výkonu, které přímo ovlivňují použitelnost webové stránky na různých zařízeních, uživatelský zážitek a výkon v vyhledávačích. Pouze dodržováním osvědčených postupů a norem lze vytvořit kvalitní WordPress téma, které je zároveň esteticky příjemné, efektivní a snadno udržovatelné.
Časté dotazy
Jak změnit rozložení konkrétní stránky tématu?
Nejprve pomocí hierarchie šablon v WordPressu určete, který soubor šablony se používá pro stránku, kterou chcete upravit (například stránka určité kategorie může využívat konkrétní šablonu).category-{slug}.phpPoté v adresáři vaší podtémata vytvořte soubor se stejným názvem, zkopírujte do něj obsah odpovídajícího souboru z mateřského tématu a proveďte potřebné úpravy. Tím zajistíte, že WordPress bude při zobrazování stránek používat přednostně šablony z vaší podtémata.
Proč moje vlastní CSS styly neplatí (tj. nejsou zobrazeny na stránce)?
To je obvykle způsobeno nedostatečnou specificitou CSS selektorů nebo nesprávným pořadím načítání souborů s kódy. Nejprve zkontroluj nástroje pro vývojáře v prohlížeči a ujisti se, zda jsou vaše CSS pravidla aplikována, nebo zda nebyla přepsána jinými pravidly s vyšší specificitou. Dále se ujistěte, že upravujete správnou část kódu – konkrétně podtemu (subtheme).style.cssSoubor byl uložen a byl také ověřen (provedena jeho kontrola).wp_enqueue_style()Správné načítání v pořadí a nacházení se za šablonou stylů mateřského tématu. Přidejte to za vlastní pravidla stylů.!importantJedná se o dočasné řešení, ale mělo by být upřednostněno zlepšení specificity selektorů.
Při vývoji témat, jak ladit chyby v PHP?
Doporučujeme v rozvojovém prostředí zapnout režim ladění (debugging mode) WordPressu. Otevřete webové stránky…wp-config.phpSoubor najděte a příslušné definice upravte následovně:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误Tímto způsobem budou chyby a varování v PHP zaznamenány do souboru protokolů (logů) a nebudou zobrazeny návštěvníkům, což vám usnadní vyhledávání příčin problémů.
Moje téma potřebuje podporovat více jazyků – jak to mohu realizovat?
WordPress využívá framework gettext pro internacionalizaci. Musíte udělat dvě věci: Za prvé, ve všech částech kódu, kde jsou potřeba přeložitý texty, používejte funkce pro překlad.__(‘文本’, ‘text-domain’)或_e(‘文本’, ‘text-domain’)Zabalte zboží a ujistěte se, že vše je v pořádku.text-domainJe to v souladu s textovým doménem tématu. Druhým krokem je použití nástrojů, jako je Poedit, ke skenování kódu tématu za účelem generování požadovaných dat..potŠablony souborů a na základě nich vytvoření příslušných jazykových verzí (např.)zh_CN.poPřeložený soubor, který je nakonec zkompilován do….moSoubor byl umístěn do příslušného tématu.languagesStačí pouze složka.
Jaký je další krok? Co bych měl udělat dál?
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.
- 10 nejvýznamnějších trendů a vývojových praktik týkajících se tematických balíčků WordPress pro rok 2026
- Jak vybrat a přizpůsobit WordPress téma vhodné pro váš web: Od začátku až po pokročilé použití
- 5 vybraných témat pro WordPress, která zlepší vzhled vašeho webu a zvýší míru konverzí
- Zvládněte základní techniky SEO optimalizace: Kompletní strategický průvodce od začátků až po pokročilou úroveň
- Jak vybrat a přizpůsobit si své WordPress téma: Kompletní průvodce od začátku až po pokročilou úroveň
Čeština