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

Vývoj tem pro WordPress: Kompletní průvodce od základů až po pokročilé znalosti – Vytváření personalizovaných webových stránek

Čtení za 3 minuty.
2026-03-12
2026-06-03
2,761
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ákladní koncepty vývoje temat pro WordPress

Než začnete psát kód, je velmi důležité pochopit základní koncepty. Tema pro WordPress je v podstatě souborů, které společně pracují na vytvoření vizuálního vzhledu a funkcí webové stránky. Není to pouze sada šablon – jedná se o integrovanou součást obsahu, stylů a logiky.

Mezi základní soubory patří také šablony stylů (style sheets).style.cssa soubory šablonindex.phpMezi nimi jestyle.cssSoubory nejsou pouze šablony, které definují vzhled webové stránky, ale také “občanské průkazy” daného tématu. Poznámky v hlavičce souborů obsahují klíčová metadata, jako je název tématu, autor, popis, verze atd. Bez těchto informací WordPress nebude schopen toto téma rozpoznat.

Porozumění hierarchické struktuře tematických souborů

WordPress využívá systém hierarchie šablon k určení toho, který soubor šablony se má použít pro konkrétní typ stránky. Tento systém postupuje podle principu “od zvláštního k obecnému”. Například při přístupu k článku s ID 123 WordPress postupně hledá odpovídající šablonu.single-post-123.php、single-post.php、single.phpA nakonec je…singular.phpPokračujte v tom, dokud nenajdete existující soubor. Porozumění této struktuře je klíčové pro vytvoření flexibilních témat.

Doporučujeme k přečtení. Jak vytvořit vlastní WordPress téma: Kompletní průvodce od začátku。

Nezbytné nástroje a prostředí pro vývoj aplikací

Vytvoření lokálního vývojového prostředí je prvním krokem k efektivnímu vývoji. Doporučujeme nástroje jako XAMPP, Local by Flywheel nebo Docker. Kromě toho jsou nezbytné i silné editory kódu (např. VS Code nebo PhpStorm) a vývojové nástroje pro prohlížeče. Aktivace funkcí v WordPressu…WP_DEBUGVzory vám mohou pomoci rychle lokalizovat chyby během vývojového procesu. Můžete je použít k…wp-config.phpSoubor se spouští definováním konstant.

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řte si své první základní téma.

Začněme od nuly a vytvořme nejjednodušší možný tematický balíček (“theme package”) a pojmenujme ho „MyFirstTheme“. Nejprve…wp-content/themes/V adresáři vytvořte složku se stejným názvem.

Napsat záhlaví informací o tématu

V složce s tématy vytvořte…style.cssSoubor a zároveň do něj zapište následující záhlaví (header informace):

/*
Theme Name: MyFirstTheme
Theme URI: https://example.com/myfirsttheme
Author: Your Name
Author URI: https://example.com
Description: 我的第一个WordPress主题，用于学习开发。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: myfirsttheme
*/

Tento komentář je jediným základem, na základě kterého WordPress rozpoznává téma.Text DomainSlouží k internacionalizaci a je klíčovým identifikátorem pro následné načítání souborů s překlady.

Vytvoření základního šablónového souboru pro index

Následně vytvořte potřebné komponenty nebo nástroje.index.phpSoubor. Jedná se o konečný soubor určený k návratu na předchozí úroveň struktury šablony. Nejjednodušší verze tohoto souboru může obsahovat základní HTML strukturu a klíčové funkce WordPressu.

Doporučujeme k přečtení. Konečný průvodce tématy WordPressu: kompletní řešení od výběru, přes přizpůsobení, až po vývoj.。

<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
    <?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>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 为每篇文章输出标题和内容
                ?>
                <article>
                    <h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>
                    <div><?php the_content(); ?></div>
                </article>
                &lt;?php
            endwhile;
        else :
            echo &#039;<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>

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

Tento soubor zavádí několik klíčových funkcí:wp_head()和wp_footer()Slouží k umožnění pluginům a temám vkládat kód do klíčových míst.the_title()和the_content()Slouží k výstupu dat článku.body_class()Přidejte kontextové CSS třídy k tagům.

V tuto chvíli můžete přejít do administrace WordPressu, do sekce “Vzhled” → “Témata”, kde uvidíte a aktivujete téma “MyFirstTheme”.

Implementace pokročilých funkcí a architektury tematických řešení

Základní téma dokáže zobrazit obsah, ale zralé téma vyžaduje jasnější strukturu a silnější funkce. To zahrnuje rozdělení šablonových souborů, integraci funkcí a vývoj vlastních funkcí.

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

Oddělení komponent šablon pro zlepšení udržovatelnosti

将index.phpRozdělení částí jako je nadpis, podpis stránky a boční lišty do samostatných souborů je standardní praxí při vývoji profesionálních tematických stránek.get_header()、get_footer()和get_sidebar()Funkce slouží k jejich načtení (zavádění).
Nejprve vytvořte…header.php…index.php中到Předchozí část přesuňte sem. Stejným způsobem vytvořte…footer.phpUložte obsah podstránky (footer). Poté proveďte změny.index.phpUpravte text tak, aby měl následující strukturu:

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>

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

Všimněte si, že zde bylo použito…get_template_part()Funkce slouží k načtení šablony obsahu článku, což dále zvyšuje úroveň modularity. Je potřeba tuto funkci vytvořit.template-partsSložku a v ní vytvořit nějaký obsah.content.phpvčetně dokumentů.

Přidání funkce tematického nastavení pomocí souboru funkcí

functions.phpJde o “mozek” tématu, který slouží k přidávání funkcí, registraci menu, oblasti nástrojů, definování podpory pro speciální obrázky atd., a to bez nutnosti měnit základní soubory. Vytváření a úprava tohoto souboru je klíčová pro rozšíření funkcí daného tématu.

Doporučujeme k přečtení. Úvodní průvodce vývojem WordPress temat: Postavte si své první vlastní téma od nuly。

<?php
/**
 * MyFirstTheme 主题功能定义
 */
function myfirsttheme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 注册主导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'myfirsttheme' ),
    ) );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'myfirsttheme_setup' );

// 注册小工具区域
function myfirsttheme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '侧边栏', 'myfirsttheme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在这里添加小工具。', 'myfirsttheme' ),
        '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', 'myfirsttheme_widgets_init' );

// 加载主题的样式表和脚本
function myfirsttheme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'myfirsttheme-style', get_stylesheet_uri() );
    // 加载导航脚本
    wp_enqueue_script( 'myfirsttheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'myfirsttheme_scripts' );

add_theme_support()Tato funkce slouží k aktivaci základních funkcí WordPressu.register_nav_menus()Místo pro registraci restaurací;wp_enqueue_style()和wp_enqueue_script()Je to standardní způsob správného načítání zdrojových souborů.

Tématický nastavovač, styly a příprava ke zveřejnění

Moderní témata WordPressu se velmi zaměřují na pohodlný a real-time nastavitelný uživatelský zážitek a na dodržování standardů kódu. To je důležitým rozdílem mezi amatérským a profesionálním vývojem.

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

Integrace s API WordPress Customizer

WordPress Customizer umožňuje uživatelům v reálném čase předvídat a upravovat nastavení témat. Pomocí API Customizeru můžete tématu přidat možnosti, jako je identifikátor stránky, výběr barev, přepínání layoutů atd. Níže je jednoduchý příklad přidání možnosti pro zadání textu do patičky stránky (footer text).functions.phpStřed:

function myfirsttheme_customize_register( $wp_customize ) {
    // 添加一个“主题选项”板块
    $wp_customize->add_section( 'myfirsttheme_options', array(
        'title'    => __( '主题选项', 'myfirsttheme' ),
        'priority' => 130,
    ) );

// 添加并定义一个“页脚文本”设置
    $wp_customize->add_setting( 'footer_text', array(
        'default'           => __( '由MyFirstTheme proudly呈现。', 'myfirsttheme' ),
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

// 为该设置创建一个控件（输入框）
    $wp_customize->add_control( 'footer_text', array(
        'label'    => __( '页脚文本', 'myfirsttheme' ),
        'section'  => 'myfirsttheme_options',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'myfirsttheme_customize_register' );

A poté,footer.phpV čínštině se používáget_theme_mod()Funkce vypisuje tento hodnotu:<?php echo esc_html( get_theme_mod( 'footer_text', '默认页脚文本' ) ); ?>。

Napsat responsivní a standardní CSS

Yourstyle.cssKód by měl být primárně navržen s ohledem na použití na mobilních zařízeních a měl by využívat mediální dotazy (media queries) pro přizpůsobení se větším obrazovkám. Ujistěte se, že kód splňuje standardy CSS a že plně využívá automaticky generované třídní názvy od WordPressu.body_class()和post_class()Vytvořením tříd lze psát situované styly (contextual styles), což může výrazně snížit množství redundantního kódu.

Seznam finálních kontrol před publikací

Před tím, než téma odešlete do oficiálního katalogu nebo zákazníkovi, proveďte důkladnou kontrolu: ujistěte se, že všechny šablony jsou kompletní a neobsahují žádné varování či chyby v PHP kódu; provedete základní bezpečnostní kontrolu a pro všechny dynamické výstupy použijte funkce pro escape (např.…)esc_html()， esc_url()) Provádění ověřování kódu HTML a CSS; testování v různých prohlížečích a na různých zařízeních; psaní podrobných…readme.txtSoubor; a ujistěte se, že téma plně splňuje oficiální standardy přezkumu temat pro WordPress.

Závěr

Vývoj tem pro WordPress je proces, který začíná pochopením základních konceptů a vytvořením základní struktury, pokračuje implementací pokročilé modulární architektury a končí detailním přizpůsobením a standardizovaným vydáním. Je důležité ovládnout strukturu šablon a dosáhnout dokonalého znalosti…functions.phpRozšíření funkcí, rozumné využití logiky rozdělování šablonových komponent a integrace API přizpůsobovacích nástrojů pro zlepšení uživatelského zážitku jsou klíčovými kroky při vytváření úspěšného, flexibilního a populárního tématu.style.css和index.phpZačněte a postupně budujte své „impérium tematických řešení“ – každá praxe s kódem prohloubí vaše porozumění WordPressu, tomuto mocnému systému pro správu obsahu.

Časté dotazy

Jaké programovací jazyky je nutné ovládat pro vývoj WordPressových šablon?

Pro vývoj temát pro WordPress je nutné ovládat PHP, HTML, CSS a základy JavaScriptu. PHP se používá k zpracování dynamických dat a logiky; HTML zajišťuje strukturu obsahu; CSS řídí vzhled a rozložení stránek; JavaScript slouží k implementaci interaktivních funkcí. Základní znalosti MySQL také pomáhají porozumět principům přístupu k datům.

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

Příspěvek „Parent Theme“ označuje kompletní a samostatnou funkční tematiku. Dceřiná tematika („Subtheme“) dědí všechny funkce, styly a šablony z příspěvku „Parent Theme“, ale umožňuje vám bezpečně přepsat konkrétní části tohoto příspěvku (např. styly nebo šablony). Pokud chcete existující tematiku upravit podle svých požadavků a zároveň zajistit, aby bylo možné tuto příspěvkovou tematiku v budoucnu bez problémů aktualizovat, měli byste vytvořit a používat dceřinou tematiku. Jedná se o osvědčenou praxi při přizpůsobování populárních frameworkových tematic (jako jsou Astra nebo GeneratePress).

Jak přidat svému tématu vlastní typy článků nebo vlastní klasifikace?

Přidání vlastních typů článků nebo klasifikací obvykle probíhá prostřednictvím nastavení v tématu („theme“).functions.phpPoužito ve souboruregister_post_type()和register_taxonomy()Tuto funkci je třeba implementovat pomocí programovacích instrukcí. Aby byl kód modularní a udržovatelný, doporučujeme umístit takový funkční kód do samostatného souboru (např.…)inc/custom-post-types.php), a potéfunctions.phpVezměte prosím na vědomí, že trvalejší a přenositelnější způsob, jak tuto funkci implementovat, je pomocí samostatných doplňků. Díky tomu nebudou data ztracena ani v případě změny tématu.

Proč se moje vlastní styly nebo skripty nenahrají?

To je obvykle způsobeno…wp_enqueue_style()或wp_enqueue_script()Problém vznikl nesprávným použitím funkce. Prosím, zkontrolujte: 1) Byla funkce správně nasazena („montována“).wp_enqueue_scriptsNázev souboru; 2) Cesta k souboru (použijte <)get_template_directory_uri()Zda je správně získán správný URL; 3) Zda je správně vyplněn seznam závislostí; 4) Zda…wp_head()或wp_footer()Předtím jsem tyto funkce volal. Zároveň se ujistěte, že názvy souborů a cesty jsou napsány správně, včetně správného použití velkých a malých písmen.

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: