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

Od nuly: Postupná příručka pro vývoj vlastního WordPress tématu

Čtení za 3 minuty.
2026-03-13
2026-06-06
2,282
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.

Vytvoření vlastního WordPress tématu je nejlepším způsobem, jak převést vaše nápady do reálné podoby na webu a plně ovládnout vzhled i funkce stránek. Na rozdíl od použití hotových témat vám vlastní téma umožňuje začít od nuly a vytvořit webové stránky, které plně odpovídají vašim nebo požadavkům vašich zákazníků. Ačkoli tento proces může znít znepokojivě, pokud postupujete podle oficiálních pravidel WordPressu a postupů, můžete ho snadno dokončit. Tento článek vás provede celým procesem od vytvoření základních souborů až po implementaci klíčových funkcí.

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

Než začnete psát první řádek kódu, potřebujete vhodné vývojové prostředí a jasný plán projektu.

Vytvoření lokálního vývojového prostředí

Nejprve si musíte na svém lokálním počítači nastavit prostředí pro provoz PHP serveru. Doporučujeme použít integrované balíčky, jako jsou XAMPP, MAMP nebo Local by Flywheel. Tyto nástroje umožňují jednoduchou instalaci Apache, MySQL a PHP bez nutnosti složité konfigurace. Například po instalaci XAMPP budou vaše webové soubory obvykle umístěny v adresáři, kde byl XAMPP nainstalován.htdocsUvnitř složky. Zde můžete vytvořit novou složku, například…my-custom-themeToto se stane kořenovým adresářem vašeho tématu.

Doporučujeme k přečtení. Naučte se vývoj WordPress témat od nuly: základní průvodce vytvářením personalizovaných webových stránek.。

Plánování struktury tematického projektu

Standardní WordPress téma obsahuje alespoň dvě základní soubory:style.css和index.phpAle před zahájením projektu doporučujeme naplánovat jasnou a rozšiřitelnou strukturu adresářů. Typická struktura adresářů pro moderní témata může vypadat následovně:

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 
my-custom-theme/
├── style.css          // 主样式表，包含主题信息头
├── index.php          // 主模板文件
├── functions.php      // 主题功能与函数文件
├── header.php         // 头部模板
├── footer.php         // 底部模板
├── sidebar.php        // 侧边栏模板
├── page.php           // 页面模板
├── single.php         // 文章页模板
├── archive.php        // 文章归档页模板
├── 404.php            // 404错误页模板
├── search.php         // 搜索结果页模板
├── assets/            // 静态资源目录
│   ├── css/           // 样式文件
│   ├── js/            // 脚本文件
│   └── images/        // 图片资源
└── templates/         // 可选的模板部件目录

Mít dobrou strukturu pomáhá s organizací a údržbou kódu.

Vytvoření hlavního tematického souboru

Toto jsou základy pro vytvoření tématu – informace v hlavičce souboru sdělí WordPressu, že se jedná o platné téma.

Definovat šablonu stylů pro téma

style.cssJde o “občanský průkaz” tématu – blok s poznámkami na vrcholu (hlavička informací o tématu) je nutný. WordPress na tyto informace spoléhá při identifikaci a zobrazování vašeho tématu v pozadí. Vytvořte ho.style.cssSoubor a zadejte následující obsah:

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个为了学习从零开始开发而创建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Mezi nimi,Text DomainSlouží k internacionalizaci (i18n) a představuje jedinečný identifikátor vašeho tématu; obvykle se shoduje s názvem složky obsahující dané téma. Po tomto bloku komentářů můžete začít psát své CSS styly.

Doporučujeme k přečtení. Průvodce vývojem WordPress temat: Kompletní praktický kurz od začátečníků po odborníky。

Vytvoření základní šablonové soubory

index.phpJedná se o výchozí zpáteční šablonu pro všechny stránky. Je to nejzákladnější možnost, ale můžeme začít s jednoduchou HTML strukturou. Nejprve vytvoříme…header.phpSoubor slouží k uložení hlavičky dokumentu (od…)<!DOCTYPE html>Otevřít<body>Část týkající se štítků (…) afooter.phpSlouží k uložení uzavíracích značek a obsahu podstránky (footer).

header.phpPříklad:

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

Všimněte si, že bylo použito…wp_head()„Hooky“ – to jsou funkce nebo mechanismy v jádru WordPressu, které jsou nezbytné pro přidávání skriptů a stylů do pluginů a temat.

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

footer.phpPříklad:

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

Zde bylo použito…wp_footer()Hák.

Teď, tvůj…index.phpMůže být velmi stručné:

Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Vytvoření profesionálního tematu od nuly。

<?php get_header(); ?>

<main>
    
            <article>
                <h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>
                <div><?php the_content(); ?></div>
            </article>
        
        <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
    <?php endif; ?>
</main>

Tento šablonový soubor využívá základního cyklu (The Loop) WordPressu k zobrazení seznamu článků.

Zavedení funkcí a dynamického obsahu

Skutečný téma není pouze statickou stránkou – musí interagovat s jádrem WordPressu, načítat potřebné zdroje a umožňovat dynamické funkce.

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

Napište soubor s tematickou funkcí.

functions.phpToto je váš téma “Mozek” („Brain“), které slouží k přidávání funkcí, registraci menu, vytváření bočních panelů, načítání stylů a skriptů atd. Vytvořte tento soubor a začněte přidávat základní funkce.

<?php
// 主题设置
function my_custom_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

// 注册小工具区域（侧边栏）
function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-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', 'my_custom_theme_widgets_init' );

add_theme_support()Funkce slouží k aktivaci funkce temat (tématických nastavení), zatímco…register_nav_menus()和register_sidebar()Poté se registrují navigační menu a oblast nástrojů odděleně.

Načítání stylů a skriptů

Správný způsob načítání zdrojových souborů je přidat soubory se styly (CSS) a skripty v jazyce JavaScript pomocí vhodných metod.wp_enqueue_scripts„Hook queuing. Your…“functions.phpPřidat do seznamu:

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

// 加载自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果使用评论功能，加载评论回复脚本（仅当需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

get_stylesheet_uri()získatstyle.cssURL…get_template_directory_uri()Získat URL adresu adresáře s tematikou.

Vytvoření hierarchické struktury šablon

WordPress využívá hierarchii šablon k určení toho, který šablonový soubor se má použít pro konkrétní stránku. Vytvoření speciálních šablonových souborů umožňuje ještě detailnější a flexibilnější zpracování vašeho obsahu.

Vytvořte šablony pro různé typy obsahu.

Potřebujete vytvořit speciální šablony pro různé typy stránek. Například:
* single.php: Používá se k zobrazení jednotlivých článků.
* page.php: Používá se k zobrazení jednotlivých stránek.
* archive.phpSlouží k zobrazení kategorií, tagů, autorů, dat a dalších informací na stránkách archivů.
* search.phpSlouží k zobrazení výsledků vyhledávání.
* 404.phpSlouží k zobrazení stránky “Nenašeno”.

Základnísingle.phpMožná to vypadá následovně:

<?php get_header(); ?>

<main>
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <header>
                <h1><p><strong> Řekněte mi něco o sobě.</strong></p></h1>
                <div>
                    |
                </div>
            </header>
            <?php if ( has_post_thumbnail() ) : ?>
                <div>
                    <?php the_post_thumbnail(); ?>
                </div>
            <?php endif; ?>
            <div>
                <?php the_content(); ?>
            </div>
            <footer>
                &lt;?php the_tags( &#039;标签: &#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
            </footer>
        </article>
    <?php endwhile; ?>
</main>

Tento šablonový soubor (template) byl použit.the_post_thumbnail()Zobrazit speciální obrázky, a také…comments_template()Nyní se načítá oblast pro komentáře.

Využitím šablonových komponent k dosažení modularity

Abychom dále zvýšili využitelnost kódu, můžeme části stránek, které se opakují – jako jsou metadata článků nebo položky seznamu článků – extrahovat a převést je na šablonové komponenty (Template Parts). Například můžeme vytvořit…template-parts/content.phpSoubor, a poté…index.php或archive.phpPoužít v cykluget_template_part( 'template-parts/content' );Použijte to k jeho volání. Tím udržíte váš hlavní šablonový soubor stručným.

Závěr

Prostřednictvím výše uvedených kroků jste dokončili vývoj základní, ale funkčně kompletní vlastní WordPress tématu. Tento proces zahrnoval vytvoření potřebného prostředí, vytvoření klíčových souborů, přidání funkcí WordPressu a nastavení struktury šablon. Pamatujte, že vývoj témat je iterativní proces – můžete začít s nejjednoduššími funkcemi a postupně přidávat složitější vlastnosti, jako jsou vlastní typy článků, možnosti přizpůsobení tématu nebo responzivní design. Nejdůležitější je dodržovat kódovací standardy a osvědčené postupy WordPressu, což zajistí, že vaše téma bude bezpečné, efektivní a snadno udržovatelné. Nyní zkopírujte složku s vaším tematem do adresáře, kde je instalován WordPress.wp-content/themes/V této části můžete vidět a aktivovat to v záložce “Vzhled” -> “Témata” v administraci.

Časté dotazy

Jaké jsou základní programovací jazyky potřebné k vývoji temát pro WordPress?

Pro vývoj tem pro WordPress je nutné ovládat hlavně HTML, CSS a PHP. HTML slouží k vytváření struktur stránek, CSS k nastavování jejich vzhledu, zatímco PHP je serverový programovací jazyk používaný v WordPressu pro zpracování logiky, dotazů do databáze a generování dynamického obsahu. Kromě toho je užitečné mít základní znalosti JavaScriptu, pokud chcete do aplikace přidat interaktivní funkce.

Proč je nutné používat funkce get_header() a get_footer()?

get_header()和get_footer()Jsou to šablónové značky WordPressu, které slouží k zahrnutí obsahu.header.php和footer.phpPro práci s soubory používejte tyto funkce, místo jejich přímého použití.includeVýrazy („statements“) jsou jádrem mechanismu úrovní šablon a podtemát v WordPressu. Umožňují podtemátům přepsat obsah hlavičky a patičky mateřské šablony vytvořením souborů se stejným názvem, což poskytuje velkou flexibilitu.

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

Musíte použít funkce internacionalizace (i18n) v WordPressu k obalení všech textových řetězců, které se zobrazují v tématu. Hlavně se používají…__()、_e()a další funkce, a to…style.cssNastavte správně v…Text DomainPoté použijte nástroj, jako je Poedit, k vytvoření požadovaného obsahu..potPřekladový šablonový soubor umožňuje překladatelům vytvořit překlady do příslušných jazyků na základě tohoto šablona.zh_CN.po和.mo…) Translation file. Finally,functions.phpProstřednictvím Čínyload_theme_textdomain()Překlad textu „Funkce načítání“: „Function loading“.

Jak po dokončení vývoje tématu otestovat jeho kompatibilitu?

Před publikováním nebo nasazením tématu do produkčního prostředí je velmi důležité provést důkladné testy. Nejprve je třeba provést testy na různých prohlížečích (Chrome, Firefox, Safari, Edge) a na různých zařízeních (počítače, tablety, mobilní telefony) za účelem ověření, zda je téma responzivní. Dále je třeba testovat téma v různých konfiguracích WordPressu – např. s aktivními či neaktivními doplňky, s různými typy článků a widgety. Kromě toho můžete použít oficiální plugin WordPress Theme Check k prohlídce vašeho tématu a ujistit se, že dodržuje nejnovější kódovací standardy a osvědčené postupy 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: