Vývoj vlastního WordPress tématu je nejlepším způsobem, jak hloubkově pochopit strukturu frameworku WordPress a zlepšit své dovednosti v front-end vývoji. Na rozdíl od použití hotových témat máte při vývoji od nuly plnou kontrolu nad výsledným produktem, což vám umožňuje vytvořit webovou stránku, která je jedinečná a plně odpovídá požadavkům vašeho projektu. Tento článek vás provede celým procesem vytvoření základního, ale funkčně kompletního WordPress tématu.
Konfigurace vývojového prostředí a struktury témat
Než začnete psát kód, budete potřebovat lokální vývojové prostředí. To obvykle zahrnuje sadu nástrojů pro provozování lokálního serveru (např. XAMPP, MAMP nebo Local by Flywheel), editor kódu (např. VS Code) a nejnovější verzi WordPressu.
Nejprve, v rámci WordPressu… <code>wp-content/themes</code> V adresáři vytvořte složku pro své nové téma, například: <code>my-custom-theme</code>Jedno z nejzákladnějších témat pro WordPress potřebuje alespoň dvě klíčové soubory.
Doporučujeme k přečtení. Kompletní návod k vývoji témat WordPressu: vytvořte si vlastní téma od nuly.。
Vytvořit soubor se šablonami stylů
Prvním nutným souborem je… style.cssTento soubor nejenže definuje vzhled tématu, ale také obsahuje metadata, které popisují toto téma pro WordPress. Přidejte následující poznámku na začátek souboru:
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/“Text Domain” se používá pro internacionalizaci a musí být v souladu se názvem vaší tematické složky. Poté můžete do tohoto souboru zapsat všechna CSS pravidla.
Vytvořit soubor s hlavními funkcemi
Druhým nezbytným souborem je functions.phpToto je “mozek” této stránky – slouží k načítání šablon stylů, souborů JavaScriptu, registraci menu, bočních panelů a dalších funkcí, stejně jako k přidávání různých funkcí pro podporu chování stránky.
Základní functions.php Začátek obvykle vypadá následovně a slouží k přidání šablony stylů do fronty:
<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );V tuto chvíli, i když ještě neexistují žádné šablony, může váš téma být zobrazeno v seznamu “Vzhled” -> “Témata” v administraci WordPressu a aktivováno. Po aktivaci se na webových stránkách zobrazí prázdná stránka, protože chybí šablony, které by definovaly strukturu stránek.
Doporučujeme k přečtení. Praktický průvodce vývojem temát pro WordPress: Vytvoření vlastní architektury a šablon temát od nuly。
Vytvoření základní šablonové soubory
Soubory šablon ovládají způsob zobrazení různých částí webové stránky. WordPress určuje, kterou šablonu použít pro aktuální požadavek, na základě hierarchie šablon.
Vytvořit celosálovou hlavičku a patu
Nejlepší praxí je oddělit veřejný kód pro záhlaví a patro stránek (header a footer) do samostatných částí. header.php Soubor obvykle obsahuje deklaraci typu dokumentu. Region a otevření Tagy a hlavní navigace.
<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
<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' ) ); ?>
</nav>
</header>
<main>Podle toho potřebujeme vytvořit… footer.php Přijďte zavřít to… header.php Hlavní kontejner a značky otevřené v…
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
\n
<p></p>wp_head() 和 wp_footer() Jedná se o klíčové „hooky“, které umožňují samotnému jádru WordPressu, pluginům a temám vložit potřebný kód (např. styly, skripty) právě na tyto pozice.
Vytvoření indexu a šablon článků
index.php Jedná se o konečný zpětný soubor struktury šablon (template hierarchy), který zároveň slouží jako výchozí bod pro naše téma. Používá… get_header() 和 get_footer() Přinášíme způsob integrace oddělených modulů.
<article>
<h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
<div><?php the_excerpt(); ?></div>
</article>
<p>
<p>Zatím nejsou žádné články k dispozici.</p>Pro zobrazení jednotlivých článků samostatně bylo vytvořeno… single.phpJeho struktura je… index.php Podobně, ale s použitím… the_content() Zobrazit celý text.
Doporučujeme k přečtení. Úvod do vývoje tem pro WordPress – Postavte si svou první vlastní temu od nuly。
<article>
<h1><p><strong> Řekněte mi něco o sobě.</strong></p></h1>
<div><?php the_content(); ?></div>
</article>Vylepšení funkcí tematického nastavení
Po vytvoření základní struktury pokračujeme… functions.php Přidejte více užitečných funkcí, aby byl téma profesionálnější a snazší na použití.
Registrovat navigační menu a boční panel
在 functions.php Přidejte následující kód, abyste registrovali hlavní navigační menu a boční panel (oblast nástrojů):
// 注册导航菜单
function my_custom_theme_register_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );
// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' );Po registraci je potřeba je volat v šablonách. Například, header.php Už jsme to použili. wp_nav_menu Byl aktivován menu “primary”. Chcete-li zobrazit nástroje („gadgets“) v postranní liště, můžete… sidebar.php Vytvořte šablonu bočního panelu a poté… index.php 或 single.php Použijte to v čínštině. get_sidebar() Zavedení.
Přidání podpory funkce tematického řazení
WordPress poskytuje mnoho vestavěných funkcí, které lze v tematech používat pouze po jejich výslovném povolení. Například podpora přidávání ukázek článků („feature images“), přizpůsobení loga nebo použití HTML5 značek vyžaduje explicitní deklaraci podpory.
// 添加主题功能支持
function my_custom_theme_setup() {
// 支持文章缩略图
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 对搜索表单、评论表单等使用HTML5标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 在管理后台提供<title>标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Po přidání podpory “post-thumbnails” můžete jejich používat v cyklu článků. the_post_thumbnail() Funkce nyní umožňuje vytvářet a vypisovat speciální obrázky.
Návrh stylů a responsivní layout
Krásný a přizpůsobivý se různým zařízením design tématu je velmi důležitý. Můžete… style.css Všechny styly by měly být definovány v kódu. Doporučuje se použít strategii zaměřenou na mobilní zařízení (tzv. „mobile-first“).
Základní styly a sazba
Nejprve nastavte některé styly pro resetování vzhledu a základní formátování, abyste zajistili konzistentní výstup v různých prohlížečích.
/* 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;
background-color: #fff;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: #f8f9fa;
padding: 2rem 0;
border-bottom: 1px solid #dee2e6;
}
/* 导航菜单样式 */
.main-navigation ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
.main-navigation a {
text-decoration: none;
color: #007bff;
}Implementovat responsivní design
Používejte mediální dotazy k úpravě rozložení na různých velikostech obrazovek. Například, když se obrazovka zmenší, změňte navigační menu na vertikální uspořádání.
/* 移动端样式 */
@media (max-width: 768px) {
.main-navigation ul {
flex-direction: column;
gap: 0.5rem;
}
.container {
padding: 0 15px;
}
article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
}Ujistěte se, že i obrázky jsou responzivní:
img {
max-width: 100%;
height: auto;
}Závěr
Prostřednictvím výše uvedených kroků jste úspěšně vytvořili plně funkční vlastní téma pro WordPress. Začneme konfigurací vývojového prostředí a vytvořením nejzákladnějších částí tohoto tématu. style.css 与 functions.php Soubor začíná a postupně jsou vytvářeny základní šablony.header.php, footer.php, index.php, single.php…) a zároveň jsme vylepšili praktické funkce tématu – např. registrační menu, boční lištu a možnost použití speciálních obrázků. Nakonec jsme tématu přidali základní styly a responzivní rozložení, aby se dobře zobrazovalo na různých zařízeních. To je jen začátek; můžeš na tom dále pracovat a vytvářet další šablony stránek.page.phpArchivovací šablony (Archive Templates)archive.phpVyhledávací šablony (Search Templates)search.phpMůžete také využít podtémata (subtémata) k personalizaci a vytvořit tak ještě výkonnější a profesionálnější webové stránky.
Časté dotazy
K vývoji temat pro WordPress je nutné ovládat následující techniky:
Pro vývoj základního WordPress tématu je potřeba ovládat HTML, CSS a PHP. HTML slouží k vytvoření strukturálního uspořádání stránek, CSS se používá pro návrh vzhledu a rozvržení stránek, zatímco PHP je klíčovým nástrojem pro generování dynamického obsahu v WordPressu. Základní znalosti JavaScriptu také pomohou při přidávání interaktivních funkcí. Důležitým je také pochopení základních konceptů WordPressu, jako je hierarchie šablon, cyklus The Loop, hooky a funkce, které jsou základem pro úspěšný vývoj témat.
Co dělá soubor functions.php v tématu?
functions.php Soubor „functions.php“ je ústředním bodem funkcionalit WordPressového tématu. Jeho hlavní úkoly zahrnují: přidávání souborů CSS a JavaScript do fronty na zpracování, registraci navigačních menu a oblastí s příslušnými nástroji na bocích stránky, deklaraci funkcí podporovaných tímto tématem (např. zobrazení ukázek článků, nastavení vlastního loga), definování vlastních funkcí, a také úpravy výchozího chování WordPressu pomocí akčních a filtrovacích hooků. Díky tomu můžete výrazně rozšířit a přizpůsobit funkce tématu, aniž byste museli měnit samotné základní soubory WordPressu.
Jak zajistit, aby můj webový design („témata“) podporovalo více jazyků?
Zpřístupnění tématu více jazykům ( internacionalizace ) zahrnuje hlavně dvě kroky. Nejprve… style.css Pro “Text Domain” a všechna místa, kde se používají funkce pro překlad, používejte stejný textový domén (Text Domain), který obvykle odpovídá názvu složky se tematikou. Dále, při přípravě textových řetězců určených k překladu, využívejte funkce pro překlad dostupné v WordPressu. __()、_e() 或 _x()Poté můžete použít nástroje, jako je Poedit, k vytvoření… .pot Šablony souborů a generování odpovídajících… .po 和 .mo Přeložte soubor. Umístěte přeložený soubor do tématu. /languages V adresáři WordPress automaticky načte tyto soubory podle nastavení jazyka webové stránky.
Jaké jsou výhody vytvoření podtémat oproti přímé úpravě hlavního tématu?
Vytváření podtémat je osvědčenou praxí při úpravě nebo rozšíření funkcí stávajícího hlavního tématu. Jejich hlavní výhodou je zlepšená bezpečnost: při vydání aktualizace hlavního tématu můžete bezpečně aktualizovat i toto hlavní téma, přičemž vaše vlastní úpravy podtématu (styly, funkce, šablony) nebudou ztraceny. Podtéma potřebují pouze… style.css A s volitelným functions.php Soubor může fungovat bez dalších úprav. V podtématech… style.css V Číně, prostřednictvím @import Nebo zavádějte lepší způsob řazení („queuing“) pomocí stylů mateřského tématu a poté přidejte vlastní CSS pravidla pro jejich přepsání. U podtematů… functions.php Bude načten současně s souborem se stejným názvem v mateřském tématu, místo aby ho nahradil. Díky tomu můžete bezpečně přidávat nové funkce.
Jaký je další krok? Co bych měl udělat dál?
Další čtení a praktické znalosti
Následující obsah souvisí s tématem tohoto článku a je vhodný k dalšímu prostudování. Obvykle je lepší začít čtením článku, který je nejblíže vašemu aktuálnímu problému, a poté postupně přecházet k souvisejícím tématům.
- Základní koncepty a praktické vzory Tailwind CSS: Od atomárních tříd po responsivní design
- Ultimátní průvodce výstavbou webových stránek: Kompletní postup od návrhu po spuštění a analýza klíčových technologií
- Podrobný průvodce celým procesem výstavby webových stránek: od analýzy požadavků až po nasazení ve provozu – odborný průvodce
- Vývoj WordPress témat od nuly: Vytvoření jedinečného webového rozhraní
- Ultimátní průvodce výstavbou webových stránek: Komplexní praktický plán od nuly až po profesionální spuštění
Čeština