Hlavní stránka/Znalosti/WordPress/Podrobnosti o obsahu

Úvod do vývoje témat pro WordPress: Vytvořte si své první vlastní téma od nuly

Čtení za 3 minuty.
2026-03-10
2026-06-03
2,515
Získávám provize, když nakupujete prostřednictvím níže uvedených odkazů, aniž by vás to něco stálo navíc.

Pro každého vývojáře, který chce hluboce přizpůsobit vzhled a funkce webové stránky, je naučení se vývoji temát pro WordPress velmi cennou dovedností. Na rozdíl od použití hotových temát znamená vytváření vlastních temát plnou kontrolu nad stránkou – můžete tak vytvořit jedinečný, vysoce výkonný web, který splňuje konkrétní požadavky. Tento článek vás provede základními kroky při vytváření vaší první vlastní WordPress tématy, od nastavení prostředí až po vytvoření základních šablonových souborů.

Příprava vývojového prostředí a nástrojů

Než začnete psát kód, potřebujete vhodné lokální vývojové prostředí. To vám umožní provádět testování a ladění bez ovlivnění webové stránky online.

Konfigurace prostředí lokálního serveru

Doporučujeme použít integrované balíčky softwaru pro lokální servery, jako jsou XAMPP, MAMP (pro Mac) nebo Local by Flywheel. Tyto nástroje jedním kliknutím nainstalují server Apache, databázi MySQL a PHP, čímž eliminují nutnost komplikovaného konfigurování. Například po instalaci XAMPP stačí spustit služby Apache a MySQL a máte připravené lokální serverové prostředí.

Výběr editoru kódu

Výkonný editor kódu je nezbytným nástrojem pro efektivní vývoj. Visual Studio Code (VS Code) je v současnosti velmi populární volbou – je zdarma, nenáročný na prostředníky a nabízí širokou škálu rozšíření (plug-inů), jako je PHP Intelephense (pro inteligentní výpomoc při práci s PHP kódem), WordPress Snippet (nabídka předpřipravených kusů kódu) a Live Server (možnost reálného přehledu výsledků práce). Tyto funkce výrazně zvyšují efektivitu vývoje.

Instalace základních souborů WordPressu

V kořenovém adresáři svého lokálního serveru (např. složce `htdocs` v XAMPP) vytvořte novou složku pro projekt s názvem `my-first-theme`. Poté navštivte oficiální webové stránky WordPress.org, stáhněte nejnovější komprimovaný balíček WordPress, rozbalte ho a vložte všechny soubory do složky `my-first-theme`. Následně přes prohlížeč navštivte adresu `http://localhost/my-first-theme` a postupujte podle známých pokynů k “pětiminutové instalaci” WordPress. Zapamatujte si nastavené název databáze, uživatelské jméno a heslo, které budete potřebovat při následném připojení k databázi.

UltaHost – hosting služby pro weby postavené na platformě WordPress
Záruka vrácení peněz do 30 dnů, neomezený šířka pásma a databáze, bezplatná ochrana proti DDoS útokům. Sleva 501 TP4T při nákupu na 3 roky.
LOGO UltaHostu přístupová stránka

Základní struktura a soubory pro vytvoření tématu

WordPress téma je v podstatě složka umístěná v adresáři `wp-content/themes/`, která obsahuje sadu PHP šablon, stylových souborů a skriptů s konkrétními funkcemi.

Tématické složky a šablony

Nejprve přejděte do adresáře `wp-content/themes/` ve vaší lokální instalaci WordPressu a vytvořte nový složek s názvem vašeho tématu, např. `mycustomtheme`. Prvním a zároveň nejdůležitějším souborem, který v této složce musíte vytvořit, je `style.css`. Záhlaví tohoto souboru obsahuje poznámky, které nejenom slouží k definování informací o tomto tématu, ale jsou také klíčové pro to, aby WordPress rozpoznal, o jakém tématu jde.

Doporučujeme k přečtení. Průvodce vývojem tem pro WordPress: Jak si od nuly vytvořit vlastní temu。

css
/*
Název tématu: Moje vlastní téma
URI tématu: https://example.com/mycustomtheme
Autor: Vaše jméno
Autorův URI: https://example.com
Popis: Toto je můj první vlastní WordPress téma, které jsem vytvořil za účelem učení se programování a vývoje.
Verze: 1.0.0
Licence: GPL verze 2 nebo novější
Textový domén: mycustomtheme
*/
```

Hlavní šablony: index.php a functions.php

Vytvořte soubor `index.php`. Jedná se o výchozí a záložní šablonu tématu; pokud neexistují žádné konkrétnější šablony, WordPress ji použije k zobrazení stránek. Zpočátku může být tato šablona velmi jednoduchá.

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();`;
// Prozatím jednoduše vypíšeme nadpis článku
Název_titulu( '<h2>', '</h2>' );
$content();
`endwhile;`;
else :
echo '<p>Zatím nejsou žádné články k dispozici.</p>';
Něco jiného;
?>


<p>©</p>

<?php wp_footer(); ?>
\n
<p></p>
```

Následně vytvořte soubor `functions.php`. Jedná se o “motor” vašeho tématu, který slouží k přidávání funkcí, aktivaci funkcí (jako jsou oříznuté obrázky článků) a načítání stylů a skriptů v pořadí.

PHP
<?php
// Aktivace funkce pro využití speciálních obrázků u článků
`add_theme_support('post-thumbnails');`;

Shared hosting na hosting.com
Vysoký výkon, vybavený procesorem AMD EPYC, úložištěm NVMe SSD a LiteSpeedem, nepřetržitá interní podpora odborníků 24 hodin denně a 7 dní v týdnu, pokročilá bezpečnostní opatření včetně SSL, ochrany proti útokům hrubou silou, malwaru a DDoS, úspora až 731 TB/měsíc.
LOGO hosting.com přístupová stránka

// Přidání podpory pro menu
`add_theme_support('menus');`;

// Registrování pozice navigačního položku
`register_navMenus(array(...));`
'primary' => __( '主导航菜单', 'mycustomtheme' ),
) );

// Správné načtení hlavního stylového souboru
function mycustomtheme_enqueue_styles() {
wp_enqueue_style( 'mycustomtheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mycustomtheme_enqueue_styles' );
```

Doporučujeme k přečtení. Úvod do vývoje WordPress temat: Vytvořte si své první vlastní téma od nuly。

Po dokončení výše uvedených kroků se přihlaste do administrace svého WordPressu a v sekci “Vzhled” -> “Témata” by se mělo zobrazit téma “My Custom Theme”. Klikněte na tlačítko „Aktivovat“, abyste ho povolili k použití.

Úroveň šablon a běžné šablony

Porozumění struktuře šablon v WordPressu je klíčové pro vývoj temat (tém). Určuje, který soubor šablony WordPress použije při zpracování požadavků na různé typy stránek.

Shared hosting od InterServeru
Sdílený hosting za 1 TB + 5 TB měsíčně za 2,50 USD, slevový kód tryinterserver pro první měsíc za 1 TB + 5 TB za 0,1 USD, a 461 skriptů cloudových aplikací k jednoduché instalaci.
Logo InterServeru přístupová stránka

Koncept úrovní šablon (Template Hierarchy Concept)

WordPress hledá soubory šablon podle typu stránky, která je právě zobrazena, a to podle určitého pořadí priorit. Například při návštěvě jednotlivého blogového článku hledá WordPress postupně následující soubory: `single-post.php` -> `single.php` -> `singular.php` -> `index.php`. Jakmile najde první existující soubor, použije ho.

Vytvořte soubor šablony, který budete často používat.

Na základě tohoto hierarchického uspořádání můžete začít vytvářet konkrétnější šablonové soubory, které obohatí vaši tematiku.

  • `header.php` a `footer.php`: Oddělte kód hlavičky a patičky z `index.php` do těchto dvou souborů a poté v `index.php` použijte funkce `get_header()` a `get_footer()` k jejich načtení. Tím je umožněno opakovatelné použití kódu.
  • `page.php`: Slouží k zobrazení statických stránek. Můžete nejprve zkopírovat obsah souboru `index.php`, abyste vytvořili nový soubor `page.php`, a poté jej přizpůsobit podle svých požadavků.
  • `single.php`: Slouží k zobrazení jediného článku. Obvykle zde najdete informace jako nadpis článku, obsah, datum publikování, autora, kategorii a tagy.
  • `archive.php`: Slouží k zobrazení seznamu archivovaných článků, např. podle kategorie, tagu, autora nebo data vytvoření článku.
  • `front-page.php`: Pokud tato soubor existuje, bude použit jako domovská stránka webového stránky a má vyšší prioritu než `home.php` a `index.php`. Zde můžete navrhnout jedinečný layout domovské stránky.

Po vytvoření těchto souborů bude struktura vašeho tématu jasnější a profesionálnější.

Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Od základů až po pokročilé techniky。

Přidání stylů a základních funkcí

Témata bez žádného vzhledového stylu jsou původní, ale některé základní funkce mohou výrazně zlepšit praktičnost a uživatelský zážitek tohoto tématu.

Napsat základní CSS styly

Pod hlavními komentáři v souboru `style.css` začněte psát svá pravidla stylizace. Začněte tím, že resetujete výchozí nastavení prohlížeče, nastavíte globální písma a barvy, a poté postupně vytvoříte styly pro hlavičku, navigaci, hlavní obsahovou oblast, postranní lištu (pokud bude přidána) a patu stránky. Používejte responsivní designové media queries, abyste zajistili, že webové stránky dobře vypadají na telefonech, tabletech i počítačích.

css
/* Základní resetování a globální styly */
* {
\nmargin: 0;
Náplň: 0;
`box-sizing: border-box;`;
}
tělo {
`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;`;
`line-height: 1.6;`;
Barva: #333;
`background-color: #f4f4f4;`;
}
.container {
Šířka: 90%;
max-width: 1200px;
`margin: 0 auto;`;
Náplň: 20px;
}
/* Hlavičkové styly */
Header {
Pozadí: #333;
Barva: #fff;
`padding: 1rem 0;`;
`text-align: center;`;
}
/* Styly navigačního menu */
.primary-menu {
/* Styly vašeho navigačního menu */
}
```

Implementace navigačního menu a bočního panelu

V souboru `header.php` jste si rezervovali místo pro menu a pro jeho zobrazení použijete funkci `wp_nav_menu()`, která načte menu registrované v souboru `functions.php`.

PHP


```

Chcete-li přidat boční panel, nejprve je potřeba v souboru `functions.php` registrovat oblast určenou k zobrazení nástrojů bočního panelu.

PHP
function mycustomtheme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'mycustomtheme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'mycustomtheme' ),
'before_widget' => '

',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'mycustomtheme_widgets_init' );
```

Poté, v místě, kde chcete, aby se sidebar zobrazil (například vedle hlavního obsahu souborů `index.php` nebo `single.php`), použijte funkci `dynamic_sidebar( 'sidebar-1' )` k jeho zobrazení.

Závěr

Díky krokům popsaným v tomto článku jste dokončili proces vytvoření základního vlastního tématu pro WordPress od nuly. Seznámili jste se s postupem nastavení lokálního vývojového prostředí, vytvořili základní soubory tématu (style.css, index.php, functions.php), pochopili strukturu šablon a rozšířili běžně používané šablony. Nakonec jste tématu přidali základní styly, navigační menu a boční lištu. To je však pouze začátek – dále můžete zkoumat pokročilejší šablony (např. stránku pro vyhledávání search.php, stránku s chybou 404.php), naučit se více o funkcích WordPress The Loop, integrovat JavaScriptové frameworky, nebo své téma odeslat do oficiálního repozitáře WordPress temat. Neustálé procvičování a studium oficiálních návodů k vývoji je nejlepším způsobem, jak zlepšit své dovednosti.

Časté dotazy

Jaké jsou předpokládané znalosti potřebné k vývoji témat pro WordPress?

Potřebujete mít základní znalosti HTML a CSS pro vytváření struktury a stylu webových stránek. Zároveň je velmi důležité mít základní porozumění PHP, protože tematika WordPress jsou především složena z PHP šablonových souborů. Trocha znalostí JavaScriptu by mohla pomoci při přidávání interaktivních funkcí, ale na začátečnické úrovni to není nutné.

Proč se moje nová tema nezobrazuje v seznamu tem v administraci WordPressu?

Nejprve zkontrolujte, zda je vaše tematická složka správně umístěna v adresáři `wp-content/themes/`. Poté se ujistěte, že soubor `style.css` existuje v hlavním adresáři této složky a zda jsou informace v jejím začátku (např. název tématu) v správném formátu. Jakákoli chyba může zabránit WordPressu v rozpoznání vaší tematiky.

Co je účel souboru functions.php?

Soubor `functions.php` je centrem funkcí vašeho tématu. Slouží k aktivaci nebo úpravě základních funkcí WordPressu (např. přidání možností pro nastavení tématu), registraci navigačních menu a oblastí s příslušenstvím na bocích stránek, bezpečnému načítání CSS stylů a JavaScript skriptů, stejně jako k definování vlastních funkcí a filtrů. Jedná se o klíčový soubor pro rozšíření možností vašeho tématu.

Jak zajistit, aby můj webový design („témata“) podporovalo více jazyků?

让主题支持多语言（国际化与本地化）是一项重要实践。你需要在`style.css`的头部和`functions.php`中设置正确的`Text Domain`（文本域），然后在代码中所有需要翻译的字符串处使用`__()`或`_e()`等翻译函数进行包裹。之后，可以使用像Poedit这样的工具生成`.po`和`.mo`语言文件，供翻译者使用。

Po dokončení vývoje, jak nasadit dané téma na webové stránky v reálném prostředí?

Existují dvě hlavní metody pro nasazení temat (témů) na webové stránky. První z nich spočívá v přímém nahrání vaší lokální složky s tematem pomocí FTP/SFTP klienta (např. FileZilla) do adresáře `wp-content/themes/` na webových stránkách. Druhá, profesionálnější metoda spočívá v sbalení temat do souboru formátu ZIP a následném instalování pomocí funkce “Vzhled” -> “Témata” -> “Přidat nové téma” -> “Nahrát téma” v administraci WordPressu. Bez ohledu na zvolenou metodu se doporučuje před nasazením temat důkladně otestovat v testovacím prostředí webových stránek.

Jaký je další krok? Co bych měl udělat dál?

Pokud právě vytváříte nebo optimalizujete webové stránky pomocí WordPressu, doporučujeme vám pokračovat ve čtení o optimalizaci výkonu, konfiguraci pluginů a přizpůsobování témat.

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.

Štítky: