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

Průvodce vývojem tem pro WordPress: Vytváření pokročilých rozhraní od nuly

Čtení za 3 minuty.
2026-03-14
2026-06-05
2,267
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, je stabilní a efektivní vývojové prostředí základem pro úspěch. To zahrnuje nastavení lokálního vývojového prostředí, potřebné nástroje a software, stejně jako pochopení základní struktury témat WordPress.

Nejprve si musíte vytvořit lokální serverové prostředí. Můžete použít integrované nástroje jako XAMPP, MAMP, Local by Flywheel nebo DevKinsta, které vám rychle umožní nainstalovat Apache, MySQL a PHP na vašem počítači. Pro současné vývojové účely doporučujeme používat prostředí podporující verzi PHP 7.4 nebo novější, abyste zajistili kompatibilitu s nejnovějšími funkcemi WordPressu.

Dále následuje editor kódu. Visual Studio Code, PhpStorm nebo Sublime Text jsou všechny vynikající volby. Visual Studio Code se stává oblíbeným nástrojem mnoha vývojářů díky svým bohatým rozšířením (např. PHP Intelephense, WordPress Snippet atd.) a silným funkcím pro ladění kódu. Kromě toho jsou také nezbytné systémy pro správu verzí kódu, jako je Git, které vám pomohou spravovat změny v kódu a spolupracovat s týmem.

Doporučujeme k přečtení. Podrobný přehled vývoje temát pro WordPress: Kompletní průvodce od základů až po pokročilé znalosti。

Porozumění struktuře adresářů témat je velmi důležité. Nejzákladnější WordPress téma vyžaduje alespoň dvě soubory:style.css和index.php。style.cssNení to pouze soubor se šablonami (style sheet), ale také “občanský průkaz” daného tématu (theme). Poznámky v hlavičce souboru (file header) obsahují metadata o názvu tématu, autorovi, popisu a dalších informacích.index.phpJedná se o hlavní šablonový soubor. S postupem vývoje vytvoříte i další šablony.header.php、footer.php、functions.phpA podobné soubory vytvářejí jasnou, modulární strukturu.

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

Core template files and structure

Témata WordPressu používají systém hierarchie šablon, což znamená, že systém automaticky vybere odpovídající šablonový soubor pro renderování na základě typu aktuálně navštěvované stránky (např. úvodní stránka, stránka článku, samostatná stránka). Znalost těchto základních šablonových souborů je klíčová pro vytvoření struktury tematu.

Porozumění struktuře a hierarchii šablon

Řízení úrovní šablon představuje systém vyhledávání pravidel, který postupuje od obecných k specifickým. Například při návštěvě blogového článku WordPress postupně hledá potřebné informace podle určených pravidel.single-post.php、single.phpA nakonec je…index.phpNa úvodní stránce se nejprve provede vyhledávání.front-page.php或home.phpPorozumění této hierarchické struktuře vám umožní přepsat výchozí rozložení na správném místě a tak dosáhnout detailní kontroly nad stránkou.

Vytvořit základní šablonový soubor

Začněme vytvořením několika nejzákladnějších souborů. Nejprve…header.phpObsahuje záhlaví dokumentu, navigační menu a identifikátor stránky (logo).

<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
    <header class="site-header">
        <div class="site-branding">
            <?php the_custom_logo(); ?>
            <h1 class="site-title"><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>
        </div>
        <nav class="main-navigation">
            'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            ) );
            ?&gt;
        </nav>
    </header>

Dále je…footer.phpObsahuje informace z patičky stránky a klíčové WordPress hooky.

Doporučujeme k přečtení. Ultimátní průvodce vytvářením profesionálních webových stránek: Vývoj temat pro WordPress od základů až po pokročilé znalosti。

    <footer class="site-footer">
        <p>©  . All rights reserved.</p>
    </footer>
    <?php wp_footer(); ?>
\n
<p></p>

Na závěr,index.phpV tomto textu používáme…get_header()和get_footer()Funkce slouží k načtení těchto částí.

<?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>No content found.</p>';
    endif;
    ?&gt;
</main>

Integrace tematických funkcí a stylů

Silný design tématu vyžaduje nejen vzhled, ale především funkčnost.functions.phpSoubory představují vaši “sada nástrojů” – slouží k přidávání funkcí, registraci položek do menu, podpoře speciálních obrázků atd. Zároveň je implementace responsivního designu pomocí šablon standardem moderních temat.

Soubor určený k vylepšení funkcí tématu

在functions.phpZde můžete provést řadu inicializačních nastavení. Nejprve si registrujte umístění navigačních položek.

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 
function my_theme_setup() {
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-theme' ),
    ) );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'title-tag' );
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Tento kód registroval dvě pozice pro přílohy k článkům a aktivoval funkce zobrazování přehledů článků („snímky“), automatického vytváření nadpisů článků a použití vlastního loga. Můžete zde také pokračovat v nastavování dalších funkcí.add_theme_support()Funkce umožňují aktivovat další funkce, jako je podpora HTML5, vlastní nastavení pozadí atd.

Napsat hlavní stylový soubor

style.cssHlavičkové poznámky („header comments“) obsahují metadata o tématu vašeho webu; WordPress na základě těchto metadat rozpozná vaše téma v pozadí.

/*
Theme Name: My Advanced Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: A modern, responsive WordPress theme built from scratch.
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-theme
*/

Po metadatach můžete začít psát CSS. Moderní vývojové postupy doporučují přednost mobilním zařízením a responzivní design.

Doporučujeme k přečtení. Vývoj témat WordPressu: vytvořte profesionální responzivní webové stránky od nuly.。

/* 基础样式与移动端 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    line-height: 1.6;
    margin: 0;
}

.site-header {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background-color: #f8f9fa;
}

.main-navigation ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
}

/* 平板电脑及以上设备 */
@media (min-width: 768px) {
    .site-main {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }
}

Z důvodu lepšího výkonu se doporučuje oddělit soubory s kódem CSS a JavaScript.wp_enqueue_style()和wp_enqueue_script()Funkce jsou načítány v pořadí, což umožňuje správné zpracování závislostí mezi nimi a předchází konfliktům.

Vlastní nastavení a pokročilé funkce

Abyste zajistili, že váš téma vynikne a bylo praktické v použití, je klíčové integrovat některé pokročilé funkce. Mezi ně patří vytvoření oblasti pro příslušenství („widgets“), možnost přizpůsobení typů článků, podpora nástrojů pro personalizaci témat a kompatibilita se sekundárními tématy („subthemes“).

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řit oblast pro nástroje (Create a tool area)

Tento malý nástroj umožňuje uživatelům snadno přetahovat komponenty do postranního panelu nebo podstránky v pozadí. Můžete jej použít k organizaci obsahu na stránce.register_sidebar()Funkce slouží k registraci panelu pro přidávání doplňkových funkcí („widgetů“).

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; esc_html__( 'Sidebar', 'my-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; esc_html__( 'Add widgets here.', 'my-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

V šabloně můžete použít…dynamic_sidebar( 'sidebar-1' )Přijďte vyvolat tuto oblast.

Integrovaný personalizátor témat

Nástroj pro vlastní nastavení témat poskytuje uživatelům rozhraní pro nastavení s možností přímého přehledu v reálném čase. Můžete jej použít k…WP_Customize_ManagerObjekty slouží k přidávání nastavení a ovládacích prvků.

function my_theme_customize_register( $wp_customize ) {
    // 添加一个“主题颜色”设置
    $wp_customize->add_setting( 'primary_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label'    => __( 'Primary Color', 'my-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );

A poté,style.cssNebo použijte to v interních stylech (inline styles).get_theme_mod( 'primary_color' )Použijte tento hodnotu barvy.

Ujistěte se, že jsou podtémata kompatibilní.

Výkonné téma by mělo být připraveno na budoucí rozšíření (podtémata). To znamená vyhnout se používání pevně zakódovaných absolutních cest v souborech šablon a místo toho používat…get_template_directory_uri()Funkce. Zároveň by měl být veškerý text, který lze přeložit, použit…__()或_e()函数进行包装，并用load_theme_textdomain()Načítání souboru s jazykovými nastaveními.

Závěr

Vývoj WordPress tématu od nuly je systématický proces, který začíná přípravou prostředí a plánováním struktury, pokračuje v detailním studiu základních šablon a sestavování jednotlivých souborů, a poté…functions.phpTémata a stylové šablony poskytují funkce a vzhled stránek, přičemž jejich použitelnost a profesionalita mohou být dále vylepšeny pomocí pokročilých funkcí, jako jsou doplňky (plugíny) a personalizéry. Po celém procesu je klíčové dodržovat kódovací standardy WordPressu, dbát na optimalizaci výkonu a rozšiřitelnost. Provedením kroků uvedených v této příručce nejen vytvoříte použitelné téma, ale také lépe pochopíte principy, které stojí za jeho fungováním, což vám poskytne solidní základ pro vývoj složitějších a přizpůsobenějších rozhraní.

Časté dotazy

Je nutné být zdatný v PHP při vývoji témat pro WordPress?

Ano, pevné základy v PHP jsou nutné. Samotné jádro WordPressu a jeho systém temat (theme system) jsou vybudovány pomocí PHP. Potřebujete porozumět PHP syntaxi, funkcím, cyklům a podmínkovým výrazům, abyste mohli efektivně pracovat s daty, vytvářet šablonové značky a budovat logiku temat. Nemusíte se však obávat – nemusíte být odborníci na PHP, abyste začali. Skvělým způsobem, jak se naučit, je začít úpravou stávajících temat nebo základního kódu uvedeného v této příručce. Učení se v praxi je velmi účinné.

Které informace jsou v souboru style.css nezbytné?

style.cssV bloku komentářů na začátku souboru…Theme NameJe to jediná nutná informace – bez ní WordPress nebude schopen v pozadí rozpoznat váš téma. Samozřejmě, pro úplnost a profesionalitu vašeho tématu se doporučuje vyplnit i ostatní informace.Author、Description、Version和Text Domain(Použito pro internacionalizaci) a další informace.

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

Musíte použít funkce pro internacionalizaci (i18n) v WordPressu. Nejprve…functions.phpPoužijte to v čínštině.load_theme_textdomain()Funkce načte jazykový soubor. Poté ve všech PHP šablonách tématu nahradí všechny textové řetězce, které je potřeba přeložit, příslušnými překladovými verzemi.__()„Nebo“_e()Funkce je zabalena do příslušných struktur. Nakonec se pomocí nástrojů, jako je Poedit, vytvoří požadovaný výstup..potŠablony souborů jsou vytvořeny příslušnými překladateli..po和.moDokumenty.

Proč se můj vlastní menu nezobrazuje?

Obvykle existuje několik důvodů. Nejprve se ujistěte, že jste…functions.phpProstřednictvím Čínyregister_nav_menus()Funkce správně registrovala umístění menu. Dále je potřeba se přihlásit do administrace WordPressu na stránce “Vzhled > Menu”, vytvořit nové menu, přiřadit ho umístění menu, které jste registrovali v kódu (např. “Primary Menu”), a poté to uložit. Nakonec zkontrolujte šablonové soubory (např.…)header.phpV tomto textu se uvádí, že funkce pro volání menu je volána v rámci nějakého kódu. Konkrétně se říká, že „Funkce pro volání menu je volána v )“.wp_nav_menu()Zda jsou parametry správné, zejména…theme_locationJe toto jméno totožné s názvem klávesy použitým při registraci?

Při vývoji témat jak správně zavést soubory JavaScript a CSS?

Nejlepší praxí je používat funkci „enqueue“ poskytovanou WordPressem, místo přímého použití této funkce v souborech šablon.<link>或<script>Tagy. Vfunctions.phpV čínštině se používáwp_enqueue_style()Zavádějte CSS a používejte ho.wp_enqueue_script()Zavedení JavaScriptu má následující výhody: umožňuje správu závislostí, předchází opakovanému načítání a zajišťuje, že kód bude spuštěn ve správných okamžicích (tj. v rámci určitých „hooků“).wp_enqueue_scriptsBěží na daném systému a harmonicky koexistuje s jádrem aplikace nebo s dalšími doplňky (pluginy).

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: