Vývoj tem pro WordPress: Postavte si svou první vlastní temu od nuly

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

Než začnete psát kód, je nezbytné nejprve pochopit základy jakéhokoli WordPress tématu: soubory šablon a stylové soubory. WordPress renderuje různé části webové stránky vyvoláváním řady specifických souborů, které dodržují standardizovaná pravidla pojmenovávání. Minimalizované téma potřebuje pouze dva soubory:index.php(Hlavní šablonové soubory) astyle.css(Klíčové stylové šablony a soubory s informacemi o tématu), ale pro vytvoření webové stránky s bohatými funkcemi potřebujeme více.

style.cssSoubor neobsahuje pouze CSS pravidla, ale také blok komentářů v hlavičce souboru, který definuje metadata tématu – jako je název tématu, autor, popis a verze. Takhle WordPress rozpoznává jednotlivá témata. Například základní blok komentářů v hlavičce vypadá následovně:

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Kromě základních souborů obsahuje typická struktura tématu také:header.php(Pokyv hlavou)footer.php(V dolní části stránky),sidebar.php(Sidebar) Afunctions.php(Tematic function files). Pochopit, jak tyto soubory použít pomocí šablonovacích značek (např.get_header(), get_footer()Modulární kombinace je klíčem k efektivnímu vývoji.

Doporučujeme k přečtení. Úvodní průvodce vývojem temát pro WordPress: Vytvořte si vlastní webovou stránku od nuly。

Vytvoření tematického souboru a adresáře

Nejprve potřebujeme najít složku ve složce instalace WordPress.wp-content/themes/Vytvořte novou složku na požadovaném místě. Název této složky by měl odpovídat identifikátoru vašeho tématu. Doporučujeme používat malá písmena, čísla a spojovníky, například:my-first-themeVšechny soubory týkající se konkrétních témat budou umístěny zde.

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

Vytvořit soubor se základními šablonami stylů

Jak bylo již dříve zdůrazněno,style.cssJe to nutné. Vytvořte tento soubor v složce se tematikou a vyplňte jej kompletními informacemi o tématu. Poté můžete začít psát základní kód CSS, který určí vzhled webové stránky. Aby se zabránilo ovlivnění výchozími nastaveními prohlížečů, obvykle začínáme resetováním stylů.

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

Vytvořit hlavní šablonový soubor

Dále vytvořteindex.phpToto je výchozí, nejdůležitější šablonový soubor. Jeho základní struktura by měla obsahovat odkazy na hlavičku, cyklus obsahu a patu stránky. Šablonové značky jsou vestavěné funkce WordPressu, které slouží k vložení dynamického obsahu.
„Minimalistický“index.phpPočáteční verze může vypadat následovně:

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            // 文章内容将在这里输出
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

Rozložení šablony: hlava, spodní část a boční lišta

Pro opakované využití kódu a lepší čitelnost se stránkové elementy typické pro všechny WordPress tématy obvykle oddělují do samostatných souborů.

Implementace šablony hlavy stránky

Vytvořitheader.phpTento soubor obsahuje hlavičku HTML dokumentu.到Část obsahu určená k aktivaci tagů, stejně jako navigační oblast v horní části webové stránky. Mezi klíčové šablony a tagy patří…bloginfo()Slouží k získávání informací o webovém site, stejně jako…wp_head()„Hook“ – umožňuje pluginům a temám částečně vložit kód do daného systému.
Základníheader.phpPříklad:

Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Vytvoření vlastní webové stránky od nuly。

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1005>
<?php wp_body_open(); ?>
<header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a href="/cs/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p class="site-description"><?php bloginfo('description'); ?></p>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

Implementace šablony pro spodní část stránky

Vytvořitfooter.phpObsahuje veškerý obsah nacházející se za koncem hlavní oblasti obsahu, jako jsou informace o autorských právech v patičce stránky, a také velmi důležité prvky.wp_footer()Hookové volání jsou nezbytná pro správné fungování mnoha pluginů (např. pro analýzu kódu).

<footer class="site-footer">
    <p>©  . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
\n
<p></p>

Vylepšení funkcí temat a možností personalizace

functions.phpJde o “mozek” vašeho projektu – nástroj určený k přidávání nových funkcí, registraci různých prvků (jako je navigační menu nebo oblast s příslušenstvím) a nastavování stylů skriptů, a to bez nutnosti měnit základní soubory projektu.

Funkce podporované při registraci tématu:

在functions.phpV tom můžete použít…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 vlastních logů je standardní vlastností 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

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

Zahrnout do šablony stylů a skriptů

Správný způsob načítání stylů a skriptů je použít…wp_enqueue_style()和wp_enqueue_script()Funkce a jejich připojení kwp_enqueue_scriptsNa háčku. To zajišťuje správné řízení závislostí mezi jednotlivými komponentami a předchází jejich opakovanému načítání.

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');

Závěr

Od vytvoření složky pro témata a…style.cssZačít, až po vytvoření.index.phpRozložit na…header.php和footer.phpČekáme na soubory šablon a poté pokračujeme dále…functions.phpSoubory obsahují klíčové funkce a zdroje potřebné pro vaši webovou tematiku (WordPress theme), a tento proces tvoří základní rámec pro vývoj takových tematických řešení. Každý krok zdůrazňuje koncept hierarchie šablon v WordPressu a osvědčené postupy, jako je správné používání šablonových značek a „hooků“ (speciálních funkcí). Po zvládnutí těchto základů budete mít solidní výchozí bod pro přizpůsobování a rozšiřování funkcí tematiky, aby splňovaly požadavky různých projektů.

Časté dotazy

###: Kolik souborů potřebuje minimálně WordPress téma?
Pro fungující WordPress téma jsou potřeba minimálně dvě soubory:index.php和style.cssMezi nimi jestyle.cssKomentářový blok na začátku souboru musí být přítomen a obsahovat správné informace o tématu – to je nutný požadavek pro rozpoznání tématu v WordPressu.

Doporučujeme k přečtení. Od nuly ke jedničce: Kompletní průvodce vývojem WordPress temat a praktické tutoriály。

Jak přidat do svého tématu malou oblast nástrojů?

Potřebujete projít prostřednictvím…functions.phpSoubor slouží k registraci nástrojů do oblasti pro přidávání doplňkových funkcí (postranní lišta). Použijte ho k tomuto účelu.register_sidebar()Funkce a určení jejích parametrů, jako je název, ID a popis. Poté můžete použít tuto funkci v odpovídajících šablonových souborech (například…)sidebar.phpPoužívá se v…)dynamic_sidebar()Funkce slouží k jejímu volání.

Proč se můj vlastní navigační menu nezobrazuje?

To je obvykle způsobeno tím, že to nebylo provedeno…functions.phpSprávně zaregistrujte umístění vaší restaurace. Ujistěte se, že jste použili správné informace.register_nav_menus()Funkce slouží k registraci umístění jídla (např. ‘primary’) a…header.phpVolání v…wp_nav_menu()V té chvíli…‘theme_location’Hodnoty nastavených parametrů jsou úplně shodné s těmi, které byly zadány při registraci. Nakonec je ještě potřeba v záložce “Vzhled > Menü” v administraci WordPressu přiřadit určité menu na toto místo.

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

我应该在什么时候使用get_template_part()函数？

get_template_part()Funkce slouží k modularizaci znovupoužitelných úryvků kódu, což je obzvláště užitečné při výstupu obsahu různých formátů v cyklech článků. Například můžete vytvořit funkci, která…content.phpSoubor definuje obecnou HTML strukturu každého článku a poté…index.phpPoužít v cykluget_template_part(‘content’)Použijte to k jeho volání. Tím se zvyšuje využitelnost a udržovatelnost kódu, a také je možné vytvářet profesionálnější šablony (např.)content-page.phpTo se stalo možným.