Nastavení vývojového prostředí a inicializace projektu
Než začnete s vývojem temat pro WordPress, je zásadní vytvořit efektivní a standardní lokální vývojové prostředí. To nejenže usnadní váš vývojový proces, ale také pomůže efektivně předcházet možným problémům s kompatibilitou a nasazením v budoucnu.
Konfigurace prostředí lokálního serveru
Doporučujeme výrazně používat lokální serverové balíčky, jako jsou Local by Flywheel, XAMPP, MAMP nebo Laragon. Tyto nástroje integrují Apache/Nginx, MySQL a PHP a jsou optimalizovány pro použití s WordPressem. Například Local by Flywheel umožňuje jednoduchým kliknutím vytvořit webovou stránku na bázi WordPressu, spravovat databázi nebo měnit verze PHP, což výrazně zjednodušuje proces konfigurace.
Po nastavení lokálního prostředí je třeba stáhnout nejnovější verzi WordPressu a nainstalovat ji na lokální server. Tento proces je stejný jako při online instalaci; liší se pouze tím, že adresa pro přístup je lokální (např. `http://mysite.local`). Při instalaci si pamatujte nastavené název databáze, uživatelské jméno a heslo, které jsou klíčové pro připojení k databázi.
Plánování struktury tematického projektu
Jasná a standardní struktura tématu je základem pro veškerou následující vývojovou práci. V adresáři `wp-content/themes/` v WordPressu vytvořte novou složku pro vaše téma, například `my-first-theme`. Uvnitř této složky inicializujeme nejzákladnější soubory.
Nejprve vytvořte dvě nezbytné soubory: `index.php` a `style.css`. Soubor `style.css` není pouze šablonou pro formátování obsahu, ale také slouží jako “identifikátor” vašeho tématu pro WordPress. Na začátku souboru musí být obsažen formátovaný komentář, který informuje WordPress o vašem tématu. Zde je základní příklad:
css
/*
Název tématu: Moje první téma
URI tématu: https://example.com/my-first-theme/
Autor: Tvé jméno
Autorův URI: https://example.com/
Popis: Upravená tematika WordPress určená k výuce a procvičování.
Verze: 1.0.0
Licence: GPL verze 2 nebo novější
Textový domén: my-first-theme
Tagy: Vlastní nastavení, Cvičení, Blog
*/
```
`index.php` je výchozí šablonový soubor tématu, takže můžeme do něj dočasně umístit jednoduchou HTML strukturu pro testování:
PHP
<!DOCTYPE html>
<html no numeric noise key 1000>
<head>
<meta charset="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1000>
<h1>Ahoj, světe temat pro WordPress!</h1>
<?php wp_footer(); ?>
\n
<p></p>
```
Doporučujeme k přečtení. Úvod do vývoje témat pro WordPress: Vytvořte si své první vlastní téma od nuly。
Po dokončení těchto dvou souborů budeš moci svůj tematikový design vidět a aktivovat v administraci WordPress v sekci “Vzhled” -> “Témata”.
Kerní šablonové soubory a hierarchická struktura
WordPress využívá hierarchii šablon (Template Hierarchy) k určení toho, jak se různé typy obsahu zobrazují. Porozumění tomuto mechanismu je klíčové pro vývoj flexibilních temat.
Rozpis úrovní šablon (Template Level Parsing)
Řízení úrovní šablon v WordPressu funguje na principu rozhodovacího stromu. Při zobrazení stránky začne WordPress hledat od nejkonkrétnějšího šablonového souboru. Pokud tento soubor neexistuje, pokračuje ve hledání v obecnějších šablonách, a to až do doby, než najde odpovídající šablonu. Pokud žádná odpovídající šablona není nalezena, WordPress se vrátí ke základní šabloně `index.php`.
Například, když uživatel navštíví jednotlivý článek (Single Post), WordPress bude hledat soubory v následujícím pořadí:
1. `single-{post-type}-{slug}.php` (například: `single-book-harry-potter.php`)
2. Soubor `single-{post-type}.php` (např.: `single-book.php`)
### `single.php`
### `singular.php`
### `index.php`
Podobně je pro domovskou stránku obvyklé pořadí vyhledávání: `front-page.php` -> `home.php` -> `index.php`. Znalost tohoto hierarchického vztahu znamená, že můžete vytvořit pro každou konkrétní část webové stránky velmi přizpůsobený vzhled – například navrhnout jedinečný layout pro články určité kategorie, stránku určitého produktu nebo stránku určitého autora.
Podrobný popis klíčových šablonových souborů
Kromě `index.php` jsou zde některé z klíčových šablonových souborů a jejich funkce:
`header.php`: hlavní část webové stránky, která obvykle obsahuje značky `` a ``, logo webu a hlavní navigaci. Do stránky se vkládá pomocí funkce `get_header()`.
– `footer.php`: Spodní část webové stránky, která obvykle obsahuje informace o autorských právech, pomocné odkazy a skripty. Použijte funkci `get_footer()` k jejímu načtení.
– `sidebar.php`: Oblast bočního panelu, zavádí se pomocí funkce `get_sidebar()`.
– `functions.php`: “Mozek” tématu, sloužící k uložení všech funkcí, registrací funkcí, načítání skriptů a stylů, stejně jako k definování funkcí podporovaných daným tematem.
– `page.php`: Slouží k zobrazení statických stránek.
– `single.php`: Slouží k zobrazení jediného článku.
– `archive.php`: Slouží k zobrazení seznamu článků (archivní stránky podle kategorie, tagu, autora, data atd.).
`404.php`: Přizpůsobená chybová stránka “Stránka nebyla nalezena”.
– `style.css`: Hlavní soubor se styly, který zároveň obsahuje informace o tématu (tj. designových prvích daného projektu).
Tím, že tyto soubory rozdělíte na správné části a poté je dynamicky spojíte pomocí šablonovacích tagů WordPressu (jako `get_header()`, `the_title()`, `the_content()`), můžete vytvořit temu, která je strukturovaná a snadno udržovatelná.
PHP šablonovací značky a funkce temat (templates and themes)
WordPress poskytuje stovky vestavěných šablonových značek (Template Tags), které jsou PHP funkce určené k načítání a výstupu obsahu z databáze. Správné využití těchto značek je klíčem k tomu, aby váš temát (theme) fungoval co nejlépe.
Doporučujeme k přečtení. Průvodce vývojem tem pro WordPress: Jak si od nuly vytvořit vlastní temu。
Tagy pro výstup běžně používaného obsahu
Uvnitř i vně cyklu (The Loop) plní šablonské značky (template tags) různé funkce. Cyklus je PHP struktura používaná v WordPressu k zpracování zobrazení více článků. Níže jsou uvedeny některé z nejčastěji používaných základních šablonských značek:
V souboru `header.php` nebo v globálním rozsahu:
- ``： 输出网站标题。
- ``： 输出主题主样式表的 URL。
``: Důležitý hook, kde WordPress jádro a pluginy vypisují potřebný kód (jako skripty, styly, metatagy), který musí být umístěn před koncem .
在循环内部（`if ( have_posts() ) : while ( have_posts() ) : the_post();` ... `endwhile; endif;`）：
- ``： 输出当前文章的标题。
- ``： 输出当前文章的完整内容。
- ``： 输出当前文章的摘要。
- ``： 输出当前文章的永久链接地址。
- ``： 输出当前文章的特色图片。
- ``： 输出文章作者名。
- ``： 输出文章的分类，以逗号分隔。
Funkce pro rozšíření funkcionalit: functions.php
Soubor `functions.php` slouží k rozšíření funkcionalit tématu. Není nutný, ale téměř žádné téma jej neobsahuje. Pomocí něj můžete bezpečně upravovat výchozí chování WordPressu, aniž byste museli měnit samotné základní soubory systému.
Například: Přidání podpory pro navigační menu k danému tématu.
PHP
function my_first_theme_setup() {
// Registrování pozice hlavního navigačního menu
`register_navMenus(array(...));`
'primary' => __( '主导航菜单'， 'my-first-theme' ),
) );
Doporučujeme k přečtení. Úvod do vývoje WordPress temat: Vytvořte si své první vlastní téma od nuly。
// Přidání podpory pro vložení speciálních obrázků do tématu
`add_theme_support('post-thumbnails');`;
// Přidání odkazů na RSS feed článků a komentářů
`add_theme_support('automatic-feed-links');`;
// Přidání podpory pro styly HTML5 značek (jako jsou vyhledávací formuláře, seznamy komentářů atd.)
`add_theme_support('html5', array('search-form', 'comment-list', 'gallery', 'caption'));`;
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
```
Jako další příklad: Bezpečné načítání externích šablon stylů a souborů JavaScript:
PHP
function my_first_theme_scripts() {
// Zavádíme hlavní stylový soubor pro dané téma
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// Zavádíme vlastní šablonu stylů
wp_enqueue_style( 'my-first-theme-custom', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );
// Zavádíme skript (např. určený pro interaktivní funkce)
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
```
Tématický editor a optimalizace front-endu
Moderní témata pro WordPress se nezaměřují pouze na vzhled, ale také na uživatelský zážitek a možnosti přizpůsobení. Nástroj WordPress Customizer umožňuje nastavování témat v reálném čase s možností okamžitého prohlížení výsledků.
Integrace s WordPress Customizerem
Prostřednictvím přizpůsobovacího nástroje mohou uživatelé v reálném čase měnit barvy, ovládat rozložení stránek, nahrávat logo a podobně. Pro přidání těchto nastavení a ovládacích prvků do vašeho tématu budete potřebovat objekt `WP_Customize_Manager`.
Níže je jednoduchý příklad toho, jak do přizpůsobovacího nástroje přidat možnost výběru barvy určenou k změně barvy nadpisu webové stránky:
PHP
function my_first_theme_customize_register( $wp_customize ) {
// Přidání jednoho nastavení
$wp_customize->add_setting( 'header_title_color', array(
'default' => '#333333',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage', // 允许通过JS实时预览
) );
// Přidáme ovládací prvek, který bude propojen s výše uvedenými nastaveními a zobrazí se v panelu přizpůsobení.
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize， 'header_title_color', array(
'label' => __( '网站标题颜色', 'my-first-theme' ),
'section' => 'colors', // 放在“颜色”区域
'settings' => 'header_title_color',
) ) );
}
add_action( 'customize_register', 'my_first_theme_customize_register' );
```
Poté musíte výsledné hodnoty vložit do tagu na webové stránce:
PHP
function my_first_theme_customize_css() {
?>
<style type="text/css">
.site-title a { color: ; }
</style>
<?php
}
add_action( 'wp_head', 'my_first_theme_customize_css' );
```
Reaktivní design a výkon
Profesionální webová stránka musí fungovat dobře na všech zařízeních. To vyžaduje, aby byl váš design responzivní – tedy aby se přizpůsoboval různým velikostem obrazovek. Pro úpravu rozložení stránky podle velikosti obrazovky použijte v souboru `style.css` media queries.
Zároveň je velmi důležitá výkonnost front-end stránky. Kromě správného spravování zdrojových souborů pomocí funkce `wp_enqueue_script/style` je také nutné zajistit, aby:
1. Optimalizace obrázků: Vytvořte různé velikosti speciálních obrázků pro dané téma a použijte vlastnost `srcset`, aby prohlížeč mohl vybrat vhodnou velikost obrázku.
2. Asynchronní načítání skriptů: Pro nekritické skripty lze přidat vlastnosti `async` nebo `defer`.
3. Minimalizace CSS/JS kódů: V produkčním prostředí by měly být používány komprimované soubory.
4. Caching: Nastavte vhodné HTTP cache hlavičky pomocí souboru `functions.php`, nebo použijte příslušné pluginy.
## Shrnutí
Vývoj WordPress tématu od nuly je systématický proces, který vyžaduje, aby měl vývojář základní znalosti HTML, CSS a PHP, stejně jako hluboké porozumění základním principům fungování WordPressu. Celý proces začíná standardizovaným vývojovým prostředím a strukturou projektu. Klíčovým aspektem je ovládnutí hierarchie šablon a použití PHP šablonovacích značek, čímž se tématu poskytne vysoká rozšiřitelnost prostřednictvím souboru `functions.php`. Nakonec je důležité integrovat personalizéry, které poskytují uživatelům pohodlné možnosti přizpůsobení, a využít responzivní design a technologie optimalizace front-endu k zajištění moderního vzhledu a vysokého výkonu webové stránky. Dodržováním tohoto plánu budete schopni vytvořit WordPress téma s jasnou strukturou, profesionálními funkcemi a vynikajícím uživatelským zážitkem.
Časté dotazy
Jaké jsou předpokládané znalosti potřebné pro vývoj temát pro WordPress?
Pro vývoj tem pro WordPress je potřeba mít solidní znalosti HTML a CSS, které slouží k vytváření a zdobení struktur stránek. Zároveň je nezbytné ovládat základní syntaxi PHP, protože soubory šablon tem jsou v podstatě PHP skripty. Určité znalosti JavaScriptu pomohou při implementaci interaktivních funkcí. Nakonec je základem práce při vývoji pochopení základních konceptů WordPressu, jako jsou články, stránky, kategorie, štítky a cykly.
Co je to dceřiná tema (Child Theme)? Proč se doporučuje její použití?
Podtémata jsou témata vytvořená na základě jiného tématu (nazývaného hlavním tématem). Dědí všechny funkce a styly hlavního tématu, ale umožňují vám bezpečně přepsat jeho soubory nebo přidat nové funkce. Hlavní důvody, proč se doporučuje používat podtémata, jsou udržitelnost a bezpečnost. Když je hlavní téma aktualizováno, vaše vlastní úpravy (v podtématu) nebudou přepsány a opravy chyb a bezpečnostní aktualizace hlavního tématu se mohou bez problémů aplikovat.
Při vývoji komerčních aplikací nebo produktů je třeba zvážit několik zvláštních aspektů:
Při vývoji komerčních temát je kromě technických požadavků nutné zvážit také komerční a právní aspekty. Z hlediska techniky musí kód dodržovat standardy kódování WordPressu a osvědčené postupy, aby byl bezpečný, efektivní a kompatibilní s běžnými doplňky. Z hlediska funkcí by měly být poskytnuty podrobné dokumentace a pohodlné panely nastavení (např. prostřednictvím personalizátorů). Z právního hlediska temata musí být licencována pod licencí GPL. Z komerčního hlediska je třeba naplánovat strategii cenování, kanály prodeje a systém podpory zákazníků, a také sledovat tržní trendy a zpětnou vazbu uživatelů.
Jak otestovat a zveřejnit vlastně vyvinutý WordPress téma?
Před vydáním je nutné provést přísné testy. Funkční testy zajišťují, že všechny funkce fungují správně. Testy kompatibility zahrnují provoz aplikace v různých verzích PHP a v běžném prostředí doplňků. Testy reaktivnosti ověřují, že stránky správně vykazují obsah na různých velikostech obrazovek. Bezpečnostní audity vyhledávají možné chyby. Pro komplexní vizuální testy lze použít data z testovacích sad temat. Při vydávání je třeba dodržovat přísné pokyny WordPress pro přijímání temat do oficiálního katalogu; pokud chcete temat sami prodávat, je nutné poskytnout kompletní instalační balíček a návodové dokumenty.
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 nezbytných tipů: Vytvořte profesionální a efektivní WordPress téma
- 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
Čeština