Krok za krokem vás naučíme vývoj témat WordPress od nuly: kompletní průvodce pro vytváření profesionálních webových stránek.

Vytvoření vašeho vývojového prostředí a klíčových souborů

Než začnete psát kód, je velmi důležitá stabilní a efektivní vývojová prostředí. Doporučujeme použít nástroje určené k lokálnímu vývoji, jako jsou Local by Flywheel, XAMPP nebo MAMP, které umožňují rychle nastavit na vašem počítači potřebné prostředí pro PHP, MySQL a server pro WordPress. Kromě toho si vyberte pohodlný editor kódu, např. Visual Studio Code, a nainstalujte doplňky, které podporují inteligentní rozpoznávání kódu v PHP a poskytují předpřipravené fragmenty kódu pro WordPress – to výrazně zvýší efektivitu vašeho vývoje.

Téma WordPressu je v podstatě něco, co se nachází na adrese /wp-content/themes/ V adresáři se nacházejí složky, které obsahují sadu PHP šablon a stylových souborů s konkrétními funkcemi. Nejzákladnější téma vyžaduje alespoň dva soubory:

První je… style.cssNení to pouze šablona stylu tématu, ale také “občanský průkaz” tohoto tématu. Na začátku souboru musí být obsažena poznámka s informacemi o tématu v standardním formátu.

Doporučujeme k přečtení. Ultimátní průvodce pro začátečníky: Vytvořte si personalizované téma pro WordPress od nuly。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习 WordPress 主题开发的简洁主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Druhý je… index.phpJedná se o výchozí šablonový soubor tématu, který se použije automaticky, pokud WordPress nenajde konkrétnější šablonu. I když tento soubor zpočátku obsahuje pouze jednoduchý kus HTML kódu, zajišťuje to, že téma bude WordPressem rozpoznáno a aktivováno.

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

Porozumění hierarchii šablon a vytvoření základních šablon

WordPress využívá sofistikovanou “hierarchii šablon” k určení toho, který soubor šablony má být načten pro různé typy stránek. Tato systémová pravidla fungují podobně jako systém priorit. Například při návštěvě konkrétního článku WordPress nejprve hledá single-post.phpPokud to neexistuje, pak hledejte. single.phpA teprve nakonec se vrátí zpět… index.phpPorozumění těmto pravidlům je klíčem k efektivnímu vývoji – umožňují vám vytvářet přesné šablony pro domovskou stránku, stránky článků, jednotlivé stránky a kategorické archivy.

Dále začneme vytvářením několika základních šablon. První z nich je šablona hlavní stránky, která se obvykle nazývá… front-page.phpPokud tento soubor existuje, bude použit jako statická domovská stránka webu s předností. Základní šablona domovské stránky obsahuje cyklus, který slouží k výpisu nejnovějšího seznamu článků.

Šablony pro stránky článků se obvykle používají… single.phpTěžištěm tohoto šablona je využití hlavního cyklu WordPressu (The Loop) k zobrazení kompletního obsahu jednotlivého článku, nadpisu, metadat (jako je autor, datum zveřejnění) a sekce pro komentáře.

Stránkové šablony slouží k zobrazení samostatných stránek, jako je “O nás” nebo “Kontaktujte nás”. Příslušné soubory jsou… page.phpJejí struktura je podobná stránce článku, ale obvykle neobsahuje metadata typická pro články, jako jsou kategorie nebo tagy.

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

Archivní stránková šablona (např.) archive.phpSlouží k zobrazení seznamu článků podle kategorie, tagu, autora nebo data. Zobrazuje shrnutí nebo názvy více článků pomocí cyklu.

Rozšiřování funkcí témat pomocí funkcí a hooků

Pouze soubory typu „šablony“ (templates) mohou ovládat způsob zobrazení obsahu. Chcete-li tematice přidat dynamické funkce a hlubokou integraci s jádrem WordPressu, je nutné využít rozsáhlou sadu funkcí a „hooků“ (hooks), které WordPress poskytuje. Nejprve musíte v kořenovém adresáři tématu vytvořit soubor s názvem… functions.php Tento soubor není šablonou, ale “funkčním doplňkem” tématu, který slouží k uložení všeho vlastního PHP kódu.

Jednou z základních a zásadních operací je použití… add_theme_support() Funkce slouží k deklaraci funkcí, které daný téma podporuje. Například povolení zobrazení přehledů článků („ozdobných obrázků“) a funkce vlastního menu je standardem u většiny moderních témat.

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

function my_first_theme_setup() {
    // 支持文章特色图像
    add_theme_support('post-thumbnails');
    // 支持自定义菜单
    add_theme_support('menus');
    // 支持在文章编辑器中输出的HTML5标签
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption'));
    // 动态生成<title>标签
    add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_first_theme_setup');

V uvedeném kódu…add_action() Jde pouze o použití “háčku” (hooku). Ten umožňuje spouštět naše vlastní definované funkce. my_first_theme_setup Připojené k jádru WordPress after_setup_theme Tento akční bod je důležitý. Hooky existují ve dvou typech: Action a Filter. Akce slouží k provedení vašeho kódu v určitém okamžiku, jako v předchozím příkladu; filtry naopak slouží k úpravě dat, která vznikají během zpracování obsahu v WordPressu.

Dalším klíčovým úkolem je použít… wp_enqueue_style() 和 wp_enqueue_script() Funkce slouží k správnému načtení souborů se styly (CSS) a JavaScriptu. To by mělo být provedeno jejich připojením („mounting“) do odpovídajících částí webové stránky. wp_enqueue_scripts K tomu je potřeba použít „háčky“ (anglicky „hooks“), které zajišťují, že zdroje jsou načítány v pořadí a jsou předcházeny případnému střetu mezi nimi.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style('main-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Návrh stylových temat a implementace responsivního rozvrhu

Vizuální vzhled tématu je zcela ovládán pomocí CSS. Můžete začít tím, že nastavíte výchozí styly na původní hodnoty, abyste zajistili konzistentní vzhled v různých prohlížečích. Poté můžete vytvářet své vlastní styly na základě HTML struktury generované WordPressem. WordPress poskytuje specifické CSS třídy pro většinu prvků. .post、.sticky、.widget Atd. Pomocí těchto tříd lze prvky přesně lokalizovat a vylepšit jejich vzhled.

Doporučujeme k přečtení. Praktický průvodce vývojem témat pro WordPress: vytvořte vysoce výkonné webové stránky od nuly.。

V moderním vývoji webových stránek je responsivní design nezbytný. To znamená, že váš design musí elegantně přizpůsobovat různým velikostem obrazovek – od mobilních telefonů po stolní počítače. Realizace responsivního designu se především opírá o CSS media queries.

/* 基础移动端样式 */
.container {
    width: 100%;
    padding: 0 15px;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备 */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Kromě psaní kódu CSS můžete také dosáhnout požadovaných výsledků vytvářením… header.php 和 footer.php Použijte šablonové soubory k modularizaci kódu pro záhlaví a patičku webových stránek. Poté tyto moduly používejte v dalších šablonách. get_header() 和 get_footer() Funkce slouží k jejich volání, což výrazně eliminuje duplikaci kódu. Pro boční panel lze vytvořit… sidebar.phpA použijte… get_sidebar() Volání. V šabloně postranního panelu použijte… dynamic_sidebar() Funkce a register_sidebar() Kombinací funkcí lze vytvořit oblast widgetů, která lze dynamicky spravovat v záložce “Vzhled -> Nástroje” v pozadí.

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

Závěr

Vývoj tem pro WordPress je systématický proces, který začíná pochopením základních konceptů (jako je hierarchie šablon) a pokračuje v praktickém kódování (vytvářením šablonových souborů, používáním funkčních hooků). Po nastavení prostředí a vytvoření základních šablonových souborů se postupně pokračuje v dalším prohloubení do využití možností, které tyto šablony nabízejí. functions.php Rozšiřujte funkce a vytvářejte estetické, responzivní rozhraní pomocí strukturovaného CSS a modulárních šablon (jako jsou záhlaví a paty stránek). Po zvládnutí těchto základních dovedností budete mít schopnost vytvořit profesionální a přizpůsobitelné téma pro WordPress. Neustálé prozkoumávání oficiálních dokumentací a komunitních zdrojů WordPressu je klíčem k neustálému zlepšování vašich vývojových dovedností.

Časté dotazy

Je nutné ovládat PHP pro vývoj temát pro WordPress?

Ano, důkladné zvládnutí PHP je nezbytné pro vývoj temát pro WordPress. Všechny soubory šablon WordPress jsou totiž vytvořeny v PHP, a proto potřebujete používat PHP k volání základních funkcí WordPress, zpracování datové logiky a řízení výstupu obsahu. I když základní úpravy stylů mohou zahrnovat pouze CSS, jakékoli funkční přizpůsobení a vytváření nových šablon je nemožné bez použití PHP.

Jaká je speciální funkce souboru functions.php v daném tématu?

functions.php Soubory jsou ústřední součástí funkcionalit témat a působí jako pluginy, které se spolu s tématem aktivují. Zde můžete přidávat nebo upravovat různé funkce tématu – např. nastavovat umístění registrace pokrmů, definovat oblasti pro příslušenství, přidávat možnosti podpory tématu, řídit načítání skriptů a stylů, vytvářet vlastní funkce, a také používat různé akce a filtrovací háčky k úpravě výchozího chování WordPressu. Kód těchto souborů se automaticky načte po aktivaci daného tématu.

Jak zajistit, aby můj téma podporovalo vícejazyčné překlady?

Aby téma podporovalo více jazyků, je potřeba udělat dvě věci: Za prvé, ve tématu… style.css V hlavičkových poznámkách a ve všech šablonových funkcích, které používají textové řetězce, se používá určitý textový domén (Text Domain), například: my-themeVšechny texty, které je třeba přeložit, by měly být použity… __()、_e() Zabalte funkce určené k práci s WordPressem do vlastních modulů. Dále použijte nástroje, jako je Poedit, k prohledání souborů témat a generování potřebných dat. .pot Šablony souborů – podle nichž může překladatel vytvořit verze textu v různých jazycích. .po 和 .mo Kompilujte soubory. Umístěte jazykové soubory do složky tematického nastavení („theme“). /languages/ Může být umístěn přímo v adresáři.

Jak ladit případné chyby během vývojového procesu?

Během vývojové fáze je vysoce doporučeno zapnout režim ladění (debugging mode) v WordPressu. To provedete tak, že otevřete adresář umístěný v kořenové složce webové stránky… wp-config.php Soubor: Najděte a změňte následující řádky kódu:define('WP_DEBUG', true);Můžete také všechno zapnout současně. WP_DEBUG_LOG Zaznamenávejte chyby do souboru protokolů, nebo to aktivujte. WP_DEBUG_DISPLAY Chyby se zobrazí na stránce. To vám umožní vizuálně zkontrolovat všechna PHP upozornění, oznámení a chyby, což výrazně usnadní odhalování chyb v kódu. Před nasazením tématu nezapomeňte vždy zakázat režim ladění (debugging mode).