Vývoj WordPress šablon pro začátečníky

Proč vyvíjet vlastní WordPress šablonu

Nástroj pro tvorbu webů WordPress pohání přes 40 % všech webů na internetu a pochopení toho, jak šablony fungují, otevírá dveře na obrovský trh. Hotové šablony jsou skvělé pro rychlé spuštění webu, ale často přicházejí se zbytečným kódem, omezenými možnostmi úprav a bezpečnostními riziky. Vytvoření vlastní šablony vám dává úplnou kontrolu nad vzhledem, výkonem a funkcionalitou webu.

Vývoj šablon je jednou z nejžádanějších WordPress dovedností na freelance trhu. Pro testování použijte prostředí WordPress hostingu. Klienti jsou ochotni za šablonu na míru, která dokonale odpovídá jejich potřebám, zaplatit nemalé částky. Začnete-li pochopením základů, můžete postupně budovat portfolio a zdokonalovat dovednosti až na úroveň profesionálního vývojáře šablon.

Struktura WordPress šablony

WordPress šablona se nachází ve složce wp-content/themes/nazev-sablony/ a obsahuje sadu PHP, CSS a JavaScript souborů, které společně definují vzhled a chování webu. Minimální šablona vyžaduje pouze dva soubory: style.css s meta informacemi o šabloně a index.php jako záložní šablonu. Profesionální šablona však obsahuje mnohem více souborů uspořádaných v logické struktuře.

Základní soubory šablony

• style.css – hlavní stylopis s meta informacemi (Theme Name, Version, Author)
• index.php – záložní šablona, když neexistuje žádná konkrétní šablona
• functions.php – registrace funkcí šablony (menu, widgety, podpora funkcí)
• header.php – hlavička webu s navigací a meta tagy
• footer.php – patička webu se skripty a informacemi o autorských právech
• sidebar.php – postranní panel s oblastmi pro widgety
• single.php – šablona pro zobrazení jednotlivých článků na blogu
• page.php – šablona pro zobrazení statických stránek
• archive.php – šablona pro archivní stránky (kategorie, štítky, data)
• 404.php – šablona pro neexistující stránky

Hierarchie šablon

Hierarchie šablon je systém, který WordPress používá k určení, který soubor šablony načíst pro každou stránku. Je to jeden z nejdůležitějších konceptů ve vývoji WordPressu. WordPress hledá nejkonkrétnější šablonu, a pokud ji nenajde, přechází k obecnější, dokud nedojde k index.php, což je poslední možnost.

Například pro zobrazení kategorie Novinky WordPress nejprve hledá category-novinky.php, poté category-3.php (kde 3 je ID kategorie), poté category.php, poté archive.php a nakonec index.php. Tato hierarchie vám umožňuje vytvářet specifické návrhy pro různé části webu bez složitého programování. Pochopení hierarchie je klíčové pro efektivní vývoj šablon.

Nejčastěji používané soubory šablon

Pro články na blogu je hierarchie: single-{post-type}.php, single.php, singular.php, index.php. Pro stránky: page-{slug}.php, page-{id}.php, page.php, singular.php, index.php. Pro archivy: category-{slug}.php, category.php, archive.php, index.php. Pochopení tohoto systému umožňuje přesnou kontrolu nad zobrazením každého typu obsahu.

Functions.php – srdce šablony

Functions.php je nejdůležitější soubor v šabloně, protože právě zde registrujete všechny funkce, které vaše šablona podporuje. Tento soubor se automaticky načítá pokaždé, když je šablona aktivována, a funguje podobně jako plugin. V něm přidáváte podporu funkcí, registrujete menu a oblasti pro widgety, vkládáte CSS a JavaScript soubory a definujete vlastní funkce.

Co se definuje ve functions.php

• Podpora náhledových obrázků: add_theme_support('post-thumbnails')
• Registrace navigačního menu: register_nav_menus()
• Registrace oblasti pro widgety: register_sidebar()
• Vkládání CSS a JS souborů: wp_enqueue_style() a wp_enqueue_script()
• Podpora HTML5 prvků: add_theme_support('html5')
• Vlastní velikosti obrázků: add_image_size()
• Podpora vlastního loga: add_theme_support('custom-logo')

Klíčovým pravidlem je nikdy nevkládat CSS a JavaScript soubory přímo do header.php nebo footer.php pomocí HTML tagů. Místo toho vždy používejte wp_enqueue_style() a wp_enqueue_script() ve functions.php, protože to umožňuje WordPressu správně spravovat závislosti, vyhnout se duplicitám a umožnit ostatním pluginům interagovat s vašimi skripty.

WordPress Loop

WordPress Loop je PHP kód, který zobrazuje obsah z článků nebo stránek. Každá šablona zobrazující obsah používá Loop k iteraci přes výsledky dotazu. Pochopení Loopu je zásadní, protože je to mechanismus propojující vaši šablonu s obsahem z databáze.

Základní struktura Loopu používá smyčku while s funkcemi have_posts() a the_post(). Uvnitř smyčky používejte šablonové tagy jako the_title(), the_content(), the_excerpt(), the_permalink() a the_post_thumbnail() k zobrazení různých částí obsahu. Loop můžete přizpůsobit pomocí třídy WP_Query a vytvořit vlastní dotazy vracející přesně ty články, které chcete zobrazit.

Vlastní dotazy s WP_Query

Třída WP_Query umožňuje vytváření zcela přizpůsobených dotazů na články. Můžete filtrovat podle kategorie, štítku, vlastní taxonomie, data, autora a meta polí. Například můžete zobrazit poslední 3 články z kategorie Novinky nebo všechny produkty s cenou pod 1000 korun. WP_Query je mocný nástroj dávající vám úplnou kontrolu nad tím, jaký obsah se zobrazuje a jak je řazen.

Šablonové tagy a vlastní pole

Šablonové tagy jsou PHP funkce, které WordPress poskytuje pro zobrazení dynamického obsahu v šablonách. Kromě základních tagů pro titulek a obsah existují desítky specializovaných tagů pro zobrazení autora, data, kategorií, štítků, komentářů a navigace. Dokumentace na developer.wordpress.org je neocenitelným zdrojem pro seznámení se všemi dostupnými šablonovými tagy.

Vlastní pole (meta pole) rozšiřují standardní články a stránky o doplňková data. Pomocí pluginu ACF (Advanced Custom Fields) nebo nativních WordPress funkcí můžete přidat pole pro cenu, lokalitu, galerii, recenze a cokoli dalšího, co váš web vyžaduje. Vlastní pole v kombinaci s vlastními typy obsahu umožňují WordPressu fungovat jako kompletní CMS pro jakýkoli typ obsahu.

Další kroky

Po zvládnutí základů prozkoumejte pokročilá témata jako child šablony. Jako další krok se podívejte na SEO optimalizaci WordPress webu. Mezi další pokročilá témata patří bezpečná úprava existujících šablon, vývoj blokových šablon pro WordPress Full Site Editing, REST API pro headless WordPress a WP-CLI pro správu šablon z příkazové řádky. WordPress ekosystém je obrovský a vždy se najde něco nového, co se naučit. Začněte jednoduchou šablonou, postupně přidávejte funkce a brzy se budete cítit jistě při tvorbě profesionálních WordPress šablon.