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

Průvodce vývojem WordPress temat: Vytvořte si své první téma od nuly

Čtení za 2 minuty.
2026-03-15
2026-06-03
2,493
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 před zahájením

Než začnete psát jakýkoli kód, je nutné se ujistit, že vývojové prostředí je připraveno. Nejprve potřebujete lokální serverové prostředí – např. XAMPP, MAMP nebo Docker. Dále je nezbytný kódový editor; Visual Studio Code nebo PHPStorm jsou skvělé volby. Nejdůležitější je však instalace nejnovější verze WordPressu a ujištění se, že funguje správně.

Následně, ve složce s instalací vašeho WordPressu…wp-content/themesV té složce vytvořte novou složku, která bude vaším hlavním adresářem pro vaše tematické materiály. Například ji můžete nazvat…my-first-themeNázev tohoto adresáře bude přímo sloužit jako identifikátor vašeho tématu, a proto doporučujeme používat malá písmena, čísla a spojovníky.

V složce s tematikou jsou dvě soubory, které jsou nezbytné a představují minimální požadavky pro spuštění WordPress tématu:style.css和index.phpBez nich by WordPress nemohl v seznamu “Vzhled” -> “Témata” v pozadí rozpoznat vaše téma.

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

Porozumění základní struktuře souborů týkajících se daného tématu

Kompletní WordPress téma se skládá z řady šablonových souborů, které dodržují určitá pravidla pojmenovávání. Každý soubor je zodpovědný za zobrazení různých částí webové stránky.

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

Šablony stylů a deklarace informací o tématu

style.cssSoubory slouží nejen k ukládání CSS stylů, ale jejich část obsahující poznámky v hlavičce (header comments) je také místem, kde WordPress čte metadata (meta data) tématu. Tato část musí být umístěna na samém začátku souboru a musí dodržovat určitý formát.

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

“Text Domain” slouží k internacionalizaci a je klíčovým identifikátorem pro následné načítání souborů s překlady. Po zadání těchto informací obnovte stránku tematiky v administraci WordPress a měli byste vidět obrázek s názvem “Moje první tema”.

Funkce hlavní šablony (main template file):

index.phpJedná se o hlavní šablonový soubor vašeho tématu a zároveň o výchozí “náhradní” šablonu webové stránky. Když WordPress nenajde konkrétnější šablonový soubor (např.single.php或page.phpPři použití tohoto nástroje se postupuje následovně:index.phpJeho nejzákladnější struktura zahrnuje volání hlavičky WordPressu, hlavního obsahu cyklu a závěrečné části („tail“).

<?php get_header(); ?>

<main id="main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 输出文章内容
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>没有找到任何文章。</p>';
    endif;
    ?&gt;
</main>

<?php get_footer(); ?>

Rozšíření základních šablon a přidání nových funkcí

Pouzeindex.php、style.cssTo není dostatečné. Potřebujeme oddělit hlavičku, patu a boční panely, aby byla struktura jasnější, a zároveň zavést klíčové funkce daného tématu.

Doporučujeme k přečtení. Od nuly: Postupná příručka pro vývoj vlastního WordPress tématu。

Oddělit šablonu pro hlavičku a šablonu pro patu

Vytvořitheader.phpSoubor obsahuje deklaraci typu dokumentu a kód HTML.Části webové stránky, včetně nadpisů a navigačních oblastí. Použít…wp_head()„Hooky“ prvky slouží k zajištění toho, aby pluginy a jádro WordPressu správně vložily potřebné skripty a styly.

<!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>
<?php wp_body_open(); ?>
<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>
</header>

Vytvořitfooter.phpSoubor obsahuje informace o patičce webové stránky a na konci obsahuje volání (tzv. „call“) určené k provedení nějaké akce.wp_footer()Hák.

<footer>
    <p>©</p>
</footer>
<?php wp_footer(); ?>
\n
<p></p>

Takto,index.phpV tomto případě můžeme použít…get_header()和get_footer()Funkce slouží k jejich načtení (zavádění).

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řit funkční soubor

functions.phpJde o “mozek” tématu (theme’s „brain“), který slouží k přidávání funkcí, registraci menu, aktivaci speciálních obrázků, definování bočních panelů atd. Není to soubor šablony (template file), ale PHP soubor, který se automaticky načte při inicializaci tématu.

Níže je…functions.phpZákladní příklad:

<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
function my_first_theme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_register_menus' );

// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_enqueue_scripts' );
?>

Vytvořte více šablonových souborů.

Aby různé typy stránek měly vhodnější rozvržení, potřebujeme vytvořit více speciálních šablonových souborů.

Doporučujeme k přečtení. Od instalace po dokonalé ovládnutí: Kompletní průvodce vytvářením webových stránek pomocí WordPressu a analýza praktických tipů。

Článková jednotlivá stránka a šablona stránky

single.phpSlouží k renderování jednotlivých blogových článků. Jeho struktura je…index.phpPodobně, ale obvykle obsahuje šablony pro komentáře.comments.phpVolání…

page.phpSlouží k renderování statických stránek. Obvykle nezobrazuje metadata, jako jsou kategorie nebo tagy, ale se zaměřuje spíše na samotný obsah stránky.

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

Šablona seznamu archivovaných článků

archive.phpSlouží k zobrazení kategorií, tagů, autorů, dat a dalších informací na stránkách archivů. Můžete použít podmínkové značky, jako např.is_category()、is_tag()Je to pro rozlišení různých typů archivů a zobrazení příslušných nadpisů.

Vytvořit stránku s chybou 404.

404.phpJe to stránka, která se zobrazí, když uživatel navštíví neexistující URL. Dobrá stránka s chybou 404 by měla obsahovat přívětivé upozornění, vyhledávací pole a odkazy na hlavní stránky, aby uživateli pomohla najít požadovaný obsah.

Závěr

Díky této příručce jste dokončili celý proces od vytvoření složek a základních souborů přes pochopení hierarchie šablon až po rozšíření funkcí tématu a vytvoření speciálních šablon. Vytvořili jste tak téma, které má základní strukturu, je rozpoznáváno systémem WordPress a disponuje rozšířitelnými funkcemi. I když to vypadá jednoduše, obsahuje již všechny základní koncepty. Nyní můžete pokračovat v dalším studiu šablonových značek, vlastních dotazů, dalších možností použití WordPressových cyklů, stejně jako způsobů vytvoření vlastních typů článků a možností přizpůsobení tématu, abyste jeho funkce učinili ještě výkonnějšími a personalizovanějšími.

Časté dotazy

Proč se moje téma nezobrazuje v administraci WordPressu („WordPress backend“)?
Nejprve si prosím zkontrolujte, zda je vaše složka s tematikou umístěna na správném místě.wp-content/themes/V adresáři. Dále se ujistěte, zda obsahuje potřebné soubory.style.css和index.phpSoubor. Nakonec ho otevřete.style.cssUjistěte se, že blok s poznámkami k tematickým informacím v horní části souboru má správný formát – zejména…Theme Name:Tato řádek.

Jak přidat podporu pro vlastní logo ke svému tématu?

Potřebujete to v rámci daného tématu…functions.phpDo souboru přidejte řádek kódu, který tuto funkci aktivuje. Použijte…add_theme_support( ‘custom-logo’ )Funkce. Po jejím aktivování mohou uživatelé nahrávat a nastavovat logo v sekci “Vzhled” -> “Vlastní” -> “Identita stránky”. Také je potřeba…header.phpPoužijte to na vhodném místě.the_custom_logo()Funkce slouží k jejímu zobrazení.

Jaký je rozdíl mezi souborem functions.php v hlavní složce projektu a pluginy?

functions.phpFunkce obsažené v daném obsahu jsou úzce vázány na aktuálně aktivní téma. Pokud změníte téma, tyto funkce již nebudou dostupné. Naopak funkce pluginů jsou nezávislé na tématu – fungují vždy, pokud jsou pluginy aktivní, bez ohledu na to, které téma používáte. Pokud jsou vaše funkce silně spojeny s vizuálním zpracováním obsahu (např. umístění registračního formuláře, definice rozvrhu stránek), můžete je umístit do pluginů.functions.phpPokud jde o obecné funkce (jako jsou formuláře pro kontaktování nebo optimalizace pro vyhledávače – SEO), je vhodnější je implementovat jako pluginy.

Jak zajistit, aby můj webový design („témata“) podporovalo více jazyků?

Musíte udělat dvě věci. Za prvé, během vývoje musíte všechny řetězce určené pro uživatele obalit pomocí funkce pro překlad.__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )A ujistěte se, že…‘my-first-theme’与style.cssZde uvedený “Text Domain” je v souladu s tím, co je deklarováno. Za druhé, pomocí nástrojů jako Poedit vyberte ze kódu vašeho tématu všechny řetězce, které je třeba přeložit, a vytvořte seznam překladatelných textových úryvků..potSoubory, které poté překladatelé převedou do odpovídajícího jazyka….poA po kompilaci.moSoubor a umístěte jej do tématu./languages/V adresáři.

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: