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

Úvodní průvodce vývojem temát pro WordPress: Postavte si své první vlastní téma od nuly

Čtení za 2 minuty.
2026-03-14
2026-06-05
2,008
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 temát pro WordPress

Než začnete psát kód, je velmi důležité pochopit základní strukturu tematického balíčku (theme) WordPressu. Tematický balíček je v podstatě složka, která obsahuje sadu souborů dodržujících určitá pravidla; tyto soubory společně určují vzhled webové stránky a některé z jejích funkcí. Klíčovým konceptem je “hlavní struktura šablon” (template hierarchy), což znamená, že WordPress automaticky vybere a načte odpovídající šablonu podle typu zobrazené stránky (např. úvodní stránka, stránka článku, vlastní stránka).

Každé téma musí obsahovat dva základní soubory:style.css 和 index.php。style.css Nejenže tyto soubory poskytují potřebné styly, ale také poznámky v jejich hlavičkách (headers) obsahují metadata o tématu – jako je název tématu, autor, popis atd. To je jediný způsob, jakým WordPress rozpoznává jednotlivá témata.index.php Jedná se o výchozí šablonový soubor, který WordPress použije v případě, že neexistují žádné jiné, konkrétnější šablony.

Témata interagují s jádrem WordPress pomocí šablonových značek (Template Tags). Jedná se o PHP funkce, které slouží k dynamickému načítání a zobrazování obsahu z databáze. the_title() Titul článku:the_content() Pochopení a správné použití těchto funkcí je klíčem k zobrazení dynamického obsahu.

Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Od základů až po pokročilé techniky。

Nastavení vývojového prostředí a vytvoření struktury tématu

Efektivní a izolované vývojové prostředí je prvním krokem při vývoji webových stránek. Doporučujeme použít lokální serverové nástroje, jako jsou XAMPP, MAMP nebo Laragon, které umožňují rychle nastavit prostředí pro PHP a MySQL na vašem počítači. Nainstalujte základní soubory WordPress do kořenového adresáře lokálního serveru. htdocs 或 www…) v něm.

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

Následně, v adresáři instalace WordPressu… wp-content/themes/ V dané cestě vytvořte složku pro váš nový téma; například ji můžete nazvat… my-first-themeV této složce vytvořte první nezbytný soubor:style.cssPříslušné hlavičkové poznámky musí být vytvořeny přesně podle následujícího formátu:

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义 WordPress 主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Po uložení souboru přejděte do administrace WordPress na stránku “Vzhled” -> “Témata” a mělo by se zobrazit vaše téma, které můžete aktivovat.

Nyní vytvoříme druhý nezbytný soubor:index.phpToto je hlavní šablona tématu. Na počátku můžete do ní vložit pouze základní HTML5 strukturu a jednoduchý cyklus pro testování.

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
    <header>
        <h1>Moje vlastní tematika</h1>
    </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>
                <?php
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>Informace v dolní části webové stránky</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Podrobný výklad hlavních šablonových souborů a funkcí

S rostoucí složitostí témat je nutné oddělit kód pro různé funkce do specializovaných šablonových souborů. Systém úrovní šablon v WordPressu automaticky hledá a načítá šablonu, která nejlépe odpovídá aktuální stránce.

Doporučujeme k přečtení. Naučíme vás krok za krokem, jak vytvořit výkonné vlastní WordPress téma.。

Vytvořit header.php Soubor, bude… index.php 中 <head> Část a <header> Část kódu byla vložena. Poté… index.php Použít na vrcholu get_header() Funkce slouží k jejímu načtení (zavádění). Stejným způsobem lze vytvořit… footer.php Ukládejte informace na spodní straně a používejte je. get_footer() Zavést. Vytvořit. sidebar.phpA použijte… get_sidebar() Zavedení tohoto přístupu umožňuje modularizaci a opakované využití kódu.

Pro různé typy stránek lze vytvořit specifické šablony:
* single.php: Používá se k zobrazení jednotlivých článků.
* page.php: Používá se k zobrazení jednotlivých stránek.
* front-page.phpPokud existuje, bude použit jako statická domovská stránka.
* home.phpSlouží k zobrazení indexu blogových článků (když je domovská stránka nastavena na “Nejnovější články”).
* archive.phpSlouží k zobrazení archivních stránek obsahujících kategorie, tagy, autory a další informace.
* 404.phpSlouží k zobrazení stránky s chybou 404.

V souboru šablony je nejzákladnější strukturou “cyklus” (The Loop). Jedná se o blok PHP kódu, který používá WordPress k načítání a zobrazení článků z databáze. Základní struktura vypadá následovně:

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 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- 在这里输出文章内容，使用 the_title(), the_content() 等函数 -->
<?php endwhile; else : ?>
    <p>Omlouváme se, ale nenacházíme žádný obsah.</p>
<?php endif; ?>

funkce bloginfo() 或 get_bloginfo() Slouží k získání základních informací o webových stránkách, např. bloginfo( 'name' ) Vyveďte název webové stránky.bloginfo( 'stylesheet_url' ) Výstupní URL pro šablonu tématického stylu:

Rozšíření funkcí stylů, skriptů a temat

Aby byly styly témat správně načteny a aby se předešlo konfliktům, je nutné použít funkce poskytované WordPressem k zařazení souborů se styly a skriptů do fronty („queue“), místo jejich přímého zápisu do HTML kódu. <link> 或 <script> Tagy. Jsou to informace, které jsou přidány k tématu. functions.php Implementováno pomocí souborů.

Vytvořit functions.php Soubor slouží k přidávání funkcí specifických pro dané téma, úpravě výchozího chování nebo registraci stylů skriptů. wp_enqueue_style() 和 wp_enqueue_script() Funkce:

Doporučujeme k přečtení. Kompletní průvodce vývojem temát pro WordPress: Vytvoření vysokokvalitních, přizpůsobitelných temát od nuly。

<?php
function my_first_theme_scripts() {
    // 注册并排入主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 注册并排入一个自定义 CSS 文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );

// 注册并排入一个 JavaScript 文件，依赖于 jQuery
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

在 functions.php V tomto kontextu lze také použít… add_theme_support() Funkce slouží k deklaraci funkcí podporovaných daným tématem, jako jsou speciální obrázky k článkům, vlastní loga, formátování článků atd.

// 支持文章特色图像
add_theme_support( 'post-thumbnails' );

// 支持自定义 Logo
add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
) );

// 在文章编辑器中添加编辑器样式
add_editor_style( 'editor-style.css' );

Konečný vzhled tématu se obvykle určuje v… style.css Nebo v jiných CSS souborech načtených pomocí funkcí. WordPress automaticky přidá do elementů `body` a článků mnoho užitečných CSS tříd. home, single, page-id-{ID} Můžete využít tyto názvy tříd k vytvoření cílených stylů.

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

Díky krokům popsaným v tomto článku jste nyní zvládli základní postup vytvoření vlastního WordPress tématu od nuly. Od pochopení základních konceptů témat a struktury šablon, přes nastavení prostředí a vytvoření potřebných souborů, až po rozebrání hlavních šablon, pochopení cyklů a šablonových značek, a nakonec se naučili, jak… functions.php Správné přidání stylů, skriptů a funkcí tématu je základním krokem, ale zároveň pokrývá hlavní strukturu vývoje temat. Následně můžete pokračovat v prozkoumávání dalších aspektů, jako je vývoj podtemat, personalizace typů článků, pokročilé možnosti temat, integrace s WooCommerce a dalších funkcí, abyste neustále rozšiřovali a zdokonalovali své dovednosti v vývoji temat.

Časté dotazy

Je nutné znát PHP pro vývoj temat (tématických stránek)?

Ano, PHP je základním programovacím jazykem WordPressu. Soubory temát jsou v podstatě PHP soubory, které kombinují HTML a PHP funkce (šablony WordPressu) za účelem dynamické generace stránek. I při použití nástrojů na vytváření stránek je pochopení PHP nezbytné pro přizpůsobení pokročilých funkcí a řešení problémů.

Můžeme změnit název souboru style.css týkajícího se daného tématu?

Není to možné.style.css Jedná se o soubor, který je nutný pro rozpoznání tématu v WordPressu a jehož název je pevně daný. Veškeré metadaty tématu (jako je název, autor) jsou definovány v poznámkách na začátku tohoto souboru. Nicméně můžete… functions.php Funkce registruje a načítá CSS soubory s jinými názvy, aby doplnily stávající styly.

Jak zajistit, aby téma podporovalo čínštinu nebo překlad?

Nejprve, style.css Správně nastaveno v hlavičkových poznámkách. Text Domain(Například) my-first-theme…) a používejte to ve všech řetězcích, které je třeba přeložit. __() 或 _e() Funkce jsou zabaleny do speciálních struktur. Poté se pomocí nástrojů, jako je Poedit, prohledávají tematika (témata stránek) za účelem generování požadovaných výstupů. .pot Šablony souborů a vytvoření odpovídajících jazykových verzí (např.…) zh_CN.poPřeložený soubor, který je nakonec zkompilován do… .mo Soubor je umístěn v tématu. languages Uvnitř složky.

Jak přidat funkci menu do vlastního tématu?

Nejprve, v rámci tohoto tématu… functions.php Použito ve souboru register_nav_menus() Umístění pro registraci funkcí. Poté, ve šablonových souborech (např.) header.phpV místech, kde chcete v rámci tohoto dokumentu zobrazit menu, použijte následující kód: wp_nav_menu() Funkce zavolá registrované menu. Uživatelé si poté mohou nastavit obsah těchto menu v sekci “Vzhled” -> “Menu” v administraci WordPress.

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: