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

Úvod do vývoje WordPress temat: Postavte si svůj první webový „skin“ od nuly

Čtení za 3 minuty.
2026-03-19
2026-06-04
2,273
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.

Základní koncepty vývoje temat pro WordPress

Než začnete psát kód, je zásadní pochopit základní strukturu WordPress tématu. WordPress téma je v podstatě souborovou kolekcí, která společně určuje vzhled a funkce webové stránky. Mezi tyto soubory patří šablony, styly (CSS soubory), volitelné funkční soubory a skripty.

Klíčový soubor je…style.css和index.phpMezi nimi jestyle.cssNejde pouze o šablonu vzhledu tématu, ale také o jeho “identifikátor”. Poznámky v hlavičce souboru obsahují klíčové metadaty o tématu, jako je jeho název, autor, popis, verze atd. Právě na základě těchto informací WordPress v pozadí rozpoznává a spravuje jednotlivá témata.

Šablony slouží k řízení logiky zobrazení různých stránek. Například…single.phpSlouží k zobrazení jediného článku.page.phpSlouží k zobrazení samostatných stránek.archive.phpTyto soubory slouží k zobrazení seznamu archivovaných článků. Dodržují systém hierarchie šablon WordPressu; pokud konkrétní šablona neexistuje, systém automaticky přejde na obecnější šablonu a nakonec na nejzákladnější možnou variantu.index.php。

Doporučujeme k přečtení. Úvodní průvodce vývojem temát pro WordPress: Vytvořte si vlastní webovou stránku od nuly。

Dalším klíčovým souborem jefunctions.phpTento soubor není šablonovým souborem, ale funkčním souborem tématu. Můžete do něj přidávat vlastní funkce, registrovat menu a boční panely (oblasti s nástroji), přidat podporu pro speciální obrázky (zvětšené obrázky článků) a řídit načítání souborů JavaScript a CSS. Je to vlastně “mozek” tématu, který zodpovídá za zpracování logiky a rozšíření funkcí.

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

Porozumění těmto základním souborům a jejich funkcím je prvním krokem při vytváření stabilního a udržovatelného tématu.

Nastavení lokálního vývojového prostředí a vytvoření struktury tématu

Než začnete s kódováním, je nezbytné vytvořit efektivní lokální vývojové prostředí. Doporučujeme použít nástroje pro lokální vývoj, jako je Local by Flywheel, XAMPP nebo MAMP, které umožňují rychle nastavit na vašem počítači prostředí vhodné pro provoz WordPressu obsahující Apache, MySQL a PHP. Díky tomu můžete vyvíjet webové stránky offline a volně je testovat a ladit, aniž by to ovlivnilo fungování webové stránky online.

Jakmile bude prostředí připraveno, budete potřebovat postupovat v adresáři instalace WordPressu…wp-content/themes/Uvnitř této složky vytvořte novou složku, která bude sloužit jako adresář pro vaše témata. Název této složky by měl obsahovat malá písmena, čísla a spojovníky a měl by být popisný. Například:my-first-theme。

Dále vytvoříme dvě nejzákladnější soubory. Za prvé…style.cssV hlavičce souboru musí být obsažena poznámka ve tvaru níže uvedeného formátu:

Doporučujeme k přečtení. Co je to vývoj tem (témů) pro WordPress?。

/*
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
*/

“Text Domain” se používá pro internacionalizaci a obvykle se shoduje s názvem adresáře obsahujícího tematické materiály. Poté následuje…index.phpToto je nejzákladnější šablonový soubor, který může dočasně obsahovat pouze jednoduchou HTML strukturu:

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1002>
    <header>
        <h1>Můj první téma</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© Všechna práva vyhrazena</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

V tuto chvíli se přihlaste do administrace vašeho WordPressu a v sekci “Vzhled” -> “Témata” byste měli vidět toto nové téma a mohli byste ho aktivovat. I když je jednoduché, již je toto téma funkční.

Podrobný výklad ohlavních šablonových souborů a cyklů

WordPress využívá “The Loop” k získávání obsahu článků z databáze a k jejich zobrazení na stránce. The Loop je základním konceptem při vývoji WordPress temát a téměř všechny šablony jsou postaveny na jeho principech.

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

Porozumění hlavnímu cyklu WordPressu

Základní struktura cyklu je sada…if和whileTento kód kontroluje, zda v aktuální dotazu existují články, a poté prochází každým článkem, aby jeho data (název, obsah, autor atd.) byla dostupná pro volání šablonových tagů. Typická struktura cyklu vypadá následovně:

<!-- 在这里输出文章内容，例如： -->
        <h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>
        <div><?php the_content(); ?></div>
    <p>
    <p>Nemohu najít žádné články.</p>
<?php endif; ?>

the_post()Funkce slouží k nastavení dat aktuálního článku a až poté je možné ji použít.the_title()、the_content()A také šablony a značky.

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

Aby bylo možné profesionálně zpracovávat různé stránky pomocí tohoto tématu, je potřeba vytvořit několik základních šablonových souborů. Za prvé…header.php和footer.phpSlouží k oddělení kódu pro záhlaví a patičku stránky.index.phpBylo odděleno ze sebe.header.phpVložte zde to, co chcete umístit…到Obsah začínající po značce „tag“; v…footer.phpUmístit dovnitř…Poté…index.phpV čínštině se používáget_header()和get_footer()Funkce slouží k jejich načtení (zavádění).

Doporučujeme k přečtení. Kompletní příručka pro vývoj WordPress temat: Od základního kódu po praktické techniky。

Dále vytvořtesingle.phpPro jednotlivé články,page.phpUrčeno pro samostatné stránky. Můžete v těchto souborech nejprve použít…get_header()和get_footer()Poté přidejte cyklus a HTML strukturu určenou pro konkrétní článek nebo stránku. Například:single.phpV průběhu provádění může dojít k volání této funkce.the_post_thumbnail()Zobrazuje speciální obrázky článku…page.phpV některých případech nemusí být zobrazena datum publikování.

Na závěr vytvořte…archive.phpZpracováváte stránky určené k archivaci, jako jsou stránky s klasifikací, tagy, autory atd. V tomto souboru obvykle používáte…the_archive_title()Vytvořte nadpisy pro archivy a zobrazte více článků ve formě shrnutí nebo seznamu.

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

Tím, že tyto šablony oddělíte, bude struktura vašeho tématu jasnější a snazší na údržbu.

Vylepšení funkcí a stylů témat

Po dokončení základního strukturálního rámce tématu je dalším krokem přidávání funkcí a vylepšování vzhledu. To se hlavně provádí pomocí…functions.php和style.cssAbychom toho dosáhli.

Přidání klíčových funkcí pomocí souborů s funkcemi

functions.phpSoubory jsou hlavním místem, kde můžete přidávat funkce pro váš téma. Nejprve byste měli tématu dodat podporu základních funkcí, a to prostřednictvím…add_theme_support()Implementace funkce.

function my_first_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 让主题支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 让主题支持HTML5的标记格式（用于搜索表单、评论表单等）
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 让主题支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Zadruhé, je potřeba registrovat umístění nabídky jídel a boční lištu (oblast nástrojů) pro dané téma. Pro registraci menu použijte…register_nav_menus()Funkce:

function my_first_theme_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'init', 'my_first_theme_menus' );

Poté můžete pracovat s soubory šablon (např.header.phpPoužívá se v…)wp_nav_menu( array( 'theme_location' => 'primary' ) );Zobrazí menu.

Zavádění stylů a skriptů

Správný způsob načítání souborů CSS a JavaScript je použít…wp_enqueue_style()和wp_enqueue_script()Funkce, které je potřeba nasadit (mountovat).wp_enqueue_scriptsNa háčku. To zajišťuje správné nastavení závislostí a zabrání duplicitnímu načítání.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入Google字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
    // 引入主题的JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Napsat základní styly

Na závěr,style.cssZde můžete začít psát styly. Začněte tím, že resetujete výchozí styly prohlížeče, a poté postupně přidáváte nové styly.body、headerNavigační menu, obsah článků, boční panel a…footerDefinujte styly a využívejte mediální dotazy reaktivního designu, abyste zajistili, že váš temát bude dobře vypadat na mobilních telefonech, tabletech i počítačích. Díky neustálému úpravování a testování se vaše první webová „pokožka“ (tj. vzhled webové stránky) postupně stane estetičtější a profesionálnější.

Závěr

Od vytvoření něčeho, co obsahuje…style.css和index.phpZačněme jednoduchým složkem a postupně pokračujme v jejím vytváření a rozšiřování, až dosáhneme požadované struktury.header.php、footer.php、single.phpAž po profesionální šablony a soubory – a poté přes…functions.phpPřidáním funkce určené k nastavení tématu, menu a skriptů jste dokončili základní vývoj prvního WordPress tématu. Tento proces vám nejen umožnil osvojit si klíčové koncepty, jako jsou struktura šablon, cykly a akční háčky, ale také vám pomohl pochopit, jak WordPress témata oddělují data, logiku a vzhledovou část webové stránky. Pokračujte v praxi a zkuste přidat ke svému tématu ještě více šablon…search.php、404.phpDíky základním funkcím (jako je podpora vlastních typů článků) a pokročilým funkcím (jako je podpora vlastních designových prvků webové stránky) budete schopni vytvořit ještě výkonnější a jedinečnější design webové stránky.

Časté dotazy

Je nutné ovládat PHP pro vývoj temát pro WordPress?

Ano, PHP je základním programovacím jazykem WordPressu. Pro vývoj plně funkčních temát je nutné ovládat základy PHP syntaxe, zejména pochopení funkcí, podmínkových příkazů, cyklů a způsobů interakce s API WordPressu (jako jsou šablony a hookové funkce). HTML a CSS slouží k vytváření vzhledu webové stránky z pohledu uživatelského rozhraní, zatímco JavaScript používáme k přidávání interaktivních efektů.

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

functions.phpFunkce obsažené v souboru jsou vázány na aktuálně aktivní téma. Pokud změníte téma, tyto funkce již nebudou dostupné. Nejvhodnější je přidávat funkce, které jsou úzce spojeny s vizuálním vzhledem a uspořádáním daného tématu – např. umístění nabídky specifické pro toto téma, postranní lištu nebo definování specifických šablon kódu (shortcodes) pro toto téma.

Funkce poskytované doplňky (plugins) jsou nezávislé na zvoleném tématu – bez ohledu na to, které téma se použije, funkce doplňků obvykle zůstávají zachovány. Doplňky jsou vhodné pro přidávání univerzálních funkcí, které nesouvisí s vzhledem tématu, jako jsou kontaktní formuláře, optimalizace pro vyhledávače (SEO), vyrovnávání obsahu (caching) atd. Dobrou praxí je vytvářet doplňky z funkcí, které lze použít i v jiných tematech.

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

Chcete, aby téma podporovalo více jazyků, tedy bylo internacionalizováno (i18n). To zahrnuje zejména zabalení všech textových stránek určených pro uživatele do vhodných formátů v kódu. Ve PHP souborech to lze provést pomocí několika způsobů…__()、_e()Pro výstup textu je potřeba použít funkce překladu. V souboru JavaScriptu je také nutné provést stejný postup.wp_set_script_translations()Provedete podobné zpracování.

Potřebujete…style.css“Text Domain” a…functions.phpVolání v…load_theme_textdomain()V tomto případě je nutné určit jedinečný textový domén (Text Domain). Poté použijte nástroj, jako je Poedit, k prohledání kódu vaší tematiky a generování požadovaných změn..potPřekladový šablonový soubor – překladatelé mohou na jeho základě vytvářet další překladové materiály..po和.moJazykové soubory. Umístěte tyto jazykové soubory do tématu./languages/Může být umístěn přímo v adresáři.

Jak ladit chyby v tematech WordPress během vývoje?

Aktivace režimu ladění v WordPressu je klíčová pro odhalování a řešení problémů. Toho lze dosáhnout editací…wp-config.phpSoubor, bude…WP_DEBUGKonstanta je nastavena natrueMůžete také aktivovat obojí najednou.WP_DEBUG_LOG(Zaznamenání chyby do logovacího souboru) aWP_DEBUG_DISPLAY(Zobrazí se chyba na stránce.) Upozorňujeme, že před spuštěním webové stránky je nutné vypnout režim ladění (debugging mode).

Kromě toho je použití nástrojů pro vývojáře v prohlížeči (spustíte je stisknutím tlačítka F12) nezbytným nástrojem pro ladění front-end stránek – umožňují kontrolovat strukturu HTML, CSS styly a chyby v konzoli JavaScriptu. U komplexních logikových částí kódu v PHP je vhodné využít další nástroje a postupy určené k efektivnějšímu ladění.error_log()Funkce nebo specializované ladící nástroje (jako např. Query Monitor) mohou také výrazně zvýšit efektivitu.

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: