Od nuly: Kompletní průvodce vývojem WordPressových šablon a klíčovými technologiemi

Témata WordPressu tvoří základní strukturu, která určuje vzhled a funkce webových stránek. Ovládnutí jejich vývoje znamená, že můžete úplně přizpůsobit všechny aspekty svého webu podle svých představ, bez omezení předpřipravených témat, a tak realizovat jedinečné designové nápady a funkční požadavky. Prvním krokem na této cestě je pochopení jejich základních konceptů a struktury souborů.

Každý WordPress téma je jednotlivý soubor, který se nachází…/wp-content/themes/Soubory v adresáři. Pro nejzákladnější funkční téma jsou potřeba pouze dvě soubory:style.css和index.phpMezi nimi jestyle.cssTyto soubory slouží nejen k uložení stylů, ale také k uchovávání metadat týkajících se daného tématu v poznámkách na začátku souboru. To je klíčové pro to, aby WordPress dokázal dané téma správně identifikovat.

在style.cssV části nadpisu („Header“) je nutné použít specifické poznámky k definování tématu. Typický příklad je následující:

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

/*
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
*/

Tato informace se zobrazí v administraci WordPressu v sekci “Vzhled > Témata”.index.phpJedná se o hlavní šablonový soubor tématu, který slouží jako výchozí možnost v případě, že žádné jiné, konkrétnější šablony neexistují. Postupem vývoje ho postupně nahradíte nebo doplníte šablonami, které jsou přesněji vymyšleny a určeny k konkrétním účelům.

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

Pochopení struktury hierarchie šablon daného tématu

WordPress využívá sofistikovaný systém hierarchie šablon, který určuje, který soubor šablony by měl být použit k zobrazení konkrétní stránky. Porozumění této hierarchii je základem efektivního vývoje temát (tj. vlastních úprav WordPressu). Díky němu víte, jaké názvy mají mít soubory při vytváření konkrétních stránek – např. detailů článku nebo stránek s kategoriemi.

Pravidla pojmenovávání hlavních šablonových souborů

Struktura šablon v WordPressu sleduje princip “od zvláštního k obecnému”. Například při přístupu k blogovému článku s ID 123 WordPress vyhledává pořadí následujícím způsobem:single-post-123.php、single-post.php、single.phpA nakonec je…singular.phpPokud všechno toto neexistuje, pak se to použije.index.php。

Mezi běžně používané základní šablony patří:
- front-page.phpSlouží k nastavení domovské stránky webového stránek.
- home.phpIndex blogových článků.
- single.phpJednotlivý článek z blogu nebo článek z vlastního typu článků.
- page.php: Jedna stránka.
- archive.phpObecný šablon pro různé archivační stránky (kategorie, tagy, autoři atd.).
- category.phpStránka určité kategorie adresáře.
- 404.php404 chybová stránka.
- header.php、footer.php、sidebar.phpTyto jsou obvykle fragmenty lokálních šablon.

Běžné funkce pro volání lokálních šablon

Pro udržení modularity a udržovatelnosti kódu poskytuje WordPress několik klíčových funkcí pro načítání lokálních šablon. Nejzásadnější z nich je…get_header()、get_footer()和get_sidebar()Jsou použity k zavádění různých elementů obsahu.header.php、footer.php和sidebar.php。

Doporučujeme k přečtení. Klíčové koncepty vývoje temát pro WordPress。

Další velmi důležitou funkcí jeget_template_part()Umožňuje vám flexibilnější způsob zavádění jakéhokoli fragmentu šablony. Například v cyklu blogových článků byste mohli chtít zavést speciální šablonu určenou k zobrazení obsahu článku:

<?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'template-parts/content', get_post_type() ); ?>
<?php endwhile; ?>

Tento kód bude preferenčně hledat…template-parts/content-post.php(Předpokládejme, že typ článku je…)postPokud není nalezeno, pak se provede načtení.template-parts/content.php。

Využití klíčových funkcí a hookovacích mechanismů k řízení funkčnosti

Silné funkce WordPressu pocházejí z jeho rozsáhlé knihovny funkcí a systému “hooků” založeného na událostech. Při vývoji temát je důležité dobře ovládat základní funkce a hooky, což je klíčem k realizaci složitých funkcí, optimalizaci výkonu a zvýšení bezpečnosti.

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

Základní funkce pro získávání a výstup obsahu

V souborech šablon často používáte řadu funkcí k získávání a zobrazování dynamického obsahu. Například…the_title()Slouží k zobrazení nadpisu aktuálního článku nebo stránky.the_content()Takže výstup po formátování hlavního obsahu bude následující: „Then the output of the formatted main content is as follows: …“get_Funkce na začátku, jako například…get_the_title()Vrací data, která můžete dále zpracovat ve svém kódu.

Cyklus blogových článků je jádrem šablon WordPressu a jeho standardní struktura kódu vypadá následovně:

<!-- 在这里输出文章内容 -->
        <h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>
        <div><?php the_content(); ?></div>
    <?php endwhile; ?>
    <!-- 这里可以放置分页导航 -->
<?php else : ?>
    <!-- 如果没有找到文章，显示的内容 -->
    <p>Nejsou k dispozici žádné informace.</p>
<?php endif; ?>

Rozšíření funkcí pomocí hooků

Hooky components are divided into two types: “actions” and “filters”. Action hooks umožňují vložit vlastní kód při nastání určitých událostí, například…wp_headV háčku můžete vypsat další metatagy. Pro to můžete použít odpovídající funkce nebo nástroje.add_action()Funkce, která umožňuje načtení („mount“) vlastní funkce.

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

Například, v tématu…functions.phpDo souboru byla přidána podpora pro odkazy na feedy (Feed links).

add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
    // 为文章和评论添加Feed链接到head中
    add_theme_support( 'automatic-feed-links' );
}

Filtrovací hooky vám umožňují upravovat data. Například pomocí…excerpt_lengthFiltry umožňují změnit délku shrnutí článku:

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

add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );
function mytheme_custom_excerpt_length( $length ) {
    return 30; // 将摘要长度设置为30个单词
}

functions.phpSoubor je “funkčním centrem” tématu – všechny vlastní funkce, volání hooků a deklarace funkcí tématu by měly být umístěny zde.

Prohlášení o podpoře funkce určené k vymezení tématu.

Použitíadd_theme_support()Deklarovat pomocí funkcí, které funkce vašeho tématu podporují, v rámci WordPressu, je dobrou vývojářskou praxí. Tím nejenom aktivujete požadované funkce, ale také zajistíte kompatibilitu s budoucími verzemi WordPressu.

Běžná prohlášení o funkcích zahrnují:

add_action( 'after_setup_theme', 'mytheme_theme_support' );
function mytheme_theme_support() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5语义化标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}

Integrace vlastních stylů a skriptovacích souborů

Moderní téma musí správně spravovat své soubory CSS stylů a JavaScript skriptů, aby bylo zajištěno jejich načítání podle potřeby, aby se předešlo konfliktům a aby splňovalo nejlepší postupy pro optimalizaci výkonu front-end stránek.

Bezpečné registrace a načítání zdrojů

Absolutně nepoužívejte žádné prvky přímo v souborech šablon.<link>或<script>Pro pevné zakódování zdrojů se používá správný postup, který zahrnuje využití vhodných nástrojů a metod.wp_enqueue_scriptsAkční háčky, v kombinaci s…wp_enqueue_style()和wp_enqueue_script()Funkce.

在functions.phpV tomto textu je potřeba definovat funkci, která bude zpracovávat řazení zdrojů (resурсů) do fronty čekání.

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
function mytheme_enqueue_assets() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载Google字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );

// 加载主JavaScript文件，并依赖jQuery，在页脚加载
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );

// 如果需要传递PHP变量到JS，可以使用wp_localize_script
    wp_localize_script( 'mytheme-script', 'myThemeData', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'home_url' => home_url(),
    ));
}

Tento způsob zajišťuje správné nastavení závislostí, předchází opakovanému načítání a umožňuje správu pluginů a dalších temat pomocí jejich deklarací závislostí.

Přidat podporu stylů pro editor Gutenberg

Se šířením blokových editorů se stalo zásadním přidat podporu pro front-end styly do backend editorů, aby byl dosažen efekt “výsledek odpovídá tomu, co vidíte” při editování. Můžete použít…add_theme_support( ‘editor-styles’ )A také se přidá do fronty editorový stylový soubor (style sheet).

add_action( 'after_setup_theme', 'mytheme_editor_styles' );
function mytheme_editor_styles() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'assets/css/editor-style.css' );
}

Závěr

Vývoj tem pro WordPress začíná pochopením základní struktury souborů a postupně se rozšiřuje na úroveň šablon, klíčových funkcí, systému hooků a správy zdrojových souborů. Klíčovým faktorem je praxe – začněte s nejjednodušším příkladem a postupně se seznamte se složitějšími aspekty vývoje.style.css和index.phpZačněte a poté vytvořte.header.php和footer.phpProveděte modulární rozdělení struktury. Následně využijte hierarchii šablon k vytvoření speciálních šablon pro různé typy stránek.single.php或page.php…infunctions.phpV čínštině se to řekne „Zhōng tōng guò gōu zǐ hé…“ („Prostřednictvím háčků a…“).add_theme_supportBezpečně přidávejte funkce a vždy to dělejte podle určených postupů.wp_enqueue_scriptsSlouží k správě stylů a skriptů. Dodržováním těchto základních principů a postupů budete schopni vytvořit profesionální, efektivní a udržovatelné WordPress téma.

Časté dotazy

K vytvoření WordPress tématu jsou potřeba minimálně následující soubory:

Z technického hlediska potřebuje téma, které je rozpoznáno a aktivováno systémem WordPress, minimálně dvě soubory:style.css和index.php。style.cssPoznámky v hlavičce souboru musí obsahovat správné metadatové informace o tématu, například…Theme NameAindex.phpJako nejzákladnější šablonový soubor slouží k renderování všech stránek.

Jak vytvořit vlastní šablonu stránky pro můj téma?

Vytvoření vlastního šablónu stránky je velmi jednoduché. Stačí, když použijete jakýkoli šablonový soubor (obvykle…)page.phpNa vrcholu této stránky přidejte blok konkrétního PHP komentáře. Například, pokud vytváříte šablonu “úplně široké stránky” („full-width page“), můžete vytvořit nový soubor s názvem…template-full-width.phpSoubor a na začátek souboru napište:/* Template Name: 全宽页面 */Po uložení budete moci v nabídkovém seznamu “Šablony” v sekci “Vlastnosti stránky” v administraci WordPressu vidět možnost “Celoplošná stránka” a vybrat ji.

Proč se v souboru functions.php používá funkce add_action k přidávání nových funkcí?

Přímo v…functions.phpKód funkce napsaný v jazyce C/C++ může být spuštěn v nevhodný okamžik, což může vést k chybám nebo k tomu, že funkce nebude fungovat správně. Pro vyhnutí tomuto problému je důležité používat správné techniky programování a nástroje, které zajistí správné načasování spouštění kódu.add_action()或add_filter()Připojení vaší funkce k konkrétnímu hooku v WordPressu zajišťuje, že kód bude spuštěn v správný a bezpečný čas. Například…after_setup_themeHooky je použit k inicializaci tématu.wp_enqueue_scriptsHooky nástroje slouží k načítání zdrojových souborů (resursů). Jedná se o osvědčenou praktiku v architektuře WordPress plné pluginů, která napomáhá zvýšit modularitu a kompatibilitu kódu.

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

Pro to, aby téma podporovalo více jazyků, je potřeba provést několik kroků. Nejprve…style.cssPoužívejte to v hlavičce a ve všech šablonových souborech.__()、_e()Použijte funkce pro překlad, abyste obalili všechny textové řetězce, které je třeba přeložit. Poté…functions.phpPoužijte to v čínštině.load_theme_textdomain()Funkce slouží k načtení souborů s překlady. Nakonec se pomocí nástrojů, jako je Poedit, zdrojový kód prohledá a z něj vyjmenují textové řetězce, které budou použity k vytvoření překladů..potSoubor, a požádejte překladatele, aby na základě toho vytvořil odpovídající jazykovou verzi (např.zh_CN.po和.moPřeložený soubor umístěte do adresáře určeného k uložení tematických materiálů./languages/Může to být přímo v té složce.

Na co musíte věnovat pozornost při získávání licencí a dodržování předpisů při vývoji komerčních témat?

Při vývoji komerčních temat určených k distribuci nebo prodeji je nutné striktně dodržovat požadavky licenční smlouvy WordPressu. Nejdůležitějším bodem je, aby vaše téma používalo stejnou licenci jako samotný WordPress – konkrétně licenci GPL verze 2 nebo vyšší. To znamená, že ostatní mají právo vaši kódovou základnu používat, upravovat a dále distribuovat. Dále je třeba dodržovat oficiální kódovací standardy a pravidla pro posuzování temat WordPressu, aby byla zajištěna kvalita, bezpečnost a kompatibilita kódu. Je také zásadní správně uvést licenci všech použitých třetích stran (jako jsou fonty, knihovny ikon) a ujistit se, že jsou kompatibilní s licencí GPL nebo mají komerční oprávnění k jejich použití.