Chcete-li vytvořit vlastní WordPress téma, je nejprve nutné pochopit jeho základní strukturu. Nejzjednodušenější WordPress téma je v podstatě soubor obsahující kód, který se nachází v určitém adresáři ve struktuře WordPress projektu./wp-content/themes/V adresáři se nachází složka, která obsahuje dvě nezbytné soubory:style.css和index.phpPrvní z uvedených elementů nejenže definuje vzhled tématu, ale co je důležitější, jeho část obsahující poznámky v hlavičce souboru (header comments) obsahuje také metadata o tomto tématu – např. název tématu, autora, popis atd. Druhý element je výchozí šablonový soubor, který se použije, pokud WordPress nenajde konkrétnější šablonu.
Kromě těchto dvou souborů obsahuje funkčně dokonalé téma obvykle i další šablonové soubory, například ty používané k zobrazení jednotlivých článků.single.phpSlouží k zobrazení seznamu článků.archive.php…a také to, co se používá k zobrazení stránek.page.phpPorozumění a vytváření těchto šablonových souborů je ústředním bodem vývoje tematických stránek.
Před zahájením kódování doporučujeme vytvořit si lokální vývojové prostředí – například pomocí nástrojů XAMPP, MAMP nebo Local by Flywheel. To vám umožní volně provádět testování a ladění bez ovlivnění webové stránky online. Zároveň se ujistěte, že váš textový editor nebo integrovaný vývojový prostředí (IDE), jako je VS Code neboPhpStorm, je správně nastaveno, a že znáte základy jazyků PHP, HTML, CSS a JavaScript.
Doporučujeme k přečtení. Úvodní průvodce vývojem WordPress temat: Postavte si své první téma od nuly。
Vytvoření základního souboru a struktury tématu
Vytvoření tematického složky a souboru se šablonami
Nejprve,/wp-content/themes/V adresáři vytvořte novou složku a pojmenujte ji například „NováSložka“.my-first-themePoté vytvořte v této složce nový soubor.style.cssSoubor a zadejte následující informace o hlavičce souboru:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress主题入门示例。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Tento komentář je klíčový pro to, aby WordPress rozpoznal daný téma. Následně můžete do tohoto CSS souboru přidat některé základní styly.
Vytvořit základní šablonový soubor
Dále vytvořteindex.phpSoubor. Jedná se o záložní šablonu pro všechny stránky – jedná se o tu nejjednodušší verzi této šablony.index.phpMůže obsahovat pouze základní strukturu, která zahrnuje volání hlavičky webové stránky, cyklický obsah a závěrečnou část webové stránky.
<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
<?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>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_content();
endwhile;
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Tento soubor používá více základních funkcí WordPressu, jako např.wp_head()、body_class()、the_content()Atd., tyto prvky jsou zásadní pro správný chod celého systému.
Porozumět a implementovat strukturu šablon (templating hierarchies)
WordPress používá soubor pravidel nazývaný “Hierarchie šablon” (Template Hierarchy), která určuje, který šablonový soubor by měl být použit pro konkrétní požadavek na stránku. Porozumění této hierarchii je klíčové pro efektivní vývoj temat (témů).
Doporučujeme k přečtení. Nezbytné pro vytvoření profesionální webové stránky: Kompletní průvodce vývojem a personalizací temát pro WordPress。
Běžné šablony a jejich funkce
Při návštěvě domovské stránky webového stránky hledá WordPress postupně…front-page.php、home.phpA nakonec...index.phpPro stránku se seznamem blogových článků bude hledat…home.phpPro jednotlivé články bude preferováno použití…single-post.phpnebo obecnésingle.phpPro statické stránky se použije…page.phpStránka s kategoriálním rejstříkemcategory.phpStránka pro vyhledávání odpovídá…search.phpStránka s chybou 404 odpovídá situaci, kdy požadovaný obsah na webových stránkách není k dispozici.404.php。
Vytvořením těchto specifických šablonových souborů můžete pro různé části webové stránky navrhnout zcela odlišné uspořádání a vzhled.
Rozdělení kódu pomocí šablonových komponent
Pro udržení čistoty a znovupoužitelnosti kódu by měly být opakující se části rozděleny do samostatných souborů “šablonových komponent”. Nejčastějším příkladem takového rozdělení je oddělení záhlaví (Header), patice (Footer) a bočního panelu (Sidebar).
Vytvořitheader.phpSoubor, bude…index.php中Začátek značky do…Všechny kódy umístěte před značku. Poté použijte je na původním místě.get_header()Volání funkce.
// 在 index.php 中替换原来的代码
<?php get_header(); ?>Podobně také…footer.phpKód pro zobrazení podkladových informací (např. autora, data vytvoření, licenční podmínky) je umístěn na stránce, kde jsou uloženy soubory, a je tam použit.get_footer()Volání. Můžete také vytvořit…sidebar.phpA použijte to.get_sidebar()Volání funkcí. Tento přístup výrazně zvyšuje modulárnost kódu.
Integrace základních funkcí WordPressu
Zavedení cyklu článků a speciálních obrázků
“Cykly” jsou základním mechanismem WordPressu pro načítání a zobrazování článků z databáze.index.php或single.phpV tomto textu používáme…if ( have_posts() ) : while ( have_posts() ) : the_post();Zapněte cyklus. Uvnitř tohoto cyklu můžete použít řadu šablonovacích značek k výstupu informací o článcích.
Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress pluginů – postupně si vybudujete svůj první plugin od nuly.。
Například, pomocí…the_title()Titul článku:the_permalink()Výstupní část obsahuje odkaz na článek: „Výstupní část obsahuje odkaz na článek.“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_excerpt()Abyste podpořili charakteristické obrázky článku, je nejprve nutné…functions.phpDo souboru byla přidána deklarace podpory tematického řízení:
add_theme_support( 'post-thumbnails' );Poté, během cyklu v souboru šablony, lze to použít.the_post_thumbnail()Zobrazte speciální obrázky.
Vytvořte soubor functions.php pro vylepšení tématu.
functions.phpSoubor představuje “centrální kontrolní bod” vašeho tématu – není nutný, ale téměř všechna témata ho využívají. Zde můžete přidávat funkce, registrovat menu, definovat oblasti pro příslušenství („widgets“), vložit skripty a styly.
Základnífunctions.phpMůže obsahovat následující informace:
__( '顶部菜单', 'my-first-theme' ),
'footer-menu' => __( '底部菜单', 'my-first-theme' ),
)
);
}
add_action( 'init', 'mytheme_register_menus' );
// 添加小工具区域支持
function mytheme_widgets_init() {
register_sidebar(
array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'mytheme_widgets_init' );
// 引入主题样式表和脚本
function mytheme_enqueue_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入主JavaScript文件
wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );
?>Přidání stylů a responsivního designu
Vytvoření základního CSS frameworku
从style.cssZačněte tím, že vytvoříte základní vizuální styl pro své téma. Nejprve můžete nastavit globální box model, písma a barvy.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}Implementovat responsivní design s předností pro mobilní zařízení
Moderní designové tématy musí být responzivní – tedy schopné se přizpůsobit různým velikostem obrazovek. Je důležité upřednostnit mobilní zařízení při návrhu, nejprve tedy vytvořit styly určené pro malé obrazovky a poté pomocí mediálních dotazů (Media Queries) přidat nebo nahradit tyto styly pro větší obrazovky.
/* 移动端基础样式 */
.main-navigation ul {
display: flex;
flex-direction: column;
list-style: none;
}
.main-navigation li {
border-bottom: 1px solid #ddd;
}
/* 平板及以上设备 */
@media (min-width: 768px) {
.main-navigation ul {
flex-direction: row;
}
.main-navigation li {
border-bottom: none;
margin-right: 2rem;
}
.content-area {
width: 70%;
float: left;
}
.widget-area {
width: 28%;
float: right;
}
}
/* 桌面设备 */
@media (min-width: 1024px) {
.container {
padding: 0 40px;
}
}Ujistěte se, že i obrázky jsou responzivní, a to pomocí nastavení v CSS.max-width: 100%; height: auto;Nebo použijte funkce, které jsou součástí WordPressu.srcsetAtributy (properties)the_post_thumbnail()Výstup bude výchozím nastavením zobrazen.
Závěr
Vývoj WordPress tématu od nuly je systematický proces učení, který zahrnuje vše od vytvoření základní struktury souborů, pochopení hierarchie šablon, rozdělení komponent šablon až po další kroky v jejich vývoji.functions.phpIntegrace základních funkcí, následovaná návrhem vzhledu a adaptací stránky na různé velikosti obrazovek (responzivní design). Tento proces vám nejen umožní hluboce pochopit, jak WordPress funguje, ale také vám dá plnou kontrolu nad vzhledem a funkcemi vašich webových stránek. Nezapomeňte, že vše začíná od velmi jednoduchého…style.css和index.phpZačít postupným přidáváním funkcí a jejich testováním je bezpečný a efektivní způsob učení. Tvé první téma může být velmi jednoduché, ale poskytne ti solidní základ pro budoucí vývoj složitějších a profesionálnějších projektů.
Časté dotazy
Jaké programovací jazyky jsou potřebné k vývoji témat WordPressu?
Vývoj kompletní funkční WordPress tématy vyžaduje znalost PHP, HTML, CSS a JavaScript. PHP je zde klíčová – slouží k zpracování logiky a volání funkcí WordPressu; HTML slouží k vytvoření strukturálního uspořádání stránek; CSS se stará o styly a rozložení stránek; JavaScript pak umožňuje interaktivní efekty a dynamické funkce. Základní znalost SQL také pomáhá lépe porozumět datovým dotazům v WordPressu.
Proč se mé vlastní téma nezobrazuje na pozadí?
To je obvykle způsobeno…style.cssProblém je způsoben chybami nebo chybějícími informacemi v poznámkách na začátku souboru. Ujistěte se, že soubor se nachází v kořenové složce složky se tematikou a že formát poznámkového bloku na začátku souboru je správný – musí obsahovat povinné informace, jako je “Theme Name”. Kromě toho zkontrolujte, zda jsou oprávnění pro složku se tematikou správná.style.cssSám soubor neobsahuje žádné gramatické chyby.
Jak přidat vlastní šablonu stránek ke svému tématu?
Nejprve vytvořte nový PHP soubor v adresáři vašeho tématu, napříkladtemplate-fullwidth.phpNa samém začátku tohoto souboru přidejte speciální poznámku, která definuje název šablony. Poté můžete do tohoto souboru psát jakýkoli PHP a HTML kód, který chcete. Nezapomeňte, že můžete využívat kód z jiných šablonových souborů (např.page.phpZkopírujte základní struktury, jako je cyklus kopírování. Po dokončení vytvoření bude vaše vlastní přizpůsobená šablona viditelná v rozbalovacím menu “Šablona” pod “Vlastnosti stránky” v administraci WordPress. Můžete ji tam poté vybrat.
Jak bezpečně ladit chyby v PHP během vývoje?
Doporučuje se to provádět v lokálním vývojovém prostředí.wp-config.phpV souboru zapněte režim ladění WordPressu.WP_DEBUGKonstanta je nastavena natrueTímto se všechny chyby, varování a upozornění v PHP zobrazí na obrazovce. Pro podrobnější ladění lze použít…WP_DEBUG_LOGZaznamenej chybu do…/wp-content/debug.logSoubor je obsažen v daném dokumentu. Upozorňujeme, že před spuštěním webové stránky je nutné vypnout režim ladění (debugging mode).
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.
- Zvládněte základy výstavby webových stránek: Kompletní technický průvodce výstavbou vysokokvalitních webových stránek od nuly
- Kompletní průvodce vytvořením webové stránky pomocí WooCommerce: Vytvořte si své profesionální e-shopové stránky od nuly
- Ultimátní průvodce vylepšením výkonu WordPress: 16 kroků od začátečníka po odborníka
- Ultimátní průvodce výstavbou webových stránek: Komplexní praktický plán od nuly až po profesionální spuštění
- Proč zvolit WooCommerce pro výstavbu vašeho e-shopu?
Čeština