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

Od nuly ke jedničce: Kompletní průvodce vývojem WordPress temat a praktické výukové materiály

Čtení za 3 minuty.
2026-03-17
2026-06-03
2,808
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áklady vývoje témat WordPress a nastavení prostředí

Chcete-li začít s vývojem temat pro WordPress, je nejprve důležité pochopit jeho základní koncepty. Tema WordPress je v podstatě souborů, které zahrnují šablony, obrázky a soubory JavaScriptu. Právě tyto soubory společně určují vzhled a funkce webové stránky. Vývojem temat vytváříte soubor pravidel, která říkají WordPressu, jak má obsah z databáze zobrazovat návštěvníkům.

Příprava prostředí před začátkem vývoje je velmi důležitá. Potřebujete místní vývojové prostředí, které lze snadno nastavit instalací nástrojů jako XAMPP, MAMP, Local by Flywheel nebo Docker. Místní prostředí vám umožňuje vyvíjet, testovat a ladit kód bez ovlivnění webové stránky v provozu. Kromě toho je nezbytný efektivní editor kódu, např. Visual Studio Code,PhpStorm nebo Sublime Text, které poskytují funkce jako výrazové zvýraznění, podpory při psaní kódu a ladění, čímž výrazně zvyšují efektivitu vývoje.

Dále potřebujete pochopit strukturu adresáře daného tématu. Každé téma se nachází v…/wp-content/themes/Nachází se v adresáři a existuje jako samostatná složka. Nejzákladnější téma vyžaduje pouze dvě soubory:style.css和index.php…instyle.cssV hlavičkových poznámkách je třeba poskytnout metadatové informace o tématu.

Doporučujeme k přečtení. Podrobný přehled vlastních polí v WordPressu: Od základů až po pokročilé aplikace。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习WordPress主题开发的简单主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Tentostyle.cssSoubory nejsou pouze šablony stylů, ale také “občanské průkazy” vašeho tématu. WordPress na základě čtení těchto poznámek identifikuje a zobrazí vaše téma v pozadí.

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 the theme hierarchy structure

WordPress využívá inteligentní systém nazývaný “Hierarchie šablon”, který rozhoduje, který šablonový soubor by měl být použit k zobrazení obsahu na konkrétní požadavek na stránku. Porozumění této hierarchii je klíčové pro vývoj temát (tém).

Nejzákladnějším souborem šablony je…index.phpSlouží jako ultimátní náhradní šablona pro všechny stránky. Použije se, když WordPress nenajde konkrétnější šablonu. Úvodní stránka se obvykle skládá z…front-page.php或home.phpOvládání. Preferovaná možnost pro zobrazení článku na jedné stránce.single.phpA pro konkrétní typy článků, například “produkty”, WordPress vyhledává…single-product.phpPoužití stránkypage.phpPokud stránka obsahuje vlastní šablonu, bude tato šablona použita.page-{slug}.php或page-{id}.phpStránky pro archivaci článků (např. podle kategorií, tagů, autorů, dat vydání) odpovídají…archive.phpa jejich konkrétnější varianty, jako např.category.php、tag.phpAtd.

Šablony pro horní a dolní části tématu

Aby bylo dodrženo pravidlo DRY (Don’t Repeat Yourself – Nepoužívejte stejné kódy vícekrát), tematika WordPress využívá…get_header()、get_footer()和get_sidebar()Použijte funkce jako „include“ nebo „require“ k načtení společných částí kódu. To znamená, že budete muset vytvořitheader.php和footer.phpDokumenty.

header.phpSoubory obvykle obsahují záhlaví HTML dokumentu, meta značky, odkazy na stylové soubory a skripty, stejně jako navigační oblast v horní části webové stránky. Ze zásadního důvodu musí také obsahovat…wp_head()Funkční volání – tato funkce umožňuje jádru WordPressu, pluginům a samotným temám provádět určité operace.<head>Část potřebného kódu je vložena.

Doporučujeme k přečtení. Návod k vývoji témat pro WordPress: Jak vytvořit svou webovou stránku od nuly。

footer.phpSoubor obsahuje informace umístěné na spodní části webové stránky, odkazy na skripty atd., a je ukončen…wp_footer()Funkce skončila, a to…wp_head()Jejich funkce je podobná; slouží k vložení kódu na spodní část stránky.

V souboru šablony je můžete zavést následovně:

<?php get_header(); ?>

<!-- 主内容区 -->

<?php get_footer(); ?>

Tématické funkce a WordPressové cykly

Funkce tématu se neomezují pouze na vzhled.functions.phpDo souboru můžete přidávat funkce pro své téma, registrovat nové vlastnosti a integrovat doplňky. Tento soubor se automaticky načte po aktivaci vašeho tématu a funguje jako vlastní doplněk určený přímo pro vaše téma.

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íWordPress cyklům

WordPressové cykly jsou základní logikou při vývoji temat. Jedná se o kus PHP kódu, který kontroluje, zda na aktuální stránce existují články (neboli příspěvky), které je třeba zobrazit. Pokud ano, cyklus prochází všechny články a vypisuje je. Základní struktura cyklu je následující:

<!-- 在这里输出文章内容 -->
        <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; ?>

V cyklu můžete použít řadu šablonovacích značek k výstupu informací o článku, například:the_title()Výstupní nadpis:the_content()Vyveďte celý obsah,the_excerpt()Vytvořte shrnutí obsahu textu.the_permalink()Získat odkaz na článekthe_post_thumbnail()Zobrazit speciální obrázky.

Registrovací menu a boční panel

Moderní témata obvykle umožňují uživatelům vlastní nastavení menu a doplňků prostřednictvím administrace. K tomu je potřeba…functions.phpPro registraci postupujte zde.

Doporučujeme k přečtení. Návod k vývoji témat pro WordPress: Vytvořte své první vlastní téma od nuly.。

Použitíregister_nav_menus()Funkce může registrovat jedno nebo více umístění příkazů („command locations“).

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

Poté, ve šablonovém souboru (např.header.phpPoužívá se v…)wp_nav_menu()Zobrazí 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

Stejně tak i boční panel (oblast pro přidávání doplňků) funguje prostřednictvím…register_sidebar()Registrování funkcí:

function mytheme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; __( '在这里添加你的挂件。', 'my-first-theme' ),
            'before_widget' =&gt; '<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', 'mytheme_widgets_init' );

V šabloně použijte In the template, usedynamic_sidebar( 'sidebar-1' )Přijďte vyvolat tuto oblast.

Integrace nastavení stylů, skriptů a témat

Aby byl téma profesionálnější a přívětivější pro uživatele, je nutné správně zpracovat načítání stylů a skriptů a pokud možno integrovat funkce předinstalovaných nástrojů (customizers) WordPressu.

Načítání stylů a skriptů ve frontě („loading styles and scripts in a queue“)

Správný způsob je použít…wp_enqueue_style()和wp_enqueue_script()Funkce – přidejte je.functions.phpTo zajišťuje, že závislosti jsou správně nastaveny a předchází duplicitnímu načítání.

function mytheme_enqueue_assets() {
    // 主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );

// 谷歌字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );

// 主JavaScript文件
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

Integrovaný přizpůsobovací nástroj pro témata

WordPress Customizer umožňuje uživatelům upravovat nastavení témat přímo v reálném čase a s možností okamžitého přehledu výsledků.$wp_customizeK objektu můžete přidat nastavení a ovládací prvky.

Například, přidání možnosti výběru barvy nadpisu stránky:

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置（存储在数据库中）
    $wp_customize->add_setting( 'header_color', array(
        'default'           => '#333333',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

// 添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label'    => __( '页眉颜色', 'my-first-theme' ),
        'section'  => 'colors',
        'settings' => 'header_color',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Poté, ve vašem…style.cssNebo použijte tento hodnotu ve stylu dynamického výstupu:

function mytheme_customizer_css() {
    ?>
    <style type="text/css">
        .site-header {
            background-color: <?php echo esc_attr( get_theme_mod( 'header_color', '#333333' ) ); ?>;
        }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customizer_css' );

Závěr

Vývoj tem pro WordPress je zajímavou dovedností, která kombinuje design a programování. Začíná se studiem základních souborů, jako jsou…style.css和index.phpPorozumění tohoto obsahu a dále se ponoření do struktury šablon, WordPressových cyklů a…functions.phpMezi silné funkce WordPress patří možnost správné organizace souborů šablon, použití šablonovacích značek, registrace nabídek a oblastí pro přidávání doplňků, stejně jako načítání zdrojových souborů pomocí systému front. Díky těmto funkcím můžete vytvořit tematika s jasnou strukturou a vysokým výkonem. Dalším krokem je integrace nástrojů pro přizpůsobení tematického vzhledu, které poskytují uživatelům příjemný zážitek při úpravách. Po zvládnutí těchto základních znalostí budete schopni převést své návrhy na plně funkční tematika pro WordPress a položit tak pevný základ pro studium pokročilejších frameworků pro tvorbu tematického vzhledu, jako jsou Underscores nebo Genesis, stejně jako pro vývoj tematických řešení založených na technologii Block.

Časté dotazy

Je nutné být zdatný v PHP, abyste vytvořili temu pro WordPress?

I když není nutné dosáhnout úrovně odborníka, pevné základy v PHP jsou nezbytné. Musíte porozumět PHP syntaxi, proměnným, funkcím, cyklům a podmínkovým výrazům, protože jádro WordPressu i šablony temát jsou napsány v PHP. Stejně důležité je také dobré zvládnutí HTML, CSS a základních funkcí JavaScriptu.

Jak zajistit, aby můj tematický design odpovídal oficiálním standardům WordPressu?

Aby vaše téma splňovalo standardy a mohlo být zařazeno do oficiálního adresáře temat WordPressu, je nutné dodržovat „Průvodce vývojem temat WordPress“ (WordPress Theme Development Handbook) a požadavky na revizi temat (Theme Review Requirements). To zahrnuje používání bezpečných praktik kódování, přípravu na internacionalizaci (využití textových polí a funkcí pro překlad), zajištění responzivního designu, nedodržování klíčových funkcí v kódu samotného temat (doporučuje se používat podtemata nebo doplňky) a také provedení testů pomocí oficiálního nástroje Theme Check.

Proč se změny mého tématu nezobrazí po obnovení stránky?

To je obvykle způsobeno mezipamětí prohlížeče nebo mechanismem mezipaměti WordPressu. Nejprve zkuste stisknout více tlačítek současně…Ctrl + F5(Windows/Linux) neboCmd + Shift + RNa Macu proveďte hard refresh (střední tlačítko myši), abyste smazali mezipaměť prohlížeče. Pokud problém přetrvává, ujistěte se, že pracujete v lokálním vývojovém prostředí, a zkontrolujte, zda máte nainstalované nějaké pluginy pro správu mezipaměti. Zkuste je dočasně zakázat. Nakonec ověřte, zda jste upravili správný soubor šablony a zda byl soubor úspěšně uložen.

Jaký je rozdíl mezi podtématy a nadtématy? Kdy je vhodné je použít?

Příspěvek „Parent Topic“ je plně funkční a nezávislý příspěvek. Příspěvek „Child Topic“ naopak závisí na příspěvku „Parent Topic“ a obsahuje pouze několik souborů (přinejmenším jeden).style.cssSlouží k překrytí nebo rozšíření stylů a funkcí mateřského tématu. Pokud chcete provést vlastní úpravy existujícího tématu a zároveň zajistit, aby tyto úpravy nebyly ztraceny při aktualizaci mateřského tématu, měli byste vytvořit dceřiné téma. Jedná se o osvědčenou praxi při inovacích a přizpůsobování témat.

Jak přidat mému tématu plnou podporu pro editor Gutenberg?

Pro zlepšení podpory editoru Gutenberg potřebujete…functions.phpPoužijte to v čínštině.add_theme_support()Funkce deklaruje řadu vlastností. Například, přidání…align-wide和align-fullPodporuje vlastní nastavení barevných palet, gradientních pozadí, ovládání velikosti písma a další funkce. Kromě toho jsou pro editory článků a stránek vytvořeny samostatné stylové soubory (CSS styly), které slouží k úpravě vzhledu těchto elementů.add_editor_style()Přidejte to. Pro více pokročilou personalizaci možná budete potřebovat naučit se vytvářet vlastní bloky.

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: