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

Návod k vývoji témat WordPressu: Vytvořte své první téma od nuly do jedné

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

Vstup do světa WordPressu a vývoj vlastního tématu je vzrušujícím milníkem. Nejenže vám umožní plně ovládat vzhled a funkce vašeho webu, ale je to také nejlepší způsob, jak hloubkově pochopit základní principy fungování WordPressu. Tento průvodce vás provede od začátku a pomůže vám vytvořit základní, ale kompletní téma, které pokryje každý důležitý krok – od struktury souborů po klíčové šablony.

Vytvoření vývojového prostředí a struktury témat

Než začnete psát kód, je potřeba vhodné vývojové prostředí. Doporučujeme použít software pro lokální servery, jako jsou XAMPP, WAMP nebo MAMP, které umožňují rychle nastavit prostředí obsahující Apache, MySQL a PHP na vašem počítači. Kromě toho je nezbytný i vhodný editor kódu, např. Visual Studio Code, Sublime Text nebo PHPStorm.

Nejzákladnější WordPress téma vyžaduje alespoň dva soubory:style.css和index.php。style.cssNení to jenom šablona stylů – je to vlastně “občanský průkaz” vašeho tématu. WordPress rozpoznává vaše téma na základě poznámek umístěných v hlavičce tohoto souboru. Nejprve se podívejte do adresáře vaší lokální instalace WordPressu…wp-content/themesV té složce vytvořte novou složku, například…my-first-themePoté vytvořte v této složce novou složku.style.cssDokumenty.

Doporučujeme k přečtení. Ovládnutí vývoje temát pro WordPress: Kompletní průvodce od základů po praktické tipy。

Definice informací o tématu

在style.cssNa začátku souboru musíte přidat určitý blok poznámek, který bude obsahovat metadata týkající se tématu.

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 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Mezi nimi,Theme Name和Text DomainToto je povinné pole. Textové pole slouží k mezinárodnímu překladu a obvykle se shoduje s názvem složky obsahující dané téma.

Vytvoření hlavní šablony souboru

index.phpJedná se o výchozí šablonu daného tématu a zároveň o nejdůležitější záložní šablonu. Když WordPress nenajde konkrétnější šablonový soubor (např.single.php, page.phpPoužije se tehdy, když je potřeba zobrazit obsah. Můžete do něj vložit nejzákladnější HTML strukturu a některé funkce WordPressu, které slouží k načtení a zobrazení obsahu.

Core template files and loops

Systém temát WordPress je založen na použití šablon – různé typy stránek jsou řízeny jednotlivými šablonovými soubory. Porozumění a vytváření těchto základních šablonových souborů je klíčové pro vývoj temát.

Nejzákladnějším konceptem je “WordPress Loop” (The Loop). Jedná se o strukturu PHP kódu, která slouží k načítání článků (Posts) z databáze a jejich postupnému zobrazení. Téměř všechny šablony určené k zobrazení obsahu vyžadují použití tohoto cyklu.

Doporučujeme k přečtení. Jak vytvořit profesionální téma pro WordPress: Kompletní průvodce od nuly až po spuštění。

Vytvoření šablony domovské stránky

index.phpSoubor by měl obsahovat kompletní HTML strukturu a cykly. Jednoduchý příklad je následující:

<!DOCTYPE html>
<html no numeric noise key 1021>
<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 1018>
    <?php wp_body_open(); ?>
    <header>
        <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>
    </header>
    <main>
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
                    <h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
                    <div class="entry-content">
                        <?php the_excerpt(); ?>
                    </div>
                </article>
            
            <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Tento soubor definuje základní strukturu webové stránky a v hlavní oblasti pomocí cyklu vypisuje seznam článků. Funkce jako…the_title()、the_excerpt()Slouží k výstupu obsahu článku.wp_head()和wp_footer()Jedná se o zásadně důležitý „hook“, který umožňuje jádru WordPressu, pluginům a dalším skriptům vložit potřebný kód.

Články a šablony stránek

single.phpSlouží k zobrazení jediného článku.page.phpSlouží k zobrazení jednotlivých stránek. Mají podobnou strukturu, ale obvykle…single.phpBude obsahovat prvky jako kategorie a tagy.page.phpTak je to ještě jednodušší. Můžeš začít tím, že to zkopíruješ.index.phpZačněte je vytvářet a poté nahraďte obsah uvnitř cyklu…the_content()Zobrazit celý text.

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í stylů a skriptů

Moderní webové stránky vyžadují kvalitní vzhled a funkční interakce s uživateli. WordPress poskytuje standardní funkce pro bezpečné načítání souborů CSS a JavaScript, namísto jejich přímého použití v HTML kódu.<link>或<script>Tagy.

Vytváření a používání souborů s funkcemi

Potřebujete vytvořit něco s názvem…functions.phpTento soubor není šablonovým souborem, ale souborem určeným k “vylepšení funkcí” této tematiky – slouží k přidávání nových funkcí, aktivování určitých vlastností nebo úpravě výchozího chování WordPressu. Právě zde registrováváme styly a skripty.

Bezpečné začlenění zdrojů

在functions.phpV čínštině se používáwp_enqueue_style()和wp_enqueue_script()Funkce. Standardním postupem je vytvořit funkci a poté ji použít pomocí…wp_enqueue_scriptsTento akční hook slouží k jeho volání.

Doporučujeme k přečtení. Konečný průvodce: Jak vyvinout profesionální WordPress téma od nuly。

<?php
function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入自定义CSS文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 引入JavaScript文件
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Tento kód zajišťuje, že soubory CSS a JS jsou načteny ve správný čas.get_stylesheet_uri()Funkce vrátí téma.style.cssCesta k souboru.get_template_directory_uri()V takovém případě se vrátí URL adresáře s tématy.

Šablony a tematické funkce

Když se téma stává stále složitějším, je dobrou praxí modularizovat opakující se části kódu. WordPress nabízí funkce “Template Parts” (Šablony) a “Navigation Menus” (Navigační menu).

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

Vytvoření znovupoužitelných šablonových komponent

Například můžete oddělit hlavičku a patičku webové stránky do samostatných souborů. Můžete je vytvořit tak, aby byly přizpůsobené potřebám vašeho webu.header.php和footer.phpSoubor, bude…index.phpZkopírujte odpovídající kód a poté jej v původním místě použijte s následujícími voláními funkcí:

<?php get_header(); ?>
<?php get_footer(); ?>

Můžete také vytvořit univerzálnější komponenty, například…content.php或post-item.phpPoužít uvnitř cykluget_template_part()Funkce slouží k načítání dat, což výrazně zvyšuje využitelnost kódu.

Aktivovat a přizpůsobit nabídku navigačního menu

Systém menu v WordPressu je velmi výkonný. Nejprve je potřeba…functions.phpPoužijte to v čínštině.register_nav_menus()Funkce slouží k registraci umístění jídelních položek.

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Poté, ve šablonovém souboru (např.header.phpV místě, kde chcete zobrazit menu, použijte…wp_nav_menu()Funkce to vypíše.

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) );
?>

Nyní mohou uživatelé v administraci WordPress v sekci “Vzhled” -> “Menu” vytvořit nová menu a přiřadit je do pozice “Primární menu” (Primary Menu).

Závěr

Díky této příručce jste dokončili celý proces přechodu z prázdné složky na WordPress téma s základními funkcemi. Naučili jste se vytvářet potřebné soubory.style.css和index.phpPorozuměl jsem základní funkci cyklů v WordPressu a sestavil jsem…single.php和page.phpZjistil jste také, jak…functions.phpBezpečné přidávání stylů a skriptů, stejně jako používání šablonových komponent a systémů navigačních menu k organizaci kódu a vylepšení funkcí tématu – to je pouze začátek. Následně můžete zkoumat další pokročilé funkce, jako jsou boční panely, oblasti nástrojů, vlastní typy článků, API pro personalizaci témat atd., abyste své téma neustále obohacovali a vylepšovali.

Časté dotazy

Musí se vývoj témat začínat od nuly?

Nemusí to být nutné. Pro začátečníky je nejlepší začít od nuly. Avšak v reálných projektech můžete zvolit oficiální prázdné téma (např. Underscores), framework (např. Genesis) nebo úvodní téma (např. _s) jako výchozí bod. Tyto nástroje již obsahují stabilní základní kódovou strukturu, což vám umožní se více soustředit na vývoj designu a obchodní logiky.

Je soubor index.php nutný?

Ano,index.phpJedná se o šablonový soubor, který je nutný pro fungování WordPress tématu. Představuje poslední obranu v hierarchii šablon – pokud dojde k problémům s jinými, konkrétnějšími šablonovými soubory (např.…)archive.php, search.phpPokud daný element neexistuje, WordPress použije své vlastní nastavení.index.phpZobrazí stránku a zajistí, aby webová stránka vždy měla nějaký obsah k zobrazení.

Jak ladit problémy s vývojem mého tématu?

Nejprve se ujistěte, že ve vašem…wp-config.phpVe souboru je zapnut režim WP_DEBUG.define( ‘WP_DEBUG’, true );Tento řádek je nastaven na „true“. Díky tomu se chyby PHP a varování WordPress zobrazí přímo na stránce, což vám usnadní lokalizaci problémů. Stejně důležitým krokem je také použití nástrojů pro vývojáře v prohlížeči (spustíte je stisknutím tlačítka F12) k kontrole chyb v CSS a JavaScriptu.

Můžu dělat cokoli v souboru functions.php souvisejícím s daným tématem?

Teoreticky je to možné, ale nejlepší praxí je přidávat pouze kód, který je přímo související s vzhledem a funkcemi daného tématu. Komplexní funkce, které se týkají hlavní obchodní logiky nebo práce s daty, by měly být vyvinuty jako samostatné pluginy. Výhodou tohoto přístupu je, že při změně tématu tyto funkce nezmizí, což zlepšuje udržovatelnost a znovupoužitelnost kódu.

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: