Základní koncepty vývoje temat pro WordPress
Než začnete psát kód, je zásadní pochopit základní strukturu WordPress témat. WordPress téma je v podstatě složka umístěná v adresáři `wp-content/themes/`, která obsahuje řadu souborů se specifickými názvy. Tyto soubory společně určují vzhled a funkce webové stránky. Základní systém WordPressu tyto soubory načte a kombinuje jejich obsah (jako jsou články, stránky) s stylym a strukturou daného tématu, čímž vytvoří webové stránky, které uživatelé vidí.
Jedno základní téma potřebuje alespoň dvě soubory: `index.php` a `style.css`. Soubor `index.php` je hlavní šablonový soubor tématu, zatímco soubor `style.css` nejen obsahuje CSS styly, ale také metadata o tomto tématu – jako je název tématu, autor, popis atd. – která jsou uvedena v poznámkách na začátku souboru. Toto je jediný způsob, jakým WordPress rozpoznává konkrétní téma.
Kromě základních souborů zahrnuje vývoj temat také řadu šablonových souborů, které dodržují systém “úrovní šablon”. To znamená, že WordPress automaticky vybere nejkonkrétnější šablonový soubor podle typu stránky, kterou se právě prohlíží (např. úvodní stránka, jednotlivý článek, stránka s archivem), aby ji zobrazil. Například při návštěvě konkrétního článku WordPress postupně hledá soubory `single-post-{slug}.php`, `single-post-{id}.php` a `single-post.php`, a až poté obecné soubory `singular.php` nebo `index.php`. Porozumění a využití tohoto mechanismu je klíčové pro vytvoření flexibilních a výkonných temat.
Vytvořte si svou první strukturu tématu.
Začněme vytvořením nejjednoduššího tématu, abychom se seznámili s klíčovými soubory a strukturou adresářů.
Nejprve v adresáři `wp-content/themes/` ve vaší lokální instalaci WordPress vytvořte nový složek s názvem `my-first-theme`. Poté v tomto složku vytvořte soubor `style.css` a na začátku tohoto souboru přidejte následující nutné poznámky:
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: Jedná se o jednoduchý téma určené k výuce vývoje WordPress temat.
Verze: 1.0
License: GNU General Public License v2 or later
Textový domén: my-first-theme
*/
```
Následně vytvořte soubor `index.php`. Jedná se o výchozí šablonu pro všechny stránky. Můžeme do něj nejprve napsat velmi základní HTML strukturu:
Doporučujeme k přečtení. Úvod do vývoje WordPress temat: Vytvořte si své první vlastní téma od nuly。
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><a href="/cs/</?php echo esc_url( home_url( '/' ) ); ?>"><p><strong> Název blogu: </strong><br><br><img src='images/logo.png'> <br><br><strong> Kategorie: </strong><br><br><strong></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
`the_post();`;
?>
<h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>
<div><?php the_content(); ?></div>
<?php
`endwhile;`;
else :
echo '<p>Nejsou k dispozici žádné informace.</p>';
Něco jiného;
?>
<?php wp_footer(); ?>
\n
<p></p>
```
Po dokončení těchto dvou souborů přejděte do administrace WordPress na stránku “Vzhled” -> “Témata” a měli byste vidět téma “Moje první téma”. Aktivujte ho a váš web bude nyní fungovat na tématu, které jste si sami vytvořili.
Porozumění základním šablonovým značkám
V uvedeném kódu `index.php` používáme některé “šablónové značky” z jádra WordPressu. Jedná se o PHP funkce, které slouží k výstupu dynamického obsahu. Například:
`bloginfo('name')`: Vypíše název webové stránky nastavený v sekci “Nastavení” -> “Obecné”.
`the_title()`: Vyvádí titul aktuálního článku nebo stránky v rámci smyčky.
`the_content()`: Vyvádí celý obsah aktuálního článku nebo stránky v rámci smyčky.
– `have_posts()` / `the_post()`: Slouží k ovládání hlavního cyklu, procházení příspěvků a nastavování dat aktuálního příspěvku.
`wp_head()` a `wp_footer()`: Jsou to velmi důležité háky, které umožňují jádru WordPressu, pluginům a dalším skriptům vkládat kód do hlavičky a zápatí stránky.
Rozšíření funkcí tematických nastavení a šablon
Základní témata mohou být zobrazena pouze na všech stránkách se stejným uspořádáním. Pro vytvoření profesionálnější webové stránky potřebujeme využít hierarchii šablon k vytvoření šablon pro konkrétní stránky a rozdělit společné části na modulární soubory.
Vytvoření komponent pro záhlaví a patro stránky
Oddělení částí `header` a `footer` do samostatných souborů je standardním postupem, který zvyšuje udržovatelnost kódu. Vytvořte soubory `header.php` a `footer.php`.
Přeložte soubor „index.php“ do češtiny a podrobně jej vysvětlete:<body>Všechen kód před tagem přesuňte do souboru header.php.</body>a<p></p>Veškerý kód před značkou (obvykle od…)<footer>Začněte a přesuňte se do souboru `footer.php`.
Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Od základů až po pokročilé techniky。
Poté upravte soubor `index.php` a použijte funkce `get_header()` a `get_footer()` k jejich zavedení:
PHP
<?php get_header(); ?>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
`the_post();`;
?>
<h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>
<div><?php the_content(); ?></div>
<?php
`endwhile;`;
else :
echo '<p>Nejsou k dispozici žádné informace.</p>';
Něco jiného;
?>
<?php get_footer(); ?>
```
Vytvořit další šablony stránek
Nyní můžete vytvářet šablony pro různé typy stránek. Například můžete vytvořit soubor `single.php` určený k zobrazení jediného článku. Tento soubor může být zkopírován ze souboru `index.php`, ale může být navržen podrobněji – například může obsahovat prvky jako kategorie, tagy, autor a šablony pro komentáře.
Doporučujeme k přečtení. Průvodce vývojem WordPress temat: Vytvoření vlastního tématu od nuly。
Vytvořte další soubor s názvem `page.php`, který bude sloužit k zobrazení statických stránek. Častým požadavkem je vytvoření vlastní domovské stránky – můžete tedy vytvořit soubor s názvem `front-page.php`. WordPress ho bude používat jako domovskou stránku webového stránek přednostně před soubory `home.php` nebo `index.php`.
Zavádění stylů a skriptů
正确的样式和脚本引入方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数。这确保了依赖关系管理，并避免了重复加载。
V hlavním adresáři tématu vytvořte soubor `functions.php` a přidejte následující kód pro načtení hlavního stylového souboru:
PHP
<?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(), array(), '1.0' );
// Je možné zavést Google Fonts.
wp_enqueue_style( 'my-first-theme-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap', array(), null );
// Zavádíme vlastní soubor JavaScriptu
wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
```
Zároveň můžete do tohoto souboru přidat funkci podpory různých témat, například:
PHP
// Podpora speciálních obrázků pro články
`add_theme_support('post-thumbnails');`;
// Podpora vlastního loga
`add_theme_support('custom-logo');`;
// Podpora HTML5 značek
`add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));`;
```
Personalizace a optimalizace témat
Výborné téma by mělo nejen kompletní funkce, ale mělo by být také snadno přizpůsobitelné uživateli a mít dobrou výkonnost.
Integrace s vlastními přizpůsobeními WordPressu
WordPress Customizer umožňuje uživatelům v reálném čase předvídat a upravovat vzhled témat. Pomocí souboru `functions.php` můžete snadno přidávat nové možnosti nastavení. Například můžete přidat možnost pro zadání textu autorských práv v závěrečné části stránky (footer).
PHP
function my_first_theme_customize_register( $wp_customize ) {
// Přidání sekce “Nastavení podkladu”
$wp_customize->add_section( 'my_footer_section', array(
'title' => __( '页脚设置', 'my-first-theme' ),
'priority' => 160,
) );
// Přidejte do sekce jednu nastavení.
$wp_customize->add_setting( 'footer_copyright_text', array(
'default' => '© 2026 我的网站。保留所有权利。',
'sanitize_callback' => 'sanitize_text_field',
'transport' => 'postMessage', // 支持实时预览
) );
// Přidání ovládacího prvku (vstupního pole) pro nastavení
$wp_customize->add_control( 'footer_copyright_text', array(
'label' => __( '页脚版权文本', 'my-first-theme' ),
'section' => 'my_footer_section',
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_first_theme_customize_register' );
```
Poté ve souboru `footer.php` použijte funkci `get_theme_mod()` k výstupu tohoto hodnoty:
PHP
```
Ujistěte se, že stránky jsou responsivní a mají dobrou výkonnost.
Moderní designové tématy musí být responzivní – to znamená, že se musí přizpůsobit různým velikostem obrazovek, a to především pomocí CSS mediálních dotazů. Ujistěte se, že uspořádání stránek ve vašem souboru `style.css` je schopné se přizpůsobit různým rozlišením obrazovek, a to od mobilních telefonů po velké počítače.
Pokud jde o optimalizaci výkonu, kromě komprese CSS, JS a obrázků, je třeba během vývoje tematických stránek (tém) vzít v úvahu také následující aspekty:
1. Selektivní načítání skriptů: Načítejte konkrétní JS soubory pouze na stránkách, kde jsou skutečně potřebné (např. na stránce s komentáři se načte soubor `comment-reply.js`).
2. Optimalizace obrázků: Při použití funkce `the_post_thumbnail()` a souvisejících funkcí zajistěte, aby byly generovány obrázky správných rozměrů.
3. Omezení počtu dotazů do databáze: Správně využívejte vykonné vyhledávací funkce API „Transients“ k uložení výsledků dotazů do mezipaměti, čímž se zabrání provádění zbytečných operací typu `WP_Query` v šablonách.
Závěr
Začali jste vytvořením základní složky obsahující soubory `style.css` a `index.php`, poté jste pochopili strukturu šablon, rozdělili jednotlivé komponenty šablon, přidali funkce a styly pomocí souboru `functions.php` a nakonec využili nástroje typu „customizers“ k nabídnutí uživatelům možností personalizace. Tím jste prošli celým procesem vytváření vlastního WordPress tématu. Podstatou vývoje témat je pochopení toho, jak WordPress kombinuje data se šablonami, a využití jeho rozsáhlé knihovny funkcí a systému „hooks“ k vytvoření flexibilních a efektivních webových stránek. Po zvládnutí těchto základů můžete pokračovat ve vývoji pokročilejších témat – např. vytvářet vlastní typy článků, vyvíjet funkce pro příslušenství („widgets“) nebo vytvářet témata podporující editory typu Gutenberg Block Editor. Praxe je nejlepším způsobem učení; díky neustálým pokusům a úpravám budete schopni vytvořit jedinečné WordPress téma.
Časté dotazy
Jaké jsou předpokládané znalosti potřebné k vývoji témat pro WordPress?
Potřebujete mít základy HTML a CSS, které jsou základem pro vytváření struktury a vzhledu webových stránek. Kromě toho je nutné ovládat základní syntaxi PHP, protože soubory temát WordPressu jsou převážně složeny z PHP kódu, který slouží k dynamickému získávání a zobrazování dat. Základní znalosti JavaScriptu mohou pomoci při přidávání interaktivních funkcí, ale nejsou nutné pro začátek.
Můžu si vyvíjet vlastní tematické nastavení („temas“) lokálně? Jaké prostředí je k tomu potřeba?
Důrazně doporučujeme provádět vývoj temat (témů) lokálně. Budete potřebovat nastavit lokální serverové prostředí. Nejjednodušší způsob je použít integrované balíčky, jako jsou XAMPP, MAMP (pro Mac) nebo Local by Flywheel. Tyto balíčky nainstalují současně servery Apache/Nginx, PHP a databázi MySQL, a poté stačí nainstalovat WordPress, abyste mohli začít s lokálním vývojem. Není potřeba žádné připojení k síti, což je rychlejší a bezpečnější.
Jaký je rozdíl mezi souborem `functions.php` v rámci tématu a pluginy?
Soubor `functions.php` se obvykle používá k přidávání nebo úpravě funkcí, které jsou úzce spojeny s vzhledem a funkcemi aktuálního tématu. Při změně tématu tyto funkce obvykle přestanou fungovat. Pluginy naopak slouží k přidávání univerzálních funkcí, které nezávisí na konkrétním tématu (např. kontaktní formuláře, optimalizace pro vyhledávače – SEO). Pokud je nutné, aby některá funkce zůstala funkční i při změně tématu, měla by být vyvinuta jako plugin. V praxi může být soubor `functions.php` u velkých témat velmi rozsáhlý.
Jak zajistit, aby můj web nebo aplikace podporovaly více jazyků ( internacionalizaci)?
你需要使用WordPress的国际化（i18n）功能。在代码中，所有需要翻译的文本字符串都应使用特定的函数进行包装，例如`__('文本', 'my-text-domain')`或`_e('文本', 'my-text-domain')`。然后在`functions.php`中使用`load_theme_textdomain()`函数来设置翻译文件的加载路径。最后，使用如Poedit这样的工具创建`.pot`模板文件，并让翻译人员生成不同语言的`.po`和`.mo`文件。
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 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
- Praktické vývoj tem pro WordPress: Vytvoření responzivních firemních webových stránek od nuly
Čeština