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

Praktický vývoj témat WordPressu: kompletní návod k vytvoření vlastního tématu od nuly do jedné.

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

Vývojové prostředí a inicializace projektu

Než začnete vytvářet vlastní téma pro WordPress, je zásadním prvním krokem vytvoření efektivního vývojového prostředí. To nejenže zajišťuje standardizaci kódu, ale také výrazně zvyšuje efektivitu vývoje a zlepšuje zážitek při ladění.

Nastavení lokálního vývojového prostředí.

Doporučujeme použít lokální serverové software, jako je Local by Flywheel, MAMP nebo XAMPP, které vám umožní rychle nastavit prostředí pro provozování aplikací využívajících PHP, MySQL a Apache/Nginx na vašem počítači. Po instalaci lokálního serveru stáhněte a nainstalujte nejnovější verzi WordPressu. Následně, v adresáři, kde je WordPress nainstalován… wp-content/themes V té složce vytvořte novou složku, například… my-custom-themeToto bude hlavní adresář vašeho tématu.

Vytvoření základního dokumentu k tématu.

Jedno z nejzákladnějších témat pro WordPress potřebuje pouze dvě soubory:style.css 和 index.phpNejprve vytvořte… style.css Soubor slouží nejen k definování stylů, ale co je důležitější, prostřednictvím poznámek v hlavičce souboru informujete WordPress o svém tématu.

Doporučujeme k přečtení. Konečný průvodce vývojem témat WordPressu: Vytvořte si vlastní WordPress webové téma od nuly.。

/*
Theme Name: My Custom Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个从零开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Text Domain Slouží k internacionalizaci a bude použit jako identifikátor následujícího překladového textu. Následně je vytvořen ten nejzákladnější… index.php Soubor může zpočátku obsahovat pouze jednoduchou HTML strukturu. Po dokončení těchto dvou souborů budete moci tento prázdný motiv vidět a aktivovat v sekci “Vzhled” -> “Témata” v administraci WordPress.

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

Struktura témat a úrovně šablon

Porozumění struktuře šablon v WordPressu je klíčové pro vývoj tem (templatů určených k úpravě vzhledu webu). Určuje, jak WordPress automaticky vybírá odpovídající šablonové soubory pro zobrazení podle různých požadavků uživatelů – např. stránek článků, stránek, archivů kategorií atd.

Klíčové šablony a jejich funkce

WordPress hledá soubory šablon v určitém pořadí. Základní postup spočívá v tom, že se hledá od nejkonkrétnější šablony směrem k nejobecnější. Například při přístupu k jednotlivému článku WordPress postupně hledá:single-post-{id}.php, single-post.php, single.phpA nakonec je… singular.phpPokud nic není nalezeno, použijte… index.phpStejně tak bude domovská stránka nejprve hledat… front-page.phpA teprve poté home.phpZvládnutí tohoto hierarchického vztahu vám umožní přesně ovládat rozložení různých stránek tím, že vytvoříte specifické šablony.

Vytvořte soubor šablony, který budete často používat.

Kromě toho index.phpMěli byste postupně vytvořit následující klíčové šablonové soubory, abyste vytvořili kompletní strukturu tématu:
- header.phpVýšková část webové stránky, která obsahuje: <head> Regionální a horní navigace.
- footer.phpNa spodní straně webové stránky.
- sidebar.phpBoční panel.
- functions.phpFunkční soubor tématu slouží k přidávání funkcí, registraci nabídek (mení), panelů nástrojů a dalších prvků.
- page.php„:“ se používá k renderování jednotlivých stránek.
- single.php„:“ se používá k renderování jednotlivých článků.
- archive.phpSlouží k renderování archivních stránek obsahujících kategorie, tagy, autory a další informace.

在 index.php Zde můžete použít… get_header(), get_footer(), get_sidebar() Použijte šablonové značky k načtení těchto modulárních částí a tak dosáhněte opakovatelného využití kódu.

Doporučujeme k přečtení. Podrobné vysvětlení vývoje WordPressových témat: průvodce klíčovými technikami od začátku až po pokročilou úroveň.。

Hlavní funkce a možnosti tematiky

functions.php Soubor představuje “mozek” vašeho tématu – veškerá backendová logika a funkční vylepšení jsou zde implementována. Bude automaticky načten při inicializaci tématu.

Přidání podpory temat a funkce registrace

projít (účtem, kontrolou atd.) add_theme_support() Funkce umožňují deklarovat různé funkce, které daný téma podporuje. Například povolení zobrazení přehledů článků (speciálních obrázků) je standardní vlastností moderních témat.

function my_theme_setup() {
    // 添加文章和评论的 RSS feed 链接到 head
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 启用自定义菜单功能
    add_theme_support( 'menus' );
    // 让 WordPress 管理文档标题
    add_theme_support( 'title-tag' );
    // 启用对古腾堡编辑器的宽对齐和颜色支持
    add_theme_support( 'align-wide' );
    add_theme_support( 'editor-color-palette', array( /* ... */ ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Potřebujete také registrovat umístění navigačních položek a oblast s příslušenstvím (boční lištu).

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 
function my_theme_menus() {
    register_nav_menus( array(
        'primary' =&gt; __( '主导航菜单', 'my-custom-theme' ),
        'footer'  =&gt; __( '底部菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'init', 'my_theme_menus' );

function my_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_theme_widgets_init' );

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

Správný způsob načítání zdrojových souborů je prostřednictvím… wp_enqueue_style() 和 wp_enqueue_script() Funkce, které je potřeba nasadit (mountovat). wp_enqueue_scripts Na háčku.

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

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

Cykly a šablonské značky

“Cykly” (anglicky „loops“) jsou v WordPressu výchozím mechanismem pro načítání obsahu z databáze a jeho zobrazení na stránkách. Porozumění a správné použití cyklů je základem pro zobrazování dynamického obsahu.

Struktura standardního cyklu

V souborech šablon často narazíte na kódovou strukturu podobnou této, která představuje hlavní cyklus WordPressu.

Doporučujeme k přečtení. Úvod do vývoje WordPress temat: Postup od základů až po dokonalé vytvoření vlastní temat。

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

have_posts() 和 the_post() Funkce řídí průběh cyklu.the_title(), the_content(), the_permalink() Šablony a značky slouží k výstupu konkrétních informací o aktuálním článku. Mimo cyklus můžete použít… is_home(), is_single(), is_page() Používáme značky podmínek k určení typu aktuální stránky a na základě toho spouštíme různé logické kroky.

Vlastní dotazy a smyčky

Někdy potřebujete zobrazit obsah, který není součástí hlavního cyklu – například na úvodní stránce články z určité kategorie. V takových případech můžete použít… WP_Query Třídy slouží k vytváření vlastních dotazů.

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 
<?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(); // 重置全局 $post 数据
endif;
?>

Závěr

Vývoj WordPress tématu od nuly je systématický proces, který zahrnuje celý postup od nastavení prostředí, plánování struktury, implementace funkcí až po zobrazení dynamického obsahu. Klíčovým aspektem je pochopení mechanismu vrstevního uspořádání šablon, který určuje logiku renderování stránek; dále je důležité tyto šablony ovládat dobře. functions.php Rozšiřte funkce vašeho tématu a osvojte si princip “cyklů” pro výstup dat. Dodržujte kódovací standardy a osvědčené postupy WordPressu – např. správné načítání zdrojových souborů, používání funkcí pro překlad textů, a zajistěte dostatečnou podporu pro různé aspekty vašeho tématu. Tím zajistíte, že bude vaše téma robustní, efektivní a snadno udržovatelné. Prostřednictvím kroků uvedených v této příručce budete schopni vytvořit vlastní, dobře strukturované a funkčně vybavené téma, které vám poskytne solidní základ pro pokročilejší vývoj.

Časté dotazy

K vývoji WordPress témat je nutné ovládat následující klíčové technologie:

Musíte ovládat základy PHP (pro zpracování back-end logiky a šablon), HTML/CSS (pro strukturu a vzhled stránek) a JavaScript (pro interakci s uživateli). Nejdůležitější je pochopit základní koncepty WordPressu, jako jsou hierarchie šablon, „hooky“ (nástroje pro připojení dalších funkcí), akce a filtry (Actions & Filters), cyklus zpracování dat (The Loop) a různé funkce a třídy, které WordPress poskytuje.

Jak zajistit, aby můj tematický design podporoval editor Gutenberg?

Nejprve, functions.php Použijte to v čínštině. add_theme_support() Aktivujte příslušné funkce, například… editor-styles、align-wide A také panel pro vlastní nastavení barev. Dále vytvořte speciální šablonu stylů pro editor a použijte ji k úpravám. add_editor_style() Zavádíme funkce, které zajistí, aby vizuální zážitek uvnitř editoru na straně serveru byl stejný jako na straně klienta. Můžete také vytvářet vlastní styly bloků (Block Styles) nebo přizpůsobené bloky (Custom Blocks), abyste poskytli bohatší možnosti editace.

Jak lze v rámci vývoje aplikací nebo webových stránek zajistit podporu více jazyků?

WordPress využívá framework GNU gettext pro internacionalizaci (i18n). V kódu by měl být veškerý text, který je třeba přeložit, zabalen do specifických funkcí. () Používá se k překladu v PHP._e() Používá se k překladu a okamžitému zobrazení výsledku.esc_html() Slouží k překladu a escapeování HTML kódu. V JavaScriptu se používá k tomuto účelu funkce `encodeURIComponent`. wp.i18n.__()Poté použijte nástroje jako Poedit k extrakci tohoto textu a vytvoření souborů typu .pot, a následně tento text přeložte do souborů typu .po a .mo. Nakonec… style.css Správné nastavení hlavičky… Text Domain a také functions.php Použijte to v čínštině. load_theme_textdomain() Načítání souboru s překladem.

Jak přidat stránku s vlastními nastaveními pro mé téma?

Pro jednoduché možnosti lze využít vestavěnou API “Customizer” v WordPressu, která poskytuje intuitivní rozhraní pro přímou prezentaci výsledků změn. Pro složitější požadavky je možné vytvořit rozhraní nastavení založené na stránkách s možnostmi (Options Pages). Doporučujeme používat WordPress Settings API k bezpečné registraci, ověření a ukládání nastavení. Také můžete využít pokročilé funkce pro vlastní pole (Advanced Custom Fields – ACF) nebo třetí stranové knihovny, jako je Carbon Fields, které výrazně zjednodušují proces vytváření vlastních polí a stránek s možnostmi.

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: