Než začnete psát kód, potřebujete místní vývojové prostředí. To obvykle zahrnuje lokální server (např. XAMPP, MAMP nebo Local) a editor kódu (např. VS Code, PhpStorm). Ujistěte se, že ve vašem prostředí je nainstalováno PHP (doporučujeme verzi 7.4 nebo novější) a MySQL.
Standardní WordPress téma je složka, která obsahuje souborovou sadu určenou k konkrétnímu účelu. Nejprve si tuto složku stáhněte do své lokální instalace WordPress.wp-content/themesV adresáři vytvořte novou složku a pojmenujte ji například „NováSložka“.my-first-theme。
Následně vytvořte dvě nejzákladnější a nezbytné soubory:style.css和index.phpMezi nimi jestyle.cssNení to jen šablona stylů, ale také “občanský průkaz” vašeho tématu. Blok komentářů v hlavičce souboru slouží k informování WordPressu o tom, jaké je vaše téma.
Doporučujeme k přečtení. Návod k začátkům vývoje témat pro WordPress: vytvořte si personalizovanou webovou stránku od nuly.。
在style.cssVe souboru potřebujete přidat následující informace v úvodní části („header“):
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Tyto informace se zobrazí na stránce “Vzhled” -> “Témata” v administraci WordPressu.index.phpSoubor je výchozím šablonou tématu a musí existovat, i když je zatím prázdný. Pouze tak WordPress dokáže rozpoznat, že se jedná o platné téma.
Vytvoření základní šablonové soubory
Po vytvoření základních souborů ještě vaše téma nemůže zobrazovat žádný obsah. WordPress používá systém hierarchie šablon, který určuje, který šablonový soubor se načte pro různé typy stránek. Nyní vytvoříme několik základních šablonových souborů.
Vytvořte šablony pro hlavičku a závěr stránky.
Pro dosažení opakovaného využití kódu a konzistence obvykle oddělujeme hlavičku (Header) a patičku (Footer) webové stránky do samostatných souborů. Nejprve tedy vytvoříme…header.phpSoubor obsahuje hlavičku HTML dokumentu.<body>Tagy a veřejná oblast na vrcholu webové stránky (např. logo a navigační menu).
Nejjednodušší z nich…header.phpPříklady mohou obsahovat následující informace:
Doporučujeme k přečtení. Vytvoření profesionální webové stránky: Kompletní průvodce vývojem a personalizací temát pro WordPress。
<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<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>Všimněte si toho, co je zde uvedeno.wp_head()Funkce je nutné volat, aby jádro WordPressu, pluginy a samotné téma mohly vložit potřebný kód (např. CSS a JS) do hlavičky stránky.
Dále vytvořtefooter.phpSoubor slouží k uzavření…<body>和<html>Tagy a obsah patice (footer).
<footer>
<p>© . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
\n
<p></p>Stejně tak…wp_footer()Funkce jsou také nezbytné.
Nyní můžeme aktualizovat.index.php, pomocíget_header()和get_footer()Funkce slouží k načtení těchto dvou částí:
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 文章内容将在这里显示
endwhile;
else :
// 没有找到文章时的内容
endif;
?>
</main>
<?php get_footer(); ?>Vytvoření cyklu článků a šablon obsahu
Výše uvedeném…index.phpV tomto textu vidíme jádro WordPressu: „The Loop“. Slouží k procházení všemi články na aktuální stránce (nebo pouze jedinému článku). Aby byl obsah článků lépe strukturovaný, obvykle logiku zobrazení jednotlivých článků přesuneme do samostatných souborů.
Vytvořitcontent.php或template-parts/content.phpSoubor, a poté jej procházíme v cyklu.get_template_part()Funkce ji volá.
Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Od základů po pokročilé praktické návody。
// 在 index.php 的循环中
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;A poté vytvořte.template-parts/content.php：
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
<div class="entry-meta">
by
</div>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>Tímto jsou nadpisy článků, abstrakty, metadata a další informace vydány ve standardizovaném formátu.
Zavádění stylů a skriptů
Moderní design není možný bez CSS a JavaScript. WordPress poskytuje standardní funkce pro bezpečné zařazování („enqueuing“) souborů se styly a skripty do fronty na zpracování, namísto jejich přímého použití v šablonách.<link>或<script>Tagy.
Registrovací a frontový hlavní stylový soubor
I když už to máme…style.cssAle obvykle to děláme prostřednictvím…functions.phpChcete načíst soubor pomocí tohoto souboru. Nejprve vytvořte ho v kořenovém adresáři tématu.functions.phpDokumenty.
Poté použijte…wp_enqueue_style()Funkce slouží k načtení šablon stylů. Potřebujeme ji…functions.phpVytvořte funkci a připojte ji…wp_enqueue_scriptsV tomto kroku…
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载Google Fonts示例
wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );get_stylesheet_uri()Funkce automaticky získá informace o tématu.style.cssCesta k souboru.
Přidat skript pro reaktivní navigační menu
Pro přidání interaktivních funkcí, např. reaktivního menu pro mobilní zařízení, potřebujeme použít JavaScript. Předpokládejme, že máme jednoduchý skript pro přepínání zobrazení/vyhození menu.
Nejprve vytvořte…js/navigation.jsSoubor. Poté…functions.phpVe stejné funkci se používá…wp_enqueue_script()Přijďte to načíst.
function my_first_theme_scripts() {
// ... 之前的样式代码 ...
// 加载导航脚本
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}Poslední parametrtrueZnamená to umístit skript na spodní část stránky (pod ostatní obsah stránky).\n(Před značkami), což obvykle pomáhá zlepšit výkonnost načítání stránek.
Implementace hlavních funkcí tématu
functions.phpJde o “mozek” tématu, který slouží k přidávání různých funkcí a podpory. Kromě načítání zdrojových souborů je zde také nutné deklarovat funkce, které dané téma podporuje.
Přidání podpory funkce tematického řazení
WordPress poskytuje řadu “funkcí temat” („theme features“), které musíte výslovně podpořit, abyste je mohli používat. Mezi nejzákladnější funkce patří zkratky článků („article thumbnails“), vlastní menu a podpora HTML5 značek.
在functions.phpPřidejte následující kód do:
function my_first_theme_setup() {
// 让主题支持文章和评论的RSS feed链接自动添加到head中
add_theme_support( 'automatic-feed-links' );
// 让文章和页面支持“特色图像”
add_theme_support( 'post-thumbnails' );
// 启用对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 启用标题标签支持，WordPress会自动管理文档标题
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );after_setup_themeJedná se o akční hook, který se spouští při inicializaci tématu a představuje standardní místo pro nastavení funkcí daného tématu.
Registrovat navigační menu
Většina webových stránek potřebuje navigační menu. Systém menu v WordPressu umožňuje uživatelům v nastaveních “Vzhled” -> “Menu” v administraci personalizovat položky menu. Nejprve musíte registrovat umístění menu pro svůj téma.
V předchozím…my_first_theme_setupV funkci pokračujte v přidávání dalších kódových řádků.
function my_first_theme_setup() {
// ... 之前的 add_theme_support 代码 ...
// 注册一个主菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}Po registraci budete moci pracovat s šablonovými soubory (např.header.phpPoužívá se v…)wp_nav_menu()Funkce byla použita k zobrazení tohoto menu:
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>Vytvoření bočního panelu a oblasti pro nástroje
Widget je další mocnou funkcí WordPressu. Chcete-li ji použít, musíte nejprve registrovat si panel bokových nabídek (oblast určenou k umístění widgetů).
在functions.phpVytvořte v tomto dokumentu novou funkci a propojte ji s ostatními částmi kódu.widgets_initV akci:
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' => ' <'<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>'function my_first_theme_widgets_init() {
register_sidebars( array(
'sidebars' => array(
'name' => 'My first theme',
'id' => 'my_first_theme',
'desc' => 'Sidebar for my first theme',
),
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );Po registraci si můžete v záložce “Vzhled” -> “Příslušenství” v administraci prohlédnout oblast “Hlavní postranní lišta” a do ní přetáhnout požadované příslušenství. Chcete-li, aby se toto příslušenství zobrazovalo v daném tématu, je nutné to nastavit v šabloně (např.sidebar.php) voláno v části střednídynamic_sidebar( 'sidebar-1' )Funkce.
Závěr
Díky této příručce jsme dokončili proces vývoje minimalistické, ale plně funkční WordPress tématu. Začali jsme vytvořením prostředí a základních souborů, postupně jsme vybudovali strukturu šablon, oddělili části stránky (hlavičku a patu) a implementovali základní cyklus zpráv. Poté jsme se naučili, jak standardním způsobem přidávat styly a skripty do tématu, abychom zajistili kompatibilitu a výkon. Nakonec…functions.phpV tomto dokumentu jsme aktivovali klíčové funkce tématu, jako jsou speciální obrázky, navigační menu a oblast s nástroji, čímž jsme téma udělali velmi přizpůsobitelným.
To je jen začátek. Na základě toho můžeš pokračovat v vytváření profesionálnějších šablonových souborů (např.…)single.php、page.php、archive.phpProzkoumejte složitější funkce API WordPressu, jako jsou vlastní typy článků, taxonomie a API Personalizátoru (Customizer), abyste vytvořili webové téma s bohatými funkcemi a jedinečným designem.
Časté dotazy
K vývoji temát pro WordPress je nutné ovládat následující techniky:
Pro vývoj tem pro WordPress je potřeba ovládnout několik klíčových technologií. Za prvé je to PHP, protože samotný WordPress je napsán v PHP a všechny šablony a funkční logika jsou na něm závislé. Musíte porozumět základní PHP syntaxi, funkcím, cyklům a podmínkovým výrazům.
Dále následují HTML a CSS, které slouží k vytvoření struktury a stylu webových stránek. Je velmi důležité porozumět zásadám responsivního designu webových stránek a moderním technikám CSS layoutu (jako jsou Flexbox a Grid). Nakonec je nutné mít základní znalosti JavaScriptu, který slouží k implementaci interaktivních funkcí na straně klienta. Znalost specifických PHP funkcí a systému hooků (Hooks) v WordPressu je klíčová pro efektivní vývoj temat (tém).
Který soubor je důležitější – style.css nebo functions.php?
Tyto dvě soubory hrají v rozvoji WordPress temat zcela odlišné, ale zároveň klíčové role, a nelze je jednoduše porovnat z hlediska jejich důležitosti.style.cssSoubor představuje “identifikátor” tématu a blok komentářů v jeho začátku je nezbytný pro to, aby WordPress dané téma rozpoznal. Bez něj se téma nebude moci zobrazit v seznamu témat v administraci.
而functions.phpSoubor představuje “centrum funkcí” tématu – téměř veškerý kód určený k rozšíření funkcí tématu je zde uložen. Mezi tyto funkce patří např. registrace uživatelů, přidání podpory pro konkrétní témata, načítání skriptů a stylů, definování vlastních funkcí atd. Bez tohoto souboru by téma ztratilo většinu svých dynamických funkcí a rozšiřitelností. Obě komponenty (soubor a samotné téma) navzájem doplňují a jsou nezbytné pro správné fungování tématu.
Proč je nutné používat funkce wp_head() a wp_footer()?
wp_head()和wp_footer()Jedná se o klíčový „hook“ pro komunikaci mezi jádrem WordPressu, tematikami a doplňky.header.php的</head>Volání před značkouwp_head()Jedná se o standardní způsob, který umožňuje samotnému WordPressu, pluginům, které nainstalujete, a dalším částem vašeho tématu vkládat potřebný kód do hlavičky stránky (jako jsou meta tagy, odkazy na styly, odkazy na skripty, strukturovaná data v formátu JSON-LD atd.).
Stejně tak,footer.php的\nVolání před značkouwp_footer()Slouží k vložení skriptů, které je třeba načíst na spodní straně stránky (např. analytický kód, později načítané JS soubory) nebo dalšího HTML. Pokud tyto funkce chybí, může dojít k problémům s fungováním pluginů, k nezobrazení správného nástrojového panelu a k různým kompatibilitním problémům.
Jak učinit, aby můj tematický design odpovídal oficiálním standardům WordPressu?
Aby vaše téma splňovalo oficiální standardy WordPressu a bylo kvalitní, je nutné dodržovat „Průvodce vývojem WordPress temat“ (WordPress Theme Development Guide) a „Požadavky na revizi temat“ (Theme Review Requirements). To zahrnuje používání bezpečných praktik kódování a aplikaci funkcí pro escape všech dynamicky generovaných dat.esc_html(), esc_url()Pro všechny překladové řetězce použijte funkce internacionalizace (např.__(), _e()A načtě textové pole.
Témata by měla mít responsivní design, aby se dobře zobrazovala na všech zařízeních. Kód by měl být přehledný, s poznámkami a měl by dodržovat standardy kódování WordPressu. Kromě toho by témata měla poskytovat dostatek možností přizpůsobení prostřednictvím WordPress Customizers a správně implementovat všechny základní funkce a hooky WordPressu. Před vydáním je dobrým zvykem provést testování pomocí pluginu Theme Check.
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.
- Proč zvolit WordPress jako preferovanou platformu pro výstavbu webových stránek?
- Průvodce základymi WordPressu: Vytvořte si své první profesionální webové stránky od nuly
- Kompletní řešení pro výstavbu webových stránek: Podrobný průvodce celým procesem od nuly až po jejich spuštění
- Předmluva: Proč zvolit WordPress pro vývoj
- Konečný průvodce tvorbou webových stránek: kompletní proces vytvoření profesionálních webových stránek od nuly.
Čeština