Průvodce vývojem temát pro WordPress: Postavte vzhled svého webu od nuly

V dnešní oblasti vývoje webových stránek zaujímá WordPress díky své vysoké flexibilitě a rozsáhlému ekosystému významné místo. Podstatou vzhledu a funkcí webové stránky založené na WordPressu jsou právě její tematika (témata). Naučit se vytvářet tematika WordPress od základů vám nejen umožní plně ovládat design webové stránky, ale je to také skvělý způsob, jak hloubě pochopit základní principy fungování WordPressu. Tento článek vás provede všemi kroky potřebnými k vytvoření základní, ale funkční tematiky.

Vývojové prostředí a základní infrastruktura

Než začnete psát první řádek kódu, je velmi důležité vytvořit vhodné lokální vývojové prostředí. Můžete použít nástroje jako XAMPP, MAMP, Local by Flywheel nebo Docker. Ujistěte se, že prostředí obsahuje PHP, MySQL a Apache/Nginx. Poté nainstalujte zcela novou instanci WordPress určenou k testování.

Téma WordPressu je v podstatě něco, co se nachází na adrese /wp-content/themes/ Ve složce v adresáři je název tohoto adresáře zároveň vaším identifikátorem tématu. Uvnitř této složky jsou dvě soubory, které jsou povinné a které tvoří základní strukturu tohoto tématu.

Doporučujeme k přečtení. Vývoj tem pro WordPress od základů po mistrovství: Vytváření vysokopřínosných, personalizovaných webových stránek。

Dokument s informacemi o tématu

Prvním nutným souborem je… style.cssJeho funkce není pouze uložení stylů, ale důležitější je blok komentářů v hlavičce souboru, který slouží k deklaraci metadat tématu pro WordPress. Tento informační blok musí být umístěn na samém začátku souboru.

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
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Mezi nimi,Text Domain Použito pro internacionalizaci; následně bude využito v tematech. __() 或 _e() Při překladu řetězců funkcí je nutné dodržovat stejná pravidla.

Klíčové funkce a soubory pro načítání šablon

Druhým nezbytným souborem je index.phpJedná se o výchozí šablonový soubor daného tématu. Když WordPress nenajde konkrétnější šablonu, použije tento soubor k zobrazení stránky. I když je dočasně prázdný, musí být stále přítomen.

Avšak modernějším a standardnějším postupem je vytvořit… functions.php Tento soubor je “funkčním doplňkem” vašeho tématu a slouží k přidání funkcí podpory tématu, registračního menu, bočního panelu, stejně jako stylů a skriptů pro řazení zájemců o připojení. Ačkoli není povinný, je téměř standardem pro všechna témata.

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

Vytvořit základní šablonový soubor

WordPress využívá systém hierarchie šablon k určení toho, který soubor šablony má být použit pro konkrétní požadavek na stránku. Porozumění a vytváření těchto souborů je základem vývoje temát (tém). Kromě toho… index.phpPotřebujete alespoň vytvořit následující základní šablony:

Doporučujeme k přečtení. Průvodce vývojem tem pro WordPress: Vytváření pokročilých rozhraní od nuly。

Univerzální hlavička a patka pro celý web

header.php Soubor obsahuje obecný kód, který se nachází na vrcholu každé stránky, např. deklaraci typu dokumentu, zónu, název stránky a hlavní navigaci. get_header() Funkce je volána v šabloně.

footer.php Soubor obsahuje obecný kód, který se nachází na konci každé stránky – např. informace o autorských právech, odkazy na skripty atd. get_footer() Volání funkce.

Typický… header.php Začáteční část zní následovně:

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

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
<?php wp_body_open(); ?>
<header>
    <h1><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><?php bloginfo( 'description' ); ?></p>
    <nav>
        'primary',
            'menu_class'     =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

wp_head() 和 wp_footer() Jedná se o zásadně důležité „hooky“ (mechanismy pro vnošení kódu do systému); mnoho doplňků a základních funkcí WordPressu na nich závisí při vkládání nového kódu. Je tedy nezbytné zajistit, aby tyto „hooky“ skutečně existovaly.

Cyklické zobrazování článků a prezentace obsahu

single.php Slouží k zobrazení jednotlivých blogových článků nebo vlastních typů článků. Jádrem je “WordPress cyklus”, což je mechanismus používaný k načítání a zobrazování obsahu z databáze.

Základní single.php Struktura je následující:

Doporučujeme k přečtení. Od nuly k dokonalosti v tvorbě WordPressových šablon: praktický návod k vytváření moderních webových stránek.。

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <h1><p><strong> Řekněte mi něco o sobě.</strong></p></h1>
            <div class="meta">
                Zveřejněno:  | Autor:
            </div>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail( 'large' ); ?>
                </div>
            <?php endif; ?>
            <div class="content">
                <?php the_content(); ?>
            </div>
        </article>
        
</main>

page.php Slouží k zobrazení statických stránek a její struktura je… single.php Podobně, ale obvykle nejsou zobrazeny datum vydání a autor.

Styl, skripty a boční panel

Krásný a funkčně správně fungující design stránek není možný bez podpory CSS a JavaScriptu; navíc nabízí boční panel možnosti pro přidávání různých doplňkových funkcí („widgetů“).

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é přidávání stylů a skriptů

Nikdy nepoužívejte přímé hardlinky na soubory CSS a JS přímo v šablonových souborech. Správný způsob je prostřednictvím… functions.php Dokumenty, použijte wp_enqueue_style() 和 wp_enqueue_script() Funkce slouží k “nakládání” těchto elementů do fronty. Tím je zajištěno správné pořadí závislostí mezi nimi a předchází 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' );

Registrovat dynamickou postranní lištu

Boční panel (oblast nástrojů) umožňuje uživatelům dynamicky přidávat obsah prostřednictvím administrace WordPress. Nejprve musíte… functions.php Zaregistrujte ho zde.

Funkce my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Hlavní postranní panel', 'my-first-theme' ),
        'id' => 'sidebar-1',
        'description' => __( 'Zde přidejte widgety.', 'my-first-theme' ),
        'before_widget' => '  Funkce my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Hlavní postranní panel', 'my-first-theme' ),
        'id' => 'sidebar-1',
        'description' => __( 'Zde přidejte widgety.', 'my-first-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<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' );

Po registraci budete moci pracovat s šablonovými soubory (např. sidebar.phpPoužívá se v…) dynamic_sidebar( 'sidebar-1' ) Funkce slouží k načtení této boční lišty a k jejímu zobrazení na potřebných místech. get_sidebar() Zavedení.

Internationalizace témat a příprava k jejich publikaci

Po dokončení základního vývoje tématu zbývají ještě dvě důležité kroky: internacionalizace (i18n) pro možnost překladu a příprava na vydání.

Implementace podpory překladu textu

Internacionalizace znamená, že všechny textové řetězce určené pro uživatele musí být obaleny pomocí speciálních funkcí WordPressu, aby mohly být přeloženy do jiných jazyků. K tomu se především používají… ()、_e() Funkce a… esc_html() Varianty tohoto typu.

Musíte se ujistit, že… style.css Bylo nastaveno správně. Text DomainA také… functions.php 的 after_setup_theme Akce volá funkci během svého provádění. load_theme_textdomain()。

function my_first_theme_load_textdomain() {
    load_theme_textdomain( 'my-first-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_first_theme_load_textdomain' );

Následně použijte něco podobného… echo __( '阅读更多', 'my-first-theme' ); Způsob, jak vypsat všechny řetězce. Vývojáři mohou použít nástroje jako Poedit k jejich generování. .pot Přeložte šablonový soubor.

Vytvoření snímků obrazovky tématu a kontrolního seznamu

Před tím, než téma odešlete do katalogu nebo zákazníkovi, je nutné vytvořit snímek obrazovky tohoto tématu. Jedná se o nástroj s názvem… screenshot.png Obrázek s velikostí obvykle 1200×900 pixelů ukazuje vzhled vašeho tématu. Umístěte ho do kořenového adresáře vašeho tématu.

Kromě toho je dobrým zvykem provést jednou za čas kontrolu vašeho tématu. Můžete nainstalovat doplněk “Theme Check”, který provede řadu testů vašeho tématu podle nejnovějších standardů WordPressu, aby byla zajištěna kvalita kódu, bezpečnost a kompatibilita.

Závěr

Vývoj WordPress tématu od nuly je systématický proces, který zahrnuje mnoho aspektů – od základní struktury souborů a hierarchie šablon přes funkční komponenty až po podporu internacionalizace. Prostřednictvím vytváření… style.css、functions.php Spolu s řadou šablonových souborů můžete postupně vytvořit kostru webové stránky. Klíčové je pochopit a správně používat cykly, šablonové značky a hookové funkce v WordPressu. Dodržování osvědčených postupů – jako je bezpečné spouštění skriptů, registrace menu a bočních panelů, a také přidání podpory pro překlad všech textových částí – udělá vaši temu profesionálnější, robustnější a snadněji udržovatelnou. Tento proces vám nejen umožní upravit vzhled webové stránky podle vašich představ, ale také vám poskytne hluboké pochopení fungování tohoto výkonného systému pro správu obsahu.

Časté dotazy

Jaké programovací jazyky je nutné ovládat pro vývoj WordPressových šablon?

Pro vývoj tem pro WordPress je nutné ovládat PHP, HTML, CSS a základy JavaScriptu. PHP slouží k zpracování logiky a volání funkcí WordPressu; HTML určuje strukturu stránek; CSS se stará o design vzhledu stránek; JavaScript pak umožňuje interaktivní prvky. Důležité je také mít hluboké porozumění funkcím samotného WordPressu a jeho systému hooků.

Jak přimět můj téma, aby podporovalo editor bloků Gutenberg?

Aby vaše téma lépe podporovalo editory bloků typu Gutenberg, můžete… functions.php Přidejte funkci podpory příslušných témat. Například pomocí… add_theme_support( 'wp-block-styles' ) Načtěte výchozí styly pro základní bloky; použijte… add_theme_support( 'align-wide' ) Použijte možnosti širokého zarovnání a úplně širokého zarovnání textu. Také můžete přidat stylizaci pro editor článků a stránek, abyste zajistili, že výsledek předvídaný v editoru v pozadí odpovídá vzhledu stránky na uživatelské straně.

Jaký je rozdíl mezi souborem functions.php v hlavní složce projektu a pluginy?

functions.php Soubory jsou součástí konkrétního tématu a jejich funkce jsou úzce spojeny s tímto tématem. Při změně tématu kód obsažený v těchto souborech obvykle přestane fungovat. Hlavní účelem souborů je přidávat do konkrétního tématu funkce, styly a skripty. Naopak pluginy jsou nezávislé funkční moduly, které mají sloužit k poskytování univerzálních nebo specifických funkcí použitelných v různých tématech. Jednoduché pravidlo zní: Pokud je funkce úzce spojena s vzhledem webové stránky, měla by být umístěna do příslušného tématu; pokud se jedná o opakovaně použitelnou, nezávislou funkci, je vhodnější ji vytvořit jako plugin.

Jak ladit PHP chyby, se kterými se setkávám při vývoji tematických stránek?

Nejprve se ujistěte, že ve vašem… wp-config.php V souboru je aktivován režim ladění. define( ‘WP_DEBUG’, true ); Tato řádek je nastaven tak, aby… trueTo zobrazí na stránce všechny chyby, varování a upozornění PHP. Pro větší bezpečnost (aby chyby nebyly zpřístupné veřejnosti) můžete zároveň nastavit… define( ‘WP_DEBUG_LOG’, true ); Zaznamenej chybu do… /wp-content/debug.log Ve souboru. Kromě toho použijte nástroje pro vývojáře v prohlížeči (konzola a kartice „Síť“) k prověření chyb v JavaScriptu a problémů s načítáním zdrojových souborů.