Začínáme od nuly: naučte se základní postupy a osvědčené metody vývoje moderních WordPressových šablon.

Vývojové prostředí a inicializace projektu

Prvním krokem při vývoji moderních temát pro WordPress je vytvoření efektivního a standardního lokálního vývojového prostředí. Dnes již neprovádíme vývoj přímo na serveru, ale používáme lokální nástrojové sady, abychom zvýšili efektivitu.

Pro lokální prostředí můžete zvolit integrované nástroje, jako např. Local、Laragon 或 MAMPTyto nástroje umožňují jednoduchou instalaci Apache/Nginx, PHP a MySQL pomocí jediného tlačítka, což výrazně zjednodušuje proces konfigurace prostředí. Volba mezi nimi závisí především na vašich preferencích ohledně operačního systému a konkrétních požadavcích na funkce.

Jak správně nastavit strukturu adresáře tematických článků?

Jasná a organizovaná struktura adresáře je základem profesionálního vývoje tematických stránek. Nejenže vám usnadňuje samotné udržování kódu, ale také pomáhá ostatním vývojářům lépe porozumět a spolupracovat. Moderní tematické stránky pro WordPress obvykle dodržují strukturu podobnou “vzorům” („templates“).

Doporučujeme k přečtení. Úvod do vývoje WordPress temat: Vytvořte si své první vlastní téma od nuly。

Ve složce s instalací WordPressu. wp-content/themes V té složce vytvořte složku s názvem odpovídajícím vašemu tématu, například: my-awesome-themePoté je v tomto složku doporučeno vytvořit následující základní adresáře:
* /assetsSlouží k uložení všech statických zdrojů.
* /assets/cssSlouží k uložení souborů se šablonami, např. style.css 和 editor-style.css。
* /assets/jsSlouží k uložení souborů JavaScript.
* /assets/imagesSlouží k ukládání obrázků, ikon a dalších mediálních souborů.
* /assets/fontsSlouží k uložení vlastních fontů.
* /template-partsSlouží k ukládání znovupoužitelných fragmentů šablon, jako jsou záhlaví stránek, patičky stránek, metadata článků atd.
* /inc 或 /includesSlouží k uložení funkcí určených ke zlepšení fungování témat, jako jsou vlastní funkce, registrace doplňkových nástrojů („plug-inů“), definice vlastních typů článků atd.
* /patterns(Volitelné, ale doporučené): Soubor definující režim blokového zpracování editoru pro celý web.

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řte potřebné soubory s informacemi o tématu.

Každý WordPress téma musí mít položku s názvem… style.css Tento soubor není pouze sadou stylů (stylesheet), ale také “občanským průkazem” daného tématu. Informace v poznámkovém řádku na vrcholu tohoto souboru jsou klíčové pro to, aby WordPress rozpoznal toto téma.

/*
Theme Name: 我的炫酷主题
Theme URI: https://example.com/my-awesome-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 一个专为博客和杂志网站设计的现代化、响应式WordPress主题。
Version: 1.0.0
Tested up to: 6.5
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
Domain Path: /languages
*/

Mezi nimi,Text Domain Používá se pro internacionalizaci a jedná se o jedinečný identifikátor vašeho tématu v souborech s překlady.Requires at least 和 Requires PHP Tím jsou určeny minimální verze WordPressu a PHP potřebné k provozu daného tématu, což je velmi důležité pro uživatelský zážitek a bezpečnost.

Kromě toho, pro podporu funkcí celosítového editoru (FSE), je také potřeba vytvořit… theme.json Soubor. Tento soubor slouží jako most mezi editorem Gutenberg a příslušnými tematikami („temami“) a používá se k globálnímu definování stylů, palet barev, nastavení formátování a dalších parametrů.

Vytvoření šablony pro základní témata

Šablony jsou “kostrou” WordPress temat a určují, jak budou různé typy obsahu zobrazeny. WordPress automaticky vybere vhodnou šablonu na základě „úrovně šablony“, aby zobrazil požadovanou stránku.

Doporučujeme k přečtení. Návod k vývoji témat pro WordPress: Vytvořte si vlastní web od nuly.。

Dva nejzákladnější šablony jsou: index.php(Hlavní šablona, použitá jako záložní možnost) a style.css(Šablony stylů). Avšak pro vytvoření plně funkčního tématu musíte začít s výběrem několika základních šablon.

Jak vytvořit hlavičku a patu webové stránky

Části nad a pod hlavním obsahem webové stránky jsou společné pro všechny stránky. Umístíme je odděleně… header.php 和 footer.php Čína.

在 header.php Ve souboru musíte umístit hlavovou část (head) HTML dokumentu a zavolat základní funkce WordPressu. Mezi klíčové funkce patří: wp_head()Umožňuje vložit potřebný kód (např. styly, metatagy) do jádra WordPressu, pluginů a temat.

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

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <!-- 你的网站导航和Logo代码 -->
</header>

footer.php Je zodpovědný za zavření toho, co je otevřeno… header.php Otevřete značku v prostředí a zavolejte ji. wp_footer() Funkce jsou zásadní pro načítání skriptů a funkcí pluginů.

Jak vytvořit cyklus článků

Cyklus článků je klíčovou logikou WordPressových temát – slouží k načítání a zobrazování článků z databáze. Tato logika je obvykle umístěna… index.php、single.php(Jedna článek) nebo page.php(Na jedné stránce.)

Základní struktura cyklu článků je následující. Používá… have_posts() 和 the_post() Funkce slouží k procházení vyhledaných článků.

Doporučujeme k přečtení. Konečný průvodce: Jak vyvinout silný a flexibilní WordPressový motiv.。

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <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 esc_html_e( 'Sorry, no posts matched your criteria.', 'my-awesome-theme' ); ?></p>
<?php endif; ?>

V tomto cyklu jste použili více šablonových značek, jako např. the_title() Titul článku:the_content() Výstupní text: „You are a professional translation engine. Translate the following Chinese text into Czech: ‘You are a professional translation engine.’“the_permalink() Získat odkaz na článek.

Tematické funkce a personalizace

Veškerý kód, který zlepšuje funkce temat, by měl být spravován centralizovaně, a ne rozptýlen v různých souborech šablon. Optimální postup je vytvořit v kořenovém adresáři tématu složku s názvem… functions.php Soubor… Tento soubor je automaticky načten při inicializaci tématu a funguje jako “plug-in” vašeho tématu.

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

Jak se registrovat pro navigační menu a boční panel?

Personalizované navigační menu a boční panel (oblast s nástroji) jsou základními funkcemi daného tématu. Budete je potřebovat… functions.php Pro registraci je nutné použít specifické funkce a poté je lze spravovat v menu “Vzhled” v pozadí.

Použití register_nav_menus() Funkce slouží k registraci umístění nabídky (menu). Například k registraci “hlavního menu” a “menu v patičce stránky”.

function my_awesome_theme_setup() {
    register_nav_menus(
        array(
            'primary' => esc_html__( 'Primary Menu', 'my-awesome-theme' ),
            'footer'  => esc_html__( 'Footer Menu', 'my-awesome-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );

Pro registraci pomocných nástrojů (v postranní liště) je potřeba použít… register_sidebar() Funkce. Můžete definovat název, ID, popis bočního panelu a HTML značky, které ho obklopují z obou stran.

Jak přidat do článku podporu pro využití speciálních obrázků?

Speciální obrázky (zvětšené verze článků) jsou standardem na moderních webových stránkách s obsahem. WordPress tuto funkci ve výchozím nastavení neaktivuje a její použití vyžaduje, aby téma webové stránky výslovně podporovalo tento režim.

Můžete to udělat v rámci toho, co bylo zmíněno výše. my_awesome_theme_setup() Ve funkci se to používá. add_theme_support() Funkce slouží k jejímu aktivování. Tato funkce se používá k zapnutí různých funkcí jádra WordPressu a temat.

function my_awesome_theme_setup() {
    // ... 之前的菜单注册代码 ...
    add_theme_support( 'post-thumbnails' ); // 为“文章”和“页面”启用特色图像
    // 你还可以设置缩略图尺寸
    set_post_thumbnail_size( 800, 450, true ); // 默认特色图像尺寸， true表示裁剪
    add_image_size( 'my-theme-blog-list', 400, 250, true ); // 自定义一个图像尺寸
}

Po aktivaci se v rozhraní pro úpravu článků zobrazí metapole “Speciální obrázek”, která umožňuje uživatelům nahrát nebo vybrat obrázek. V šablonách můžete tuto možnost využít. the_post_thumbnail() Funkce to vypíše.

Styl, skripty a optimalizace výkonu

Správné zařazení souborů CSS a JavaScript do fronty je klíčovou praktikou při vývoji pro WordPress. Nikdy je nepoužívejte přímo v šablonových souborech. <link> 或 <script> Místo hardkódování zdrojových dat v tagech by mělo být použito… wp_enqueue_style() 和 wp_enqueue_script() Funkce.

Jak správně přidat CSS a JS do fronty (queue)?

在 functions.php Vytvořte v daném prostředí novou funkci, která slouží k registraci a zařazování vašich tematických zdrojů do fronty čekání. Poté tuto funkci připojte („mount“) k odpovídajícím systémovým komponentám. wp_enqueue_scripts Tento „akční háček“ je připojen…

function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 注册并排队一个自定义的CSS文件
    wp_enqueue_style( 'my-awesome-theme-main-css', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0' );

// 注册并排队一个自定义的JavaScript文件
    wp_enqueue_script( 'my-awesome-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果需要在脚本中使用PHP变量（如ajax_url），可以使用wp_localize_script
    wp_localize_script( 'my-awesome-theme-navigation', 'myThemeData', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );

Všimněte si, že poslední parametr je… true Znamená to, že skript je umístěn na dně dokumentu.\nPředchozí načítání dat obvykle zlepšuje výkon renderování stránek.

Jak provést internacionalizaci a lokalizaci?

Aby vaše téma mohlo být používáno po celém světě, je nutné provést internacionalizaci (i18n). To znamená, že všechny textové řetězce vytvářené v šablonách a PHP kódu musí být obaleny funkcemi pro překlad.

Nejčastěji používaná funkce je… esc_html__()(Použito k výstupu HTML kódu po escapeování) a esc_html_e()(Používá se k přímému zobrazení HTML kódu po převodu na escape formát.) Všechny tyto prvky musí být poskytnuty v informacích o hlavičce tématu (theme header). Text Domain。

// V případě, kdy není žádný článek v cyklu článků, se zobrazí tato výzva
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-awesome-theme' ); ?></p>

// 在导航菜单注册时
'primary' =&gt; esc_html__( 'Primary Menu', 'my-awesome-theme' ),

Po přípravě kódu můžete použít nástroje, jako je Poedit, k prohledání všech přeložených řetězců a generování požadovaných výstupních dat. .pot(Template file), a poté vytvořte odpovídající… .po 和 .mo Přeložte soubor a umístěte ho do příslušného tématu. /languages V katalogu.

Závěr

Tento dlouhý článek systematicky popisuje základní postup vývoje moderních temát pro WordPress – od nastavení prostředí až po dokončení všech funkcí. Začínáme vytvořením standardizované struktury projektu a zdůrazňujeme… style.css 和 theme.json Dále jsme se podrobněji zabývali důležitostí této funkce. Následně jsme prozkoumali logiku vytváření hierarchie šablon, zejména pokud jde o dynamické zobrazování obsahu pomocí cyklu článků. V části o vylepšení funkcionalit jsme se naučili, jak tuto logiku efektivně využít. functions.php Rozšiřme tuto tematiku o možnosti registrace, použití různých nástrojů („widgetů“) a podporu speciálních obrázků.

Na závěr se zaměříme na správu front-end zdrojů a kvalitu kódu a zdůrazníme důležitost přidávání stylových skriptů pomocí standardních metod WordPressu a přípravy na internacionalizaci. Dodržování těchto osvědčených postupů nejenom umožňuje vytvářet tematika s jasnou strukturou a snadnou údržbou, ale také zajišťuje jejich kompatibilitu, bezpečnost a rozšiřitelnost, čímž položíme pevný základ pro vývoj složitějších projektů.

Časté dotazy

Jaký je rozdíl mezi tématy a pluginy? Kam by měl být umístěn funkční kód?

Témata jsou zodpovědná za vizuální prezentaci a rozvržení obsahu webové stránky (tj. “vzhled”), zatímco pluginy slouží k přidávání samostatných funkcí na webovou stránku (jako jsou kontaktní formuláře, optimalizace pro vyhledávače, e-shopové funkce). Jednoduché pravidlo zní: Pokud kód mění vzhled webové stránky, patří do tématu; pokud přidává nové funkce, mělo by být zváženo, zda ho vytvořit jako plugin. Z dlouhodobého hlediska umožňuje vytváření funkčního kódu jako pluginu zachovat tyto funkce i při změně tématu.

Je nutné používat soubor `theme.json`? Jaké jsou jeho výhody?

Pro vývoj moderních aplikací orientovaných na budoucnost se důrazně doporučuje používat… theme.jsonUž se nejedná o volitelnou, pokročilou funkci, ale o jádro architektury celostátního editoru WordPress. Jeho výhody spočívají v možnosti centralizované správy globálních stylů a nastavení (barvy, písma, mezery), což poskytuje jednotnější zážitek při editování bloků, snižuje počet vložených stylů a zjednodušuje implementaci responsivního designu a režimu tmavého barevného schématu. Od verze WordPress 5.8 se stalo důležitou součástí vývoje temat.

Jak si přizpůsobit výstup výchozích widgetů v WordPressu?

Výstupní HTML korektních pluginů WordPressu (jako jsou katalogy článků nebo seznamy nejnovějších příspěvků) obvykle obsahuje mnoho zbytečně složitých struktur (vnořených elementů HTML). div A názvy tříd. Můžete je přizpůsobit pomocí filtrů (Filter). Například, pomocí… widget_categories_args Nástroj pro úpravy filtrů mění parametry dotazu v katalogu kategorií, nebo ještě důkladněji – prostřednictvím… widget_categories_output Některé filtry přímo upravují HTML, který vytvoří. Jiný, modernější a flexibilnější způsob je vytvoření vlastních, přizpůsobených bloků, které nahradí tradiční nástroje.

Co je to hierarchie šablon a jak ji využít?

Systém úrovní šablon v WordPressu určuje, který soubor šablony použít k zobrazení aktuální stránky. Funkcionuje podle principu od “nejkonkrétnější” k “nejobecnější”. Například u článku s ID 123 bude WordPress postupně hledat:single-post-123.php -> single-post.php -> single.php -> singular.php – A nakonec index.phpMůžete vytvořit konkrétnější šablonové soubory (např. category-news.php Navrhnout samostatnou stránku pro kategorii “Zprávy” umožňuje přesněji ovládat vzhled jednotlivých stránek, což je mnohem přehlednější než psaní velkého množství podmínkových příkazů v jediném souboru.

Jak provádět ladění a odstraňování chyb při vývoji témat?

Prvním krokem je… wp-config.php V souboru zapněte režim ladění WordPressu. WP_DEBUG Konstanta je nastavena na trueTo umožní zobrazit všechny chyby, varování a upozornění PHP na stránce. Doporučujeme také nastavit… WP_DEBUG_LOG 为 trueZaznamenej chyby do… /wp-content/debug.log V souborech se snažte vyhnout situacím, kdy by chybové informace byly přímo zpřístupněny návštěvníkům. Kromě toho je používání nástrojů pro vývojáře webových prohlížečů (konzola a záložka „Network“) nezbytnou dovedností při ladění front-end části aplikace – umožňují vám detekovat chyby v JavaScriptu a problémy s načítáním zdrojových souborů.