Ultimátní průvodce vývojem temat pro WordPress: Postavte si své první vlastní téma od nuly

Přípravné práce a nastavení prostředí.

Než začnete psát kód, je velmi důležité mít stabilní a efektivní lokální vývojové prostředí. To vám umožní pracovat offline a zároveň vám ušetří rizika spojená s přímými operacemi na online serverech. Nejprve si musíte nainstalovat lokální serverové prostředí, např. XAMPP, MAMP nebo profesionálnější nástroj Local by Flywheel. Tyto nástroje pro vás nakonfigurují Apache, MySQL a PHP – což jsou základy pro spuštění WordPressu.

Následně si musíte stáhnout nejnovější základní soubory WordPress a nainstalovat je na svůj lokální server. Po dokončení základní instalace můžete začít vytvářet svůj adresář s tematikou (témata). Všechna temata WordPressu se nacházejí… /wp-content/themes/ V adresáři. Zde vytvořte novou složku, například… my-first-themeNázev této složky je právě vaším identifikačním symbolem (tematickým označením).

Efektivní WordPress téma musí obsahovat alespoň dvě základní soubory:style.css 和 index.php。style.css Soubor není pouze šablonou stylů, ale také “občanským průkazem” daného tématu – jeho poznámky v hlavičce souboru obsahují veškeré metadaty tohoto tématu.

Doporučujeme k přečtení. Vytvořte profesionální web: kompletní návod k vývoji vlastního WordPressového tématu od nuly.。

Informace o záhlaví souboru se šablonou stylů tématu

style.css Na začátku souboru musí být obsažen specifický CSS komentář, který popisuje váš téma pro WordPress. Tyto informace se zobrazí na administrativní stránce “Vzhled” -> “Témata”.

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: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
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 Je určeno k internacionalizaci a mělo by odpovídat názvu vaší složky se tematikou. index.php Jedná se o výchozí šablonový soubor tématu, který slouží jako záložní šablona pro všechny stránky. Původně mohlo jít pouze o jednoduchou HTML strukturu určenou k ověření, zda je téma správně rozpoznáno systémem WordPress.

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

WordPress využívá inteligentní systém nazývaný “systém úrovní šablon” (Template Hierarchy), který rozhoduje, který soubor šablony má na požadavek konkrétní stránky načíst. Porozumění těmto pravidlům je základem při vývoji temát (templates). Jednoduše řečeno, když uživatel navštíví stránku, WordPress hledá odpovídající soubor šablony postupně od nejkonkrétnějšího po nejobecnější.

Například, když se pokusíte zobrazit blogový článek s ID 5, WordPress bude postupně hledat:single-post-5.php -> single-post.php -> single.php -> singular.php – A nakonec index.phpPokud je nalezen soubor, který odpovídá požadavkům, bude použit; v opačném případě bude pokračováno v hledání dále.

Vytvořit šablonu jednotlivé stránky článku

single.php Jedná se o standardní šablonu určenou k zobrazení jednotlivých blogových článků. V této šabloně budete používat sadu základních šablonovacích tagů a funkcí WordPressu k zobrazení obsahu článku.

Doporučujeme k přečtení. Úvod do vývoje WordPress tem: Postavte si svou první temu od nuly。

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1008>
            <header class="entry-header">
                <h1 class="entry-title"><p><strong> Řekněte mi něco o sobě.</strong></p></h1>
                <div class="entry-meta">
                    Zveřejněno:  | Autor:
                </div>
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
            <footer class="entry-footer">
                &lt;?php the_tags(&#039;标签：&#039;, &#039;, &#039;, &#039;<br>'); ?&gt;
            </footer>
        </article>
        <?php
        // 输出上一篇、下一篇文章导航
        the_post_navigation();
    endwhile;
    ?>
</main>

Tento šablonový soubor (template) byl použit. the_post() Přijďte nastavit globální nastavení. $post Proměnné, a poté prostřednictvím… the_title()、the_content() Funkce vygeneruje data článků. Zároveň byly zavedeny šablony a komponenty:get_header(), get_sidebar(), get_footer()。

Vytvořit šablonu stránky

page.php Šablony slouží k zobrazení statických stránek. Jejich struktura je… single.php Podobně, ale obvykle neobsahují typické metadaty článků, jako jsou kategorie nebo tagy. Můžete vytvořit více specifických šablon stránek podle potřeby – například šablonu pro stránku “O nás”. page-about.php WordPress automaticky aplikuje tyto nastavení na stránky, jejichž název nebo přezdívka (slug) je “about”.

Integrace šablonových komponent a navigačního menu

Aby byl kód modulární a znovu použitelný, rozdělují tematika WordPress obvykle části jako záhlaví, patička, boční lišty atd. do samostatných souborů “šablonových komponent”. Tímto způsobem lze jednotlivé části stránky snadno upravit nebo nahradit bez nutnosti měnit celý kód. get_template_part() Funkce – tyto komponenty můžete snadno vložit do různých šablon.

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

Vytvoření hlavního souboru pro téma

header.php Soubor obsahuje hlavičku HTML dokumentu. Regionální části webové stránky, stejně jako viditelné prvky v horní části stránky, jako je logo a hlavní navigace.

<!DOCTYPE html>
<html no numeric noise key 1010>
<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 1007>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( has_custom_logo() ) {
            the_custom_logo();
        } else {
            ?>
            <h1 class="site-title"><a href="/cs/</?php echo esc_url( home_url( '/' ) ); ?>"><p><strong> Název blogu: </strong><br><br><img src='images/logo.png'> <br><br><strong> Kategorie: </strong><br><br><strong></a></h1>
            <p class="site-description"><?php bloginfo( 'description' ); ?></p>
            <?php
        }
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-primary',
                'menu_id'        =&gt; 'primary-menu',
                'container'      =&gt; false,
            )
        );
        ?&gt;
    </nav>
</header>

Klíčové funkce wp_head() Umožňuje jádru WordPressu, pluginům a dalším skriptům přidávat do hlavičky stránky potřebný kód (jako jsou odkazy na CSS a JS soubory).wp_nav_menu() Funkce slouží k výstupu registrovaného navigačního menu.

Umístění navigačního menu pro registraci

Návhiční menu musí nejprve být “zaregistrováno” v určitém místě tematického nastavení, aby ho uživatel mohl následně přidělit v administraci pod položkami “Vzhled” -> “Menu”. To se obvykle provádí v rámci nastavování tématu. functions.php Dokončeno v souboru.

Doporučujeme k přečtení. Naučte se vytvářet WordPress témat od základů: Kompletní průvodce vytvářením personalizovaných webových stránek。

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus(
        array(
            'menu-primary' => esc_html__( '主导航', 'my-first-theme' ),
            'menu-footer'  => esc_html__( '页脚导航', 'my-first-theme' ),
        )
    );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持文章和评论的 RSS feed 链接
    add_theme_support( 'automatic-feed-links' );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Funkce registrovala dvě pozice pro příslušné položky v jídelním lístku. add_theme_support() Funkce: Aktivovali jsme vlastní logo, značky nadpisů a další funkce – to je standardní postup při vývoji moderních WordPress temat.

Pokročilé funkce a styly témat

functions.php Tento soubor patří k vašemu tématu “Řídicí centrum” a slouží k přidávání funkcí, úpravě výchozího chování, načítání skriptů a stylů. Jeho funkce jsou podobné funkcím pluginů, ale je určen výhradně k použití s vaším konkrétním tématem.

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

Bezpečně zavést styly a skripty.

Správný způsob načítání stylů a skriptů je použít… wp_enqueue_style() 和 wp_enqueue_script() Funkce a jejich připojení k wp_enqueue_scripts Tento „akční háček“ je připojen…

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Tento způsob zajišťuje správné nastavení závislostí mezi jednotlivými komponentami a zabraňuje jejich opakovanému načítání. Funkce get_stylesheet_uri() Návrat na hlavní stránku style.css URL, a link that points to a specific web page or resource get_template_directory_uri() URL pro návrat do adresáře témat.

Vytvořte oblast pro nástroje v postranní liště.

Oblast nástrojů (Sidebar) umožňuje uživatelům přizpůsobit obsahové bloky pomocí přetahování v pozadí. Registrování nové oblasti nástrojů je stejně jednoduché. functions.php Dokončeno v…

function my_first_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          => esc_html__( '主侧边栏', 'my-first-theme' ),
            'id'            => 'sidebar-1',
            'description'   => esc_html__( '在此添加小工具。', '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>',
        )
    );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Po registraci budete moci… sidebar.php Použito v šablonových komponentách dynamic_sidebar( 'sidebar-1' ) Funkce již vytváří výstup pro tuto oblast.

Závěr

Tento průvodce systematicky popisuje základní postupy vývoje temat pro WordPress. Začíná vytvořením lokálního vývojového prostředí a vytvořením základních souborů temat, pokračuje pochopením a implementací silného systému vrstev šablon v WordPressu, dále pokračuje integrací komponent šablon, registrací navigačních menu a oblastí nástrojů a nakonec… functions.php Bezpečně rozšiřujte funkce vašeho tématu. Postupujte podle těchto kroků a již jste úspěšně vytvořili vlastní téma s jasnou strukturou, kompletními funkcemi a v souladu s kódovými standardy WordPress. Toto vám poskytne solidní základ pro další vývoj složitějších a funkčnějších témat. Pamatujte, že vývoj témat je proces neustálého učení – klíčem k zlepšování vašich dovedností je pravidelná praxe a studium oficiálních dokumentací.

Časté dotazy

###: Co je to hierarchie šablon v WordPressu?
Řízení úrovní šablon v WordPressu je soubor pravidel, která určují, který šablonový soubor se má použít pro různé typy stránek. Jedná se o postup hledání od konkrétních šablon k obecnějším. Například u konkrétního článku WordPress nejprve hledá specifickou šablonu, která odpovídá ID tohoto článku nebo jeho typu. Pokud tuto šablonu nenajde, postupně přechází na obecnější šablony, a to až do té poslední, která bude použita. index.phpPorozumění hierarchickým vztahům je zásadní pro vytvoření správně strukturovaného tématu.

Proč je nutné používat funkci `wp_enqueue_style` k načítání stylů?

Použití wp_enqueue_style() 和 wp_enqueue_script() Jedná se o standardizovaný způsob načítání zdrojových souborů doporučený oficiálně WordPressem. Umožňuje správně zpracovat závislosti mezi různými soubory (např. zajistit, aby jQuery bylo načteno před vlastními skripty), předchází opakovanému načítání stejných zdrojů a je dobře kompatibilní s dalšími doplňky, podtematy a dalšími komponentami webového systému. Lze jej používat přímo v šablonách. 或 Používání tagů je nepříznivým postupem.

Jaký je rozdíl mezi souborem functions.php a pluginem?

functions.php Soubory jsou součástí tématu a jejich funkce se aktivují spolu s aktivací tohoto tématu a zanikají při změně tématu. Slouží především k přidávání vlastností, které jsou úzce spojeny s vizuálním vzhledem a funkcemi daného tématu. Funkce poskytované doplňky (pluginy) jsou obvykle nezávislé na konkrétním tématu – i po změně tématu zůstávají funkce doplňků aktivní. Obecně platí, že pokud je nějaká funkce silně vázána na styl nebo uspořádání tématu, může být umístěna do souborů souvisejících s tímto tématem. functions.phpPokud jde o univerzální funkci, bude vhodnější ji implementovat jako plugin.

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

Aby téma podporovalo více jazyků, tedy bylo internacionalizováno (i18n), je nutné postupovat podle následujících kroků: Nejprve… style.css „Hlava a všechno“ load_theme_textdomain() Správné nastavení bylo provedeno během volání. Text DomainZadruhé, functions.php Volání v… load_theme_textdomain() Funkce slouží k určení adresáře s jazykovými soubory. Nakonec, a to je nejdůležitější krok, ve všech PHP šablonách tématu… functions.php Ve všech řetězcích určených pro uživatele se používají funkce pro překlad z balíčku WordPress. esc_html__( ‘文本’, ‘my-first-theme’ ) 或 _e( ‘文本’, ‘my-first-theme’ )Po dokončení můžete pomocí nástrojů, jako je Poedit, vytvořit požadovaný výstup. .pot Šablony pro překladatele, které slouží k vytváření překladů do různých jazyků. .po 和 .mo Dokumenty.