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

Jak vytvořit vlastní WordPress téma: Kompletní průvodce od začátku

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

Porozumění základní architektuře témat WordPress

Před zahájením kódování je velmi důležité pochopit základní strukturu tématu WordPress. Témato není pouze souborem šablon, ale organickým celkem složeným z řady souborů šablon, které dodržují určité standardy. Tyto soubory spolupracují a říkají WordPressu, jak má zobrazovat obsah vašeho webu. Katalog temat se obvykle nachází… /wp-content/themes/Každé téma, které vytvoříte, by mělo mít svou vlastní samostatnou složku.

Nejzákladnější téma pro WordPress vyžaduje pouze dvě soubory:style.css 和 index.phpMezi nimi jestyle.css Nejenže je zodpovědný za vzhled stránek, ale také blok poznámek v hlavičce souboru slouží jako “občanský průkaz” této tématiky – slouží k označení názvu tématiky, autora, popisu a dalších informací pro WordPress. index.php Jedná se o výchozí hlavní šablonový soubor; pokud není nalezena žádná konkrétnější šablona, WordPress ji použije k zobrazení stránky.

Avšak funkčně dokonalé vlastní téma obsahuje více souborů šablon, přičemž každý soubor odpovídá konkrétní stránce nebo funkci. Například…header.php Definovat oblast hlavy webové stránky.footer.php Definovat spodní oblast.single.php Slouží k zobrazení jediného článku.page.php Slouží k zobrazení samostatných stránek.functions.php Slouží k přidávání funkcí specifických pro dané téma a k registraci různých komponent.

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

WordPress využívá systém hierarchie šablon k určení toho, který šablonový soubor se má použít pro konkrétní požadavek. To znamená, že nemusíte psát kód pro každou stránku webového stránek zvlášť. Vytvořením šablon různých úrovní můžete přesně ovládat způsob zobrazení různých typů obsahu – článků, stránek, kategorií, stránek autorů atd. Porozumění této hierarchii je klíčové pro efektivní vytváření temát (tj. vlastních designů webových stránek).

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í vývojového prostředí pro vlastní téma

Než začnete vytvářet soubory, je prvním krokem v profesionálním pracovním postupu vytvoření lokálního vývojového prostředí. To vám umožní provádět vývoj a testování bez ovlivnění webové stránky online. Můžete použít nástroje jako Local by Flywheel, XAMPP, MAMP nebo Docker k rychlé konfiguraci prostředí WordPress na vašem lokálním počítači, které obsahuje Apache/Nginx, PHP a MySQL.

Jakmile bude místní prostředí připraveno, budete potřebovat… wp-content/themes V této složce vytvořte novou složku. Název této nové složky by měl být identifikátorem vašeho tématu. Doporučujeme používat malá písmena, čísla a spojovníky a snažit se, aby se název nepřekrýval s názvy již existujících témat. Například: my-custom-theme。

Následně vytvořte první nezbytný soubor:style.cssProsím, vždy přidejte na vrchol správně formátovaný blok s poznámkou o tématu.

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-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
*/

Poté vytvořte také to, co je stejně nezbytné. index.php Soubor. Zpočátku může být velmi jednoduchý – může obsahovat dokonce pouze jednu větu v HTML kódu.

Doporučujeme k přečtení. Úvod do vývoje WordPress temat: Vytvoření vlastní temat od nuly。

<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
    <h1>Ahoj, vývojáři temát pro WordPress!</h1>
    <?php wp_footer(); ?>
</body>
</html>

V tuto chvíli se přihlaste do svého lokálního WordPress administrátorského panelu a přejděte na “Vzhled” → “Témata”. Mělo by se vám zobrazit vaše vlastní téma. Aktivujte ho a navštivte domovskou stránku webu – uvidíte jednoduché informace vygenerované výše uvedeným kódem. To značí, že vaše vlastní téma již funguje.

Vytvoření základní šablony souboru pro tematické nastavení

Po získání funkčního tematického rámce je dalším krokem jeho modularizace a využití základních funkcí WordPressu pro zpracování dynamického obsahu. Klíčem k modularizaci je rozdělení opakovaně použitelných částí na samostatné šablonové soubory.

Vytvořte šablony pro horní a dolní část stránky.

Nejprve… index.php Oddělte kód umístěný v horní a dolní části stránky. Vytvořte nový soubor a pojmenujte ho… header.phpPřesuňte začátek části „a“ dovnitř.

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 
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
<?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>
    <p class="site-description"><?php bloginfo( 'description' ); ?></p>
</header>

Dále vytvořte footer.php Soubor obsahuje obsah podpatku stránky a závěrečné značky.

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

Poté proveďte změny. index.phpPoužijte šablony WordPress k zavádění funkcí a jejich volání.

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 文章内容输出将在这里
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' );
    endif;
    ?&gt;
</main>

Vytvoření šablon článků a stránek

Pro dosažení různých rozvrhů článků a stránek lze vytvořit… single.php Zpracování jednotlivých článků, a také… page.php Pojďme se zabývat samostatnými stránkami. Jejich základní struktura je podobná, ale lze využít podmínkové značky (condition tags) v WordPressu. is_single() 和 is_page() V případě potřeby provádějte rozlišování.
Vytvořit… functions.php Tento soubor je velmi důležitý, protože slouží ke zlepšení funkcí tématu. V tomto souboru můžete registrovat menu, postranní panely (oblasti s nástroji), přidat funkce podporující dané téma (např. zkratky článků, vlastní značky nadpisů) a také začlenit styly do souborů se šablonami a skripty.

Doporučujeme k přečtení. Konečný průvodce tématy WordPressu: kompletní řešení od výběru, přes přizpůsobení, až po vývoj.。

<?php
function my_custom_theme_setup() {
    // 让 WordPress 负责管理文档标题标签
    add_theme_support( 'title-tag' );
    // 启用文章和页面特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

function my_custom_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
    // 排入自定义脚本
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );
?>

Aplikování stylů a přidávání interaktivních funkcí

I téma zaměřené především na funkce potřebuje základní styly, které zajistí jeho použitelnost a čitelnost. Můžete… style.css Na základě hlavního stylového souboru provedete rozšíření a vytvoříte responsivní rozvržení a esteticky příjemné uživatelské rozhraní.

Implementace základního responsivního designu

Začněte nastavením několika přednastavení CSS a základních stylů, poté vytvořte mediální dotazy pro responzivní design upřednostňující mobilní zařízení.

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 
/* style.css */
/* 基础重置与样式 */
* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* 移动端响应式 */
.site-header, .site-footer {
    padding: 1rem 0;
    text-align: center;
}
/* 平板及以上设备 */
@media (min-width: 768px) {
    .site-main {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }
}

Script for creating a navigation menu

Aby byl menu pro mobilní zařízení interaktivní, můžete vytvořit jednoduchý soubor v jazyce JavaScript. Nejprve… header.php Přidejte HTML strukturu pro menu tlačítka a poté… /js/navigation.js Přidejte do toho kontrolní logiku.

// /js/navigation.js
document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.querySelector('.menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');

if (menuButton) {
        menuButton.addEventListener('click', function() {
            primaryMenu.classList.toggle('toggled');
            this.setAttribute('aria-expanded', 
                this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
            );
        });
    }
});

Na závěr můžete využít API pro vlastní nastavení v WordPressu nebo vytvořit stránky s možnostmi nastavení tématu, abyste uživatelům poskytli několik jednoduchých možností pro personalizaci, jako je výběr barvy stránek nebo nahrání loga. To se obvykle provádí pomocí… functions.php Použijte to v čínštině. add_theme_support A to pomocí příslušných API funkcí.

Závěr

Vytvoření vlastního WordPress tématu od nuly je systematický proces učení, který vyžaduje, abyste zvládli základy PHP, HTML, CSS a JavaScript, stejně jako pochopení základní architektury a API WordPressu. Celý proces začíná nastavením základů… style.css 和 index.php Začněte tím, že modulárně oddělíte šablony pro hlavičku, spodní část stránky, boční lištu atd. Využijte systém hierarchie šablon k přesnému řízení zobrazení obsahu. functions.php Integrujte do webové stránky funkce témata a registrujte různé komponenty. Nakonec pomocí responsivního CSS a potřebných JavaScript skriptů udělejte témata esteticky příjemná a přívětivá pro uživatele. Tímto postupem nejen vytvoříte jedinečný vzhled webové stránky, ale také lépe pochopíte fungování systému WordPress, což vám poskytne solidní základ pro vývoj pokročilejších témata a doplňků.

Časté dotazy

K vytvoření tématu pro WordPress je nutné ovládat které programovací jazyky?

Pro vytvoření funkčního WordPress tématu je potřeba ovládat několik klíčových technologií. PHP je zde nejdůležitější, protože samotný WordPress je napsán v PHP a všechny šablony a logické zpracování dat jsou založeny na této technologii. HTML slouží k vytvoření struktury stránek, CSS řídí vzhled a rozložení stránek, což zajišťuje jejich estetický vzhled a responzivní design (schopnost správně zobrazovat se na různých zařízeních). JavaScript (často v kombinaci s jQuery) se používá k přidání interaktivních funkcí na stránce, jako je přepínání menu, přehrávání obrázků v rotaci atd.

Jaké jsou hlavní rozdíly mezi vytvářením vlastního tématu a použitím stávajících témat nebo nástrojů na stavbu stránek?

Přizpůsobené tématy poskytují největší flexibilitu a jedinečnost – můžete plně ovládat každý řádek kódu, každou funkci a výkonnost webové stránky. Díky tomu můžete vytvořit stránky, které naprosto odpovídají požadavkům konkrétní značky a podniku. Kód také bývá často stručnější a efektivnější. Naopak použití existujících témat nebo nástrojů na vytváření stránek sice usnadňuje začátek, ale může být spojeno s velkým množstvím zbytečného kódu, omezenými možnostmi přizpůsobení, potenciální závislostí na doplňcích a vyšším rizikem homogenizace. Přizpůsobená témata jsou tedy vhodnější pro projekty, které vyžadují jedinečný obraz značky, specifické funkce nebo vysokou výkonnost.

Jak zajistit, aby moje vlastní tematika odpovídala oficiálním standardům WordPressu?

Aby vaše téma splňovalo základní standardy WordPressu a mělo šanci být zařazeno do oficiálního katalogu, je nutné striktně dodržovat „Průvodce vývojem temat pro WordPress“. To zahrnuje: použití správné struktury hierarchie šablon, internacionalizaci (i18n) a lokalizaci všech dynamických dat, bezpečné zpracování všech uživatelských vstupů a výstupů, dodržování kódovacích standardů WordPressu, zajištění podpory přístupnosti (A11y) a také ověření, že téma funguje správně jak při aktivovaných, tak i při deaktivovaných základních funkcích WordPressu (testování jednotlivých částí tématu).

Co je hlavní funkcí souboru functions.php při vývoji témat?

functions.php Tento soubor představuje “funkční sadu nástrojů” vašeho tématu. Není určen k vytváření přímého obsahu na stránkách, ale slouží k definování funkcí a chování tohoto tématu. Jeho hlavní úkoly zahrnují: přidávání nebo úpravy základních funkcí WordPress pomocí „hooků“ (hooků), registraci pozic pro navigační menu a boční panely (panely s nástroji), přidávání speciálních funkcí pro vaše téma (např. zkratky článků, vlastní logo), a bezpečné začlenění šablon stylů a souborů JavaScriptu vašeho tématu. Jedná se o klíčový prostředek, který spojuje vzhled vašeho tématu s funkcemi v záložce WordPress.

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: