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

Návod k vývoji témat pro WordPress: od nuly až po skutečné zveřejnění.

Čtení za 2 minuty.
2026-03-20
2026-06-03
1,992
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říprava prostředí pro vývoj temat pro WordPress

Než začnete psát kód, je velmi důležité vytvořit stabilní a efektivní lokální vývojové prostředí. To vám umožní pracovat offline a zároveň vám ušetří rizika spojená s testováním na online serverech.

Nastavení lokálního vývojového prostředí.

Nejčastějším způsobem je použití integrovaných balíčků softwaru pro lokální servery, jako jsou XAMPP, MAMP nebo Laragon. Tyto nástroje nainstalují Apache, MySQL a PHP jedním kliknutím, čímž se eliminuje nutnost komplikovaného konfigurování. Pro vývoj webových stránek na platformě WordPress se doporučuje používat prostředí speciálně optimalizovaná pro WordPress, jako je Local by Flywheel nebo DesktopServer. Tyto nástroje poskytují pohodlné funkce pro vytváření webových stránek, správu databází a změnu verzí PHP.

Výběr základních nástrojů a editorů

Potřebujete editor kódů. Doporučujeme Visual Studio Code, PhpStorm nebo Sublime Text. Všechny tyto nástroje nabízejí vynikající funkce pro výrazné zvýraznění kódu, automatické doplňování textu a správu projektů. Zejména Visual Studio Code může výrazně zvýšit efektivitu vývoje s pomocí doplňků určených k práci s WordPressem, jako jsou WordPress Snippet a PHP Intelephense.

Doporučujeme k přečtení. Naučte se vyvíjet pluginy pro WordPress: vytvořte své první funkční rozšíření od nuly.。

Kromě toho je systém pro správu verzí Git nezbytný. I pokud jste nezávislý vývojář, je dobrý zvyk používat Git k sledování změn v kódu, vytváření větví a zálohování projektů. Můžete si inicializovat své vlastní repozitář lokálně a zvážit pozdější nasunutí dat na vzdálené hostitelské platformy, jako jsou GitHub, GitLab nebo Bitbucket.

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

Porozumění základní struktuře témat WordPressu

Standardní téma pro WordPress je složka, která obsahuje určité soubory a nachází se na… /wp-content/themes/ V adresáři musí být obsaženy alespoň dvě základní soubory – i u nejjednodušších témat.

Soubor šablony stylu pro dané téma

style.css Jedná se o soubory, které slouží jako “občanské doklady” tématu a definují jeho vzhled. Jejich hlavičková část obsahuje všechny metadaty tématu, které jsou poté načteny WordPressem a zobrazeny na stránce “Vzhled” -> “Témata” v administraci. Základní struktura hlavičkových poznámek je následující:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习 WordPress 主题开发的入门主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

V tomto souboru budete pokračovat v psaní všech pravidel CSS stylů, která budou ovládat vzhled webové stránky z pohledu front-endu – tedy vzhled textu, barev, uspořádání prvků atd.

Klíčový soubor šablony indexu

index.php Jedná se o výchozí šablonu daného tématu a zároveň je nutná k použití. Když WordPress nenajde konkrétnější šablonový soubor (např. single.php 或 page.phpPři renderování stránek se použije šablona WordPress. Obvykle obsahuje šablony WordPress, které slouží k zavolání hlavičky, cyklu obsahu článků, bočního panelu a patice.

Doporučujeme k přečtení. Kompletní průvodce vývojem témat pro WordPress: od začátku až po praktické využití – nezbytné dovednosti pro vytvoření personalizovaných webových stránek.。

Kromě těchto dvou souborů obvykle obsahuje kompletní tematická sadu také následující šablony:
* header.phpHlavní část webové stránky (header area)<head> (Včetně navigace v horní části stránky.)
* footer.phpPodřízená oblast stránky webové stránky.
* functions.phpSlouží k přidání funkcí týkajících se temat, registračního menu, bočního panelu atd.
* page.phpSlouží k renderování statických stránek.
* single.php„:“ se používá k renderování jednotlivých článků.
* archive.phpSlouží k renderování archivních stránek obsahujících kategorie, tagy a další informace.

Vytvořte si své první téma od nuly.

Teď si společně vytvoříme ten nejjednodušší „tématický rámec“ (theme framework), abychom pochopili, jak jednotlivé části spolu fungují.

Vytvoření základních souborů a adresářů

Nejprve, na vašem lokálním WordPress webu… /wp-content/themes/ V adresáři vytvořte novou složku a pojmenujte ji… my-first-themePoté v této složce vytvořte dvě prázdné soubory:style.css 和 index.phpZapište komentáře do hlavičky CSS, které byly zmíněny v předchozí části. style.css Dokumenty.

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

Vytvoření základní šablony indexu

Dále, proveďte úpravy. index.php Soubor. Nejzákladnější verze může obsahovat volání základních funkcí WordPressu. Nejprve použijeme… get_header() Funkce slouží k načtení hlavičkových souborů (header files).

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 在这里输出文章内容
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

<?php get_footer(); ?>

Tento kód implementuje základní “cyklus” (The Loop) v WordPressu – kontroluje, zda existují články, poté prochází všechny články a vypisuje jejich názvy a obsah. Na konci se… get_footer() Zavést podpis stránky (footer).

Přidání funkce a registračního menu

Aby byl téma praktičtější, vytvořili jsme… functions.php Soubor. V tomto souboru můžeme využít funkce, které nám poskytuje WordPress. add_theme_support() Funkce slouží k aktivaci funkcí tematického nastavení, jako jsou např. zkratky článků (výrazné obrázky) a vlastní logo.

Doporučujeme k přečtení. Kompletní průvodce vývojem témat WordPressu: vytvořte profesionální webové téma od nuly do jedné.。

<?php
function my_first_theme_setup() {
    // 让主题支持文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册一个侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( '在此添加小工具。', 'my-first-theme' ),
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Poté potřebujete… header.php Použito ve souboru wp_nav_menu() Funkce slouží k zobrazení menu, které jste si registrovali.

Pokročilý vývoj tématu a příprava na jejich publikaci

Po dokončení základního tématu můžete jeho funkce a flexibilitu vylepšit pomocí detailnějších šablon a „hooků“ (speciálních prvků k ovládání chování systému).

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

Využijte šablonové komponenty k optimalizaci struktury.

Šablony a jejich části (Template Parts) představují skvělý způsob, jak modularizovat znovupoužitelné fragmenty šablon – např. kartičky s shrnutím článků. Můžete tak vytvořit… template-parts/content.php Do souboru přidejte kód, který během cyklu vypíše obsah každého článku. Poté… index.php V cyklu „“ se používá… get_template_part() Funkce slouží k jejímu volání:

while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_type() );
endwhile;

Využití akcí a filtrů (action and filter hooks)

Hooky systém je základem modularizace WordPress pluginů a je také široce využíván při vývoji tem (témů). Akční hooky (Action Hooks) vám umožňují vložit kód v určitéch okamžicích během provádění procesů – například přidat nějaký obsah za samotný obsah článku. Filtrační hooky (Filter Hooks) naopak umožňují upravovat data, například změnit délku shrnutí článku.

Například, pomocí… wp_enqueue_scripts Akční háčky slouží k správnému načtení souborů JavaScript a CSS:

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Provedení finálních testů a balení

Před publikací je nutné provést důkladné testování. Ujistěte se, že téma správně funguje v různých prohlížečích (Chrome, Firefox, Safari, Edge). Zkontrolujte také reaktivní rozvržení na mobilních telefonech a počítačích. V prostředí administrace WordPressu zapněte režim ladění (debug mode). wp-config.php Nastavit v nastaveních define( 'WP_DEBUG', true );Opravte všechny varování a chyby v PHP kódu. Zkontrolujte, zda všechny základní funkce WordPressu (jako jsou komentáře, vyhledávání, stránkování) fungují správně.

Na závěr smažte všechny nepotřebné soubory, jako jsou logovací soubory a záložní kopie z procesu vývoje. Poté komprimujte celou složku s tématem do formátu ZIP. Tento soubor můžete použít k instalaci.

Závěr

Vývoj tem pro WordPress začíná pochopením základní struktury…style.css, index.phpZačínáme postupným pronikáním do struktury šablon, funkcí a modulárních komponent. Toho dosahujeme vytvořením lokálního prostředí, vytvořením základních souborů a využitím příslušných nástrojů. functions.php Po vylepšení funkcí a následném důkladném testování můžete vytvořit téma, které splňuje standardy a nabízí bohaté možnosti. Po zvládnutí těchto základních konceptů budete schopni přizpůsobit vzhled a funkce jakéhokoli webu podle svých představ a položíte tak pevný základ pro další studium pokročilejších frameworků, jako jsou Underscores a Sage.

Časté dotazy

Je nutné ovládat PHP pro vývoj temát pro WordPress?

Ano, pro důkladný vývoj temát pro WordPress je nutné ovládat PHP. WordPress je totiž napsán v PHP a všechny šablony (.php) obsahují PHP kód, který slouží k dynamické generaci obsahu. I když můžete upravovat vzhled podtemát bez přílišného použití PHP, pro vytváření vlastních šablon, implementaci složitějších funkcí nebo úpravy logiky dotazů je znalost PHP nezbytná.

Co dělá soubor functions.php v tématu?

functions.php Soubor představuje “funkční centrum” tématu. Slouží k přidávání nebo úpravě funkcí daného tématu, aniž by bylo nutné měnit samotné základní soubory tématu. Jeho hlavní úkoly zahrnují: aktivaci funkcí podporovaných daným tématem (např. speciální obrázky, vlastní pozadí), registraci navigačních menu a oblastí s nástroji na bocích stránky, postupné načítání šablon a skriptovacích souborů, definování vlastních funkcí, a také využití akcí a filtrů k úpravě výchozího chování WordPressu.

Co je to podtéma a proč jej používat?

Podtémata jsou témata, která závisí na jiném tématu (hlavním tématu) a dědí od něj všechny funkce, styly a soubory šablon. Umožňují vám však bezpečně přepsat stávající funkce nebo přidat nové. Hlavním účelem používání podtemat je zachovat vaše vlastní úpravy i po aktualizaci hlavního tématu. Pokud byste přímo upravovali soubory hlavního tématu, vaše změny by byly přepsány, zatímco změny v podtématech by zůstaly. Jedná se o osvědčenou praxi při přizpůsobování a údržbě témat.

Jak zajistit, aby můj téma podporovalo vícejazyčné překlady?

Zpřístupnění tématu více jazykům ( internacionalizace a lokalizace, i18n/l10n) zahrnuje hlavně dvě kroky. Nejprve je nutné všechny textové řetězce v tématu obalit pomocí funkcí pro překlad v WordPressu, například pomocí… esc_html__( ‘文本’, ‘text-domain’ ) 或 _e( ‘文本’, ‘text-domain’ )Zadruhé, pomocí nástrojů (např. Poedit) vytvoříte šablonový soubor typu .pot. Na základě tohoto souboru mohou překladatelé vytvořit soubory typu .po a .mo (např. zh_CN.po). style.css Správné nastavení hlavičky… Text Domain To je klíčové.

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: