Pro vytvoření plně funkčního WordPress tématu je potřeba připravit sadu základních souborů. Tyto soubory tvoří kostru tématu a každý z nich má svou specifickou funkci.
Nejzákladnější soubory zahrnují:
* `style.css`：主题的样式表，同时也是主题的“身份证”，包含主题名称、作者、描述等元信息。
* `index.php`：主题的主模板文件，是默认的首页和文章列表页模板。
* `header.php`：网站的头部模板，通常包含`<head>`部分和网站顶部的导航区域。
* `footer.php`：网站的底部模板，通常包含版权信息、脚本等。
* `functions.php`：主题的功能文件，用于添加自定义功能、注册菜单、侧边栏等。
Začněme vytvořením souboru `style.css`. Na začátku tohoto souboru musíte přidat hlavičkový komentář s informacemi o tématu.
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习WordPress主题开发而创建的简单自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/Následně vytvořte soubor `index.php`. V jeho nejzákladnější verzi je nutné zavést části hlavy (header) a paty (footer) a poté cyklicky vypsat obsah článků.
<?php get_header(); ?>
<main id="main-content">
<article id="post-<?php the_ID(); ?>">
<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_content(); ?>
</div>
</article>
<p>Zatím nejsou žádné články k dispozici.</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>Soubory `header.php` a `footer.php` obsahují respektive obecnou hlavičkovou a dolní část webové stránky (HTML strukturu). Soubor `functions.php` slouží k rozšíření funkcionalit tématu (templatů webové stránky).
Porozumění struktuře šablon a cyklům
WordPress využívá inteligentní systém hierarchie šablon k určení způsobu zobrazení obsahu jednotlivých stránek. Například při návštěvě konkrétního článku WordPress nejprve hledá soubor `single.php`; při návštěvě stránky určené k zobrazení kategorie hledá soubor `category.php`; pokud tyto soubory neexistují, přejde na soubor `archive.php` a v neposlední řadě na soubor `index.php`.
Co je hlavní cyklus?
`the loop`是WordPress主题开发的核心概念。它是一段PHP代码，用于从数据库中获取文章内容并将其显示在网页上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循环的开始。在循环内部，你可以使用一系列模板标签来输出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。
Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Od základů až po pokročilé techniky。
Vytvořte další soubory šablon.
Aby byl tématický rámec profesionálnější, měl byste vytvořit několik šablonových souborů, které se často používají. Například můžete vytvořit soubor `single.php`, který bude sloužit k samostatnému zobrazení článků:
<?php get_header(); ?>
<main>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><p><strong> Řekněte mi něco o sobě.</strong></p></h1>
<div class="post-meta">
Zveřejněno: | Autor:
</div>
<div class="post-content">
<?php the_content(); ?>
</div>
</article>
</main>
<?php get_footer(); ?>Stejně tak můžete vytvořit soubor `page.php` pro definování šablony stránky a soubor `archive.php` pro definování šablony archivních stránek obsahujících kategorie, tagy a podobně.
Integrace menu a bočního panelu
Moderní design obvykle zahrnuje navigační menu a oblast s příslušenstvím v bočním panelu, které lze přizpůsobit podle potřeb uživatelů. Tyto funkce je nutné registrovat a aktivovat pomocí souboru `functions.php`.
Registrovat navigační menu
Přidáním následujícího kódu do souboru `functions.php` můžete pro dané téma registrovat položku menu, například “Hlavní menu”.
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );Po registraci mohou uživatelé v administraci WordPressu v sekci “Vzhled” -> “Menu” přiřadit menu na požadované místo. Poté musíte do souboru `header.php` v místě, kde chcete menu zobrazit, přidat následující kód, abyste ho aktivovali:
<nav id="site-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>Přidat panel nástrojů na boku stránky
Malé nástroje (“widgets”) jsou velmi flexibilní funkcí WordPressu. Chcete-li přidat postranní panel, je také nutné v souboru `functions.php` registrovat „oblast pro malé nástroje“ („widget area“).
Funkce my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( 'Hlavní postranní panel', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( 'Zde přidejte widgety.', 'my-first-theme' ),
'before_widget' => ' Funkce my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( 'Hlavní postranní panel', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( 'Zde přidejte widgety.', 'my-first-theme' ),
'before_widget' => ' <'<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>'function my_first_theme_widgets_init() {
register_sidebars( array(
'sidebars' => array(
'name' => 'My first theme',
'id' => 'my_first_theme',
'desc' => 'Sidebar for my first theme',
),
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );Poté ve šablonovém souboru, kde chcete zobrazit boční panel (např. `sidebar.php`), použijte funkci `dynamic_sidebar()` k jeho výstupu.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Na závěr nezapomeňte do souborů `index.php` nebo `single.php` použít funkci `get_sidebar()` pro načtení tohoto sidebarového souboru.
Doporučujeme k přečtení. Průvodce vývojem WordPress temat: Vytvoření vlastního tématu od nuly。
Přidání stylů a skriptů
为了保持代码的整洁和可维护性，不应该直接在HTML中硬编码样式和脚本链接。正确的方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数将它们加入队列。
Zavést soubor se styly
Ačkoli soubor `style.css` je nutný, WordPress ho nenaloží automaticky. Je třeba ho explicitně přidat do procesu načítání stylů. Obvykle také rozdělujeme hlavní stylový soubor (main style sheet) od souboru určeného k resetování nastavení stylů (reset style sheet).
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );
// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Vývoj pomocí moderních praktik CSS
V front-end vývoji v roce 2026 je velmi důležité věnovat pozornost responsivemu designu a přístupnosti. Ve vašem souboru `style.css` nebo samostatném souboru `main.css` byste měli používat mediální dotazy (media queries), abyste zajistili, že webové stránky budou dobře zobrazeny na různých zařízeních.
/* 基础样式 */
body {
font-family: sans-serif;
line-height: 1.6;
}
/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
#primary-menu {
display: none;
}
/* 移动端菜单样式 */
}Testování a ladění
Po dokončení vývoje témat je testování nezbytnou částí. Je nutné provést komplexní testování v různých prostředích, prohlížečích a zařízeních.
Aktivovat režim ladění
Během vývoje je nezbytné zapnout režim ladění WordPressu. To vám pomůže rychle odhalit chyby, varování a upozornění v PHP kódu. Otevřete soubor `wp-config.php` a najděte nebo přidejte následující kód:
Doporučujeme k přečtení. Pokročilý průvodce vývojem temát pro WordPress v roce 2026: Vytvoření responzivních firemních webových stránek od nuly。
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全Thematic unit testing
Doporučujeme použít oficiální datové sady pro jednotkové testy temat WordPressu k komplexnímu testování vaší tématiky. Tyto sady obsahují různé typy článků, stránek, medií, komentářů atd., což zajistí, že vaše téma správně zobrazí obsah všech typů a nebudou chybět žádné problémy se stylym nebo rozložením.
Závěr
Od vytvoření základních souborů `style.css` a `index.php` přes pochopení struktury šablon a cyklů až po registraci menu a bočních panelů a bezpečné přidávání stylových skriptů jste prošli celým procesem vytvoření základní, ale kompletní vlastní verze WordPress tématu. Pamatujte, že vývoj témat je iterativní proces – nejlepší praxí je začít s nejjednodušší verzí a postupně přidávat funkce a vylepšovat detaily. Neustálé studium šablonových značek, akčních hooků a filtrů vám umožní vytvářet silnější a flexibilnější témata.
Časté dotazy
Jaké základní znalosti jsou potřebné pro vývoj temat pro WordPress?
Potřebujete ovládat základy HTML, CSS a PHP. Určitá znalost JavaScriptu by také byla velmi užitečná, protože slouží k přidávání interaktivních funkcí. Kromě toho je nezbytné být obeznámeni se základními koncepty WordPressu, jako jsou články, stránky, kategorie, tagy, widgety a menu.
Proč se změny v mém tématu nezobrazí v backendu?
Obvykle je to způsobeno mezipamětí prohlížeče nebo mezipamětí WordPressu. Zkuste nejprve provést náhradní aktualizaci prohlížeče (Ctrl + F5 nebo Cmd + Shift + R). Pokud problém přetrvává, zkontrolujte, zda jste styly a skripty správně přidali do fronty na zpracování, a ujistěte se, že soubor `functions.php` neobsahuje žádné gramatické chyby. Ve velmi vzácných případech bude možné potřebovat smazat mezipaměť serveru nebo pluginů.
Jak zajistit, aby můj webový design („témata“) podporovalo více jazyků?
你需要做好主题的“国际化”准备。这意味着在代码中所有需要翻译的文本，都应使用翻译函数（如`__()`， `_e()`）进行包装，并为`text-domain`设置一个唯一标识（在`style.css`的头部已定义）。然后，你可以使用如Poedit这样的工具创建`.po`和`.mo`翻译文件，使你的主题能够被轻松翻译成其他语言。
Jaký je rozdíl mezi vlastními tématy (custom themes) a podtématy (subtopics)?
Vlastní téma je zcela nové téma, které bylo vyvinuto od nuly. Naopak podtémata vycházejí z existujícího “mateřského tématu” a dědí všechny jeho funkce, styly a šablony. Podtémata vám umožňují upravit nebo přidat pouze ty části, které potřebujete (obvykle styly a některé šablony), aniž byste museli měnit samotné mateřské téma. Tato metoda je bezpečnější a efektivnější při přizpůsobování nebo aktualizaci populárních témat, protože zajišťuje, že vaše změny nebudou přepsány.
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.
- Vývoj tem pro WordPress od základů po mistrovství: Kompletní průvodce vytvářením personalizovaných webů
- Vývoj WordPress témat od nuly: Vytvoření jedinečného webového rozhraní
- Průvodce vývojem tem pro WordPress: Vytvoření vlastní webové stránky od nuly
- Kompletní průvodce vývojem WordPress temat: Praktický kurz od základů až po pokročilé znalosti
- Kompletní průvodce vývojem temát pro WordPress: Vytvoření profesionálních webových šablon od nuly
Čeština