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

Jak vyvinout vlastní WordPress téma od nuly.

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

Pochopte základní strukturu a klíčové soubory WordPressových témat.

Vlastní WordPressový motiv je v podstatě složka obsahující konkrétní soubory, která se nachází v adresáři/wp-content/themes/V adresáři. Tyto soubory používají systém hierarchie šablon WordPressu a společně určují, jak web prezentuje obsah z databáze (jako jsou články, stránky) návštěvníkům. Pochopení role těchto souborů a způsobu jejich spolupráce je prvním krokem při vývoji.

Nezbytné soubory a struktura adresářů tématu.

Každý WordPressový motiv musí obsahovat dva základní soubory:style.css 和 index.phpMezi nimi jestyle.css Tato role je obzvláště důležitá, protože se nejedná jen o soubor CSS, který definuje styl tématu, ale také o blok poznámek v záhlaví souboru, který slouží jako “identifikační karta” tématu pro WordPress. Tento blok poznámek musí přísně dodržovat určitý formát.

/*
Theme Name: 我的自定义主题
Author: 开发者名称
Description: 这是一个用于演示如何从零开发的自定义WordPress主题。
Version: 1.0.0
Text Domain: my-custom-theme
*/

index.php Je to hlavní šablonový soubor tématu a také poslední obranná linie na úrovni šablon. Pokud WordPress nedokáže najít specifičtější šablonový soubor pro aktuální požadavek (napříkladsingle.php或page.phpPři tomto scénáři se systém vrátí k použití původních nastavení.index.phpProto musí mít robustní téma tento soubor.

Doporučujeme k přečtení. Vytvořte profesionální webové stránky: kompletní návod k vytvoření vlastního WordPressového tématu od nuly.。

Hierarchie šablon a funkce šablonových souborů.

Hierarchie šablon WordPressu je soubor inteligentních pravidel pro výběr šablon. Automaticky vybere nejvhodnější šablonový soubor podle typu stránky, kterou uživatel navštíví (například domovská stránka, stránka článku, stránka kategorie). Pokud například navštívíte jednotlivý článek, WordPress vyhledá soubor v následujícím pořadí:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php – A nakonec index.php。

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

Kromě výše uvedených dvou nezbytných souborů obsahuje kompletní téma obvykle také:
* header.phpDefinuje hlavičku dokumentu, která obsahuje<head>Oblasti, logo webových stránek a hlavní navigace.
* footer.phpDefinuje dolní část stránky dokumentu, která obsahuje informace o autorských právech, odkazy na pomocné zdroje a podobně.
* functions.phpTo je “mozek” tématu, který slouží k načítání skriptů a stylů, registraci nabídek a widgetů a definování funkcí podpory tématu atd.
* single.php: Používá se k zobrazení jednotlivých článků.
* page.php: Používá se k zobrazení jednotlivých stránek.

Vytvořte základní funkce a šablony tématu.

Po vytvoření základní struktury souborů je dalším krokem naplnění těchto šablonových souborů obsahem a využití základních funkcí WordPressu a “hlavní smyčky” k dynamickému zobrazování dat.

Inicializace funkcí tématu v souboru functions.php.

functions.php Soubory jsou ústředním bodem pro rozšíření funkcí tématu. Zde můžete přidat různé funkce, aniž byste museli upravovat základní soubory WordPressu. Standardní proces inicializace zahrnuje nastavení podpory tématu, registraci navigačních menu a oblastí widgetů a bezpečné načítání skriptů a stylů.

&lt;?php
// 主题初始化设置
function mytheme_setup() {
    // 让WordPress管理<title>标签
    add_theme_support( 'title-tag' );
    // 启用文章特色图像（缩略图）支持
    add_theme_support( 'post-thumbnails' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个主菜单位置
    register_nav_menus( array(
        'menu-1' =&gt; esc_html__( '主菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

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

// 加载主题的样式表和脚本
function mytheme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 加载导航脚本（如果有的话）
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?&gt;

Použijte hlavní smyčku (The Loop) k výstupu obsahu.

“Hlavní smyčka” je nejdůležitějším konceptem šablon WordPressu. Jedná se o kód PHP, který slouží k prověření a procházení článků (nebo stránek), které mají být na aktuální stránce zobrazeny. Téměř všechny šablony pro zobrazení obsahu na tomto závisí. Níže je uveden příklad.index.phpJednoduchý příklad použití hlavní smyčky v C++:

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

<?php if ( have_posts() ) : ?>
    <div class="posts-container">
        <?php while ( have_posts() ) : the_post(); ?>
            <article no numeric noise key 1009>
                <h2 class="entry-title">
                    <a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a>
                </h2>
                <div class="entry-meta">
                    Zveřejněno:
                </div>
                <div class="entry-summary">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        <?php endwhile; ?>
    </div>
    
    <p><?php esc_html_e( '很抱歉，没有找到符合条件的内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>

V tomto kódu,have_posts()和the_post()Funkce řídí smyčku, zatímcothe_title()、the_permalink()、the_excerpt()Šablonové značky se pak používají k výstupu konkrétního obsahu.

Implementace responzivního designu a pokročilých funkcí tématu.

Moderní téma vyžaduje nejen úplnou funkčnost, ale také musí poskytovat vynikající uživatelskou zkušenost, která zahrnuje dobré zobrazení na různých zařízeních a schopnost flexibilně reagovat na individuální požadavky.

Integrace responzivního rozložení a optimalizace pro mobilní zařízení.

Ujistěte se, že je váš web responzivní, což vyžaduje úpravy jak v HTML, tak v CSS. Začněte nejprve vheader.phpDokumenty jsou<head>V rámci oblasti se ujistěte, že je zde zahrnutý meta tag viewport:

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 
<meta name="viewport" content="width=device-width, initial-scale=1">

Za druhé, ve tvémstyle.cssV CSS se média dotazy (Media Queries) používají k přizpůsobení rozložení a stylů šíři obrazovky. Například pro mobilní zařízení lze skrýt postranní panel:

@media screen and (max-width: 768px) {
    #secondary-sidebar {
        display: none;
    }
    .site-main {
        width: 100%;
    }
}

Vytvořte si vlastní šablonu stránky a podtéma.

Aby bylo možné splnit požadavky na jedinečné uspořádání jednotlivých stránek, WordPress umožňuje vytvářet vlastní šablony stránek. Můžete například vytvořit šablonu stránky na celou šíři bez postranního panelu a pojmenovat jitemplate-fullwidth.phpA přidejte následující poznámku na začátek dokumentu:

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

Poté, když upravujete stránku v administrativním rozhraní WordPressu, můžete v části “Vlastnosti stránky” vybrat tuto “širokou šablonu stránky”.

Doporučujeme k přečtení. Kompletní průvodce vývojem témat pro WordPress: vytvořte si vlastní web od nuly do jedné.。

Aby vaše vlastní úpravy nebyly přepsány při aktualizaci nadřazeného tématu, důrazně doporučujeme používat k vývoji dílčí témata. Dílčí témata obsahují pouze jednustyle.cssA s volitelnýmfunctions.php. Podtémastyle.cssHlava musí deklarovat nadřazené téma:

/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/

Internationalizace, optimalizace a příprava k uvedení na trh tématu.

Když je vývoj téměř u konce, musíte se ujistit, že téma je snadno použitelné pro uživatele po celém světě, má dobrý výkon a je připraveno k vydání.

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

Realizace internacionalizace tématu (i18n)

Internationalizace je proces, který umožňuje překládat vaše témata do jiných jazyků. V WordPressu je toho dosaženo především pomocí dvou funkcí:__()K návratu přeloženého řetězce znaků._e()Používá se k přímému výstupu přeložených řetězců. Musíte je použít ve všech textech, které je třeba přeložit, a určit je vstyle.cssTextová oblast definovaná v hlavičce (Text Domain).

<h2><?php esc_html_e( '最新文章', 'my-custom-theme' ); ?></h2>
<p><?php echo esc_html__( '这是一段示例文本。', 'my-custom-theme' ); ?></p>

Následně můžete použít nástroj, jako je Poedit, k vytvoření.potPřekladatelské šablony a konkrétní jazykové balíčky (například.zh_CN.po和.mo(Dokumenty).

Provedení optimalizace výkonu a kontroly kódu.

Před zveřejněním je nutné optimalizovat výkonnost tématu. To zahrnuje kompresi souborů CSS a JavaScriptu, zajištění toho, aby obrázky měly vhodnou velikost a byly optimalizovány, snížení počtu dotazů na databázi a správné používání systému front pro skripty a styly WordPressu, aby se zabránilo přímému načítání zdrojů do šablony. Současně je nutné provést komplexní kontrolu kódu, aby byly dodrženy standardy kódování WordPressu, nebyly ponechány ladicí kódy a všechny funkce fungovaly podle očekávání.

Závěr

Vývoj vlastního WordPressového tématu od nuly je systematický proces učení, který zahrnuje pochopení struktury jádra, používání hierarchie šablon a hlavní smyčky až pofunctions.phpOd integrace funkcí, přes implementaci responzivního designu, až po konečnou internacionalizaci a optimalizaci. Postupujte podle principu “začněte jednoduše a postupně inovujte”, nejprve vytvořte minimálně funkční motiv a poté neustále přidávejte nové šablony a funkce. Po zvládnutí těchto dovedností budete moci vytvářet jedinečné webové stránky, které dokonale odpovídají vašim potřebám nebo potřebám vašich klientů, aniž byste byli omezeni stávajícími motivy. Nezapomeňte, že oficiální dokumentace a komunita vývojářů jsou vašimi nejlepšími spojenci na cestě učení.

Časté dotazy

Je pro vývoj WordPressových šablon nutné mít hluboké znalosti PHP?

Je zapotřebí mít solidní základy PHP, ale nemusíte být odborníkem. Musíte porozumět syntaxi PHP, proměnným, polím, funkcím a cyklickým strukturám, protože šablony WordPressu jsou z velké části tvořeny kódem PHP. Nejdůležitější je naučit se používat velké množství vestavěných funkcí (šablonových tagů) a háčků (akcí a filtrů), které poskytuje WordPress a které slouží jako most mezi vaším tématem a hlavními funkcemi WordPressu.

Proč se mé vlastní téma nezobrazuje na pozadí?

Nejčastější příčinou jestyle.cssFormat poznámek v záhlaví souboru je nesprávný nebo chybí informace. Přesvědčte se, zda jsou pole jako Název motivu a Autor správně vyplněna a zda je formát úplně správný. Dalším důvodem může být to, že složka s motivem je umístěna v nesprávném adresáři. Musí být umístěna v adresářiwp-content/themes/Níže.

Jak zajistit, aby mé téma podporovalo editor Gutenberg?

Aby se vaše téma lépe přizpůsobilo editoru Gutenberg, musíte v něm provést několik úprav.functions.phpPřidejte do projektu odpovídající prohlášení o podpoře tématu. To zahrnuje podporu širokého zarovnání, stylový šablon editoru atd. Například:

add_theme_support( 'align-wide' ); // 支持宽和全宽对齐
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' ); // 加载一个用于编辑器的专属样式表

Kromě toho vytvořte frontendové styly pro některé klíčové oblasti (jako například odstavce, nadpisy, tlačítka) a zajistěte, aby vypadaly konzistentně jak na webových stránkách, tak i v editoru.

Jak bych měl testovat svůj motiv?

Testy by měly být prováděny na více úrovních. Nejprve je třeba zkontrolovat vzhled a funkčnost v různých prohlížečích (například Chrome, Firefox, Safari, Edge) a na zařízeních různých velikostí (mobilní telefony, tablety, stolní počítače). Dále je třeba otestovat kompatibilitu s běžně používanými pluginy. Poté lze pomocí dat “Unit testy tématu” (XML soubor) poskytnutých WordPressem importovat velké množství různých typů obsahu, aby se zkontrolovalo, jak se téma chová v různých extrémních situacích. Nakonec je nutné aktivovatWP_DEBUGZkontrolujte, zda neexistují žádná varování nebo chyby PHP, pomocí vzoru.

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: