Přípravné práce a nastavení prostředí.
Než začnete psát kód, potřebujete vhodné vývojové prostředí. To zahrnuje lokální serverové prostředí (např. XAMPP, MAMP nebo Local by Flywheel) a kódový editor (např. VS Code, PhpStorm nebo Sublime Text). Ujistěte se, že vaše lokální prostředí podporuje PHP (verze 7.4 nebo vyšší) a databázi MySQL/MariaDB.
Následně budete potřebovat přistoupit do adresáře instalace WordPressu.wp-content/themesV této složce vytvořte novou složku, která bude vaším hlavním adresářem pro vaše projekty nebo materiály. Například můžete vytvořit složku s názvem…my-first-themeToto je složka. Je to “domov” všech vašich souborů s tematickým obsahem.
Nejzákladnější soubory WordPress tématu jsou pouze dva:style.css和index.phpMezi nimi jestyle.cssNení to jen šablona stylů, ale také “občanský průkaz” tématu – prostřednictvím poznámek v hlavičce souboru informuje WordPress o názvu tématu, autorovi, popisu a dalších metadatech.
Doporučujeme k přečtení. Podrobné vysvětlení vývoje WordPressových témat: průvodce klíčovými technikami od začátku až po pokročilou úroveň.。
Vytvořit soubor s informacemi o tématu
V své složce s tematikou vytvořte…style.cssSoubor a zadejte následující základní informace:
/*
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
*/Tento komentář je nutný. Právě pomocí čtení…Theme NameTento řádek slouží k identifikaci a zobrazení vašeho tématu v seznamu témat v pozadí. Další informace, jako…Text DomainTo je příprava na internacionalizaci (překlad).
Vytvořit základní šablonový soubor
Dále vytvoříme ten nejzákladnější…index.phpSoubor. I když je tento soubor prozatím prázdný, stačí…style.cssPokud jsou informace úplné, váš téma se objeví v seznamu “Vzhled” -> “Témata” v administraci WordPressu a bude možné ho aktivovat. Nyní pojďme…index.phpDo tohoto textu napište nejjednodušší HTML strukturu, která bude zobrazovat nadpis blogu a obsah článku.
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
<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();
?>
<article>
<h2><a href="/cs/</?php the_permalink(); ?>"><p><strong> Řekněte mi něco o sobě.</strong></p></a></h2>
<div><?php the_content(); ?></div>
</article>
<?php
endwhile;
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_foot(); ?>
</body>
</html>Tento kód využívá několika funkcí z jádra WordPressu.模板标签Napříkladbloginfo()、the_title()、the_content()funkcewp_head()和wp_foot()Jde o klíčové „hooky“, které umožňují jádru WordPressu, pluginům a dalším skriptům vložit potřebný kód do začátku a konce stránky.
Porozumění struktuře šablon a vytvoření základních šablon
WordPress používá soubor nástrojů nazývaný…模板层级Pravidla určují, který šablonový soubor by měl být použit k renderování konkrétní žádosti o stránku. Jedná se o jeden z nejzákladnějších konceptů při vývoji temat (templates). Jednoduše řečeno, WordPress začne hledat od nejkonkrétnějšího šablonového souboru; pokud tento soubor neexistuje, přejde na obecnější verzi a nakonec na nejzákladnější možnou šablonu.index.php。
Doporučujeme k přečtení. Úvodní průvodce vývojem WordPress temat: Postavte si své první vlastní téma od nuly。
Vytvořte šablonu pro stránku s detaily článku.
Když uživatel navštíví konkrétní článek, WordPress bude nejprve hledat…single-post.phpPokud neexistuje, použijte…single.phpA nakonec...index.phpVytvořme tedy něco…single.phpSlouží k speciálnímu ovládání zobrazení jednotlivých článků.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
<div class="entry-meta">
Zveřejněno: | Autor:
</div>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<footer class="entry-footer">
分类：
</footer>
</article>
<?php
// 上一篇/下一篇导航
the_post_navigation();
// 评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>Tento šablonový soubor zahrnuje tři důležité komponenty:get_header()、get_sidebar()和get_footer()Jsou použity k zavádění různých elementů obsahu.header.php、sidebar.php和footer.phpSoubory jsou klíčem k využití kódu opakovaně a k modulárnímu návrhu.
Vytvořit šablonu stránky
Pro statické stránky (např. “O nás”) bude WordPress hledat…page.phpVytvořitpage.phpJeho struktura je…single.phpPodobně, ale obvykle nezobrazují metadatové informace jako kategorie, tagy a čas publikování.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php
endwhile;
?>
</main>Implementace tematických funkcí a stylů
Kompletní téma vyžaduje nejen soubory šablon, ale také další komponenty a funkce, které umožní správné fungování tématu.functions.phpSoubor slouží k přidávání funkcí, registraci menu, oblasti nástrojů a dalším účelům.style.cssPřidat styly.
Thematic Function File
Vytvořte to v kořenovém adresáři vašeho tématu.functions.phpTento soubor se automaticky načte při inicializaci tématu a slouží k uložení všech vlastních PHP funkcí a hooků.
<?php
/**
* 我的第一个主题的功能函数
*/
// 添加主题支持功能
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像（缩略图）功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单
register_nav_menus(
array(
'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
)
);
// 添加HTML5标记支持
add_theme_support(
'html5',
array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
'style',
'script',
)
);
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册小工具侧边栏
function my_first_theme_widgets_init() {
register_sidebar(
array(
'name' => esc_html__( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( '在此添加小工具。', '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', 'my_first_theme_widgets_init' );
// 加载主题样式表和脚本
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载通用CSS
wp_enqueue_style( 'my-first-theme-main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );
// 加载通用JavaScript
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Přidání základních stylů
Teď se podívejme na…style.cssPo hlavičce komentářů přidejte nějaký základní CSS k ozdobení vašeho tématu.
Doporučujeme k přečtení. Konečný průvodce vývojem témat WordPressu: Vytvořte si vlastní WordPress webové téma od nuly.。
/* 基础重置与排版 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
header {
border-bottom: 2px solid #0073aa;
margin-bottom: 40px;
padding-bottom: 20px;
}
.entry-title {
color: #222;
}
.site-main {
float: left;
width: 70%;
}
/* 侧边栏样式 */
.widget-area {
float: right;
width: 25%;
padding-left: 5%;
}
/* 页脚样式 */
footer {
clear: both;
border-top: 1px solid #ddd;
margin-top: 60px;
padding-top: 20px;
text-align: center;
color: #666;
}Modularita a šablonové komponenty
Pro zlepšení udržovatelnosti a znovupoužitelnosti kódu doporučuje WordPress, abyste opakující se části stránek (jako je nadpis stránky, patka, boční lišty) rozdělili do samostatných souborů s šablonami.
Vytvoření částí záhlaví a patra stránky
Vytvořitheader.phpObsahuje od…<!DOCTYPE html>Začátek až otevření<main>Všechny obsahy před značkou.
<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1011>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary">Přejít na hlavní obsah</a>
<header id="masthead" class="site-header">
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) :
?>
<h1 class="site-title"><a href="/cs/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><p><strong> Název blogu: </strong><br><br><img src='images/logo.png'> <br><br><strong> Kategorie: </strong><br><br><strong></a></h1>
<?php
else :
?>
<p class="site-title"><a href="/cs/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><p><strong> Název blogu: </strong><br><br><img src='images/logo.png'> <br><br><strong> Kategorie: </strong><br><br><strong></a></p>
<?php
endif;
$my_first_theme_description = get_bloginfo( 'description', 'display' );
if ( $my_first_theme_description || is_customize_preview() ) :
?>
<p class="site-description"><?php echo $my_first_theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
<?php endif; ?>
</div>
<nav id="site-navigation" class="main-navigation">
'primary',
'menu_id' => 'primary-menu',
)
);
?>
</nav>
</header>
<div id="content" class="site-content">Podle toho potřebujeme vytvořit…footer.phpObsahuje…</div><!-- #content -->Všechny následující informace.
</div><!-- #content -->
<footer id="colophon" class="site-footer">
<div class="site-info">
<p><?php printf( esc_html__( '主题：%1$s', 'my-first-theme' ), '<a href="https://example.com/">我的第一个主题</a>' ); ?></p>
</div>
</footer>
</div><!-- #page -->
<?php wp_footer(); ?>
\n
<p></p>Vytvořitsidebar.phpZobrazí oblast s příslušenstvím („widgets“).
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) :
?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php
endif;
?>Po dokončení těchto dílů je bude možné je použít.get_header()、get_footer()和get_sidebar()Funkce jsou všude v šablonových souborech jednoduše a stručně volány.
Závěr
Díky této příručce jste dokončili celý proces vytvoření základního WordPress tématu od nuly. Naučili jste se, jak nastavit vývojové prostředí a vytvořit potřebné soubory tématu.style.css和index.php…) a důkladně porozuměl systému úrovní šablon v WordPressu, což mu umožnilo vytvořit speciální šablony pro různé typy stránek (jako jsou články a stránky).single.php， page.phpZískal jste znalosti týkající se způsobů, jak…functions.phpSoubor obsahuje klíčové funkce určené k podpoře daného tématu, jako je registrační menu, nástroje a speciální obrázky. Na závěr jste uplatnili principy modulárního vývoje a rozdělili nadpis stránky, patičku a boční lištu na znovupoužitelné šablony.header.php， footer.php， sidebar.phpTo výrazně zlepšilo udržovatelnost kódu. Je to pouze začátek – na základě tohoto výchozího stavu můžete dále zkoumat vlastní typy článků, pokročilé možnosti nastavení témat, responzivní design a interakce pomocí JavaScriptu, a postupně vytvořit funkční a profesionálně navržené WordPress téma.
Časté dotazy
Proč se moje téma nezobrazuje v pozadí (v backendu)?
Ujistěte se, že složka s vašimi tematikami je správně umístěna na příslušném místě.wp-content/themes/V adresáři, a mezi tím obsaženým…style.cssZáhlaví souboru obsahuje blok komentářů ve správném formátu, zejména…Theme Name:Tento řádek musí být přítomen a správný. Kódování souboru by mělo být UTF-8 bez BOM (Byte Order Mark).
Jak přidat podporu pro vlastní logo ke svému tématu?
Ve vašemfunctions.phpDokumenty jsoumy_first_theme_setupDo funkce přidejte jeden řádek kódu:add_theme_support( 'custom-logo' );Po přidání tohoto loga budou uživatelé moci nahrát a nastavit své logo v administraci WordPressu v sekci “Vzhled” -> “Vlastní” -> “Identita stránek”. Budete potřebovat…header.phpPoužijte to v čínštině.the_custom_logo()Funkce slouží k výstupu loga.
Co dělat, když po úpravě souboru functions.php webové stránky zobrazují pouze prázdnou obrazovku („bílou stránku“)?
To obvykle znamená…functions.phpVe souboru jsou chyby v PHP syntaxi. WordPress kvůli těmto fatálním chybám přestane s svým provozem. Musíte se přihlásit k serveru pomocí FTP nebo správce souborů a odstranit chybné kódy.functions.phpPřejmenovat (např. na…)functions.php.bakNastavte správné přístupové údaje, abyste obnovili přístup k webové stránce. Poté prověřte a opravte svůj kód a znovu nahrávejte správné soubory. Testování v lokálním vývojovém prostředí je dobrý zvyk, který vám pomůže předcházet podobným problémům.
Jak zajistit, aby mé téma podporovalo vícejazyčné překlady?
You have already…style.cssBylo nastaveno…Text Domain(Textové pole), a poté…functions.phpVe řetězci bylo použito…esc_html__( ‘文本’， ‘my-first-theme’ )Taková funkce pro překlad. Následně budete potřebovat nástroje typu Poedit, abyste prohledali soubory s tematikou (tematické soubory) a našli v nich výrazy, které je možné přeložit, a poté vytvořili překladatelský obsah..potŠablonový soubor a poté vytvořte odpovídající verzi pro každý jazyk..po和.moSoubory a umístěte je do tématu./languagesVe složce. WordPress automaticky načte odpovídající překlady podle nastavení jazyka stránek.
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.
- Vývoj tem pro WordPress od základů po mistrovství: Kompletní průvodce vytvářením personalizovaných webů
- 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í
- Vývoj WordPress témat od nuly: Vytvoření jedinečného webového rozhraní
- 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
Čeština