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

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

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

Přípravné práce a nastavení prostředí.

Než začnete psát kód, potřebujete vhodné vývojové prostředí. To zahrnuje lokální serverové prostředí (např. XAMPP, MAMP nebo Local by Flywheel), editor kódu (např. VS Code nebo PhpStorm) a zcela novou instalaci WordPressu. Ujistěte se, že vaše verze WordPressu je nejnovější, abyste mohli využívat nejnovější funkce a API.

Následně budete potřebovat v WordPressu…wp-content/themesV adresáři vytvořte novou složku, jejíž název bude odpovídat “slug” vašeho tématu. Například:my-first-themeTento složek bude sloužit jako úložiště všech vašich tematických souborů. Nejzákladnější soubory WordPress témat obsahují pouze dva:index.php和style.cssMezi nimi jestyle.cssNejde pouze o šablony stylů, ale také o “hlavičkové soubory” (header files), které obsahují metadata tématu. Informace v těchto poznámkách jsou zásadní pro to, aby WordPress rozpoznal vaše téma.

Vytvořte základní…style.cssSoubor – jeho počáteční poznámky by měly obsahovat následující informace:

Doporučujeme k přečtení. Vytvoření dokonalého tématu pro WordPress: Kompletní průvodce vývojem od základů až po pokročilé úrovně。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.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
*/

Text DomainSlouží k internacionalizaci a mělo by odpovídat názvu vaší složky s tematikou. Zároveň vytvořte tu nejjednodušší verzi tohoto souboru.index.phpSoubor by měl obsahovat pouze jednu větu.<?php get_header(); ?>A s jedním…<h1>Ahoj světě!</h1>V této chvíli byste v záložce “Vzhled” → “Témata” v administraci WordPressu měli vidět své téma a mohli byste ho aktivovat. I když zatím nic nezobrazuje (protože jsme ještě žádné obsahy nevytvořili).header.php), ale to znamená, že jste úspěšně učinili první krok.

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í základnímu souboru šablony a hierarchii šablon

WordPress využívá inteligentní systém zvaný “soustava úrovní šablon” („template hierarchy“), který rozhoduje, který soubor šablony by měl být použit k zobrazení obsahu na konkrétní požadavek na stránku. Porozumění této struktuře je základem pro vývoj temát („themes“). Systém začíná hledáním od nejkonkrétnějšího souboru šablony; pokud takový soubor neexistuje, přejde na obecnější verzi šablony.

Nejzákladnější šablony zahrnují:
* index.phpKonečný „záložní“ šablonový model, který se použije pro všechny požadavky, pokud není nalezen konkrétnější šablona.
* header.phpObsahuje dokument.<head>Část a hlavičková oblast webové stránky. Prostřednictvím…get_header()Zavedení funkce.
* footer.phpObsahuje oblast patice webové stránky.get_footer()Zavedení funkce.
* sidebar.phpObsahuje komponenty bočního panelu. Prostřednictvím…get_sidebar()Zavedení funkce.
* functions.phpToto není šablonový soubor, ale “fonkční knihovna” vašeho tématu, která slouží k přidávání funkcí, registraci menu, nástrojů a dalších prvků.

Pro různé typy stránek existují konkrétnější šablony:
* 单篇文章：查找顺序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php(Vlastní šablona) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（博客首页、分类页等）：查找顺序是home.php(Použito pro stránky se seznamem blogových článků) -> front-page.php(Používá se při nastavování statické stránky jako domovské stránky) -> index.php。

Vytvoření šablon pro záhlaví a patro stránky

Nejprve vytvořte…header.phpMusí začínat slovem „It“.<!DOCTYPE html>Začněte a zahrňte klíčové volání funkcí WordPressu, např.:wp_head()。

Doporučujeme k přečtení. Vlastní prémiové WordPressové šablony: kompletní návod od návrhu přes vývoj až po optimalizaci。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/cs/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

Stejně tak, vytvořit…footer.phpA ujistěte se, že volání proběhne správně.wp_footer()Funkce.

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    <?php wp_footer(); ?>
\n
<p></p>

Nyní můžete aktualizovat své…index.phpPoužijte tyto šablonové komponenty.

<?php get_header(); ?>

<main>
    <h1>Ahoj světě – odesláno z hlavního programu („Main“)!</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

Vylepšení funkcí tématu prostřednictvím souboru functions.php

functions.phpSoubory představují “mozek” vašeho projektu – právě v nich přidáváte funkce, registrováte komponenty jádra WordPress (jako jsou menu a widgety) a také zařazujete styly a skripty do odpovídajících souborů.

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í podpory temat a registračního navigačního menu

Nejprve si povolíme některé základní funkce tématu. Použijte…add_theme_support()Funkce slouží k deklaraci funkcí, které daná funkce podporuje.

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

Následně si registrujte pozici pro navigační položku v menu. To umožňuje uživatelům konfigurovat menu v části “Vzhled” -> “Menu” v administraci a poté jej použít v šablonách.wp_nav_menu()Funkce ji volá.

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

Zahrnout do šablony stylů a skriptů

Správný způsob načítání stylů a skriptů je prostřednictvím…wp_enqueue_style()和wp_enqueue_script()Funkce, které je potřeba nasadit (mountovat).wp_enqueue_scriptsNa háčku.

Doporučujeme k přečtení. Komplexní analýza vývoje temat pro WordPress: Praktický průvodce od základů po pokročilé dovednosti。

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入自定义JavaScript文件
    wp_enqueue_script('my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Vytvoření cyklu a šablony obsahu

“Cyklo” je struktura PHP kódu v WordPressu, která slouží k načítání a zobrazování článků z databáze. Je v podstatě „srdcem“ téměř všech šablonových souborů.

Porozumět struktuře hlavního cyklu

Výše uvedeném…index.phpV příkladu jsme již viděli základní cyklus. Rozdělejme ho na jednotlivé části:

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 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>
<?php endif; ?>

Vytvoření šablony pro jednotlivý článek

Teď vytvoříme šablonu určenou výhradně k zobrazení jediného článku.single.phpJe podrobnější než cykly na stránce se seznamem.

<?php get_header(); ?>

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1><p><strong> Řekněte mi něco o sobě.</strong></p></h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

Závěr

Díky této příručce jste dokončili základní proces vytvoření WordPress tématu od nuly. Začali jsme vytvořením vývojového prostředí a základních souborů a postupně jsme se ponořili do pochopení systému vrstev šablon v WordPressu, který je základem pro vytváření flexibilních témat. Naučili jste se, jak vytvářet znovupoužitelné komponenty a struktury, které mohou být použity v různých částech tématu.header.php和footer.phpŠablony a komponenty, využívající výkonné…functions.phpSoubor přidal vaší tematice důležitou podporu pro klíčové funkce, jako je navigační menu a načítání stylů. Nakonec jsme prozkoumali “cyklický” mechanismus v WordPressu a vytvořili šablony pro zobrazení seznamu článků a jednotlivých článků.

To je jen začátek. Následně můžeš zkoumat vytváření dalších specifických šablon (např.…)page.php, archive.phpV oblasti registrace doplňkových nástrojů („widgets“) je nutné přidat vlastní typy článků a klasifikace, stejně jako implementovat pokročilejší reaktivní design a interakce pomocí JavaScriptu. Nezapomeňte, že nejlepším způsobem, jak zlepšit své dovednosti, je sledovat oficiální dokumentaci pro vývojáře a neustále se praktikovat.

Časté dotazy

Co mám dělat, když po aktivaci mého tématu webové stránky zobrazují pouze prázdnou obrazovku (bílý ekran)?

To je obvykle způsobeno fatální chybou v PHP. Nejprve si prosím zkontrolujte svůj kód.functions.phpExistují v tom souboru gramatické chyby, například chybějící čárky za tečkami nebo závorky? Otevřete WordPress…WP_DEBUGRežim vám může pomoci zobrazit konkrétní chybové informace.wp-config.phpV dokumentu budou uvedeny následující informace:define('WP_DEBUG', false);Změňte to na:define('WP_DEBUG', true);。

Jak přidat funkci vlastního loga ke svému tématu?

Ve vašemfunctions.phpDokumenty jsouadd_theme_supportČást… Přidejte jeden řádek:add_theme_support('custom-logo');Můžete také předat parametr ve formě pole, který určí velikost loga a zda má být jeho výška pružná (může se měnit v závislosti na okolních podmínkách). Následně může uživatel nahrát logo v sekci “Vzhled” -> “Vlastní” -> “Identita stránky” a použít ho v šabloně.the_custom_logo();Funkce ji volá.

Proč se navigační menu, které jsem registroval, nezobrazuje v pozadí (v backendu)?

Proveďte prosím kontrolu následujících bodů: Za prvé, ujistěte se, že váš registrační kód je platný.functions.phpA bylo správně připojeno (mountováno).initHook or…after_setup_themeNa háčku. Za druhé, ujistěte se, že jste správně definovali…theme_location(Například)'primary'Při volání…wp_nav_menu()Čas musí být naprosto shodný. Za třetí, po vytvoření menu je nutné v záložce “Vzhled” -> “Menu” -> “Správa umístění” v backendu přiřadit určité menu tomu umístění, které jste si registrovali.

Jak vytvořit malou oblast nástrojů (boční panel)?

Nejprve,functions.phpPoužijte to v čínštině.register_sidebar()Funkce slouží k registraci malého nástrojového prvku („widgetu“). Je potřeba poskytnout pole obsahující parametry, které definují ID, název, popis tohoto prvku atd. Poté můžete tento nástrojový prvek zobrazit ve šabloně stránky, kde chcete, aby se zobrazovala postranní lišta.sidebar.phpV tomto případě se používádynamic_sidebar()Funkce je volána s předaným ID nástroje, který má být použit. Nakonec…index.php或single.phpV šablonách typu „Wait“ se to používá…<?php get_sidebar(); ?>Zavádíme šablonu pro boční panel.

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: