Vytvoření profesionálního WordPress tématu není pouhým vytvořením pěkných HTML a CSS souborů. Jedná se o strukturovaný vývojový proces, který zahrnuje pochopení základní hierarchie souborů WordPressu, PHP šablonovacích značek, funkcí témat a osvědčených postupů. Ať už jste front-end vývojář, který se chce do WordPressu hlouběji ponořit, nebo nadšenec, který chce vytvořit své první téma, tento průvodce vám poskytne jasný postup.
Vytvoření vývojového prostředí a struktury témat
Než začnete psát první řádek kódu, správné vývojové prostředí je základem pro úspěch. To zahrnuje lokální serverové prostředí (např. XAMPP, MAMP, Local by Flywheel nebo Laragon), editory kódu (např. VS Code, PhpStorm) a vývojářské nástroje pro prohlížeče.
Vytvoření základního adresáře a souborů pro tematické projekty
Nejzjednodušenější WordPress téma vyžaduje alespoň dvě soubory.style.css Soubor nejenže poskytuje styly, ale také blok komentářů umístěný na jeho vrcholu slouží jako “občanský průkaz” tématu – WordPress pomocí něj identifikuje konkrétní téma. Následuje… index.phpJe to výchozí šablona pro všechny stránky.
Doporučujeme k přečtení. Přizpůsobené WordPress téma: Kompletní návod, jak vytvořit jedinečný vzhled webové stránky od nuly.。
Nejprve, ve vaší lokální instalaci WordPressu… wp-content/themes/ V adresáři vytvořte nový složek, například… my-professional-themePoté vytvořte v této složce nový soubor. style.css Soubor a zapište následující informace o hlavičce komentáře:
/*
Theme Name: My Professional Theme
Theme URI: https://yourwebsite.com/themes/my-professional-theme
Author: Your Name
Author URI: https://yourwebsite.com
Description: 一个从零开始构建的专业级 WordPress 主题示例。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-professional-theme
*/Dále vytvořte index.php Soubor by měl prozatím obsahovat pouze nejzákladnější strukturu HTML5, spolu s voláními na špičkové části („header“), obsah a závěrečné části („footer“) WordPressu.
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1003>
<?php wp_body_open(); ?>
<header>
<h1>Moje odborná téma</h1>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
the_content();
endwhile;
endif;
?>
</main>
<footer>
<p>© Podstránka s informacemi o webu</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>V tuto chvíli již můžete přihlásit do administrace WordPress a v sekci “Vzhled” -> “Témata” vidět a aktivovat své téma. I když je jednoduché, základní struktura je již vytvořena.
Hlavní šablonový soubor a hierarchie šablon
WordPress využívá inteligentní systém nazývaný “systém úrovní šablon” (Template Hierarchy), který rozhoduje, který soubor šablony má být načten pro konkrétní stránku. Porozumění a využití tohoto systému je klíčové pro vytvoření plně funkčních temát.
Porozumění typům stránek a odpovídajícím šablonám
Když návštěvník prochází webovými stránkami, WordPress automaticky hledá nejvhodnější šablonový soubor na základě typu obsahu, který si vybral (např. článek, stránka, kategorie). Například při prohlížení jednotlivého článku WordPress prohledává šablony v následujícím pořadí:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> Nakonec se vrátíme na index.php。
Doporučujeme k přečtení. Vytvoření kvalitního WordPress tématu: Průvodce celým procesem od návrhu, vývoje až po nasazení。
Potřebujete vytvořit speciální šablonové soubory pro různé typy hlavních stránek. Měli byste vytvořit alespoň následující:
1. header.phpV horní části webové stránky se obvykle nachází identita webové stránky a hlavní navigace.
2. footer.phpPodstránka webu v dolní části obsahuje informace o autorských právech a pomocné navigační prvky.
3. functions.php“Mozek” tématu slouží k přidávání funkcí, registračního menu, bočního panelu a dalších prvků.
4. page.phpSlouží k zobrazení statických stránek.
5. single.phpSlouží k zobrazení jediného článku.
6. archive.phpSlouží k zobrazení seznamu článků (např. podle kategorie, tagů, archivu článků autora).
Po vytvoření těchto souborů budete potřebovat provést jejich rekonstrukci. index.phpPoužijte šablonové značky WordPress k zavedení modulárních částí:
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 对于文章列表，通常使用 get_template_part 引入内容模板
get_template_part( 'template-parts/content', get_post_format() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Využitím šablonových komponent k dosažení modularity
Pro lepší udržovatelnost by měly být bloky kódu, které lze opakovaně použít (jako jsou shrnutí článků nebo informace o tom, že obsah není k dispozici), extrahovány do “šablonových komponent”. Vytvořte je v hlavním adresáři tématu. template-parts Složku a v ní vytvořte například… content.php Soubor:
<article id="post-<?php the_ID(); ?>" no numeric noise key 1002>
<header class="entry-header">
<?php the_title( '<h2 class="entry-title"><a href="/cs/' . esc_url( get_permalink() ) . '/" rel="bookmark">', '</a></h2>' ); ?>
</header>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
</article>A pak v archive.php 或 index.php Použijte to v čínštině. get_template_part( 'template-parts/content' ); Pojďte to spustit.
Vylepšení funkcí tématu prostřednictvím souboru Functions.php
functions.php Soubor představuje centrum pro správu funkcí vašeho tématu. Zde můžete přidat podporu pro různá témata, registrovat navigační menu, definovat postranní panely, a také načítat styly a skripty.
Přidání podpory temat a registračního menu
Nejprve prostřednictvím… add_theme_support Funkce slouží k deklaraci toho, které funkce WordPressu vaše téma podporuje. Jedná se o standardní postup při vývoji moderních témat.
Doporučujeme k přečtení. Kompletní průvodce vývojem témat WordPressu: od začátků až po pokročilé vytváření vlastních témat.。
<?php
function my_theme_setup() {
// 让 WordPress 管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像
add_theme_support( 'post-thumbnails' );
// 支持 HTML5 的标记（用于评论列表、搜索表单等）
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 支持选择性刷新小工具（用于定制器）
add_theme_support( 'customize-selective-refresh-widgets' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );Následně použijte… register_nav_menus Funkce slouží k registraci umístění příslušných položek v nabídce tématu.
function my_theme_menus() {
register_nav_menus(
array(
'primary' => __( '主导航菜单', 'my-professional-theme' ),
'footer' => __( '页脚菜单', 'my-professional-theme' ),
)
);
}
add_action( 'init', 'my_theme_menus' );Po registraci budete moci… header.php Použijte to v čínštině. wp_nav_menu( array( 'theme_location' => 'primary' ) ); Zobrazí hlavní navigaci.
Oblast pro registraci doplňkových nástrojů a načítání zdrojových souborů
Oblast příslušenství v postranní liště nebo na spodním panelu stránky je implementována pomocí funkce “Widget Area”. register_sidebar Funkce je registrována.
function my_theme_widgets_init() {
register_sidebar(
array(
'name' => __( '主侧边栏', 'my-professional-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具以显示在文章和页面侧边。', 'my-professional-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_theme_widgets_init() {
register_sidebars( array(
'sidebars' => array(
'name' => 'Sidebar',
'id' => 'sidebars',
'description' => 'Sidebar pro můj motiv',
)
) );
add_action( 'widgets_init', 'my_theme_widgets_init' );
};Na závěr je nutné použít… wp_enqueue_style 和 wp_enqueue_script Je důležité správně načíst soubory se styly a JavaScriptem příslušného tématu. Toto je způsob doporučený WordPressem, který pomáhá předcházet problémům s duplicitním načítáním a závislostmi mezi jednotlivými částmi webové stránky.
function my_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载主 JavaScript 文件
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
// 为评论回复功能添加脚本（仅在需要时加载）
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );Návrh stylů, responzivita a optimalizace výkonu
Profesionální téma musí nejenom obsahovat kompletní funkce, ale také být esteticky příjemné, kompatibilní s různými zařízeními a vykazovat dobrou výkonnost.
Použití moderního CSS a strategií pro responzivní design
从 style.css Začněte používat vlastní atributy (proměnné) v CSS k definování palety barev, sady písem a poměrů mezer tematického designu, abyste zvýšili udržovatelnost kódu. Zvolte strategii responzivního designu s důrazem na mobilní zařízení a využívejte mediální dotazy k přizpůsobení vzhledu stránek tabletům a počítačům.
:root {
--color-primary: #0073aa;
--color-text: #333;
--font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--container-width: 1200px;
}
body {
font-family: var(--font-main);
color: var(--color-text);
line-height: 1.6;
}
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 1rem;
}
/* 移动优先：基础样式针对手机 */
.site-header {
padding: 1rem 0;
}
/* 平板设备及以上 */
@media (min-width: 768px) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
}Implementace klíčových optimalizací výkonu
Výkon je klíčovým faktorem pro uživatelský zážitek. Ujistěte se, že všechny obrázky mají správné rozměry, a používejte… srcset Atributy (v WordPressu) the_post_thumbnail Podporováno výchozím nastavením) pro zajištění responzivních obrázků. Pro JavaScript soubory načtené tematikou se používá… async 或 defer Atributy (prostřednictvím) wp_script_add_data Přidejte to, abyste zabránili zpoždění v renderování stránky.
Zvažte vložení klíčových CSS prvků přímo do kódu a zpoždění načítání neklíčových zdrojů. Ačkoli tyto pokročilé optimalizace mohou vyžadovat použití dalších nástrojů, základem zůstává udržování kódu stručného a vyhýbání se zbytečným dotazům do databáze (např. používání těchto dotazů mimo cykly). wp_queryA využívejte také mehanizmy cacheování WordPressu.
Závěr
Vytvoření profesionálního WordPress tématu je systématický proces, který vyžaduje, aby vývojáři kombinovali své znalosti front-end technologií (HTML, CSS, JavaScript) s pochopením základních principů fungování WordPressu (struktura šablon, hooky, cykly atd.). Začíná se sestavením nejjednodušší struktury a postupně se přidávají funkce a prvky, a to prostřednictvím vytváření šablonových souborů a dalších komponent. functions.php Funkce injekce kódu („code injection“) jsou nakonec navrženy a optimalizovány; tento proces vám umožní hluboce pochopit, jak WordPress funguje. Dodržování standardů kódu, uplatňování modulárního přístupu k programování a neustálé zohledňování zkušeností koncových uživatelů a návštěvníků webových stránek jsou klíčovými faktory při vytváření úspěšných, udržovatelných a populárních temát („themes“) pro WordPress.
Časté dotazy
Je nutné být zdatným programátorem v PHP, abyste mohli vytvářet tematiky pro WordPress?
Ano, pevné základy v PHP jsou nezbytné. Sám WordPress je vybudován na PHP a šablony temat, logika funkcí a interakce s databází silně závisí na PHP. Musíte porozumět podmínkovým výrazům, cyklům, funkcím, stejně jako mnoha vestavěným šablonovým značkám a funkcím WordPressu.
Jak zajistit, aby můj téma splňovalo oficiální standardy WordPressu?
Musíte dodržovat „Průvodce vývojem WordPress temát“ a „Kodovací standardy WordPress“. Klíčové body zahrnují: správné použití šablonovacích značek a hooků, internacionalizaci všech textových částí (použitím nástrojů určených k překladu). __() 和 _e() Zajišťovat, aby funkce fungovaly správně, aby kód na straně klienta byl efektivní a sémanticky správně strukturovaný, poskytovat potřebné šablony a ujistit se, že téma funguje správně při aktivaci i deaktivaci různých funkcí WordPressu (např. editoru Gutenberg). Před odesláním do oficiálního repozitáře musí být téma přesně ověřeno pomocí pluginu Theme Check.
Jaký je rozdíl mezi funkcemi souboru functions.php v rámci daného tématu a funkcemi pluginů?
functions.php Funkce související s vzhledem a prezentací tématu jsou úzce propojeny s prvky jako registrační menu, definování rozložení stránek nebo přidávání stylů specifických pro dané téma. Po změně tématu tyto funkce obvykle přestanou fungovat. Naopak funkce poskytované pluginy se zaměřují spíše na “obsah” a “chování” webové stránky – např. kontaktní formuláře, optimalizace pro vyhledávače (SEO), funkce pro e-shop atd. Ty by měly být nezávislé na zvoleném tématu a měly by zůstat dostupné i po změně tématu. Dobrým pravidlem je: Pokud je funkce určena výhradně k vizuálnímu zobrazení, měla by být umístěna do samotného tématu; pokud je funkce součástí základního obsahu nebo nástroje, měla by být implementována jako plugin.
Proč se po aktivaci mého tématu uspořádání webové stránky změnilo?
To je obvykle způsobeno několika důvody: Za prvé, zkontrolujte, zda v konzoli prohlížeče nejsou chyby týkající se CSS nebo JavaScriptu. Za druhé, ujistěte se, že… header.php 和 footer.php Bylo správně voláno v… wp_head() 和 wp_footer()Tyto dva „háčky“ (hooky) jsou zásadní pro jádro WordPressu a pro skripty určené k přidávání stylů do pluginů. Nakonec zkontrolujte, zda jsou správně nastaveny. functions.php Byly správně odstraněny výchozí nástroje nebo menu, ale nebyly registrovány žádné náhradní prvky, což vedlo k chybějící struktuře.
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.
- Podrobné pochopení frameworku Tailwind CSS: Od praktických nástrojů po moderní postupy vývoje front-end aplikací
- Ultimátní průvodce výstavbou webových stránek pro rok 2026: Kompletní postup vytvoření vysokokvalitních webových stránek od nuly
- Od nuly ke jedničce: Podrobný průvodce celým procesem výstavby webových stránek a výběrem technologií
- Základní koncepty a praktické vzory Tailwind CSS: Od atomárních tříd po responsivní design
- Ultimátní průvodce výstavbou webových stránek: Kompletní postup od návrhu po spuštění a analýza klíčových technologií
Čeština