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

Vývoj témat WordPressu: vytvořte profesionální responzivní webové stránky od nuly.

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

WordPress, jako nejpopulárnější systém pro správu obsahu na světě, vděčí své vysoké přizpůsobivosti především svému systému temat („themes“). Dobře navržené téma nejen určuje vzhled webové stránky, ale také ovlivňuje uživatelský zážitek, výkon a výkonnost v rámci algoritmů pro vyhledávání (SEO). Pro vývojáře, kteří chtějí mít plnou kontrolu nad designem svých webových stránek nebo si rozšířit své profesní dovednosti, je ovládnutí vývoje temat pro WordPress velmi cennou dovedností. Tento článek vás provede postupem od základů a systematicky vás naučí, jak vytvořit profesionální WordPress téma s kompletními funkcemi, standardním kódem a responzivním designem.

inicializace vývojového prostředí a struktury témat

Než začnete psát kód, je prvním krokem vytvoření efektivního vývojového prostředí. Doporučujeme použít software pro lokální serverové prostředí, jako je Local by Flywheel, XAMPP nebo MAMP, které vám umožní rychle nastavit prostředí pro PHP a MySQL na vašem počítači. Kromě toho je nezbytný i vhodný editor kódu (např. VS Code, PhpStorm) a nástroje pro vývoj v prohlížeči.

Standardní WordPress téma je umístěno na adrese/wp-content/themes/Soubory v adresáři. Nejzákladnější struktura souborů začíná dvěma klíčovými soubory:style.css和index.phpMezi nimi jestyle.cssNejde pouze o šablony stylů, ale také o metadata týkající se celého tématu; tyto informace jsou deklarovány pomocí bloku poznámek na začátku souboru.

Doporučujeme k přečtení. Vytvoření responsiveho WordPress tématu: Kompletní průvodce vývojem od nuly。

/*
Theme Name: 我的专业主题
Theme URI: https://example.com/my-theme
Author: 您的名字
Author URI: https://example.com
Description: 一个从零开始构建的专业级响应式WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-professional-theme
*/

index.phpJedná se o výchozí šablonový soubor daného tématu, který slouží jako záložní šablona pro všechny stránky webového stránek. Jedná se o velmi základní verzi šablony.index.phpMohou obsahovat pouze funkce, které volají hlavičku WordPressu, hlavní cyklus a patičku 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 
<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
            the_content();
        endwhile;
    else :
        echo &#039;<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

Hlavní šablonový soubor a hierarchie šablon

WordPress využívá sofistikovaný systém “úrovní šablon”, který určuje, který šablonový soubor se má použít pro různé typy stránek. Porozumění tomuto systému je základem při vývoji temát (tém). Když uživatel navštíví stránku, WordPress hledá odpovídající šablonový soubor podle určitého pořadí priorit.

Výběr šablony stránky článku

Pro jednotlivý článek bude WordPress postupně hledat:single-{post-type}-{slug}.php、single-{post-type}.php、single.phpA nakonec se vrátit zpátky nasingular.php和index.phpNapříklad u běžného článku s názvem “hello-world” bude hledání prováděno s předností…single-post-hello-world.php。

Šablony stránek a archivačních stránek

Pro statické stránky se hledá…custom-template.phpPokud stránka používá vlastní šablonu,page-{slug}.php、page-{id}.phpA nakonec je…page.phpStránky s seznamem článků (např. domovská stránka blogu, stránky podle kategorie) používají…home.php、front-page.php、category-{slug}.php或archive.phpAtd.

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

Plnohodnotné téma obvykle obsahuje následující soubory šablon:
- header.phpVýšková část webové stránky, která obsahuje…<head>Region a hlavní navigace.
- footer.phpPodstránka webu (footer).
- sidebar.phpBoční panel (volitelný).
- single.phpŠablona pro jednotlivé články/kontentové stránky.
- page.phpŠablony statických stránek.
- archive.phpŠablona pro seznam archivovaných článků.
- 404.phpŠablona stránky s chybou 404.
- search.phpŠablona stránky s výsledky vyhledávání.

Doporučujeme k přečtení. Vývoj témat WordPressu od začátku až po pokročilou úroveň: základní průvodce pro vytváření vlastních webových stránek.。

projít (účtem, kontrolou atd.)get_header()、get_footer()、get_sidebar()Funkce jako „wait“ umožňují zavádět tyto modulární soubory do jiných šablon, čímž se dosahuje opakovaného využití kódu.

Implementace responsive designu a tematických funkcí

Moderní webové stránky musí dobře vypadat na různých zařízeních, a proto není reaktivní design volitelný, ale nutný. Toho je dosaženo především pomocí CSS mediálních dotazů (Media Queries). Doporučuje se používat strategii “mobile first” – nejprve vytvořit základní styly pro mobilní zařízení a poté pomocí mediálních dotazů postupně rozšiřovat styly pro větší obrazovky.

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}

/* 中等屏幕（平板） */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 大屏幕（桌面） */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Přidání podpory funkce tematického řazení

WordPress téma je distribuováno prostřednictvím…add_theme_support()Funkce deklarují svou podporu různým základním funkcím. Tyto funkce se obvykle nacházejí v rámci tématu…functions.phpAktivováno v souboru.

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

functions.phpSoubory představují “funkční centrum” tématu a slouží k přidávání vlastních funkcí, registraci nabídek (mení), oblastí nástrojů atd., aniž by bylo nutné měnit základní soubory. Například povolení zobrazení přehledů článků (speciálních obrázků) nebo nastavení vlastních nabídek:

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

// 启用自定义菜单功能，并注册一个菜单位置
    add_theme_support( 'menus' );
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-professional-theme' ),
    ) );

// 为文章和评论的RSS feed添加链接支持
    add_theme_support( 'automatic-feed-links' );

// 启用HTML5标记支持（用于搜索表单、评论表单等）
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?>

Registrační nástrojová oblast

Oblast nástrojů (Sidebar) umožňuje uživatelům personalizovat obsah pomocí přetahování prvků z pozadí.functions.phpPoužijte to v čínštině.register_sidebar()Registrování funkce:

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

Optimalizace výkonu aplikací a bezpečnostní postupy

Profesionální téma by mělo být nejen esteticky příjemné, ale také rychlé a bezpečné v používání. Optimalizace výkonu lze provádět z mnoha různých úhlů pohledu. Nejprve je důležité zajistit, aby soubory CSS a JavaScript byly správně nařazeny do pořadí jejich načítání („enqueued“), což je způsob doporučený WordPressem. Tento přístup umožňuje správu závislostí mezi těmito soubory a předchází jejich konfliktům.

Doporučujeme k přečtení. Jak vytvořit funkční a SEO-friendly WordPress téma?。

在functions.phpPoužijte to v čínštině.wp_enqueue_style()和wp_enqueue_script()Funkce pro načítání zdrojových souborů:

function my_theme_scripts() {
    // 加载主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), false, true );

// 如果需要，加载jQuery（WordPress通常已内置）
    // wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Optimalizace obrázků a jejich pozdní načítání („lazy loading“)

Obrázky jsou obvykle tím, co nejvíce ovlivňuje velikost stránky. Během fáze vývoje témat je třeba zajistit, aby byly rozměry obrázků vhodné (používejte…)add_image_size()Definujte vhodné rozměry obrázků ve formátu miniatur (tzv. „thumbnails“) a zvažte integraci nebo podporu pluginů pro „lazy loading“ obrázků – tedy zpožděné načítání obrázků, které nejsou v zorném poli uživatele. Tím se sníží náročnost na výpočetní prostředky a zlepší doba načítání stránek.

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

Dodržujte pravidla bezpečného kódování.

Bezpečnost je nesmírně důležitá. Nejdůležitějším pravidlem je: nikdy nevěřte datům, která zadávají uživatelé. Všechna data přijatá od uživatelů musí být před tím, než jsou zobrazena na stránce nebo použita pro dotazy do databáze, označena speciálními značkami („escape“) nebo ověřena.
– Při výstupu používejte escape: Využijte funkce jako…esc_html()、esc_attr()、esc_url()Použijte escape značky pro dynamický obsah.
Při překladu použijte escape sekvence:
esc_html()、esc_attr()Funkce typu „escape“ provádějí escapeování překladatelných řetězců.
– Dotazování databáze: Použití$wpdbPoužívejte metody poskytované třídami nebo parametrizované dotazy, abyste se vyhnuli přímému spojování řetězců SQL.

Závěr

Vývoj tem pro WordPress je komplexní dovednost, která kombinuje front-end technologie (HTML, CSS, JavaScript) s znalostmi back-endu (PHP, MySQL). Od vytvoření správné struktury souborů a pochopení hierarchie šablon, přes implementaci responzivního designu a přidání základních funkcí, až po optimalizaci výkonu a zvýšení bezpečnosti – každý krok je klíčový. Dodržování oficiálních kódovacích standardů a osvědčených postupů WordPressu nejen umožňuje vytvořit kvalitní a snadno udržovatelné temy, ale také zajišťuje jejich dobrou kompatibilitu s celým ekosystémem WordPressu. Tím, že si temu vybudujete od základů sami, získáte hlubší pochopení fungování WordPressu a budete schopni vytvořit jedinečné webové řešení, které splňuje konkrétní požadavky.

Časté dotazy

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

Ano, PHP je serverový programovací jazyk používaný v WordPressu a je základem pro vývoj temat (tém). Musíte pochopit základní syntaxi PHP, klíčové funkce WordPressu (např. The Loop) a také způsob interakce s databází. Nemusíte však být odborníci na PHP, abyste začali – dobrým způsobem je začít praktikovat při studiu.

Jak mohu zajistit, aby tematika, kterou jsem vyvinul, byla používána i ostatními?

Nejprve se ujistěte, že váš téma splňuje oficiální standardy přijímání temat pro WordPress, včetně pravidel kódu, bezpečnosti a přístupnosti. Poté ho můžete odeslat do oficiálního adresáře temat pro WordPress, nebo ho zabalené do souboru typu .zip distribuovat prostřednictvím svého vlastního webu. Podrobné pokyny pro nahrávání naleznete na oficiálních webových stránkách WordPress.

V reaktivním designu by měly být obrázky zpracovány následovně:

Doporučujeme použít technologii “reaktivních obrázků”. Od určité verze WordPress automaticky generuje pro nahrané obrázky více různých velikostí a ty jsou poté použity na straně klienta (na straně uživatele).srcsetVlastnosti: Prohlížeč na základě velikosti obrazovky zařízení načte obrázek nejvhodnější velikosti. V tematice byste měli zajistit, že používáte…the_post_thumbnail(‘full’)Nebo podporasrcsetFunkce slouží k výstupu obrázků.

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

functions.phpFunkce obsažené v tématu jsou vázány na aktuálně zvolené téma a po změně tématu tyto funkce přestanou fungovat. Naopak funkce poskytované pluginy jsou nezávislé na tématu a zůstávají dostupné i po změně tématu. Obvykle jsou funkce, které jsou úzce spojeny s vzhledem stránek (vizuálním zpracováním), umístěny do samotných témat, zatímco univerzální a nezávislé funkce (jako jsou kontaktní formuláře nebo funkce pro optimalizaci webu podle algoritmů SEO) jsou vhodnější implementovat jako pluginy. Toto oddělení zvyšuje využitelnost kódu a jeho udržovatelnost.

Jak ladit chyby, které se vyskytly během vývoje mého tématu?

Doporučujeme…wp-config.phpV souboru zapněte režim ladění WordPressu.WP_DEBUGKonstanta je nastavena natrueTo umožní zobrazit všechny chyby, varování a upozornění PHP na stránce. V kombinaci s konzolí prohlížeče (používanou k ladění front-endu) a pluginy pro sledování dotazů (používanými k ladění databáze) lze problémy efektivně lokalizovat. Nezapomeňte před spuštěním webové stránky vždy vypnout režim ladění.

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: