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

Ultimátní průvodce pro začátečníky: Vytvořte si personalizované téma pro WordPress od nuly

Čtení za 2 minuty.
2026-03-16
2026-06-03
2,182
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řípravné práce a nastavení prostředí.

Než začnete psát kód, je velmi důležité vytvořit efektivní a profesionální lokální vývojové prostředí. To vám nejen umožní provádět testy bez ovlivnění webové stránky online, ale také výrazně zvýší efektivitu vývoje.

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

Doporučujeme použít balíčky pro lokální serverové prostředí, jako jsou Local by Flywheel, MAMP nebo XAMPP. Tyto nástroje umožňují jednoduchou instalaci Apache/Nginx, PHP a MySQL na vašem počítači a perfektně napodobují prostředí online serverů. Po instalaci vytvořte nový web pomocí WordPressu a ujistěte se, že verze PHP odpovídá nejnovějším požadavkům WordPressu.

Základní adresář a soubory pro vytvoření tématu

Téma WordPressu je v podstatě něco, co se nachází na adrese /wp-content/themes/ Soubory v adresáři. Nejprve vytvořte pro své téma adresář s jedinečným názvem, například… my-custom-themeV této složce musíte vytvořit dvě základní soubory:style.css 和 index.php。

Doporučujeme k přečtení. Vývoj tem pro WordPress: Kompletní průvodce a praktický kurz od základů až po pokročilé znalosti。

style.css Není to jen šablona stylů – jedná se spíše o “občanský průkaz” daného tématu; blok komentářů na vrcholu šablony slouží k oznámení informací o tomto tématu systému WordPress. Základní hlava šablony stylů vypadá následovně:

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 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: GPL v2 or later
Text Domain: my-custom-theme
*/

index.php Jedná se o výchozí šablonový soubor daného tématu, který musí být přítomen i v případě, že chybí jiné šablonové soubory. V tomto případě můžete do něj nejprve napsat jednoduchou HTML strukturu pro testování.

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

WordPress využívá systém úrovní šablon k určení toho, jak se různé typy obsahu zobrazují. Porozumění a vytváření těchto základních šablonových souborů je základem pro vývoj temat (tém).

Vytvořte šablony pro hlavičku a podstatu webové stránky.

Abychom dosáhli opakovaného využití kódu, musíme oddělit hlavičku (Header) a patičku (Footer) webové stránky na samostatné soubory. Vytvořte je. header.php Soubor by měl obsahovat informace z… Začátek až otevření Veškerý kód před značkou je důležitý – klíčové je, aby byl zahrnut. wp_head() Volání funkce.

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<?php wp_body_open(); ?>
<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>
</header>

Stejně tak, vytvořit… footer.php Soubor by měl obsahovat obsah patičky (footer) a měl by být vytvořen pomocí volání… wp_footer() Funkce a závěrečné značky… Poté… index.php V čínštině se používá get_header() 和 get_footer() Funkce slouží k jejich načtení (zavádění).

Doporučujeme k přečtení. Komplexní analýza vývoje temat pro WordPress: Praktický průvodce od základů po pokročilé dovednosti。

Návrh cyklu článků a obsahu stránek

Cyklické zobrazování článků je základním mechanismem WordPressu, který slouží k načítání a zobrazování článků z databáze. index.php V hlavní části potřebujete použít standardní cyklické struktury.

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article>
            <h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>
            <div><?php the_content(); ?></div>
        </article>
    &lt;?php endwhile;
else :
    echo &#039;<p>暂无文章。</p>';
endif;
?&gt;

Následně vytvoříme šablonu pro jednotlivé stránky článků. single.phpVytvoření pro statické stránky page.phpMůžete také vytvořit… front-page.php Jako vlastní domovská stránka, nebo archive.php Zobrazuje seznam archivů včetně kategorií, tagů a dalších informací.

Přidání funkcí a stylů

Kompletní téma vyžaduje nejen strukturu, ale také interaktivní funkce a vizuální design. Toho je dosaženo pomocí funkčních souborů a šablon (style sheets).

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

Zavedení podpory funkce „tematického nastavení“

Vytvořit functions.php Soubor. Tento soubor slouží k rozšíření funkcí tématu; není nutný, ale je velmi důležitý. Zde můžete registrovat menu, povolit speciální obrázky, přidat podporu pro témata atd.

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

// 引入样式表和脚本
function my_theme_scripts() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
?>

Napsat responsivní stylový soubor

在 style.css Pod informacemi o deklaracích začněte psát svůj CSS kód. Moderní designové tématy musí být responzivní, tedy přizpůsobitelné různým velikostem obrazovek. Doporučujeme uplatňovat princip „mobile first“ (přednost mobilním zařízením) a využívat CSS media queries k přizpůsobení vzhledu stránek velkým obrazovkám.

/* 基础样式 - 移动设备 */
body { font-family: sans-serif; margin: 0; }
.container { width: 100%; padding: 1rem; }
/* 平板设备及以上 */
@media (min-width: 768px) {
    .container { max-width: 720px; margin: 0 auto; }
}
/* 桌面设备 */
@media (min-width: 992px) {
    .container { max-width: 960px; }
}

Můžete vytvořit další soubory CSS a přidat je do projektu. functions.php Něco v čínštině (zjednodušené) wp_enqueue_style() Zavedení tohoto prvku pomáhá udržovat kód organizovaným a strukturovaným.

Doporučujeme k přečtení. Podrobný průvodce vývojem temat pro WordPress: Kompletní praktický průvodce od základů až po pokročilé znalosti。

Pokročilé techniky vývoje tematických aplikací

Po zvládnutí základů vám následující tipy pomohou udělat váš příspěvek profesionálnějším a efektivnějším.

Vytvoření vlastního typu článku a bočního panelu

Pro sbírky děl, produkty a další nestandardní obsah můžete použít následující postupy: functions.php Něco v čínštině (zjednodušené) register_post_type() Funkce slouží k vytvoření vlastního typu článku. Zároveň se při tom používají… register_sidebar() Funkce slouží k vytvoření oblasti pro příslušenství (boční lišty) a k jejímu použití v šablonách. dynamic_sidebar() Funkce ji volá.

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

Implementace internacionalizace podtémů a hlavních témat

Aby se zajistilo, že vaše úpravy při aktualizaci tématu neztratí, doporučujeme vytvořit pro vaše personalizované téma “podtéma”. Podtéma potřebuje pouze jedno… style.css A s jedním… functions.phpDědí všechny funkce svého nadřízeného tématu a umožňuje vám bezpečně přepisovat styly a funkce.

Kromě toho je nutné provést internacionalizaci, aby téma mohlo být používáno uživateli po celém světě. To znamená, že ve všech částech kódu, kde je potřeba text přeložit, je třeba použít vhodné nástroje nebo postupy pro překlad. __() 或 _e() Zabalte funkci čekání („waiting function“) do nějakého obalu a nastavte ji správně. Text DomainPoté lze pomocí nástrojů, jako je Poedit, vytvořit požadovaný obsah. .pot Přeložte šablonový soubor.

Závěr

Vytvoření WordPress tématu od nuly je systematický proces učení, který zahrnuje celý postup od nastavení prostředí, syntaxe PHP šablon, struktury základních souborů přes rozšiřování funkcí až po návrh vzhledu. Klíčové je praktické procvičování – začněte tím, že vytvoříte tu nejjednodušší verzi tématu. style.css 和 index.php Začněte postupně přidáváním hlavičky, patičky, cyklu a poté také funkcí pro provádění určitých akcí. functions.php Vylepšené funkce. Porozumění struktuře šablon a hook funkcím je klíčové pro pokročilé uživatele. Nakonec, vytvořením podtemat a přípravou na internacionalizaci, bude vaše práce mít profesionální úroveň udržovatelnosti a rozšiřitelnosti. Pamatujte, že nejlepším způsobem učení je neustálé kódování, testování a iterování.

Časté dotazy

Je nutné být zdatným programátorem v PHP, abyste mohli vytvářet tematika pro WordPress (např. ###)?
Ano, pevné základy v PHP jsou nutné, protože jádro WordPressu a jeho systém šablon jsou primárně naprogramovány v PHP. Musíte porozumět PHP syntaxi, funkcím, cyklům a způsobům interakce s API WordPressu (jako jsou háčky a funkce). Zároveň je velmi důležité ovládat HTML, CSS a základy JavaScriptu.

Proč se moje téma nezobrazuje v pozadí (v backendu)?

To je obvykle způsobeno tím, že… style.css Problém vznikl kvůli nesprávnému formátu nebo chybějícímu bloku s poznámkami o tematických informacích na začátku souboru. Prosím, vyplňte informace jako název tématu (Theme Name), autor (Author) a další podle přesněho formátu a ujistěte se, že soubor je umístěn v kořenové složce složky s vašimi tematikami. Také zkontrolujte, zda je složka s tematikami správně umístěna na požadovaném místě. /wp-content/themes/ Je v cestě.

get_template_part() 函数有什么用处？

get_template_part() Funkce jsou jednou z nejlepších praktik při organizaci kódu. Slouží k převzetí dat z jiných souborů (např.…) content.php, sidebar.phpKódové úryvky se načítají z jediného souboru, čímž se eliminuje nutnost opakování stejné HTML struktury v několika šablonách. To výrazně zvyšuje přenositelnost a udržovatelnost kódu.

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

Aby byl tento téma lépe kompatibilní s editorem Gutenberg, budete potřebovat… functions.php Přidejte podporu pro příslušná témata. Například pomocí… add_theme_support(‘editor-styles’) Přijde na načtení stylů editoru; použijte… add_theme_support(‘wp-block-styles’) K podpoře stylů front-end bloků lze také použít… add_theme_support(‘responsive-embeds’) Ujistěte se, že vložený obsah je responsivní (tj. správně zobrazován na různých velikostech obrazovek). Je také důležité naprogramovat front-end styly pro často používané bloky, jako jsou např. bloky pro seskupování obsahu nebo bloky určené k zobrazení obsahu na titulní straně.

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: