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

Úvodní průvodce vývojem WordPress temat: Kompletní tutoriál od začátečníka až po odborníka

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

Témata pro WordPress tvoří jádro vzhledu a funkcí webových stránek. Vývoj vlastních temat vám nejen umožní dosáhnout naprosto personalizovaného designu, ale také vám poskytne hlubší pochopení principů fungování WordPressu a pomůže vylepšit vaše vývojářské dovednosti. Tento průvodce vás provede krok za krokem při vytváření základního tematu, které splňuje standardy WordPressu, od nuly.

Vytvoření vývojového prostředí a základní infrastruktury

Než začnete psát kód, potřebujete vhodné lokální vývojové prostředí. Můžete použít nástroje jako XAMPP, MAMP, nebo desktopové aplikace jako Local by Flywheel. Ujistěte se, že ve vašem prostředí jsou nainstalovány PHP, MySQL a Apache/Nginx.

Vytvoření adresáře s tematikou a klíčových souborů

Nejzákladnější WordPress téma potřebuje pouze dvě soubory. Nejprve, ve složce vaší instalace WordPressu…wp-content/themesV té složce vytvořte novou složku, například…my-first-theme。

Doporučujeme k přečtení. Návod k vývoji témat pro WordPress: Vytvořte si personalizovanou webovou stránku od nuly.。

V této složce vytvořte první základní soubor:style.cssTento soubor není pouze šablonou stylů, ale také obsahuje metadata témata. V začátku souboru musí být příslušný komentář ve správném formátu.

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 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Druhým klíčovým souborem jeindex.phpToto je výchozí šablona pro dané téma; pokud WordPress nenajde konkrétnější šablonu, použije právě tuto. Zpočátku může být velmi jednoduchá.

<!DOCTYPE html>
<html no numeric noise key 1010>
<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 1007>
    <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>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Nyní se váš téma může zobrazit v seznamu “Témata” v záložce “Vzhled” v administraci WordPress a je také aktivováno.

Hlavní šablonový soubor a hierarchie šablon

WordPress používá soubor pravidel nazývaný “Hierarchie šablon” (Template Hierarchy), který určuje, který šablonový soubor se má použít pro konkrétní stránku. Porozumění této hierarchii je klíčové pro vývoj temát (tém).

Články a šablony stránek

Při přístupu k jednotlivému článku WordPress nejprve hledá…single.phpPokud neexistuje, pak se vrátí ke stavu před změnou.index.phpMůžete vytvořit.single.phpPřijďte si přizpůsobit zobrazení jednotlivých článků na stránce.

Doporučujeme k přečtení. Úvodní průvodce vývojem temát pro WordPress: Vytvořte si své vlastní webové téma od nuly。

<?php get_header(); ?>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        <h1 class="entry-title"><p><strong> Řekněte mi něco o sobě.</strong></p></h1>
        <div class="entry-meta">
            Zveřejněno:  | Autor:
        </div>
    </header>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
    <footer class="entry-footer">
        <br />&lt;?php the_tags( &#039;Štítky:&#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
    </footer>
</article>

Pro samostatné stránky hledá WordPress…page.phpMůžete také vytvořit šablony pro konkrétní ID stránek nebo přezdívky stránek, například:page-about.phpBude speciálně využíván na stránce “O nás”.

Archivace a šablony domovské stránky

Stránka se seznamem blogových článků (např. podle kategorií, tagů, archivu autorů)archive.phpMůžete použít…is_category()、is_tag()Podmínkové značky se rozlišují v rámci svého vnitřního obsahu.

Domovská stránka webového stránky je výchozím nastavením…index.phpKontrola… Ale můžeš to vytvořit.front-page.phpDefinujte statickou domovskou stránku, nebo ji vytvořte.home.phpDefinujte domovskou stránku blogu, která zobrazuje nejnovější články.

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

Funkce temat a mechanismus hooků

Flexibilita a rozšiřitelnost WordPressu do značné míry vděčí systému hooků, který zahrnuje akce (Actions) a filtry (Filters). Témata (Themes) využívají tyto hooky k přizpůsobení chování webu podle svých potřeb.functions.phpSoubor slouží k využití tohoto systému.

inicializace tématu a podpora funkcí

functions.phpTyto soubory slouží k přidání funkcí týkajících se temat, registračního menu, bočního panelu a dalších funkcí. Nejprve se obvykle použije…after_setup_themeTento akční hook slouží k inicializaci základních funkcí tématu.

<?php
function my_theme_setup() {
    // 让WordPress管理文档标题
    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(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Registrační nástrojová oblast

I oblasti pro widgety, jako je boční panel nebo podstránka, potřebují být zahrnuty do tohoto plánu.functions.phpZaregistrujte se a používejte to.widgets_initHák.

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

Funkce my_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hlavní postranní lišta', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Zde přidejte widgety.', 'my-first-theme' ),
        'before_widget' =&gt; '  Funkce my_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hlavní postranní lišta', '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>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Po registraci budete moci pracovat s šablonovými soubory (např.sidebar.phpPoužívá se v…)dynamic_sidebar( 'sidebar-1' )Nastal čas na volání této oblasti.

Optimalizace šablonových komponent a cyklů

Pro udržení čistoty a znovupoužitelnosti kódu doporučuje WordPress, abyste opakující se části šablon (jako je nadpis stránky, podpis stránky, boční lišty) rozdělili do samostatných souborů.

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

Rozdělení komponent šablony

Vytvořitheader.php、footer.php和sidebar.phpSoubor.index.phpPřesuňte příslušné části kódu tam, kam patří. Poté použijte je na původním místě.get_header()、get_footer()和get_sidebar()Funkce slouží k jejich obsažení.

Pokročilé zpracování cyklu článků

Základní použití cyklůwhile ( have_posts() ) : the_post(); ... endwhile;Ale na stránce s archivy obvykle potřebujete zobrazovat abstrakt článku, nikoli celý jeho text. V takovém případě můžete použít…the_excerpt()Funkce.

Pro lepší kontrolu cyklů, zejména při použití vlastních dotazů, je nutné pochopit…WP_QueryTřídy. Například, na úvodní stránce by se mohly zobrazovat články pouze z určité kategorie:

<?php
$custom_query = new WP_Query( array(
    'category_name' => 'featured',
    'posts_per_page' => 3,
) );
if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) : $custom_query->the_post();
        // 显示文章内容
    endwhile;
    wp_reset_postdata(); // 重置主查询数据
endif;
?>

Pamatujte, že po provedení vlastního dotazu použijte…wp_reset_postdata()Pro obnovení globálního nastavení…$postProměnné jsou velmi důležité; jinak by to mohlo ovlivnit správné zobrazení následujících částí šablony (např. bočních panelů).

Závěr

Od vytvoření…style.css和index.phpZačněme od pochopení struktury šablon a následně používejte jejich funkce.functions.phpPřidáním nových funkcí, následným rozdělením komponent šablony a optimalizací cyklů jste dokončili základní, ale kompletní proces vývoje WordPress tématu. Klíčové je dodržovat standardy a pravidla WordPressu – to zajistí, že vaše téma bude dobře kompatibilní a snadno udržovatelné. Dalším krokem může být přidání bohatších metadat k článkům, integrace vlastních typů článků nebo použití předprocesorů, jako je Sass, pro správu stylů. Tím vaše téma získá profesionálnější vzhled a větší funkčnost.

Časté dotazy

Je nutné ovládat PHP pro vývoj temát pro WordPress?

Ano, PHP je základním programovacím jazykem WordPressu. Šablony temát (soubory s příponou .php) využívají především PHP k dynamické generaci HTML obsahu, volání funkcí WordPressu a zpracování dat. I při použití nástrojů na vytváření stránek je pochopení PHP nezbytné pro hlubokou personalizaci a řešení problémů.

Co dělá soubor functions.php v tématu?

functions.phpJde o “Funkční centrum” vašeho tématu. Slouží k aktivaci funkcí tématu (jako jsou menu, miniatury), registraci oblastí pro přidávání doplňků a navigačních menu, ke správnému načítání skriptů a stylů, k definování vlastních funkcí, a také ke změně výchozího chování WordPressu pomocí hooků (Actions a Filters). Bude automaticky načteno při inicializaci tématu.

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

Musíte udělat dvě věci. Za prvé, musíte kolem všech textových stránek, které je třeba přeložit, použít funkce pro překlad v WordPressu. Například:__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )A také…style.css和functions.phpNejprve je nutné správně nastavit textový domén (text domain) v systému. Dále pomocí nástrojů jako Poedit vytvořte šablonový soubor typu .pot a generujte z něj odpovídající jazykový soubor typu .mo. Tyto soubory poté umístěte do složky určené k uložení jazykových nastavení tématu (theme’s language settings folder)./languagesV adresáři.

Jak správně zavést soubory CSS a JavaScript při vývoji témat?

Absolutně nepoužívejte žádné značky nebo elementy přímo v souborech šablon. Správný způsob je použít nástroje nebo funkce, které umožňují tyto prvky vložit do šablon.wp_enqueue_style()和wp_enqueue_script()Funkce a připojení těchto voláníwp_enqueue_scriptsTento „akční háček“ zajišťuje správné nastavení závislostí mezi jednotlivými moduly, předchází jejich duplicitnímu načítání a je kompatibilní se systémem pro správu skriptů v WordPressu.

PHP
function my_theme_scripts() {
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . 'https://www.likacloud.com/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

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: