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

Kompletní průvodce vývojem témat WordPressu: Vytvořte si vlastní téma od nuly do jedné.

Čtení za 3 minuty.
2026-03-13
2026-06-03
2,315
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 pro dané téma, je nezbytné mít stabilní a efektivní lokální vývojové prostředí. To vám nejen umožní rychle zkontrolovat výsledky vašich změn, ale také zabrání přímému ovlivnění webové stránky online. Doporučujeme použít nástroje jako Local by Flywheel, XAMPP nebo MAMP, které vám umožní jedním kliknutím nastavit lokální server obsahující PHP a MySQL.

Následně musíte určit strukturu adresáře tématu. Standardní WordPress téma obvykle obsahuje následující základní soubory:style.css(Tématické styly šablon a informační záhlaví)index.php(Hlavní šablonový soubor)functions.php(Tematic function file) a takéheader.php、footer.php、sidebar.phpČekajte na soubory týkající se šablon. Můžete je najít v adresáři instalace WordPress.wp-content/themes/Vytvořte novou složku, například “my-custom-theme”, a začněte v této složce vytvářet požadované soubory.

Vytvořit soubor s hlavičkami informací o tématu

“Průkaz totožnosti” tématu je…style.cssSoubor. Tento soubor nejenže definuje vzhled tématu, ale také blok komentářů na jeho vrcholu je klíčový pro to, aby WordPress rozpoznal toto téma. Tento záhlaví informací musí striktně dodržovat určený formát.

Doporučujeme k přečtení. Jak vybrat a přizpůsobit si WordPress téma, které vám vyhovuje?。

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始构建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Mezi nimi,Text DomainTento soubor slouží k internacionalizaci (i18n) a musí odpovídat názvu složky s tematikou – jedná se o klíčový identifikátor pro načítání překladových souborů. Po vytvoření tohoto souboru bude vaše tema k dispozici v administraci WordPress v sekci “Vzhled” -> “Témata”, i když zatím nemá žádné skutečné funkce.

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ření základní šablonové soubory

WordPress využívá systém hierarchie šablon k určení toho, který soubor šablony se má použít pro konkrétní požadavek na stránku. Vytvoření základní šablony je základem pro budování vzhledu a funkčnosti tématu (tema).

Nejprve je…index.phpJedná se o konečný zpětný šablonu pro všechny stránky – nejjednodušší možnou variantu tohoto šablona.index.phpMůže obsahovat volání na části jiných šablon.

<?php get_header(); ?>

<main id="primary" class="site-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(); ?>

Vytvořte šablony pro záhlaví a patro stránek.

header.php Soubory obvykle obsahují deklaraci typu dokumentu.Oblasti a společné části webového titulku. Vždy používejte…wp_head()Tato funkce umožňuje pluginům a temám vložit zde potřebný kód (jako jsou styly, skripty, metatagy).

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <!-- 你的导航菜单、Logo等代码在这里 -->
</header>

Podle toho,footer.phpMělo by to být zavřeno.header.phpOtevřete značku v prostředí a nezapomeňte ji aktivně použít (tj. zavolat její funkce).wp_footer()„Hooky“ – to je něco, co je nezbytné pro mnoho doplňků (např. pro analýzu kódu) a pro základní funkce systému WordPress.

Doporučujeme k přečtení. Návod k vývoji špičkových WordPressových témat: od nuly až po odborné znalosti v oblasti tvorby a přizpůsobování.。

Vylepšení funkcí temat a možností personalizace

functions.phpSoubor je “centrem řízení” vašeho tématu. Slouží k přidávání funkcí podpory tohoto tématu, registraci menu, bočních panelů, stejně jako k začlenění stylů a skriptů do celého systému.

Přidání základní podpory pro tematické nastavení

projít (účtem, kontrolou atd.)add_theme_support()Funkce – můžete pro své téma deklarovat podporu různých funkcí WordPress. Například povolení zobrazení přehledů článků („feature images“) a vlastního loga jsou standardními funkcemi moderních témat.

function my_custom_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 启用自定义Logo功能
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 让WordPress生成和管理文档<title>标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Registrovací menu a boční panel

WordPress menu is created using the WordPress menu system.register_nav_menus()Registrování funkcí. Můžete definovat více umístění nabídky, například “Hlavní navigace” a “Navigace v patičce stránky”.

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_custom_theme_menus() {
    register_nav_menus(
        array(
            'menu-1' => esc_html__( 'Primary Menu', 'my-custom-theme' ),
            'menu-2' => esc_html__( 'Footer Menu', 'my-custom-theme' ),
        )
    );
}
add_action( 'init', 'my_custom_theme_menus' );

Boční panel (neboli “oblast nástrojů”) je umístěnregister_sidebar()Registrování funkcí: Každá boční lišta vyžaduje jedinečný ID a popis.

function my_custom_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; esc_html__( 'Sidebar', 'my-custom-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; esc_html__( 'Add widgets here.', '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' );

Úroveň stylů, skriptů a šablon

Aby bylo zajištěno, že styl a skripty tématu jsou správně načteny a nebudou v konfliktu s jinými pluginy, je nutné použít funkce pro zařazování do fronty (queueing), které poskytuje WordPress.

Správné zařazení stylů a skriptů

Nikdy nepoužívejte přímo zdroje nebo značky (tags) v souborech šablon (templates). Místo toho byste měli použít…wp_enqueue_style()和wp_enqueue_script()Funkce.

Doporučujeme k přečtení. Kompletní návod k vývoji témat pro WordPress: praktický tutoriál od nuly až po uvedení do provozu.。

function my_custom_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 排入自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 如果评论功能开启且是单篇文章/页面，排入评论回复脚本
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Porozumění a použití struktury šablon (templátů) v rámci hierarchie

Systém úrovní šablon v WordPressu je velmi výkonný. Například při návštěvě blogového článku hledá WordPress šablony v následujícím pořadí:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.php。

Můžete vytvořit specifické šablonové soubory, které překryjí výchozí zobrazení. Například můžete vytvořit šablonu, která upraví způsob zobrazení dat nebo formátování textu.page-about.phpSoubor bude speciálně určen k zobrazování stránky “O nás” (pokud je přezdívka této stránky “about”). Dalším mocným nástrojem je…front-page.phpSlouží k definování front-end stránek webového webu a má vyšší prioritu než…home.php(Index stránka blogových článků)

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

Závěr

Tento průvodce systematicky popisuje základní kroky potřebné k vytvoření vlastního tématu pro WordPress od nuly. Začínáme nastavením lokálního prostředí a vytvořením souborů, které obsahují potřebné informace…style.cssAž k samotnému vytvoření…index.php、header.php、footer.phpZákladní šablony a soubory vytvořily kostru tématu.functions.phpCo se týká souborů, vylepšili jsme funkce témat (themes), včetně přidání podpory pro témata, registrace navigačních menu a bočních panelů. Nakonec jsme zdůraznili důležitost používání standardních metod WordPressu při nastavování stylů a skriptů a vysvětlili silný systém hierarchie šablon, který umožňuje vývojářům vytvářet přesné zobrazení obsahu pro různé typy obsahu. Dodržování těchto osvědčených postupů nejenom umožňuje vytvářet dobře strukturovaná a snadno udržovatelná témata, ale také zajišťuje jejich kompatibilitu s jádrem WordPressu a jeho doplňky.

Časté dotazy

###: Jak přidat vlastní šablonu stránky pro můj téma?
Pro vytvoření vlastního šablónu stránky musíte nejprve v adresáři svého tématu vytvořit nový PHP soubor. Například:template-fullwidth.phpNa nejvyšším místě tohoto souboru potřebujete přidat poznámku s názvem konkrétního šablona.

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板。
 */

Poté můžete do tohoto souboru napsat kód pro rozvržení celostránkového webu, který obvykle začíná…get_header();Po uložení tohoto nastavení budete moci v administraci WordPressu, při úpravě nebo vytváření stránek, vidět možnost “Široká stránková šablona” v rozbalovacím menu “Vlastnosti stránky” -> “Šablony”. Tuto šablonu poté můžete použít při nastavování vlastností vaší stránky.

Proč se můj vlastní menu nezobrazuje?

Menu se obvykle nezobrazí z několika důvodů. Nejprve se ujistěte, že jste již aktivovali potřebné nastavení v tematu (theme).functions.phpProstřednictvím Čínyregister_nav_menus()Funkce zaregistrovala umístění kategorie jídel.

Dále potřebujete přejít do administrace WordPressu na stránku “Vzhled” -> “Menu”, vytvořit nové menu, přidat do něj položky (např. stránky, články, vlastní odkazy) a níže v sekci “Nastavení menu” toto nové menu přiřadit pozici, kterou jste si zaregistrovali ve svém tématu (např. “Hlavní navigace”).

Na závěr potřebujete upravit soubor šablony (obvykle…)header.phpV tomto kódu se menu volá pomocí funkce `callMenu`.wp_nav_menu()Funkce musí být volána s správným parametrem “theme_location”, například:wp_nav_menu( array( ‘theme_location’ => ‘menu-1’ ) );Teprve po dokončení těchto tří kroků se menu správně zobrazí.

Jak zajistit, aby můj téma podporovalo překlad ( internacionalizaci)?

Chcete-li, aby váš téma podporovalo překlady, což se také nazývá internacionalizace (i18n), je potřeba postupovat ve třech krocích. Prvním krokem je “příprava”: ve všech částech tématu, kde je potřeba text přeložit, je nutné použít funkce pro překlady poskytované WordPressem. Nejčastěji používanou funkcí je…esc_html__( ‘文本’, ‘my-custom-theme’ )（输出转义后的HTML）和_e( ‘文本’, ‘my-custom-theme’ )(Výstup a escape.) Ujistěte se, že druhý parametr (textové pole) odpovídá tomu, co máte.style.cssDefinované v Číně.Text DomainÚplně totožné.

Druhý krok je “generování”: Pomocí nástrojů jako Poedit prohledáte vaše PHP soubory temat a vytvoříte….pot(Portable Object Template) Šablonský soubor. Překladatel může na základě tohoto souboru vytvořit odpovídající šablony pro daný jazyk..poA po kompilaci.moDokumenty.

Třetí krok je “načtení”: ve vašem…functions.phpV souboru jsouafter_setup_themeV funkci „hook“ se to používá.load_theme_textdomain( ‘my-custom-theme’, get_template_directory() . ‘/languages’ )Přijde načtení souboru s překladem. Díky tomu se text vašeho tématu při změně jazyka webové stránky automaticky přizpůsobí novému jazyku.

Chyba v souboru functions.php může mít následující důsledky:

functions.phpGramatické chyby nebo fatální chyby v souboru mohou způsobit, že celý váš web zobrazí prázdnou stránku (“bílý obrazovku”) a může se také zobrazit zpráva o fatální chybě na straně serveru. Je to proto, že tento soubor je načten v rané fázi inicializace WordPressu, a chyby v něm mohou přerušit celý proces načítání WordPressu.

Pokud se setkáte s tímto problémem, existuje několik způsobů, jak to napravit. Nejpřímějším způsobem je použít FTP nebo správce souborů poskytovanýho hostitelem, abyste poškozený soubor nahradili novým.functions.phpPřejmenování souboru (např. na…)functions.php.bak) nebo jej vyprázdněte. WordPress ho potom bude považovat za prázdný soubor a webová stránka bude opět přístupná, ale vaše vlastní úpravy tématu budou dočasně nefunkční. Poté můžete chyby v kódu opravit a soubor znovu nahradit.functions.phpPřed provedením zálohování a důkladným testováním v lokálním vývojovém prostředí je velmi dobrým zvykem.

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: