Úvod do vývoje WordPress temat: Vytvořte si své první vlastní téma od nuly

Když začnete učit se vývoj webových stránek pomocí WordPressu, vytvoření vlastního tématu je velmi vzrušujícím milníkem. Nejenže vám to umožní plně ovládnout vzhled a funkce vašich webových stránek, ale je to také nejlepší způsob, jak lépe pochopit základní architekturu WordPressu. Tento článek vás provede celým procesem od nastavení prostředí až po vytvoření základního tématu a pomůže vám učinit první krok na cestě k tomu, abyste se stali vývojáři WordPressu.

Přípravné práce před vývojem

Než začnete psát jakýkoli kód, je velmi důležité vytvořit efektivní lokální vývojové prostředí. To vám umožní provádět testování a ladění bez ovlivnění webové stránky online.

Nastavení lokálního vývojového prostředí

Nejprve potřebujeme nainstalovat software pro lokální server. Můžete zvolit nástroje jako XAMPP, MAMP nebo Local by Flywheel. Tyto balíčky obsahují server Apache, databázi MySQL a jazyk PHP a jsou nezbytné pro spuštění WordPressu. Jako příklad uveďme XAMPP: Po instalaci spusťte služby Apache a MySQL a váš počítač se stane lokálním serverem.

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

Následně stáhněte nejnovější verzi WordPressu a rozbalte ji do kořenového adresáře webové stránky na vašem lokálním serveru (např. v prostředí XAMPP).htdocsPoté přistupujte prostřednictvím…http://localhost/your-wordpress-folderPro dokončení slavné “pětiminutové instalace” budete během procesu instalace muset vytvořit databázi a nastavit uživatelské jméno a heslo pro administrátora webové stránky.

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

Připravte si kódový editor a nástroje potřebné k práci.

Výkonný editor kódu může výrazně zvýšit efektivitu vývoje. Mezi dobré možnosti patří Visual Studio Code, PhpStorm nebo Sublime Text. Zejména Visual Studio Code disponuje bohatým množstvím rozšíření pro WordPress a PHP, jako je např. PHP Intelephense, které poskytuje funkce inteligentního doplňování kódu a kontroly gramatiky.

Kromě toho doporučujeme nainstalovat doplněk do nástrojů pro vývojáře webových stránek, např. oficiální doplněk “Theme Check” od WordPressu, který slouží k ověření, zda váš temátikový design splňuje požadované standardy v pozdější fázi vývoje. Také můžete využít funkci “Prohlídnutí elementů” („Inspect Elements“) ve vašem prohlížeči k přímému ladění kódu HTML a CSS.

Porozumění základní struktuře témat WordPressu

Nejzjednodušenější WordPress téma vyžaduje pouze dvě soubory, avšak struktura plně funkčního a standardního WordPress projektu zahrnuje více specifických souborů, které každý plní svou vlastní úlohu.

Hlavní soubor se šablonami

Každý WordPress téma musí mít…style.cssSoubor. Tento soubor není pouze souborem CSS, který definuje vzhled tématu, ale také blok poznámek v hlavičce souboru, který slouží jako “identita” tohoto tématu a obsahuje veškeré metadaty potřebné k rozpoznání tématu WordPressem. Základní blok poznámek v hlavičce vypadá následovně:

Doporučujeme k přečtení. Vývoj tem pro WordPress: Kompletní průvodce vytvářením vlastních tem od nuly。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Mezi nimi,Text DomainPoužívá se pro internacionalizaci a slouží k následnému volání funkce pro překlad.__()或_e()Identifikátor používaný při určitém čase.

Základní šablony souborů

Dalším nezbytným souborem jeindex.phpJedná se o výchozí šablonu pro dané téma. Když WordPress nenajde žádné konkrétnější šablony (např.single.php或page.phpPři renderování stránek se tedy použije.

Pouze s těmito dvěma soubory může váš téma být zobrazeno v seznamu “Vzhled” -> “Témata” v administraci WordPress a může být aktivováno. Samozřejmě, v současné době je to ještě pouze prázdný rámec. Aby téma skutečně fungovalo, budeme muset vytvořit několik klíčových šablonový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

Nejprve vytvořte…header.phpObsahuje záhlaví HTML dokumentu, například:<doctype>Prohlášení,<head>Oblast (kde by mělo být použito)wp_head()Funkce zavádí základní skripty a styly WordPressu, stejně jako značky pro hlavičku webové stránky.

Dále je třeba vytvořit…footer.phpObsahuje obsah podstránky webové stránky a před koncem provede určitou akci (např. zavolá nějakou funkci).wp_footer()Funkce – jedná se o hook, který je nezbytný pro mnoho pluginů při přidávání kódu na spodní část stránky.

Na závěr vytvořte…functions.phpTento soubor není nutný, ale představuje “mozek” daného tématu. Zde můžete přidávat funkce podporující chování tématu, registrační menu a boční lištu, načítat soubory se styly a skripty, stejně jako definovat různé vlastní funkce.

Doporučujeme k přečtení. Jak vyvinout vlastní WordPress téma od nuly.。

Klíčové funkce vytváření témat

Po vytvoření základních souborů můžeme začít „vdechovat život“ do tématu a dodat mu základní funkce webové stránky.

Implementace navigačního menu

Moderní webové stránky obvykle mají navigační menu. Nejprve musíte…functions.phpPoužijte to v čínštině.register_nav_menus()Funkce slouží k registraci umístění jídelních položek.

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

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Tento kód registroval dvě pozice pro menu: “Hlavní navigační menu” a “Podpisové menu”. Poté, ve stránkách, kde chcete menu zobrazit (například…header.php(Vnitřní text) Použijtewp_nav_menu()Funkce ji volá.

wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) );

Uživatelé mohou nyní v administraci WordPress v sekci “Vzhled” → “Menu” vytvářet menu a přiřazovat je do pozice “Hlavní navigační menu”.

Aktivujte výjimečné obrázky k článkům a boční panel.

Mnoho témat podporuje zkratky článků (výrazné obrázky) a boční lištu s příslušnými nástroji. Stejně tak…functions.php的my_first_theme_setupDo funkce přidejte následující kód, abyste tyto funkce aktivovali:

add_theme_support( 'post-thumbnails' ); // 启用文章特色图像
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 启用HTML5标记支持

Chcete si zaregistrovat oblast pro přidání panelových nástrojů (sidebar widgets)? Pro to použijte…register_sidebar()Funkce:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在这里添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>'function my_first_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'My first theme',  
            'id' =&gt; 'my_first_theme',  
            'desc' =&gt; 'Sidebar for my first theme',  
        ),  
    ) );  
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Následně, ve šablonovém souboru (např.sidebar.phpPoužívá se v…)dynamic_sidebar( 'sidebar-1' )Zobrazí tuto oblast.

Integrace šablon a přidávání stylů

Nyní spojíme jednotlivé části šablon a přidáme jim základní styly, aby webové stránky měly viditelnou podobu.

Použití šablony k načtení funkce

WordPress poskytuje několik základních funkcí pro načítání jiných šablonových souborů, což zajišťuje modularitu a udržovatelnost kódu. Ve vašem…index.phpVe struktuře by mělo být následující uspořádání:

<?php get_header(); ?>

<main id="main" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation(); // 文章导航
    else :
        get_template_part( 'template-parts/content', 'none' ); // 没有找到内容时的模板
    endif;
    ?>
</main>

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

get_header(), get_sidebar(), get_footer()Funkce zavádějí příslušné šablony zvlášť.get_template_part()Jedná se o flexibilnější funkci, která vás povzbuzuje k oddělení bloků obsahu, které se často opakují (např. shrnutí článků).template-partsV samostatných souborech uvnitř složky, například…content.php。

Vytvoření základních stylů a responsivního designu

Teď otevřete.style.cssZačněte přidávat styly ke svému tématu. Nejprve nastavte některé globální styly, jako je box model, písma a barvy.

* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Pro dosažení responsivního designu se používají mediální dotazy k úpravě rozložení stránek podle různých velikostí obrazovek. Například lze nastavit, aby se postranní lišta při menších obrazovkách přesunula pod hlavní obsah.

@media (max-width: 768px) {
    .site-main {
        width: 100%;
    }
    #sidebar {
        width: 100%;
        margin-top: 2rem;
    }
}

Nezapomeňte…header.php的<head>Část obsahu byla doplněna metakódy pro zobrazení v okně (viewport meta tags), aby bylo zajištěno správné zvětšování obsahu na mobilních zařízeních.<meta name="viewport" content="width=device-width, initial-scale=1">。

Závěr

Od vytvoření něčeho, co obsahuje…style.css和index.phpZačínáte s vytvořením složky a postupně vyvíjíte kompletní téma WordPress s navigací, bočním panelem a responzivním layoutem. Tento proces pokrývá základní koncepty vývoje témat pro WordPress. Naučili jste se, jakfunctions.phpRozšíření funkcí tematického systému: Jak používat systém hierarchických šablon k organizaci kódu a jak převést návrh na front-end kód v podobě HTML a CSS. To je jen začátek – dále můžete zkoumat pokročilejší formáty šablon (např.…)single.php, page.php, archive.phpMožnosti zahrnují vlastní typy článků, nástroje pro personalizaci témat, API pro vytváření vlastních designů témat, a dokonce i použití frameworků jako Sass a JavaScript k vytvoření složitějších a modernějších designů. Neustálé procvičování a sledování oficiálních dokumentací pro vývojáře jsou nejlepšími způsoby, jak své dovednosti zlepšit.

Časté dotazy

Je nutné při vývoji témat používat podtémata?

Nemusí to být nutné. Vytvořit nezávislý téma od začátku je zcela možné a je to také nejlepší způsob, jak se naučit základní principy. Používání podtémat (subtopics) je obvykle osvědčenou praxí, pokud je potřeba upravit nebo přizpůsobit existující nadtema (např. téma populárního frameworku), protože to zajišťuje, že vaše vlastní úpravy nebudou přepsány při aktualizaci nadtematu. U zcela nových vývojových projektů je běžnější vytvářet nezávislá témata od nuly.

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

Zpřístupnění tématu více jazyků ( internacionalizace ) zahrnuje hlavně dvě kroky. Nejprve je třeba zajistit, že…style.css„Hlava a…“functions.phpVšechny textové pasáže, které je potřeba přeložit, jsou zabaleny do funkcí pro překlad v WordPressu, například:__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )Zadruhé, budete potřebovat nástroj jako Poedit k vytvoření….potPřeložte šablonový soubor a poté pro každý jazyk vytvořte odpovídající verzi..po和.moSoubor a umístěte ho do tématu./languagesV adresáři.

Jak po dokončení vývoje tématu provést jeho publikaci?

Před publikací musíte svůj téma pečlivě otestovat pomocí pluginu “Theme Check”, abyste se ujistili, že splňuje všechny kódovací standardy a bezpečnostní požadavky adresáře WordPress themes. Odstraňte veškerý ladící kód a poznámky. Poté můžete téma odeslat do oficiálního adresáře WordPress.org (kde je nutná revize), nebo ho zabalit do souboru typu ZIP a poskytnout ho zákazníkům nebo jej distribuovat na svém vlastním webu. Pokud ho distribuujete sami, ujistěte se, že poskytujete jasné návody k instalaci a dokumentaci.

Proč zmizely moje vlastní styly poté, co byly aktualizovány v pozadí?

Pravděpodobně je to proto, že jste přímo upravili soubory používaného mateřského tématu. Když je toto mateřské téma aktualizováno prostřednictvím administrace WordPressu, všechny základní soubory budou nahrazeny novou verzí, což způsobí, že vaše úpravy zmizí. Právě proto se pro jakékoli přizpůsobení systému WordPress důrazně doporučuje používat podtémata. Styly a funkce podtémat se načítají nezávisle na mateřském tématu, takže i v případě aktualizace mateřského tématu zůstanou soubory vašeho podtématu beze změn a veškeré vaše úpravy zachovány.