Vývoj tem pro WordPress: Kompletní průvodce a praktický kurz od základů až po pokročilé znalosti

Porozumění architektuře a základním souborům tematického balíčku WordPress

Pro vývoj WordPress tématu je nejprve nutné pochopit jeho základní strukturu a funkci klíčových souborů. Struktura souborů a adresářů v nejjednodušším tématu odpovídá předpisům WordPressu, což zajišťuje, že bude téma správně rozpoznáno a načteno systémem.

Nejprve musí každý WordPress téma obsahovat ve svém kořenovém adresáři dvě soubory: style.css 和 index.php。 style.css Nejde jen o šablony stylů – jejich důležitější rolí je sloužit jako “návod” k použití daného tématu. Tento soubor musí obsahovat specifický CSS komentář, který uvádí název tématu, autora, popis, verzi a další základní informace. Bez tohoto komentáře nebude WordPress schopen tento motiv najít v menu “Vzhled” v administraci.

Zadruhé, index.php Jedná se o hlavní šablonový soubor tématu – je to výchozí, záložní šablona webové stránky. Bez ohledu na to, jaký typ stránky se pokouší WordPress zobrazit, pokud nenajde konkrétnější šablonu, použije právě tuto hlavní šablonu. index.php Představuje obsah. To je základní kámen celé logiky tohoto tématu.

Doporučujeme k přečtení. Komplexní analýza vývoje temat pro WordPress: Praktický průvodce od základů po pokročilé dovednosti。

Základní soubor tématu

Kromě dvou výše uvedených nutných souborů existuje také několik klíčových šablonových souborů, které tvoří strukturu různých stránek. Například… header.php Odpovídá za vytváření hlavičky stránky, která obvykle obsahuje informace o webových stránkách. Region, logo webové stránky a hlavní navigační menu. footer.php Takto je zodpovědný za vytváření obsahu v podokně na spodní straně stránky, který zahrnuje informace o autorských právech, pomocné navigační prvky atd. sidebar.php Byl definován rozvrh bočního panelu. V hlavním šabloně lze toto nastavení upravit pomocí… get_header()、get_footer() 和 get_sidebar() Tyto tři funkce slouží k načtení těchto souborů.

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

Ústředním bodem zobrazení obsahu je… single.php Slouží k zobrazení jediného článku.page.php Slouží k zobrazení samostatných stránek. archive.php Slouží k zobrazení seznamů archivů, jako jsou kategorie a tagy. Systém úrovní šablon v WordPressu určuje, že systém bude hledat a načítat vhodné šablonové soubory postupně od nejkonkrétnějších až po nejobecnější. Porozumění tomuto uspořádání je předpokladem pro vývoj pokročilých temát (tém).

Ovládnutí základního kódu WordPressu a šablonových značek

Klíčová logika tematických šablon WordPress spočívá v dotazování, získávání a zobrazování dat. Toho je dosaženo především prostřednictvím dvou hlavních částí: funkcí tematických šablon WordPress (šablonových značek) a struktury The Loop.

Hlavní cyklus pro zobrazení dat

The Loop je mechanismus v WordPressu určený k zpracování více příspěvků. Jedná se o kontrolní strukturu, která se používá k… if ( have_posts() ) : while ( have_posts() ) : the_post(); Taková syntaxe slouží k ověření a procházení všech článků nalezených na aktuální stránce. Uvnitř cyklu můžete použít řadu šablonovacích značek k zobrazení informací o aktuálním článku. the_title() Titul článku:the_content() Výstupní text: „You are a professional translation engine. Translate the following Chinese text into Czech: ‘You are a professional translation engine.’“the_permalink() Vytvořte odkaz na článek.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article>
        <h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </article>
<?php endwhile; endif; ?>

Výkonné funkce tematických funkcí

WordPress poskytuje obrovské množství vestavěných funkcí pro získávání a manipulaci s daty. Například…wp_nav_menu() Slouží k registraci a zobrazení navigačního menu;bloginfo() 或 get_bloginfo() Slouží k získávání informací o webových stránkách, jako je název webové stránky, popis, URL a podobně.dynamic_sidebar() Slouží k zobrazení widgetů v oblasti určené k přípravě widgetů. Tyto funkce představují most mezi vaší HTML strukturou a daty z backendu WordPress.

Doporučujeme k přečtení. Od nuly: Základy práce s tematikami pro WordPress。

Kromě toho jsou podmínkové značky (Conditional Tags) velmi užitečným nástrojem pro ovládání logiky šablon. Například…is_home() Zjistit, zda se právě nacházíme na domovské stránce blogu.is_single() Zjistit, zda se jedná o stránku s jedním článkem.is_page() Zjistěte, zda se jedná o samostatné stránky. Díky nim můžete v jednom souboru šablony implementovat složitou podmínkovou výstupní zprávu.

Vytvoření responsivního rozvrhu a načtení front-end zdrojů

Moderní WordPress tématy musí být responzivní, tedy schopné se přizpůsobit různým velikostem obrazovek – od počítačových monitorů až po mobilní telefony. Toho se obvykle dosahuje pomocí CSS mediálních dotazů (Media Queries). Kromě toho je pro zvýšení efektivity vývoje a lepšího uživatelského zážitku důležité správně načítat soubory CSS a JavaScript.

Správné načtení stylů a skriptů

WordPress důrazně doporučuje používat… wp_enqueue_style() 和 wp_enqueue_script() Měli byste použít funkce pro načítání zdrojových souborů, místo aby byly tyto informace přímo zapsány do šablon. 或 Tagy. Tímto způsobem lze lépe spravovat závislosti, předejít opakovanému načítání a zajistit správný pořadí načítání. Správný postup je tyto funkce připojit („mount“) na odpovídající místa. wp_enqueue_scripts Na tomhle háčku.

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

function my_theme_enqueue_assets() {
    // 加载主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 加载一个自定义的 CSS 文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );
    // 在页面底部加载 jQuery 和一个自定义脚本
    wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

Implementovat responsivní design

Reaktivní design obvykle začíná s přístupem „Mobile First“ (přednost mobilním zařízením). style.css Nejprve vytvořte základní styly vhodné pro malé obrazovky a poté pomocí postupně rozšiřujících se mediálních dotazů přidejte nebo přepíšete styly pro tablety a stolní počítače. Ujistěte se, že mediální prvky, jako jsou obrázky, jsou správně zpracovány. max-width: 100%; 和 height: auto; To zabrání přetékání obsahu mimo kontejner. Současně se používají metatagy pro nastavení zobrazení (viewport meta tags). <meta name=”viewport”>(Obvykle již bylo provedeno…) wp_head() Výstup funkce je nezbytnou podmínkou pro responzivní design.

Implementace personalizace témat a pokročilých funkcí

Výborný téma by mělo umožnit uživatelům určitou míru personalizace bez nutnosti měnit kód. Toho je dosaženo především pomocí WordPress Customizeru a stránek s nastaveními tématu (theme options pages).

Využitím vlastních nastavení (customizers) lze interakci vylepšit.

WordPress Customizer poskytuje interaktivní způsob prohlížení výsledků změn nastavení tématu v reálném čase. Můžete jej použít k úpravám tématu přímo během procesu nastavování. $wp_customize->add_setting() 和 $wp_customize->add_control() Metoda umožňuje přidat nové nastavení a ovládací komponenty do vlastního přizpůsobení (customizeru). Například lze přidat možnost, která umožňuje v reálném čase měnit barvu nadpisu webové stránky.

Doporučujeme k přečtení. Návod k vývoji témat pro WordPress: vytvořte své první téma od nuly.。

function my_theme_customize_register( $wp_customize ) {
    // 添加一个设置项（存储在数据库中的值）
    $wp_customize->add_setting( 'header_color', array(
        'default'           => '#333333',
        'transport'         => 'postMessage', // 允许实时预览刷新
        'sanitize_callback' => 'sanitize_hex_color',
    ) );
    // 为该设置项添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label'    => __( '标题颜色', 'my-theme' ),
        'section'  => 'colors',
        'settings' => 'header_color',
    ) ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );

Vytvoření vlastního šablónu stránky

Kromě standardních šablon můžete vytvořit také vlastní šablony pro konkrétní stránky. K tomu stačí na začátek souboru šablony přidat speciální PHP komentář. Například pro vytvoření šablony s názvem “Celoplošná stránka” („Full-width page“): template-fullwidth.php：

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽页面模板
 */

Takto mohou uživatelé při úpravě stránek v pozadí vybrat možnost “Stránka celé šířky” z rozevíracího seznamu “Vlastnosti stránky”. Uvnitř šablony můžete navrhnout strukturu, která nebude vyžadovat žádné další volání funkcí. get_sidebar() Jedinečné uspořádání.

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

Dodržovat osvědčené postupy a optimalizovat výkon

Vývoj webových temat (tém) není pouze o realizaci funkcí, ale také o kvalitě kódu, bezpečnosti a výkonu. To má význam pro stabilitu, bezpečnost a rychlost načítání webové stránky.

Ujistěte se, že je kód bezpečný a překladatelný.

Bezpečnost má nejvyšší prioritu. Všechna data získaná ze strany uživatelů nebo z databáze a následně zobrazená na stránce musí být před zobrazením označena speciálními značkami („escape“). K tomu slouží funkce jako… esc_html(), esc_attr(), esc_url() Používejte escape značky pro HTML obsah, atributy a URL adresy. Nikdy nesmíte věřit původním datům pocházejícím od uživatelů nebo z databází.

Aby bylo možné používat dané téma uživateli po celém světě, je nutné internacionalizovat všechny textové stránky určené pro uživatele. __() 或 _e() Funkce obalí řetězec a poté ho spojí s dalšími daty. textdomain „Načítání překladu…“ – To se nachází na začátku tohoto průvodce. style.css Toto by mělo být zohledněno v hlavičkových poznámkách (header comments) a ve všem vlastním kódu.

Optimalizace výkonu databázových dotazů a načítání dat

Chybné dotazy do databáze jsou hlavní příčinou zpomalení webové stránky. V cyklech se vyhněte provádění dalších dotazů uvnitř šablon. Pro získávání dat používejte funkce poskytované WordPressem, které jsou obvykle již optimalizovány. U složitějších dotazů zvažte použití Transients API k jejich uložení do mezipaměti (cache), čímž se sníží počet opakovaných dotazů do databáze.

Co se týká statických zdrojů, ujistěte se, že skripty a soubory se styly ve frontě na zpracování jsou co nejvíce sloučeny a komprimovány. Zvažte také použití technik asynchronního nebo odloženého načítání. Využívejte vybavení pro ukládání dat do mezipaměti prohlížeče a ujistěte se, že obrázky používané v tématu jsou řádně optimalizovány.

Závěr

Vývoj tem pro WordPress je systémový proces, který vyžaduje, aby vývojáři úzce spojili front-end technologie (HTML, CSS, JavaScript) s klíčovými PHP funkcemi a API WordPressu. style.css 和 index.php Základní funkce, poznavání úrovní šablon, cyklů a šablonových značek; vytváření responsivních rozhraní, správné načítání zdrojových souborů, až po personalizaci pomocí přizpůsobení a možností; nakonec musí být celý vývojový proces veden zásadami bezpečného, udržovatelného a vysokým výkonem kódu.

Díky dodržování pokynů v tomto dokumentu můžete vytvořit profesionální téma s jasnou strukturou, silnými funkcemi, dobrým uživatelským zážitkem a v souladu s nejlepšími postupy ekosystému WordPress.

Časté dotazy

Je potřeba se naučit PHP pro vývoj nějakého tématu (tematického designu/webové stránky)?

Ano, to je nutné. Samotné jádro WordPressu je napsáno v PHP a všechny šablony, volání funkcí a logika zpracování dat závisí na PHP. I když můžete kopírovat a upravovat kousky kódu ze stávajících temat, abyste pochopili principy, řešili problémy a implementovali vlastní funkce, je základní znalost PHP nezbytná.

Jak přimět můj téma, aby podporovalo blokový editor WordPressu (Gutenberg)?

Aby vaše téma lépe podporovalo editory bloků, musíte udělat dvě věci. Za prvé, ve vašem tématu… functions.php Přidat do souboru add_theme_support( ‘editor-styles’ ); A také přidejte do fronty soubor se šablonou editoru, aby byl styl editoru v pozadí stejný jako ten na přední straně. Za druhé, využijte… add_theme_support() Funkce slouží k deklaraci podpory určitých funkcí a stylů bloků, např. široké zarovnání, vlastní nastavení barev atd. Pro pokročilejší funkce je nutné vytvořit vlastní styly bloků nebo si bloky přizpůsobit podle potřeb.

Proč se moje vlastní téma nezobrazuje v administraci WordPressu?

Toto se téměř vždy děje z následujících důvodů: style.css Problém je způsoben nesprávným formátem nebo chybou v hlavičkových poznámkách souboru. Prosím, pečlivě zkontrolujte, zda na nejvyšším místě tohoto souboru najdete blok CSS poznámek v souladu se standardy WordPress. V tomto bloku musí být obsažná řádek “Theme Name”. Kromě toho se ujistěte, že složka vašeho tématu je správně umístěna na příslušném místě. /wp-content/themes/ V adresáři.

Jak vytvořit podtémata pro svůj téma?

Vytvoření podtématu je doporučený způsob, jak bezpečně upravit funkce mateřského tématu. Potřebujete vytvořit novou složku, která obsahuje alespoň jedno podtéma. style.css Soubor a jeden… functions.php Soubor. V podtématu… style.css V části “Hlava” musíte kromě běžných informací použít řádek „Template:“ pro určení názvu adresáře nadřazeného tématu. Poté, ve vlastním podtématu… functions.php V Číně, prostřednictvím add_action( ‘wp_enqueue_scripts’, … ) Šablona stylů pro nadřazené téma – poté můžete přidat vlastní styly a funkce, které budou překrývat nebo rozšiřovat chování tohoto nadřazeného tématu.