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

Naučíme vás krok za krokem, jak vytvořit výkonné vlastní WordPress téma.

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

Proč se rozhodnout postavit temu pro WordPress od začátku?

V světě open source existuje obrovské množství bezplatných i placených temat pro WordPress, což přiměje mnoho uživatelů k tomu, aby je jednoduše stahovali a používali. Nicméně výběr vytvoření vlastního tematu od nuly přináší neopakovatelné výhody. Za prvé, dává vývojáři absolutní kontrolu nad vzhledem, funkcemi a výkonem webové stránky. Můžete odstranit veškerý zbytečný kód a funkce a vytvořit tak řešení, které plně odpovídá požadavkům projektu, čímž výrazně zlepšíte rychlost načítání stránek a uživatelský zážitek.

Zadruhé, vlastní tematika nepřináší problémy s kompatibilitou při aktualizacích, jak je tomu u některých třetích stran, které mohou vést ke konfliktům s klíčovými funkcemi nebo nainstalovanými doplňky. Můžete také dodržovat osvědčené postupy a bezpečnostní směrnice vývoje WordPressu, což je zvláště důležité pro komerční projekty, protože zajišťuje dlouhodobou udržovatelnost a bezpečnost kódu. Nakonec, jedná se o skvělý způsob, jak se hlouběji seznámit s hierarchií šablon v WordPressu.WP_QueryAPI pro vlastní nastavení témat a háčky (hooks)actions 和 filtersZákladní koncepty jako „pluginy“, „tematika“ („themes“) a „přizpůsobitelnost“ („customization“) jsou pro každého vývojáře WordPressu zásadní. Tyto znalosti jsou nezbytné pro efektivní práci s tímto redakčním systémem.

Přípravné kroky zahrnují několik klíčových bodů: ujistěte se, že máte k dispozici lokální nebo online vývojové prostředí pro WordPress; vhodný editor kódu, např. VS Code nebo PhpStorm; a základní znalosti HTML, CSS, PHP a JavaScript. Teď se můžeme pustit do vytváření prvního souboru tematického nastavení („theme file“).

Doporučujeme k přečtení. Kompletní průvodce vývojem témat WordPressu: od začátků až po pokročilé vytváření vlastních témat.。

Vytvoření základní struktury a klíčových souborů tématu

Efektivní WordPress téma musí obsahovat alespoň dvě základní soubory:index.php 和 style.cssTen druhý (zdroj) nejenže poskytuje styly, ale také obsahuje metadata, které popisují téma pro WordPress. Začněme vytvořením adresáře s tematy.

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

Vytvoření adresáře s tematikou a souboru se šablonami

Nejprve, ve složce s instalací vašeho WordPressu… wp-content/themes/ V té složce vytvořte nový adresář, například… my-custom-themeVšechny soubory týkající se konkrétních témat budou umístěny zde.

Dále vytvořte style.css Soubor a do jeho začátku přidejte potřebné bloky poznámek. Tyto poznámky jsou nezbytné pro to, aby WordPress rozpoznal daný téma.

/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 一个为学习和实践而打造的强大自定义主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Text Domain Používá se pro internacionalizaci a bude potřeba při následném volání funkce pro překlad.

Vytvoření základní šablony indexu

index.php Jedná se o výchozí šablonu pro dané téma a zároveň o možnost návratu do nejzákladnější struktury šablon. Je velmi základní. index.php Je možné zajistit, aby webová stránka vždy zobrazovala obsah bez ohledu na okolnosti.

Doporučujeme k přečtení. Kompletní průvodce vývojem temát pro WordPress: Vytvoření vysokokvalitních, přizpůsobitelných temát od nuly。

<!DOCTYPE html>
<html no numeric noise key 1009>
<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 1006>
    <?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>
        &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>

<footer>
        <p>© Copyright ….</p>
    </footer>

<?php wp_footer(); ?>
</body>
</html>

V tuto chvíli stačí tyto dvě soubory umístit do adresáře s tematikou a vaše tema budete moci vidět a aktivovat v administraci WordPressu v sekci “Vzhled” -> “Témata”. I když vypadá velmi jednoduše, již se jedná o plně funkční tema. Následně potřebujeme do něj přidat modulární prvky a vylepšit jeho funkce.

Implementace hierarchie šablon a modulárního designu

Pro čistotu a udržovatelnost kódu by se neměla veškerá HTML struktura vtěsnat do jediného souboru. index.php Ano. Systém úrovní šablon v WordPressu nám umožňuje vytvářet speciální šablonové soubory pro různé typy stránek.

Rozdělit záhlaví stránky, patičku stránky a boční lištu

Vytvořit header.php、footer.php 和 sidebar.php Je to první krok k modularitě.

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

将 index.php 中 <head> 到 <main> Předchozí část přesuňte… header.php。 <footer> Část následující po tomto bodě přesuňte… footer.phpA poté, index.php Použijte to v čínštině. get_header() 和 get_footer() Funkce je zavádějí (tj. používají jejich obsah).

<?php get_header(); ?>

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

<?php get_sidebar(); ?> <!-- 如果创建了侧边栏文件 -->
<?php get_footer(); ?>

Vytvořit šablonu obsahu článku

Pro zobrazení obsahu článků je nejlepší praxí vytvořit samostatnou část šablony. content.php 或 template-parts/content.phpPřesuňte logiku zobrazení uvnitř cyklu do tohoto nového místa. Poté… index.php Použít v cyklu get_template_part() Zavolejte ho.

// 在 index.php 的循环中替换为：
while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

Tato funkce nejprve hledá něco jako… content-video.php Tento formát vyžaduje specifický šablonu; pokud není nalezena, systém se vrátí na předchozí nastavení. content.php。

Doporučujeme k přečtení. Vývoj témat WordPressu od začátku až po pokročilou úroveň: základní průvodce pro vytváření vlastních webových stránek.。

Integrace základních funkcí WordPressu s vlastním nastavením tématu

Silný téma musí být hluboce integrováno s klíčovými funkcemi WordPressu, jako jsou menu, widgety, zkratky článků a nástroj na přizpůsobení tématu.

Registrování navigačního menu a oblasti nástrojů

V rámci tohoto tématu… functions.php Ve souboru se používá… register_nav_menus() Místo pro registraci restaurací.

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 
function my_custom_theme_setup() {
    // 注册主菜单
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
        'footer'  => esc_html__( '页脚菜单', 'my-custom-theme' ),
    ) );

// 添加文章缩略图支持
    add_theme_support( 'post-thumbnails' );

// 添加自定义Logo支持
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Zároveň můžeme registrovat oblast pro příslušenství (boční panel).

Funkce my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hlavní postranní panel', 'my-custom-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Zde přidejte widgety.', 'my-custom-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<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_custom_theme_widgets_init' );

在 header.php Nebo v šablonovém souboru, použijte… wp_nav_menu() Zobrazit menu.

Přidání možností pro vytváření tematických nastavení

Nástroj pro přizpůsobení témat (Customizer) umožňuje uživatelům v reálném čase prohlížet a upravovat nastavení témat. Můžeme tedy… WP_Customize_Manager Přidání možností pro objekt.

function my_custom_theme_customize_register( $wp_customize ) {
    // 添加一个“主题选项”板块
    $wp_customize->add_section( 'theme_options', array(
        'title'    => __( '主题选项', 'my-custom-theme' ),
        'priority' => 130,
    ) );

// 添加一个页脚版权文本设置
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 Your Company',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

$wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'my-custom-theme' ),
        'section'  => 'theme_options',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'my_custom_theme_customize_register' );

A pak v footer.php V čínštině se používá get_theme_mod() Vypusťte tento hodnotu.

<p><?php echo esc_html( get_theme_mod( 'footer_copyright_text', '© 2026 Your Company' ) ); ?></p>

Optimalizace výkonnosti a bezpečnosti témat

Posledním klíčovým krokem při vytváření tématu je zajistit, aby bylo rychlé a bezpečné.

Správné načtení skriptů a stylů

Musí být použito. wp_enqueue_scripts Za pomocí „hooků“ se načítají soubory CSS a JavaScript, což zajišťuje správné zpracování závislostí mezi těmito soubory a předchází jejich duplicitnímu načítání.

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 加载Google Fonts
    wp_enqueue_style( 'my-custom-theme-fonts', 'https://fonts.googleapis.com/css2?family=...' );

// 加载主JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 为评论回复脚本添加条件加载
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Zavedení základních bezpečnostních opatření

Nikdy nevěřte původnímu výstupu uživatelů ani databází. Všechny dynamické obsahy je třeba vyhodnotit („escape“).

  • Použití esc_html(), esc_attr(), esc_url() Utextu vypisovaného do HTML atributů nebo obsahu je třeba provést escape.
  • Před vložením dat do databáze je třeba je… sanitize_text_field() Provedení úklidu atd.
  • Použít v šabloně the_title(), the_content() Funkce jako tyto již obsahují vestavěné možnosti escapeování. Pro vlastní pole je třeba použít… echo esc_html( get_post_meta( $post->ID, 'key', true ) );。

Závěr

Prostřednictvím výše uvedených kroků jsme dokončili vytvoření základů pro funkční a vlastní WordPress téma. Začali jsme vytvořením těch nejzákladnějších částí tématu… style.css 和 index.php Začali jsme postupně zavádět koncepty hierarchie šablon a modulárního designu a rozdělili hlavičku a patičku stránky. Následně jsme… functions.php Integruje základní funkce WordPressu, jako jsou navigační menu, widgety a ukázky článků, a poskytuje uživatelům přívětivé nastavení prostřednictvím nástroje na přizpůsobení tématu. Na závěr zdůrazňujeme výhody použití tohoto řešení. wp_enqueue_scripts Důležitost optimalizace načítání zdrojových dat a zavedení bezpečnostních opatření, jako je escapeování výstupních dat.

Téma je sice základní, ale má jasnou strukturu a dodržuje osvědčené postupy, což vytváří solidní základ pro přidávání jakýchkoli složitějších funkcí (jako jsou vlastní typy článků, pokročilé možnosti nastavení tématu, načítání obsahu pomocí AJAX apod.). Pokračujte v prozkoumávání dokumentace WordPress Codex a dalších vývojářských zdrojů a budete moci postupně rozšiřovat možnosti tohoto tématu.

Časté dotazy

K vytvoření tématu pro WordPress je nutné ovládat které programovací jazyky?

Vytvoření kompletně funkčního WordPress tématu vyžaduje znalost PHP, HTML, CSS a JavaScript. PHP se používá k zpracování serverové logiky a interakci s jádrem WordPress; HTML tvoří strukturu stránek; CSS se stará o styly a rozvržení; JavaScript slouží k realizaci interakcí na straně klienta a dynamických efektů. Základní znalosti SQL také pomohou lépe porozumět datovým dotazům v WordPressu.

Co zvláštního dělá soubor functions.php v tématu?

functions.php Soubor představuje “centrum funkcionalit” tématu a hraje velmi důležitou roli. Není to plugin, který se načítá při každém načtení stránky, ale je součástí samotného tématu. Kód, který do tohoto souboru přidáte, může měnit výchozí chování tématu, registrovat nové funkce (jako jsou menu nebo panely nástrojů), přidat podporu pro konkrétní funkce (např. zkrácené verze článků), řídit pořadí načítání skriptů a stylů, a také definovat různé vlastní funkce. Jedná se o most, který spojuje vaše téma se základními funkcemi WordPressu.

Jak mohu zajistit, aby téma WordPress, které jsem vytvořil, podporovalo více jazyků?

Pro podporu více jazyků v tématu ( internacionalizace – i18n a lokalizace – l10n) jsou zapotřebí hlavně dvě kroky. Nejprve… style.css Pro poznámky a všechny řetězce, které je třeba přeložit, použijte něco jako: __（'Text', 'text-domain'） 或 _e（'Text', 'text-domain'） Takovou funkci překladu je potřeba zabalit do vhodného obalu („wrapper“). Dále lze pomocí nástrojů, jako je Poedit, prohledat soubory temat („theme files“) a na základě toho generovat potřebné data. .pot Šablonový soubor a poté vytvořte odpovídající verzi pro každý jazyk. .po A po kompilaci .mo Soubor a umístěte ho do tématu. /languages/ Tyto překlady se nacházejí v adresáři. Uživatelé mohou tyto překlady spravovat pomocí doplňků, jako je Loco Translate.

Jak si vybrat vlastní téma (Custom Theme) a dceřiné téma (Child Theme)?

Záleží to na vašich konkrétních cílech a způsobu vývoje. Pokud začínáte od nuly a vytváříte jedinečný design a funkce pro konkrétní projekt, a nemáte v plánu využívat styly a šablony jiného „rodičovského“ tématu, pak je vytvoření vlastního tématu vhodné. Jeho výhodou je, že kód je zcela nezávislý a neobsahuje žádné zbytečnosti.

Podtémata slouží k úpravě nebo rozšíření stávajícího hlavního tématu (parent theme). Pokud chcete upravit populární téma, jako je Astra nebo GeneratePress, a zároveň si přejete, abyste v budoucnu mohli bezpečně aktualizovat hlavní téma bez ztráty vašich vlastních úprav, je nutné použít podtémata. Podtémata obsahují pouze vaše vlastní soubory (např. style.css, functions.php Tento šablonový soubor (spolu se všemi překrytými šablonami) dědí všechny funkce z nadřazeného tématu. Jedná se o způsob úpravy šablon doporučený oficiálně WordPressem, který nejvíce zajišťuje kompatibilitu s novými verzemi WordPressu.

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: