Kompletní průvodce vývojem temát pro WordPress: Vytvoření vlastního temátu od nuly

Základní koncepty vývoje temát pro WordPress

Před začátkem psaní kódu je velmi důležité pochopit základní strukturu a klíčové koncepty WordPress témat. WordPress téma je v podstatě souborů, které se nacházejí v/wp-content/themes/V adresáři se nacházejí složky, které obsahují sadu souborů, které společně určují vzhled a funkce webové stránky. Tyto soubory se dělí především do dvou kategorií: šablonové soubory a stylové soubory.

Šablony jsou „kostra“ témat a určují strukturu výstupního obsahu různých stránek. Například…index.phpJedná se o výchozí šablonu domovské stránky.single.phpOvládání zobrazení jednotlivých článkůpage.phpOvládání zobrazení jedné stránky…header.php、footer.php和sidebar.phpObvykle se používá k vytváření veřejných částí webových stránek. WordPress dodržuje určitou hierarchii šablon, která mu umožňuje vybrat vhodný soubor šablony pro každý požadavek, což poskytuje vývojářům velkou flexibilitu.

Soubory se styly jsou zodpovědné za vizuální prezentaci tématu, přičemž nejdůležitějším z nich je…style.cssTento soubor není pouze místem, kde jsou definovány všechny CSS pravidla, ale také blok komentářů v hlavičce souboru obsahuje metadata o tématu – jako je název tématu, autor, popis a verze. Tyto informace jsou nezbytné pro to, aby WordPress rozpoznal a aktivoval dané téma.

Doporučujeme k přečtení. Jak vytvořit vlastní WordPress téma: Kompletní průvodce od začátku。

Kromě těchto položek existují také soubory určené k nastavení funkcí tématu (theme function files).functions.phpHraje klíčovou roli. Nejedná se o šablonový soubor, ale o PHP soubor, který se automaticky načte při inicializaci tématu. Vývojáři zde mohou přidávat vlastní funkce, registrovat menu a boční panely, zavádět skripty a styly, a také prostřednictvím různých…add_action和add_filterHooky nástroje slouží k rozšíření nebo úpravě základního chování WordPressu. Porozumění funkci těchto základních souborů a způsobu jejich vzájemné spolupráce je prvním krokem při vytváření jakéhokoli vlastního tématu (custom theme).

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.

přístupová stránka

Vytvoření rámce tématu a šablonových souborů

Prvním krokem při vytváření vlastního tématu je vytvoření projektového adresáře a nezbytných základních souborů. V tomto adresáři by měly být umístěny všechny klíčové složky a soubory potřebné k fungování tématu. Tento proces se provádí ve vašem lokálním vývojovém prostředí nebo na testovac/wp-content/themes/V dané cestě vytvořte novou složku s názvem “my-custom-theme”. Uvnitř této složky musíte okamžitě vytvořit dvě základní soubory:style.css和index.php。

style.cssSoubor musí obsahovat specifické informace o šablonách stylu v svém hlavičkovém části (header). Níže je uveden jeden z nejzákladnějších příkladů:

/*
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
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

Tyto poznámky jsou velmi důležité, protože WordPress na nich závisí při zobrazení vašich temat v seznamu temat v pozadí. Nyní je třeba je vytvořit.index.phpSoubor. Jedná se o finální náhradní („fallback“) šablonu pro všechny požadavky na stránky. Jedná se o jednoduchý a účinný přístup.index.phpMůže obsahovat pouze kód, který volá základní šablony (tj. základní tagy používané při generování obsahu).

<?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>

Tento kód jasně ukazuje princip fungování tematického cyklu (The Loop) v WordPressu – prostřednictvím…have_posts()和the_post()Funkce prochází články a vypisuje je.get_header()、get_sidebar()和get_footer()Funkce slouží k načtení příslušných částí šablon. Následně byste měli vytvořit tyto načtené soubory s komponentami šablon.header.php、sidebar.php和footer.php。

Doporučujeme k přečtení. Od nuly: Kompletní průvodce vývojem WordPressových šablon a klíčovými technologiemi。

Vytvořte soubor šablony pro hlavičku stránky.

在header.phpV tomto textu je potřeba umístit hlavičkové informace HTML dokumentu a volat klíčové funkce WordPressu.

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1002>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <nav>'primary' ) ); ?&gt;</nav>
</header>

wp_head()Funkce umožňují jádru WordPressu, pluginům a vaší temě přidávat do stránek potřebný kód (např. odkazy na stylové soubory).body_class()Funkce vytváří pro značky sadu podmíněných názvů CSS tříd, což usnadňuje přesnou kontrolu stylů. Stejně tak…footer.phpVe souboru musí být obsaženo:wp_footer()Volání funkcí se obvykle umisťuje před uzavírací značkou.

Využijte soubor functions.php k rozšíření funkcionalit tématu.

functions.phpSoubory představují “centrum řízení” vašeho tématu a slouží k přidávání nových funkcí a integraci funkcí WordPressu. Běžným začátkem při vytváření nového tématu je nastavení podporovaných funkcí, vytvoření navigačního menu a správné načítání potřebných zdrojových souborů.

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.

přístupová stránka

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

Můžete použít…add_theme_support()Funkce slouží k deklaraci různých funkcí, které daný systém pro správu témat podporuje. Například povolení využití speciálních obrázků u článků nebo podpora HTML5 pro určité prvky je velmi běžnou praxí.

function my_custom_theme_setup() {
    // 让主题支持特色图像
    add_theme_support( 'post-thumbnails' );

// 为评论表单、搜索表单等添加HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加标题标签支持，允许WordPress管理文档标题
    add_theme_support( 'title-tag' );

// 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Zde,after_setup_themeJedná se o hook, který se spouští po inicializaci tématu a představuje standardní místo pro nastavení tématu.add_theme_support(‘title-tag’)Poté již nebudeš potřebovat…header.phpZadáno ručně v čínštině.<title>Značeno.

Správné zavedení skriptů a stylů

Z důvodu výkonnosti, cacheování a správy závislostí je nutné používat metody poskytované WordPressem pro načítání souborů CSS a JavaScript, nikoli je přímo psát do HTML kódu.<link>或<script>Tagy. To je dosaženo prostřednictvím…wp_enqueue_style()和wp_enqueue_script()Funkce byla dokončena.

Doporučujeme k přečtení. Konečný průvodce optimalizací WordPressu: komplexní strategie pro zlepšení výkonnosti od začátku až po pokročilou úroveň.。

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

// 引入一个自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 如果需要，为脚本局部化数据（传递PHP变量到JS）
    wp_localize_script( 'my-custom-theme-navigation', 'myThemeData', array(
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'homeUrl' => home_url( '/' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

wp_enqueue_scriptsTo je správný „hook“ pro načítání zdrojů na straně klienta (frontend). Použijte to.get_stylesheet_uri()Získat témastyle.cssCesta, použijteget_template_directory_uri()Získejte URL adresu adresáře s tematikou. Předání verzního čísla jako parametru pomůže při aktualizaci souborů překonat problémy s cacheem v prohlížeči.

Implementace hierarchie šablon a vlastních stylů

Hierarchie šablon v WordPressu je systém pravidel určený k automatickému výběru správného souboru šablony pro zobrazení stránky. Při přístupu k určité adrese URL hledá WordPress soubory šablon postupně od nejkonkrétnějších až po nejobecnější. Například pro článek s ID 123 bude WordPress hledat následujícím způsobem:single-post-123.php -> single-post.php -> single.php -> singular.php -> Nakonec se vrátíme naindex.php。

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.

přístupová stránka

Vytvoření vlastního šablónu stránky

Kromě výchozích šablon můžete vytvořit vlastní šablony pro konkrétní stránky. To se provádí přidáním speciální poznámky s názvem šablony na začátek nového souboru šablony. Například, abyste vytvořili šablonu s názvem “Celoplošná stránka”:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */
get_header(); ?>

<main id="primary" class="site-main full-width">
    &lt; ?php
    zatímco (existují příspěvky) :
        the_post();
        the_title( &#039;<h1 class="entry-title">', '</h1>' );
        the_content();
    endwhile;
    ?&gt;
</main>

&lt;?php
get_footer();

Vytvořte a uložte tento soubor (např.…)template-full-width.phpPo provedení tohoto kroku můžete v záložce “Vlastnosti stránky” v administraci WordPressu v rozbalovacím menu “Šablony” vidět a použít šablonu “Celoplošná stránka”.

Napsání responsivního a modulárního CSS

V moderním vývoji tematických stránek je responzivní design nezbytný.style.cssV tomto případě byste měli použít mediální dotazy (Media Queries) k přizpůsobení vzhledu stránek různým velikostem obrazovek. Dobrou praxí je uplatňovat princip „mobile first“ – nejprve vytvoříte základní styly pro mobilní zařízení a poté postupně rozšiřujete styly pro větší obrazovky.

Zároveň je důležité zachovat modularitu a udržovatelnost kódu CSS. Pro různé části stránky (např. hlavičku, navigaci, články, patičku) vytvořte jasnou strukturu názvů tříd, např. pomocí metodologie BEM (Block Element Modifier).body_class()和post_class()Názvy tříd automaticky generované funkcemi mohou výrazně zjednodušit vaše CSS selektory a předejít problémům s nadměrným vnořováním a příliš vysokou specifickostí selektorů.

/* 移动端基础样式 */
.site-header {
    padding: 1rem;
}
.entry-title {
    font-size: 1.5rem;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .site-header {
        padding: 2rem;
        display: flex;
        justify-content: space-between;
    }
    .entry-title {
        font-size: 2rem;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .site-main.full-width {
        max-width: 1200px;
        margin: 0 auto;
    }
}

Závěr

Vývoj vlastního WordPress tématu od nuly je systématický proces, který vyžaduje, aby vývojář pochopil jeho základní architekturu: strukturu řízení souborů šablon a definice vzhledu pomocí souborů stylů.functions.phpTakže funkce centralizovaného řízení. Dodržování hierarchie šablon umožňuje efektivní vytváření přehledů různých typů stránek a správné použití funkcí a hooků poskytovaných WordPressem (např.wp_enqueue_scripts、add_theme_supportJe klíčové zajistit kompatibilitu, bezpečnost a výkon témat. Budováním modulárních šablonových komponent, psaním responsivního CSS a využíváním funkcí souborů tématického nastavení můžete plně ovládat vzhled a chování webové stránky a vytvořit jedinečný uživatelský zážitek. Ačkoli tento proces vyžaduje čas na naučení, poskytuje vám ultimátní svobodu při vytváření webových stránek jakéhokoli typu.

Časté dotazy

Jaký je rozdíl mezi tématy a pluginy?

Témata (Themes) jsou primárně zodpovědná za ovládání vzhledu webové stránky z pohledu uživatelského rozhraní, tedy za vizuální design a uspořádání, které uživatelé vidí. Určují barvy, písma, formátování textu, strukturu stránek a další aspekty vzhledu webového prostředí.

Plugin je modul, který slouží k přidání konkrétních funkcí nebo vlastností na webové stránky. Umožňuje rozšířit funkčnost webu bez změny základního designu tématu – např. přidání kontaktního formuláře, optimalizace pro vyhledávače (SEO), vytvoření online obchodu atd. Na jednom webu může být aktivováno pouze jedno téma, ale lze nainstalovat a aktivovat více pluginů.

Je nutné nejprve nainstalovat lokální prostředí před začátkem vývoje tématu?

Ano, doporučujeme výrazně vyvíjet tematika pro WordPress v lokálním vývojovém prostředí, jako je Local, XAMPP, MAMP nebo Docker.

Tímto způsobem můžete psát a testovat kód v bezpečném, izolovaném prostředí, aniž byste se museli obávat ovlivnění webových stránek v reálném provozu. Lokální prostředí nabízí rychlé načítání, usnadňuje ladění kódu a také je vhodnější pro použití nástrojů pro správu verzí (jako je Git). Až bude vývoj a testování témat dokončeno, můžete kód nasadit na produkční server.

Jak zajistit, aby můj webový design („témata“) podporovalo více jazyků?

Zpřístupnění tématu více jazykům ( internacionalizace a lokalizace ) zahrnuje hlavně dvě kroky. Nejprve je třeba ve všech částech textového výstupu tématu použít funkce pro překlad v WordPressu k obalení textových řetězců. Například:esc_html_e(‘Hello World’, ‘my-custom-theme’)或__('Hello World', 'my-custom-theme')Druhý parametr “my-custom-theme” v těchto funkcích je ten, který jste si sami nastavili.style.cssTextové oblasti (Text Domain) definované v… musí být konzistentní.

Dále budete potřebovat nástroj jako Poedit, abyste prošli všechny textové stránky tématu (strings), které je možné přeložit, a vytvořili seznam těchto stránek určených k překladu..potŠablonový soubor a poté vytvořte odpovídající verzi pro každý jazyk..poA po kompilaci.moSoubory a umístěte je do tématu./languages/V adresáři. Nakonec,functions.phpPoužijte to v čínštině.load_theme_textdomain()Funkce slouží k načtení souborů s překlady.

Proč se na webových stránkách nic nezměnilo, i když jsem upravil soubor style.css?

To je obvykle způsobeno mezipamětí prohlížeče. Prohlížeč ukládá CSS soubory do mezipaměti za účelem zrychlení načítání stránek, což může vést k tomu, že zobrazujete starší verze stylů než jsou aktuální.

Můžete zkusit několik následujících metod k řešení tohoto problému: Za prvé,wp_enqueue_style()Ve funkci přidejte parametr dynamické verze souboru s nastaveními stylů, jak je ukázáno v předchozím příkladu. Díky tomu se po každém aktualizaci souboru změní URL a prohlížeč bude nucen soubor znovu stáhnout. Poté provádějte tvrdé obnovení prohlížeče pomocí klávesových kombinací Ctrl+F5 (nebo Cmd+Shift+R). Také zkontrolujte, zda je váš téma správně aktivováno, a ujistěte se, že upravujete právě aktuálně aktivované téma.style.cssKonečně se ujistěte, že váš CSS selektor má dostatečnou specificitu, aby překryl případně existující jiné styly.