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

Kompletní průvodce vývojem temát pro WordPress: Vytvoření profesionálních webových stránek od nuly

Čtení za 3 minuty.
2026-03-14
2026-06-04
2,196
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í pro WordPress témata

Pro vývoj profesionálního WordPress tématu je nejprve potřeba stabilní a efektivní lokální vývojové prostředí. Díky němu můžete psát kód, ladit a testovat bez jakéhokoli vlivu na webové stránky publikované online. Pro začátečníky se doporučují integrované nástroje pro správu lokálního serveru, jako je Local by Flywheel, MAMP nebo XAMPP. Tyto nástroje umožňují jednoduchou instalaci PHP, MySQL a webového serveru a výrazně zjednodušují proces konfigurace vývojového prostředí.

Typická struktura projektu vývoje témat začíná vytvořením nové složky. Tato složka musí být umístěna v adresáři instalace WordPress.wp-content/themesUvnitř složky. V této nově vytvořené složce s tématy jsou dvě soubory, které jsou nezbytné:style.css和index.phpMezi nimi jestyle.cssNení to pouze šablona stylů, ale také hraje roli “identifikační karty” tématu. Blok komentářů v hlavičce souboru slouží k deklaraci základních informací o tomto tématu pro WordPress.

Níže je uveden jeden z nejzákladnějších…style.cssPříklad hlavičky souboru:

Doporučujeme k přečtení. Od nuly k jedné: praktický návod k vývoji témat WordPressu od začátku do konce.。

/*
Theme Name: My Professional Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的专业WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-professional-theme
*/

Text DomainSlouží k internacionalizaci a představuje klíčový identifikátor pro následný překlad textů. Po vytvoření tohoto souboru bude váš téma k dispozici v nabídce “Vzhled” -> “Témata” v administraci WordPressu, i když zatím je pouze prázdným „obalem“.

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

Pro zvýšení efektivity vývoje a kvality kódu doporučujeme nainstalovat do editorů kódu (např. VS Code, PhpStorm) relevantní doplňky, jako je inteligentní rozpoznávání PHP kódu, podpora při vytváření fragmentů kódu pro WordPress atd. Zároveň je velmi důležité aktivovat režim ladění (debugging mode). Potřebujete to provést na vašich webových stránkách.wp-config.phpDo souboru přidejte nebo změňte následující konstanty:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Tímto nastavením lze zaznamenávat chyby a varování PHP do…wp-content/debug.logVe souborech se vyhněte tomu, aby chybové zprávy byly přímo zobrazeny návštěvníkům, aby to usnadnilo vývojářům při řešení problémů.

Struktura hlavních tematických souborů a hierarchie šablon

Porozumění struktuře souborů a principů fungování tematických balíčků WordPress je základem pro jejich vývoj. WordPress využívá systém hierarchie šablon (Template Hierarchy), který určuje, který šablonový soubor se má použít k zobrazení obsahu na různé požadavky na stránky. Jedná se o “shora dolů” mechanismus vyhledávání – systém prohledává soubory podle určitého pořadí jejich názvů, dokud nenajde odpovídající šablonu.

Nejzákladnějším souborem šablony jeindex.phpJedná se o finální zpětný šablonu pro všechny stránky. Typické profesionální téma bude obsahovat následující klíčové šablonové soubory:
* header.phpVýšková část webové stránky obvykle obsahuje:<head>Regiony, identifikace webových stránek a hlavní navigace.
* footer.phpNa spodní straně webové stránky se obvykle nacházejí informace o autorských právech, pomocné odkazy a volání skriptů.
* sidebar.phpOblast komponenty bočního panelu.
* functions.php“Funkční centrum” tématu slouží k přidávání funkcí, registraci menu, nastavení bočního panelu, stejně jako k načítání souborů se styly a skripty.
* style.cssHlavní stylový soubor.
* page.phpSlouží k zobrazení jediné stránky.
* single.phpSlouží k zobrazení jednotlivého blogového článku.
* archive.phpSlouží k zobrazení kategorií článků, tagů, autorů a dalších informací na stránkách archivů.
* front-page.phpSlouží k personalizaci domovské stránky webového stránky.
* home.phpSlouží k zobrazení indexu blogových článků (pokud je domovská stránka nastavena jako statická stránka).

Doporučujeme k přečtení. Naučte se vývoj WordPress témat od nuly: základní průvodce vytvářením personalizovaných webových stránek.。

V souborech šablon používáme řadu základních funkcí WordPressu k sestavení stránek. Například,header.phpV čínštině se používáwp_head()Zařízení typu „hook“ umožňuje WordPressu a jeho doplňkům (pluginům) vypisovat potřebné metatagy a skripty.footer.phpV čínštině se používáwp_footer()Háček. V pořádku.index.php或single.phpV tomto příkladu se používá cyklus (The Loop) k výstupu obsahu článku.

Zde je zjednodušená verze textu:index.phpPříklad ukazuje, jak zavést hlavičku (header), závěr (footer) a cykly (loops):

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 为每篇文章输出内容，例如：
            // the_title(&#039;<h2>', '</h2>');
            // the_content();
        endwhile;
    else :
        echo '<p>没有找到任何文章。</p>';
    endif;
    ?&gt;
</main>

Díky flexibilní kombinaci těchto šablonových souborů a využití pravidel hierarchie šablon můžete vytvořit zcela odlišné uspořádání a design různých částí webové stránky.

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í funkcí a stylů k tématu

functions.phpSoubory jsou “motorem” funkčnosti témat. Veškerý kód, který rozšiřuje možnosti témat, by měl být umístěn právě zde. Nejprve musíme…add_theme_support()Funkce slouží k deklaraci základních funkcí, které daný téma podporuje. Jedná se o standardní postup při vývoji moderních WordPress témat.

Aktivujte speciální obrázky k článkům a menu.

V funkčních souborech nejprve aktivujeme některé často používané funkce. Například přidáváme podporu pro “výrazné obrázky” (prezentace obrázků) k článkům a registrováme umístění navigačních položek pro dané téma.

Korespondující kód je následující:

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.。

function my_theme_setup() {
    // 添加文章和页面的特色图像支持
    add_theme_support('post-thumbnails');

// 注册一个主导航菜单
    register_nav_menus( array(
        'primary' => __('主菜单', 'my-professional-theme'),
    ) );

// 添加HTML5标记支持
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));

// 添加标题标签支持
    add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_theme_setup');

after_setup_themeJde o „hook“, který zajišťuje, že naše nastavovací funkce budou správně spuštěny při inicializaci tématu.

Zaregistrujte si sekci panelu nástrojů.

Widgety jsou důležitým modulem pro flexibilní rozvržení obsahu v WordPressu. Potřebujeme je…functions.phpZaregistrujte si sekci bočního panelu nebo oblast nástrojů v podvodu stránky.

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

Korespondující kód je následující:

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __('主侧边栏', 'my-professional-theme'),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __('在此添加小工具以显示在主侧边栏。', 'my-professional-theme'),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action('widgets_init', 'my_theme_widgets_init');

Po registraci mohou uživatelé do tohoto prostoru přetahovat doplňky (“widgety”) z nabídky “Vzhled” -> „Doplňky“ v administraci. V šabloně se tyto doplňky poté používají k úpravě vzhledu stránek.dynamic_sidebar('sidebar-1')Funkce slouží k volání a zobrazení obsahu.

Správné zavedení šablon stylů a skriptů

Zavádění souborů CSS a JavaScript pomocí způsobu doporučeného WordPressem (tj. jejich „enqueuing“) je nejlepší praxí pro zajištění kompatibility a výkonnosti. Rozhodně by se nemělo jednat o přímé použití těchto souborů v šablonách.<link>或<script>Tagy jsou hardkódovány.

Korespondující kód je následující:

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

// 引入自定义JavaScript文件
    wp_enqueue_script('my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true);

// 如果需要引入jQuery（WordPress默认已加载），可以作为依赖
    // wp_enqueue_script('my-theme-custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Použitíget_stylesheet_uri()和get_template_directory_uri()Funkce může dynamicky získat URL adresy adresářů temat („theme directories“) a zajistit, že je cesta správná. Poslední parametr…trueZnamená to umístit skript na spodní část stránky.\nNačítání obsahu před zobrazením tagů napomáhá zlepšit výkonnost načítání stránek.

Implementovat responsivní design a vlastní funkce

Moderní webové stránky musí dobře vypadat na všech zařízeních. Realizace responsivního designu se především opírá o CSS media queries. Můžete…style.cssPro různé šířky obrazovek jsou definovány různá pravidla stylizace. Obvykle se používá strategie “mobile first” – nejprve se vytvoří základní styly pro mobilní zařízení a poté se tyto styly přizpůsobí i jiným typům obrazovek.min-widthMediální dotazy postupně zlepšují vzhled stránek na velkých obrazovkách.

Kromě responzivního rozvržení je vývoj vlastních funkcí klíčovým faktorem, který odlišuje běžné tématy od profesionálních. To obvykle zahrnuje vytváření vlastních typů příspěvků (Custom Post Types) a vlastních taxonomií (Custom Taxonomies), aby bylo možné splnit požadavky na konkrétní typy obsahu, jako jsou produkty, portfolio, týmy atd.

Vytvoření vlastního typu článku

Můžeme to použít.register_post_type()Funkce slouží k vytvoření nového typu obsahu, například “portfolio”.

Korespondující kód je následující:

function my_theme_register_portfolio_post_type() {
    $labels = array(
        'name' => _x('作品集', '作品集通用名称', 'my-professional-theme'),
        'singular_name' => _x('作品', '作品单数名称', 'my-professional-theme'),
        'menu_name' => __('作品集', 'my-professional-theme'),
        // ... 其他标签
    );
    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'menu_icon' => 'dashicons-portfolio',
        'supports' => array('title', 'editor', 'thumbnail', 'excerpt'),
        'rewrite' => array('slug' => 'portfolio'),
    );
    register_post_type('portfolio', $args);
}
add_action('init', 'my_theme_register_portfolio_post_type');

Po provedení tohoto kroku se v pozadí objeví nový menu “Soubor děl”, pomocí kterého můžete spravovat projekty svých děl stejným způsobem, jako spravujete články. Můžete také vytvářet nové projekty.archive-portfolio.php和single-portfolio.phpSlouží k speciálnímu ovládání zobrazení stránek archivace a detailů tohoto vlastního typu.

Další pokročilá funkce je možnost přidání vlastních nastavení pro téma. Pro jednoduché úpravy lze využít vestavěný nástroj “Customizer” (API Customizer) v WordPressu k nastavení barvy, nahrání loga a dalších parametrů. Pro složitější sady možností však mnoho vývojářů volí pluginy určené k správě pokročilých polí (např. Advanced Custom Fields) nebo integrují lehké frameworky určené k úpravě témat, což výrazně zvyšuje flexibilitu uživatelů při konfiguraci témat bez nutnosti úpravy kódu.

Závěr

Vývoj tem pro WordPress je proces kombinování designu, front-end technologií a PHP back-end logiky. Začíná vytvořením lokálního prostředí a pochopením struktury šablon, a pokračuje…functions.phpPostupně a stabilně přidávejte funkce a zdroje – každý krok je základem pro vytvoření stabilního, udržovatelného a uživatelsky přívětivého profesionálního webu. Ovládnutí tvorby vlastních šablon, implementace responzivního designu a rozšíření možností pro vlastní typy obsahu vynikne vašemu tématu mezi mnoha dalšími možnostmi. Nezapomeňte vždy dodržovat kódovací standardy a osvědčené postupy WordPressu – to nejen zaručí kvalitu vašeho tématu, ale také usnadní kompatibilitu s dalšími doplňky a budoucími verzemi jádra WordPressu.

Časté dotazy

Jaké programovací jazyky jsou potřebné k vývoji témat WordPressu?

Vývoj kompletní funkční WordPress tématy vyžaduje znalost HTML, CSS, PHP a základů JavaScriptu. HTML slouží k vytvoření strukturního uspořádání stránek, CSS se používá pro návrh vzhledu a implementaci responsivního rozvržení, PHP je klíčovým jazykem WordPressu, který slouží k zpracování logiky, načítání dat a generování dynamických stránek, zatímco JavaScript umožňuje přidávat interaktivní efekty a dynamické funkce.

Jaký je rozdíl mezi souborem functions.php v hlavní složce projektu a pluginy?

functions.phpSoubor je součástí tématu a jeho funkce jsou úzce propojeny s tímto tématem. Při změně tématu již kód obsažený v tomto souboru nebude fungovat. Obvykle se používá k přidání funkcí, které jsou úzce spojeny s vzhledem a funkcemi daného tématu – např. registrační menu, boční lišta, podpora přidávání nových funkcí do tématu atd.
Pluginy jsou funkční moduly, které jsou nezávislé na konkrétní tematice (tématech) a jejich cílem je poskytovat určité funkce, které by měly být konzistentní napříč různými tematikami. Pokud nějaká funkce nesouvisí s vizuálním vzhledem tématiky a chcete, aby zůstala při změně tematiky zachována, je vhodnější tuto funkci vyvinout jako plugin.

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

Pro podporu více jazyků v tématu, tedy internacionalizace (i18n), je hlavně nutné využívat převodové funkce WordPressu. Ve kódu by měly být všechny textové řetězce, které je třeba přeložit, obaleny specifickými funkcemi.()Slouží k zobrazení přeloženého textu v PHP._e()Použito k přímému výstupu překladu.esc_html()Používá se pro bezpečné escapeování a podobné účely.
Nejprve musíte tyto funkce použít pro veškerý text, který je viditelný všem uživatelům, a ujistit se, že…style.cssBylo správně nastaveno v čínštině.Text DomainPoté použijte nástroj, jako je Poedit, k prohledání souborů s tematikou a vytvoření….potPřekladový šablonový soubor umožňuje překladatelům vytvořit překlady do příslušných jazyků na základě tohoto šablona.zh_CN.poPřeložený soubor, který je nakonec zkompilován do….moSoubor: Umístěte soubor .mo do složky určené k uložení tematických nastavení (tematického balíčku)./languagesV adresáři se při shodě jazykových nastavení uživatelova WordPressu automaticky zobrazí příslušné překlady tématu.

Jak po dokončení vývoje svého tématu zveřejnit ho do oficiálního adresáře témat WordPressu?

Chcete-li svůj tematický design zveřejnit v oficiálním katalogu tematických nástrojů WordPress.org, musíte nejprve vytvořit účet na stránkách WordPress.org a poté svůj design odeslat na webové stránky týmu pro posuzování tematických nástrojů (Theme Review Team) k posouzení. Proces posuzování je velmi přísný – požaduje, aby váš design plně splňoval oficiální standardy kódování, bezpečnostní předpisy, pokyny pro přístupnost a licenční dohody (musí jít o licenci GPLv2 nebo vyšší verze).
Před odesláním si prosím pečlivě přečtěte oficiální příručku pro vývoj temat a požadavky na revizi, proveďte důkladnou samokontrolu, abyste se ujistili, že nepoužíváte žádný neoprávněný kód ani zdroje, a že všechny funkce splňují předepsaná pravidla. Po úspěšné revizi bude vaše tema dostupné pro vyhledávání, instalaci a použití uživateli po celém světě.

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: