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

Začínáme s vývojem témat pro WordPress: vytvořte si své první vlastní téma od nuly.

Čtení za 3 minuty.
2026-03-12
2026-06-03
2,512
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í přípravné práce

Než začnete psát kód, je vhodné prostředí a základní pochopení klíčovými předpoklady úspěchu. Nejprve potřebujete místní vývojové prostředí. Můžete zvolit integrované balíčky, jako jsou XAMPP, MAMP nebo Local by Flywheel, které vám rychle nastaví PHP, MySQL a webový server. Samozřejmě můžete také zvolit flexibilnější způsob a prostředí si na místě sestavit ručně. Ujistěte se, že verze PHP je 7.4 nebo novější a verze MySQL je 5.6 nebo novější.

Následně potřebujete vytvořit samostatný adresář pro své vlastní téma. Tento adresář musí být umístěn v adresáři instalace WordPress. wp-content/themes/ V podadru. Například můžete vytvořit složku s názvem… my-first-theme Složka obsahující tyto soubory. Pro rozpoznání systémem stačí pouze dvě soubory v rámci této WordPress tématiky.index.php 和 style.cssMezi nimi jestyle.css Nejde pouze o šablony stylů, ale také o záhlaví souborů, která definují metadata tématu – to je vlastně “občanský průkaz” tohoto tématu.

Vytvoření základního souboru pro téma

Napište záhlaví šablony stylů pro téma.

style.css Na začátku souboru musí být formátovaný blok CSS komentářů, který obsahuje všechny informace potřebné k rozpoznání tématu WordPressem. Tato část musí být správně nakonfigurována u každého tématu.

Doporučujeme k přečtení. Od nuly k jedné: Kompletní průvodce vývojem WordPressových témat a praktický návod。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个入门级的自定义 WordPress 主题，用于学习开发。
Version: 1.0.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
*/

Zde “Text Domain” slouží k internacionalizaci a později jej použijeme s pomocí funkcí. __() 或 _e() Chceme, aby text v tématu byl podporován vícejazyčným překladem.

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

index.php Jedná se o výchozí šablonu daného tématu a zároveň o nejdůležitější záložní šablonu. Když WordPress nenajde konkrétnější šablonový soubor (např. single.phpKdyž je potřeba něco udělat, použijeme právě to. Jeden z nejzákladnějších… index.php Mělo by být zahrnuto WordPressové „The Loop“ – to je základní mechanismus pro výstup obsahu článků.

<!DOCTYPE html>
<html no numeric noise key 1022>
<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 1019>
    <?php wp_body_open(); ?>
    <header id="site-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>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main id="main-content">
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
                    <h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
                    <div class="entry-content">
                        <?php the_content(); ?>
                    </div>
                </article>
            
            <p><?php _e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>

<?php get_sidebar(); ?>

<footer id="site-footer">
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Tento šabloně bylo použito několik klíčových funkcí WordPressu, jako např. wp_head(), the_title(), the_content()funkce get_sidebar() Bude se pokusit načíst soubor s názvem… sidebar.php Šablonský soubor.

Implementace úrovní a funkcí šablon

WordPress používá soubor pravidel nazývaný “Hierarchie šablon” (Template Hierarchy), které určují, který šablonový soubor se má použít pro konkrétní stránku. Porozumění této hierarchii je klíčové pro vývoj flexibilních témat. Například při návštěvě blogového článku WordPress postupně hledá odpovídající šablonu:single-post.php -> single.php -> singular.php -> index.phpMůžete si upravit vzhled různých stránek tím, že vytvoříte tyto specifické soubory.

Přidání podpory pro speciální obrázky článků

Moderní témata obvykle podporují funkci “Obrázek příspěvku” (Post Thumbnail). Chcete-li tuto funkci aktivovat, musíte v nastavení daného tématu… functions.php Použito ve souboru add_theme_support() Funkce. Nejprve vytvořte soubor v adresáři určeném k ukládání tematických materiálů. functions.php Dokumenty.

Doporučujeme k přečtení. Připraveno pro praktické využití: Kompletní průvodce vývojem WordPress temat od základů až po pokročilé úrovně。

<?php
/**
 * 我的第一个主题的功能函数文件
 */

if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让 WordPress 管理标题标签
        add_theme_support( 'title-tag' );

// 启用文章特色图像支持
        add_theme_support( 'post-thumbnails' );
        // 为文章和页面设置默认特色图像尺寸
        set_post_thumbnail_size( 1200, 800, true );

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

Zavádění souborů se styly a skripty

Správné zařazení souborů CSS a JavaScript do fronty je jednou z nejlepších postupů při vývoji pro WordPress – to zabrání konfliktům mezi zdroji a duplicitnímu načítání těchto souborů. Provádíme to pomocí… wp_enqueue_style() 和 wp_enqueue_script() Funkce je implementována tak, aby to bylo možné. functions.php Přidejte do toho novou funkci.

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

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-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_first_theme_scripts' );

Pokročilé tématika a osvědčené postupy

Kompletní téma není pouze o zobrazení obsahu, je také třeba zvážit přístupnost, výkon a organizační strukturu. Oddělení různých částí stránky (jako je záhlaví, patka, boční lišta) do samostatných šablonových souborů usnadňuje údržbu kódu.

Oddělit šablony nadpisu a podpisu stránky

Vytvořit header.php 和 footer.php Soubor. index.php 中 <body> Všechny obsahy před značkou přesuňte… header.php… \n Všechny obsahy před značkou přesuňte… footer.phpPoté se původní… index.php Zjednodušeno:

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 get_header(); ?>

<main id="main-content">
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
                    <?php if ( has_post_thumbnail() ) : ?>
                        <div class="post-thumbnail">
                            <?php the_post_thumbnail(); ?>
                        </div>
                    <?php endif; ?>
                    <h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
                    <div class="entry-content">
                        <?php the_content(); ?>
                    </div>
                </article>
            
            <p><?php _e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>

Vytvořit šablonu pro boční panel

Stejně tak, vytvořte také… sidebar.php Soubor a v něm použít funkci dynamického bočního panelu dynamic_sidebar()Nejprve musíte… functions.php Použijte to v čínštině. register_sidebar() Funkce registruje oblast pro přidání panelových nástrojů (sidebar widgets).

Funkce my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hlavní postranní panel', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Zde přidejte widgety.', 'my-first-theme' ),
        'before_widget' =&gt; '  Funkce my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hlavní postranní panel', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Zde přidejte widgety.', 'my-first-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>'function my_first_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'My first theme',  
            'id' =&gt; 'my_first_theme',  
            'desc' =&gt; 'Sidebar for my first theme',  
        ),  
    ) );  
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

A poté, sidebar.php Volá se to zde:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

Závěr

Díky krokům popsaným v tomto článku jste úspěšně vytvořili základní, ale funkčně kompletní vlastní téma pro WordPress od nuly. Naučili jste se vytvářet klíčové soubory, porozuměli struktuře šablon a používat různé funkce k úpravě vzhledu a chování tématu. functions.php Přidejte funkci temat („themes“), stejně jako dodržování osvědčených postupů při organizaci a načítání zdrojových souborů. Toto téma obsahuje základní funkce, jako je zobrazení článků, podpora speciálních obrázků, registrační menu a boční lišta. Na základě tohoto tématu můžete dále zkoumat složitější šablony (např. šablony stránek, šablony kategorií), přizpůsobit typy článků nebo využít API pro personalizaci temat, abyste postupně vytvořili funkční a profesionálně navržené WordPress téma. Nezapomeňte, že praxe je klíčem k učení – zkoušejte upravovat kód a pozorovat výsledné změny; to je nejlepší způsob, jak si znalosti upevnit.

Doporučujeme k přečtení. Průvodce vývojem tem pro WordPress: Vytvoření vlastní temy od nuly。

Časté dotazy

Co mám dělat, když se můj příspěvek nezobrazuje v záložce „Témata“?

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. Poté potvrďte. style.css Je správný formát hlavičky s informacemi o tématu na vrcholu souboru (CSS komentáře)? Zejména řádek “Theme Name:” musí být přítomen a mít správný formát. Jakékoli pravopisné chyby nebo formátovací problémy mohou zabránit WordPressu v rozpoznání vašeho tématu.

Co dělat, pokud změny v souboru functions.php způsobily, že webové stránky zobrazují pouze prázdnou obrazovku („bílou stránku“)?

“Bílý obrazovka a zastavení systému” je obvykle… functions.php Ve souboru se nacházejí gramatické chyby (např. chybějící čárky za tečkami, závorky) nebo fatální chyby. Nejrychlejším způsobem, jak to vyřešit, je použít FTP nebo správce souborů k přístupu na váš server a poté chybný soubor nahradit správným. functions.php Přejmenování souboru (např. na…) functions.php.bakTímto způsobem WordPress tento soubor ignoruje a webové stránky budou opět přístupné. Poté můžete provést kontrolu a opravit chyby v kódu.

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

Jak přidat šablonu stránky ke svému tématu?

Chcete-li vytvořit vlastní šablonu stránky, nejprve v adresáři svého tématu vytvořte nový PHP soubor, například… template-fullwidth.phpNa nejvyšším místě tohoto souboru přidejte následující specifické šablonové poznámky:

<?php
/**
 * Template Name: 全宽页面
 */

Poté můžete do tohoto souboru napsat svůj HTML a PHP kód. Nezapomeňte používat… get_header(), get_footer() Funkce jako “full-width page” (úplně široká stránka). Po uložení tohoto nastavení budete moci v rozbalovacím menu “Šablony” (Templates) v sekci “Vlastnosti stránky” (Page Properties) v administraci WordPressu vidět možnost „Úplně široká stránka“ a zvolit ji.

主题开发中 get_template_part() 函数有什么用？

get_template_part() Funkce jsou výhodným nástrojem při vývoji WordPress temat pro modularizaci kódu. Jejich účelem je načíst konkrétní část šablony ve vaší tematice. Například v cyklu můžete použít funkce k načtení požadovaných dat nebo zpracování určitých informací. get_template_part( 'content', get_post_format() ); Načtení… content.php Nebo konkrétněji například: content-video.php Tyto soubory výrazně zvyšují využitelnost a udržovatelnost kódu, což vám umožňuje snadno vytvářet různé zobrazení šablon pro obsah článků různých typů.

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: