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

Vytvořte profesionální web: kompletní návod k vývoji vlastního WordPressového tématu od nuly.

Čtení za 3 minuty.
2026-03-15
2026-06-03
3,032
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 vývojového prostředí a pochopení struktury tématu

Než začnete psát kód, potřebujete vhodné lokální vývojové prostředí. Doporučujeme nástroje jako Local by Flywheel, XAMPP nebo MAMP, které vám umožní rychle nastavit serverové prostředí obsahující PHP, MySQL a Apache/Nginx. Zároveň se ujistěte, že váš textový editor nebo integrovaný vývojový prostředí (IDE), např. VS Code nebo PhpStorm, podporuje výrazné zvýraznění kódu a funkce FTP/SFTP.

Standardní téma pro WordPress je ve skutečnosti složka s určitou strukturou, která je uložena na… /wp-content/themes/ V adresáři jsou pouze dvě základní, klíčové soubory:index.php 和 style.cssMezi nimi jestyle.css Nejedná se pouze o šablonu stylů, ale také o “soubor deklarace tématu”; poznámky v hlavičce tohoto souboru obsahují metadata týkající se daného tématu.

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个为展示而开发的自定义WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

WordPress rozpoznává váš téma pomocí tohoto komentáře.Text Domain Slouží k internacionalizaci a je identifikátorem určeným k následnému překladu.

Doporučujeme k přečtení. Ultimátní průvodce vývojem temat pro WordPress: Postavte si své první vlastní téma od nuly。

Pochopte hierarchii šablon.

WordPress využívá mechanismus hierarchie šablon (Template Hierarchy) k určení toho, který soubor šablony se má použít pro různé typy obsahu. Například při návštěvě domovské stránky blogu WordPress postupně hledá odpovídající šablonu. home.phpPokud neexistuje, použijte ho. index.phpU jednotlivých článků bude preferováno hledání informací v rámci daného článku. single-post.phpA pak je tu single.phpA nakonec je… 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

Porozumění tohoto mechanismu je klíčem k vývoji flexibilních temat. Nemusíte vytvářet všechny šablonové soubory – stačí vytvořit ty, které potřebujete pro konkrétní typy stránek, které chcete přizpůsobit. Ostatní stránky budou automaticky generovány podle nastavení. index.php Tento finální “rezervní” šablonový proces.

Vytvoření základní šablonové soubory

Šablony jsou „kostrou“ témat a určují strukturu HTML různých částí webové stránky. Začneme vytvářením několika nezbytných a často používaných souborů.

Vytvořte šablony pro hlavičku a závěr stránky.

Aby bylo dodrženo pravidlo DRY (Don’t Repeat Yourself – Nepoužívejte stejné kódy vícekrát), tematika WordPress obvykle odděluje hlavičku (Header) a patičku (Footer) do samostatných souborů.

header file header.php Obsahuje od… <!DOCTYPE html> Veškerý kód od začátku až před oblast hlavního obsahu je důležitý v tom, aby byla provedena volání (tj. byly spuštěny příslušné funkce). wp_head() Funkce umožňuje jádru WordPressu, pluginům a temám vložit zde potřebný kód (např. odkazy na stylové soubory, metatagy).

Doporučujeme k přečtení. Úvod do vývoje WordPress temat: Postupný návod, jak vytvořit své první vlastní téma。

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1003>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <h1 class="site-title"><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>

Koncový soubor footer.php Takto bude zahrnuto veškerý obsah na spodní straně stránky a před ukončením bude proveden příkaz. wp_footer() Funkce jsou zásadní pro načítání skriptů a funkcí pluginů.

<footer id="colophon" class="site-footer">
    <p>©</p>
</footer>
<?php wp_footer(); ?>
\n
<p></p>

Sestavení šablony hlavního indexu

index.php Jako nejzákladnější šablona má za úkol… get_header() 和 get_footer() Na začátku a na konci funkce jsou zahrnuty potřebné informace („hlavy“ a „paty“ funkce), a uprostřed se používá hlavní cyklus k výstupu obsahu.

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            ?>
            <article no numeric noise key 1006>
                <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_excerpt(); ?>
                </div>
            </article>
            &lt;?php
        endwhile;
        the_posts_navigation();
    else :
        echo &#039;<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

In this template… have_posts() 和 the_post() Funkce tvoří hlavní cyklus („The Loop“) v WordPressu a jsou základem pro výstup všech obsahů článků. Funkce jako… the_title()、the_content()、the_permalink() Slouží k výpisu příslušných dat článků uvnitř cyklu.

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

Integrace pokročilých funkcí s tematickými komponentami

Profesionální téma nejenže zobrazuje obsah, ale také poskytuje bohaté funkce a komponenty. To vyžaduje od vás hluboké pochopení funkční knihovny a systému hooků WordPressu.

Přidat funkci navigace v menu

Návazový menu je klíčovou součástí webové stránky. Nejprve musíte vytvořit návazové menu podle nastavení daného tématu (theme). functions.php Použito ve souboru register_nav_menus() Funkce registruje jedno nebo více položek v nabídce (menu).

function my_custom_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Poté, ve šablonovém souboru (např. header.phpV místě, kde chcete zobrazit menu, použijte… wp_nav_menu() Funkce ji volá.

Doporučujeme k přečtení. Praktický průvodce vývojem temát pro WordPress: Vytvoření vlastní architektury a šablon temát od nuly。

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
    'container'      => 'nav',
    'container_class'=> 'main-navigation',
) );
?>

Uživatelé nyní mohou v administraci WordPress v sekci “Vzhled” → “Menu” vytvářet menu a přiřazovat je do pozice “Hlavní navigační menu”.

Aktivujte zkrácené obrázky článků a panel nástrojů.

Obrázky charakteristické pro článek (zvětšené verze) a widgety jsou důležitými funkcemi, které zvyšují flexibilitu při prezentaci obsahu. Stejně tak… functions.php V tomto případě jsou funkce aktivovány pomocí funkce podpory témat (theme support function).

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 
function my_custom_theme_features() {
    // 启用文章和页面特色图像
    add_theme_support( 'post-thumbnails' );
    // 为文章定义缩略图尺寸
    set_post_thumbnail_size( 1200, 630, true );

// 启用小工具和选择性刷新
    add_theme_support( 'widgets' );
    add_theme_support( 'customize-selective-refresh-widgets' );
}
add_action( 'after_setup_theme', 'my_custom_theme_features' );

Registrování oblasti pro přidávání panelových nástrojů je možné. register_sidebar() Funkce.

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

Poté můžete pokračovat v práci například na… sidebar.php Používá se v šablonových souborech. dynamic_sidebar( 'sidebar-1' ) Vytvořte výstup pro tuto oblast.

Implementace responsivního designu a organizace stylů

Moderní webové stránky musí dobře vypadat na všech zařízeních. To znamená, že váš design (témata stránek) musí být responzivní – tedy schopné se přizpůsobit různým velikostem obrazovek a rozličným rozlišením.

Používejte CSS s důrazem na mobilní zařízení (tzv. „mobile-first“ design).

在 style.css Začněte psaním základních stylů pro mobilní zařízení a poté použijte media queries k postupnému vylepšování stylů pro větší obrazovky. Tím zajistíte, že klíčový obsah bude dostupný na všech zařízeních s předností.

/* 基础样式 (移动设备) */
.site-header {
    padding: 1rem;
    text-align: center;
}
.site-main {
    padding: 1rem;
}
.widget {
    margin-bottom: 2rem;
}

/* 中等屏幕 (平板) */
@media (min-width: 768px) {
    .site-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    .site-main {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }
}

/* 大屏幕 (桌面) */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

Bezpečné zavádění JavaScriptu

Pro zajištění optimálního výkonu a bezproblémového fungování systému by měly být použity doporučené postupy od WordPress. wp_enqueue_script() Metody na načtení souborů JavaScript. Tento proces se obvykle provádí… functions.php Dokončeno v…

function my_custom_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 为主题的主 JavaScript 文件排队
    wp_enqueue_script( 'my-custom-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_custom_theme_scripts' );

Tento přístup umožňuje WordPressu spravovat závislosti mezi různými komponentami a poskytuje centrální bod kontroly, pomocí kterého mohou pluginy a další tematika bezpečně interagovat s těmito závislostmi.

Závěr

Vývoj vlastního WordPress tématu od nuly je systématický proces, který vyžaduje, abyste ovládali front-end technologie HTML/CSS/JavaScript, serverovou logiku v PHP a také hluboké pochopení základní architektury WordPressu. Klíčové kroky zahrnují: nastavení prostředí a pochopení struktury souborů tématu; vytvoření základních šablon, zejména s využitím hierarchie šablon a hlavního cyklu pro výstup obsahu; functions.php Integrujte pokročilé funkce, jako jsou menu, přehledy (thumbnails), nástroje (widgets) atd.; nakonec organizujte styly a skripty pomocí responzivního designu a bezpečných postupů, abyste zajistili, že téma bude moderní a vysoce výkonné. Dodržováním těchto kroků nejen vytvoříte webovou stránku, která splňuje konkrétní požadavky, ale také důkladně pochopíte fungování WordPressu, což vám poskytne solidní základ pro řešení složitějších vývojových úkolů.

Časté dotazy

Je nutné být zdatný v PHP při vývoji témat pro WordPress?

Ano, pevné základy v PHP jsou nezbytné. WordPress je totiž vybudován na PHP a jeho klíčové funkce, šablony, systém hooků a interakce s databází jsou závislé přímo na tomto jazyce. I když lze dosáhnout určitého úrovně personalizace pomocí nástrojů na vytváření stránek a podtemů, pro vytvoření plně funkčního a logicky uspořádaného vlastního tématu je hluboké pochopení PHP základní podmínkou.

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

Potřebujete využít funkce internacionalizace (i18n) a lokalizace (l10n) v WordPressu. Ve vašem kódu by měly být všechny textové stránky určené pro uživatele obaleny pomocí funkcí pro překlad. __('文本', 'my-custom-theme') 或 _e('文本', 'my-custom-theme')Zároveň se ujistěte, že…style.css„Hlava a všechno“load_theme_textdomain()Správné nastavení bylo provedeno během volání.Text DomainPoté lze pomocí nástrojů, jako je Poedit, vytvořit požadovaný obsah..potŠablony pro překladatele k vytvoření.po和.moJazykové soubory.

Co je to podtémata (subtopics) a měl bych je používat?

Dceřiná tema (Child Theme) je tema, které závisí na jiném tematu (rodičovském tematu) a obsahuje pouze své vlastní soubory se styly a některé upravené šablony. Při aktualizaci rodičovského tematu nebudou změny v dceřiném tematu přepsány. Pokud hlavně cílíte na přepsání stylů stávajícího tematu nebo na menší úpravy funkcí (např. přidání vlastních funkcí nebo přepsání několika šablon), doporučujeme výrazně používat dceřiná tema. Je to bezpečnější a jednodušší na údržbu. Pokud však chcete vytvořit strukturu a logiku, která se zcela liší od jakéhokoli stávajícího tematu, je lepší začít od nuly a vytvořit samostatné tema.

Po dokončení vývoje, jak publikovat téma do oficiálního adresáře WordPressu?

Odeslání tématu do adresáře temat WordPress.org je přísný proces. Nejprve musí váš kód splňovat standardy kódování WordPressu a požadavky na revizi temat, včetně bezpečnosti, přístupnosti a kvality kódu. Potřebujete mít účet na WordPress.org a odesílat kód do repozitáře SVN. Témata musí být licencována licencí kompatibilní s GPL a nesmí obsahovat žádné placené doplňky ani skrytý škodlivý kód. Celý proces revize může trvat několik týdnů; revizorové vám poskytnou zpětnou vazbu, na základě které budete muset provést úpravy, dokud nebudete schváleni.

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: