Návod k vývoji témat WordPressu: Vytvořte své první téma od nuly

Přípravné práce a konfigurace prostředí

Než začnete psát kód, potřebujete vhodné vývojové prostředí. Lokální vývojové prostředí vám umožní provádět testy a ladění bez ovlivnění webové stránky online. Doporučujeme použít integrované balíčky, jako jsou XAMPP, MAMP nebo Local by Flywheel, které umožňují jednoduchou instalaci Apache, MySQL/MariaDB a PHP.

Ujistěte se, že vaše verze PHP je 7.4 nebo vyšší – to je minimální verze doporučená oficiálně WordPressem. Kromě toho budete potřebovat editor kódu, jako je Visual Studio Code, Sublime Text nebo PHPStorm, které poskytují funkce výrazového zvýraznění a podpory při psaní kódu, což výrazně zvyšuje efektivitu vývoje.

Vytvoření základní struktury tématu pro WordPress

Téma WordPressu je v podstatě něco, co se nachází na adrese wp-content/themes/ Souborová složka v adresáři. Název této složky bude sloužit jako identifikátor vašeho tématu. Doporučujeme používat malá písmena, čísla a spojovníky a vyhnout se použití mezer. Například můžete vytvořit složku s názvem… my-first-theme „Složky.“

V této složce je potřeba nejméně dvě klíčové soubory:style.css 和 index.php。style.css Nejde jen o šablony stylů – jejich důležitější funkcí je poskytovat metadaty týkající se daného tématu, které se zobrazují na stránce “Vzhled” -> “Témata” v administraci WordPressu.

Napsat záhlaví informací o tématu

在 style.css Na začátku souboru musíte přidat specifický blok komentářů, který definuje informace o tématu. Zde je příklad:

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

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个简洁、轻量级的入门级 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Mezi nimi,Text Domain Slouží k internacionalizaci (podpoře více jazyků) a musí odpovídat názvu vašeho složky s tematikou.index.php Soubor představuje výchozí šablonu pro dané téma a slouží jako záložní šablona pro všechny stránky. Nejprve do něj můžete napsat jednoduchou HTML strukturu, abyste ji vyzkoušeli.

Klíčové šablónové soubory a hierarchie šablon

WordPress používá soubor pravidel nazývaný “Hierarchie šablon” (Template Hierarchy), která určuje, který šablonový soubor by měl být použit k zobrazení konkrétní požadavku na stránku. Porozumění této struktuře je klíčové pro vývoj temát (templates). Základní myšlenka je následující: WordPress začne hledat od nejkonkrétnějšího šablonového souboru; pokud ho nenajde, přejde k obecnějšímu souboru a nakonec k základní šabloně. index.php。

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

Běžné šablony a jejich použití

• header.phpV horní části webové stránky se obvykle nacházejí informace o oblasti, identita webového stránky a hlavní navigace.
• footer.phpV dolní části webové stránky se obvykle nacházejí informace o autorských právech, pomocné odkazy a další podstatné údaje.
• sidebar.phpŠipková lišta.
• index.phpHlavní šablona slouží jako konečná záloha pro všechny stránky.
• single.phpSlouží k zobrazení jednotlivého blogového článku.
• page.phpSlouží k zobrazení jednotlivých stránek (např. “O nás”, “Kontakt”).
• archive.phpSlouží k zobrazení seznamu archivovaných článků (např. podle kategorií, tagů, autorů nebo dat vydání).
• front-page.phpSlouží k definování domovské stránky webového stránek (pokud je nastavena statická stránka jako domovská stránka).
• home.phpSlouží k zobrazení indexové stránky blogových článků (pokud je nastavena statická domovská stránka, tento šablon zobrazí seznam nejnovějších článků).
• 404.phpSlouží k zobrazení chybové stránky “404 Nenašeno”.
• search.phpSlouží k zobrazení výsledků vyhledávání.
• functions.phpToto není šablonový soubor, ale funkční soubor tematického nastavení, který slouží k přidávání funkcí, registraci menu, bočních panelů a dalších prvků.

Šablony a cykly

V souborech šablon často používáte “šablonové značky”. Jedná se o PHP funkce poskytované WordPressem, které slouží k výstupu dynamického obsahu. bloginfo('name') Vyveďte název webové stránky.the_title() Titulek článku: „Výstupní výkonnost systému po implementaci nových funkcí“

Nejzákladnějším konceptem je “WordPress cyklus”. Jedná se o strukturu PHP kódu, která slouží k ověření, zda na aktuální stránce existují články (nebo seznam článků), které je třeba zobrazit, a poté je cyklicky vypíše. Jeden z nejjednodušších příkladů tohoto cyklu je následující:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
<?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

Integrace tematických funkcí a stylů

functions.php Jde o “mozek” vaší tematiky – všechny funkce, které nepatří do jádra procesu renderování šablon, by měly být přidány právě zde. Tento soubor je automaticky načten při inicializaci tematiky.

Funkce registrace témat

在 functions.php V WordPressu můžete rozšířit funkce pomocí různých “hooků” (např. akčních hooků a filtrovacích hooků). Nejprve je obvykle nutné deklarovat, že váš téma podporuje určité funkce. Například přidání přehledových obrázků k článkům („featured images“) a podpora menu:

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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup Připojené k WordPressu after_setup_theme Ujistěte se, že tento akční hook bude spuštěn ve správný čas.

Zavádění stylů a skriptů

Moderní webové stránky by měly správně integrovat soubory se styly (CSS) a JavaScript. To znamená, že tyto soubory musí být správně načteny a použity při vykreslování stránek a provádění interaktivních funkcí. K tomu je obvykle potřeba, aby byly tyto soubory umístěny ve správné složce webové stránky a aby byly správně nast wp_enqueue_style() 和 wp_enqueue_script() Funkce se přidávají do fronty, nikoli přímo do šablonových souborů pomocí značek `` nebo `<?`. Výhodou tohoto přístupu je lepší správa závislostí, předcházení opakovanému načítání a dodržování osvědčených postupů používaných v WordPressu.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Funkce `getstylesheet_uri()` odkazuje na váš šablonový soubor (stylesheet). style.css Funkce `get_template_directory_uri()` vrací URL aktuálního adresáře tematických souborů (tematického „katalogu“).

Doporučujeme k přečtení. Průvodce vývojem tem pro WordPress: Jak si od nuly vytvořit vlastní temu。

Vytvoření stránkového rozvrhu a šablonových komponent

Standardní webová stránka se obvykle skládá z hlavičky, hlavního obsahu a patice. WordPress vás povzbuzuje, abyste přehodnotili strukturu webové stránky a rozdělili části, které se mohou opakovat, do samostatných souborů. Tyto soubory poté můžete v hlavním šablonovacím souboru zavést pomocí specifických funkcí.

Rozdělení komponent šablony

Vytvořit header.php、footer.php 和 sidebar.php…in header.php V tomto textu je potřeba zahrnout celou část obsahu a ukončit ji výrazným hlavním kontejnerem, např. značkou ` footer.php Většinou končí značkami „“.

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

Sestavit kompletní stránku

V šabloně stránky (např.) index.php、single.phpV tomto dokumentu můžete použít následující funkce k načtení těchto komponent:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php Pokud soubor neexistuje, bude načten. template-parts/content.phpTo výrazně zvýšilo využitelnost a udržovatelnost kódu.

Závěr

Vytvoření WordPress tématu od nuly je systematický proces učení. Nejprve musíte nastavit správné lokální vývojové prostředí a pochopit základní strukturu souborů tématu. Klíčové je ovládnout hierarchii šablon v WordPressu, která určuje, jak je různý obsah zobrazen. functions.php Pro soubory temat můžete přidat výkonné funkce a vlastnosti a dodržovat osvědčené postupy při správě stylů a skriptů. Nakonec můžete vytvořit kód temat s jasnou strukturou a snadnou údržbou tím, že stránky rozdělíte na šablony pro záhlaví, patu, boční lišty a další části a poté je sestavíte pomocí funkcí poskytovaných WordPressem. Dodržováním těchto kroků nejenže vytvoříte své první téma, ale také položíte solidní základ pro budoucí vývoj složitějších a profesionálnějších projektů.

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

Časté dotazy

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

Ano, PHP je základním programovacím jazykem WordPressu. Soubory šablon temat (např.) index.php、page.php) a funkční soubory (functions.phpVšechny tyto soubory jsou PHP soubory. Abyste mohli dynamicky vypisovat a manipulovat s daty v WordPressu, musíte ovládat základní syntaxi PHP, podmínkové příkazy, cykly a použití funkcí.

Při vývoji tématu, jaký je rozdíl mezi soubory „page.php“ a „front-page.php“?

page.php Slouží k renderování jednotlivých “stránek” (Pages) vytvořených v WordPressu, např. “O nás”, “Kontakt” atd. front-page.php Jedná se o šablonu určenou výhradně k renderování “hlavní stránky” webového webu. V administraci WordPressu, v sekci “Nastavení” → “Čtení”, pokud zvolíte možnost “Jedna statická stránka” a nastavíte “Hlavní stránku” na konkrétní stránku, bude WordPress tuto stránku používat jako hlavní stránku webového webu. front-page.php Zobrazit tuto stránku. Pokud… front-page.php Pokud daná položka neexistuje, bude použita náhradní možnost. page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

Použití wp_enqueue_style() Jedná se o metodu oficiálně doporučenou společností WordPress. Zajišťuje, že se soubor se šablonami načte pouze jednou, i když jej odkazují více pluginů nebo částí témat. Usnadňuje tak zpracování závislostí mezi jednotlivými šablonami (například pokud vaše šablony závisí na nějakém základním frameworku). Kromě toho lépe komunikuje s funkcemi vyhrazenými k ukládání dat do mezipaměti (cache) a s pluginy, a umožňuje podtematům snadno přepsat vzhled šablon nadřízených témat.

Jak zajistit, aby můj web nebo aplikace podporovaly více jazyků ( internacionalizaci)?

Zpřístupnění tématu více jazyků zahrnuje hlavně dvě kroky. Nejprve je nutné ve všech textových řetězcích tohoto tématu použít funkce pro překlad v rámci WordPressu, jako jsou… ()、_e() 或 esc_html()A určete pro ně, kde se mají nacházet. style.css Definované v Číně. Text DomainNapříklad:_e( 'Hello World', 'my-first-theme' )Zadruhé, použijte nástroje jako Poedit k prohledání kódu vaší tematiky a vytvoření… .pot Šablony souborů – překladatelé mohou na základě nich vytvářet verze dokumentů v různých jazycích. .po A po kompilaci .mo Soubory. Umístěte jazykové soubory do složky určené k uložení tematických materiálů (tj. složky obsahujících designové prvky, styly textu atd.). /languages/ V adresáři WordPress automaticky načte odpovídající překlady podle nastavení jazyka webové stránky.