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

Návod k vývoji témat pro WordPress: Vytvořte své první dílo od nuly.

Čtení za 2 minuty.
2026-03-14
2026-06-06
2,029
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.

Nastavení vývojového prostředí a základní znalosti

Prvním krokem při vývoji temát pro WordPress je příprava vhodného lokálního vývojového prostředí. To nejen zvyšuje efektivitu vývoje, ale také usnadňuje testování a ladění. Doporučujeme použít integrovaná prostředí, jako jsou XAMPP, MAMP nebo Local by Flywheel, která umožňují jednoduchou instalaci PHP, databáze MySQL a serverů Apache/Nginx, čímž se vyhnete komplikacím spojeným s ruční konfigurací. Mezi vhodné editory patří Visual Studio Code,PhpStorm nebo Sublime Text – všechny poskytují výborné funkce pro zvýraznění syntaxe a podporu při práci s kódem v jazycích PHP, HTML, CSS a JavaScript.

Kromě prostředí je velmi důležité pochopit základní strukturu témat WordPressu. Nejjednodušší téma vyžaduje alespoň dvě klíčové soubory:style.css 和 index.phpVšechny tematiky WordPressu se nacházejí na…/wp-content/themes/Soubory jsou umístěny v daném adresáři a rozlišují se podle názvu daného adresáře (tj. identifikátoru tématu).

Definice hlavičky informací o tématu

Informace o tématu jsou poskytovány prostřednictvím… style.css Poznámky v hlavičce souboru slouží k deklaraci informací o tématu. Tento blok je vlastně “občanským průkazem” tématu – jádro WordPress jej čte, aby identifikovalo název tématu, autora, verzi a další metadaty. Níže je uveden typický příklad informací v hlavičce:

Doporučujeme k přečtení. Hloubkové porozumění vývoji pluginů pro WordPress: od nuly až po vytvoření profesionálních rozšíření.。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Mezi nimi,Text DomainPoužívá se pro internacionalizaci (i18n) a slouží k následnému použití funkcí pro překlad (např.)__()或_e()Identifikátor, který musí být určen při použití tohoto funkce.index.phpJedná se o výchozí šablonu pro zobrazení obsahu daného tématu; i když jsou ostatní šablony chybějící, WordPress ji použije k vykreslení stránky.

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

Struktura hlavního šablonového souboru

Plně funkční WordPress téma dodržuje soubor pravidel nazývaný “struktura šablon” („Template Hierarchy“). Tato struktura určuje, který soubor šablony WordPress automaticky zvolí k zobrazení obsahu v závislosti na typu požadavku na stránku. Znalost této struktury je klíčová pro vývoj flexibilních témat.

Vstupní souborindex.phpNachází se na nejvyšší úrovni struktury šablon a slouží jako výchozí záloha pro všechny stránky. Při skutečném vývoji však vytváříme konkrétnější šablony, které umožňují personalizovaný vzhled stránek. Například při návštěvě konkrétního článku WordPress nejprve hledá informace v těchto vlastních šablonách.single-post.phpPokud neexistuje, pak ho najděte.single.phpA teprve nakonec se vrátí zpět…index.php。

Běžné šablony a jejich funkce

* header.phpŠablona hlavičky webové stránky obvykle obsahuje:<!DOCTYPE html>Prohlášení,<head>Regiony a veřejné oblasti na vrcholu webové stránky (např. logo a hlavní navigace). V jiných šablonách se toto používá.get_header()Zavedení funkce.
* footer.phpŠablona pro spodní část webové stránky, obsahující informace o autorských právech a další podstatné údaje. K použití.get_footer()Zavedení funkce.
* sidebar.phpŠablona bočního panelu. Použijte ji.get_sidebar()Zavedení funkce.
* functions.phpFunkční soubor tématu. Není to šablonový soubor, ale je automaticky načten při inicializaci tématu a slouží k přidávání vlastností tématu, registraci menu a bočních panelů, stejně jako k načítání stylů a skriptů.
* page.phpSlouží k zobrazení statických stránek.
* single.phpSlouží k zobrazení jediného článku.
* archive.phpSlouží k zobrazení seznamů archivů, včetně kategorií, tagů, autorů, dat atd.
* front-page.phpSlouží k přizpůsobení domovské stránky webového stránek (je nutné to nastavit v administraci WordPress v sekci “Nastavení” > “Čtení”).
* style.cssKromě definice informací o tématu slouží také jako hlavní šablona stylů pro toto téma.

Díky této modulární struktuře mohou vývojáři snadno znovu používat společné části (jako je nadpis a podpis stránky) a zároveň implementovat odlišný design pro různé typy stránek.

Doporučujeme k přečtení. Průvodce profesionálním výstavbou webových stránek: Postavení efektivního a škálovatelného internetového portálu od nuly。

Functions.php a vylepšení funkcí tematického rozhraní

functions.phpSoubory představují “mozek” tématu – pomocí nich můžete rozšiřovat nebo upravovat základní funkce WordPressu pomocí kódu, aniž byste museli přímo měnit samotné základní soubory. Jejich síla spočívá v možnosti využití obrovského množství funkcí, které WordPress nabízí.Action(akce) aFilter(Filtr) Hooky mechanism for intervening in the program execution flow.

Funkce podporované při registraci tématu:

在functions.phpV této části můžete uvést, které vestavěné funkce WordPressu vaše téma podporuje. Například podpora speciálních obrázků k článkům, vlastních menu a vlastního loga je základní výbavou moderních temat. To lze dosáhnout pomocí…add_theme_support()Implementace funkce:

function my_theme_setup() {
    // 添加对文章特色图像（缩略图）的支持
    add_theme_support('post-thumbnails');

// 注册导航菜单位置
    register_nav_menus(array(
        'primary' => __('主导航菜单', 'my-first-theme'),
        'footer'  => __('底部菜单', 'my-first-theme'),
    ));

// 添加对自定义Logo的支持
    add_theme_support('custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ));
}
add_action('after_setup_theme', 'my_theme_setup');

V uvedeném kódu:my_theme_setupJedná se o vlastní funkci, kterou vytvoříme pomocí…add_action()Připojte ho k…after_setup_themeUjistěte se, že tato akce bude spuštěna při inicializaci tématu.

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

Zavádění souborů se styly a skripty

Správný způsob zavádění je klíčem k udržovatelnosti a výkonu front-end zdrojů. Měli byste použít…wp_enqueue_style()和wp_enqueue_script()Funkce a její nasazení…wp_enqueue_scriptsTato funkce umožňuje WordPressu spravovat závislosti mezi jednotlivými komponentami, předcházet jejich opakovanému načítání a usnadňuje tak interakci mezi pluginy.

function my_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());

// 引入自定义JavaScript文件
    wp_enqueue_script('my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Šablony a cyklické systémy

Šablony a jejich značky (template tags) jsou klíčovými nástroji při vývoji WordPress temat. V podstatě se jedná o PHP funkce, které slouží k dynamickému zobrazování obsahu v šablonových souborech – jako jsou nadpisy článků, jejich obsah, autori, datumy atd. Díky nim je velmi jednoduché zobrazovat data z databáze na webových stránkách.

Princip fungování hlavního cyklu

WordPress využívá “cykly” k načítání obsahu z databáze. Jeho základní struktura je…ifVýraz je uzavřen v jednom bloku.whileCyklus:

Doporučujeme k přečtení. Naučte se používat vlastní háky ve WooCommerce: kompletní průvodce od začátku až po pokročilé techniky.。

<!-- 在这里使用模板标签输出单篇文章内容 -->
        <h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>
        <div><?php the_content(); ?></div>

have_posts()Funkce zkontroluje, zda aktuální dotaz obsahuje články. Pokud ano, pokračuje dále.whileCyklusthe_post()Funkce je zodpovědná za nastavení globálních proměnných a dat, což umožňuje následném použití šablonovacích značek (jako např.)the_title()、the_content()Může správně zobrazit informace o aktuálním článku.

Běžně používané značky pro výstup obsahu

* the_title()Výstup: Název článku/stránky.
* the_content()Výstup článku/nebo celého obsahu stránky obsahuje:<!--more-->Tagy a stránkování.
* the_excerpt()Výstup článku: Shrnutí článku
* the_permalink()Vytváří se trvalý odkaz na článek nebo stránku, který se často používá k<a>„Tagové“hrefV atributech.
* the_post_thumbnail()Zobrazit charakteristické obrázky článku.
* the_author()、 the_date()、 the_category()Výstup: Relevantní metadata.

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

Kromě značek určených k zobrazení obsahu existuje také skupina značek určených k provádění podmínkových testů (podmínkových vyhodnocování).is_single()、is_page()、is_home()、is_front_page()Atd. Umožňují vám v souborech šablon provádět různou logiku v závislosti na typu aktuální stránky.

Závěr

Vývoj tem pro WordPress je proces kombinování kreativity, designu a webových technologií. Začínáte vytvořením lokálního prostředí a pochopením minimální struktury souborů, poté postupně pokračujete v pochopení struktury šablon a využívání jejich možností.functions.phpVylepšete funkce témat a ovládněte používání šablonovacích značek a cyklů pro dynamické zobrazování obsahu. Dodržujte princip “od vnějšího k vnitřnímu” – nejprve vytvořte strukturu stránky, včetně nadpisu, patra a bočního panelu, a poté doplňte logiku obsahu jednotlivých stránek. Toto je efektivní způsob vývoje témat. Pamatujte, že praxe je nejlepším učitelem. Vytvořte si nejjednodušší možné téma a neustále ho vylepšujte – to je nejrychlejší způsob, jak tyto znalosti osvojit.

Časté dotazy

Jaké předpokládané znalosti jsou potřebné k naučení se vývoji temát pro WordPress?

Doporučujeme, abyste měli základní znalosti HTML a CSS pro vytváření a úpravu struktur stránek. Současně je nutné pochopit základní syntaxi PHP, protože jádro logiky a šablon WordPress je napsáno v PHP. Základní znalosti JavaScriptu také pomohou při přidávání interaktivních funkcí později.

Proč se moje téma nezobrazuje v záložce „Background“ nebo není možné ho aktivovat?

Nejčastější příčinou jestyle.cssFormát poznámky v hlavičce s tematickými informacemi v souboru není správný, obsah je neúplný, nebo soubor vůbec neexistuje. Prosím, pečlivě zkontrolujte blok poznámek na začátku souboru a ujistěte se, že všechny informace (zejména název tématu – „Theme Name“) jsou správně zadány. Kromě toho se ujistěte, že složka s vašimi tematy je umístěna přímo na správném místě./wp-content/themes/Ve složce, nikoli vnořené do jiné složky.

Co může nastat v důsledku chyby v souboru Functions.php?

functions.phpGramatické chyby nebo závažné chyby v souborech často způsobí, že webové stránky zobrazí “bílou obrazovku” (tj. stránku s chybovým zprávou), nebo na stránce pro správu temat se vedle vaší temat objeví upozornění, že je temat poškozeno. V takovém případě WordPress automaticky přepne na výchozí temat, aby bylo možné webové stránky stále přístupné. Chyby je třeba opravit pomocí FTP nebo správce souborů.functions.phpChyby v textu.

Jak zajistit, aby můj web nebo aplikace podporovaly více jazyků ( internacionalizaci)?

WordPress využívá framework GNU gettext pro zajištění internacionalizace. Potřebujete…style.css„Hlava a…“functions.phpSprávně nastavte v ČíněText DomainPoté použijte funkci překladu ve všech částech textu, které je třeba přeložit.__('文本', 'my-theme-textdomain')或_e('文本', 'my-theme-textdomain')Následně lze pomocí nástrojů, jako je Poedit, vytvořit požadovaný obsah..potŠablonový soubor, který mají překladatelé použít k vytvoření překladu..po和.moPřekládání dokumentů.

Co je to podtémata (subtopics)? Proč bych měl vytvářet podtémata?

Podtémata jsou témata, která dědí všechny funkce a vzhledové prvky od jiného tématu (mateřského tématu). Pokud chcete upravit stávající téma (zejména témata třetích stran) a zároveň si zachovat možnost přijímat budoucí bezpečnostní aktualizace, je nutné vytvořit podtémata. Podtémata obsahují pouze…style.cssA možná i některé soubory se vlastními šablonami. Tímto způsobem nebudou vaše vlastní úpravy (ve vedlejších tematech) přepsány při aktualizaci mateřského tématu. Jedná se o jednu z nejlepších postupů při vývoji WordPress temat.

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: