Porozumění základní struktuře témat WordPressu
Motiv WordPressu je víc než jen sada souborů stylů, které řídí vzhled webu; je to soubor souborů, které dodržují určité standardy. Tyto soubory pracují společně a říkají systému WordPress, jak má prezentovat obsah webu. Jedno z nejjednodušších témat obsahuje pouze dva soubory:style.css 和 index.phpTéma bude obsahovat desítky souborů šablon, funkčních souborů a souborů aktiv, ale výkonné téma bude obsahovat desítky souborů šablon, funkčních souborů a souborů aktiv.
Základní dokument a jeho úloha
Každé téma WordPress musí obsahovat style.css Soubor. Tento soubor je nejen klíčový pro definování stylů webu, ale jeho komentáře v záhlaví souboru obsahují také metadata tématu, jako je název tématu, autor, popis a verze. To je klíčem k tomu, aby WordPress rozpoznal platné téma.
Druhý základní soubor je index.php, což je výchozí soubor šablony tématu. Když WordPress nemůže najít konkrétnější soubor šablony pro aktuální požadavek, vrátí se k použití souboru šablony. index.php。
Doporučujeme k přečtení. Konečný průvodce vývojem témat WordPressu: od nuly až po odborné znalosti při vytváření vlastních webových stránek.。
Hierarchie šablon
Systém témat WordPress se řídí mocným pravidlem “hierarchie šablon”. To znamená, že při návštěvě konkrétní stránky bude WordPress hledat nejvíce odpovídající soubory šablon v předem definovaném pořadí. Například při přístupu k příspěvku na blogu bude WordPress přednostně hledat single-post.php, a pokud neexistuje, hledejte. single.phpPoslední, který se použije index.php. Pochopení této hierarchie je základem pro pokročilé přizpůsobení.
Vytvořte si své první základní téma.
Vytvoření tématu od začátku je nejlepší způsob, jak pochopit, jak funguje. Začneme vytvořením tématu v systému WordPress wp-content/themes Vytvořte v adresáři novou složku, např. ji pojmenujte “my-first-theme”.
Zápis informací do záhlaví souboru stylů
Uvnitř této složky vytvořte style.css a zadejte následující základní informace v záhlaví:
/*
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
*/Vytvoření základní šablony indexu
Dále vytvořte index.php Dokumentace. Jedná se o nejzákladnější šablonu, která používá základní funkce WordPressu k načtení a zobrazení názvu webu a smyčky příspěvků.
<!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 : ?>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>
</main>
<?php wp_footer(); ?>
</body>
</html>V tomto okamžiku budete moci zobrazit a povolit toto základní téma v backendu WordPressu v části “Vzhled > Motivy”.
Doporučujeme k přečtení. Kompletní praxický průvodce vývojem WordPress temat: Vytvoření vlastní temat od nuly。
Přizpůsobení pomocí souborů šablon s háčky
Aby bylo téma bohaté na funkce a dobře strukturované, je třeba dobře využívat soubory šablon a systém háčků WordPress.
Rozdělení šablon na modulární komponenty
Profesionální téma neukládá veškerý kód do index.php v. Používáme get_header()， get_footer()， get_sidebar() a další funkce pro rozdělení šablony. Nejprve se index.php Záhlaví a zápatí struktury HTML se přesunou do nově vytvořené struktury HTML. header.php 和 footer.php a poté upravte soubor index.php Níže:
<?php get_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 : ?>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>
</main>Přidání funkce prostřednictvím souboru funkcí
functions.php Tento soubor je “mozkem” tématu a slouží k přidávání funkcí, registračních nabídek, oblastí widgetů a k vkládání souborů stylů a skriptů. Vytvořte jej a přidejte následující základní kód pro registraci navigačního menu:
<?php
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-first-theme' ),
) );
// 添加文章缩略图支持
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 排入样式表和脚本
function my_first_theme_scripts() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>Poté můžete přidat nový soubor do složky header.php Použijte to v čínštině. wp_nav_menu() zobrazit tuto nabídku.
Implementace responzivního designu a vývoj podřízených témat
Moderní webové stránky se musí přizpůsobit obrazovkám různých zařízení. Zároveň jsou podřízená témata nezbytnou dovedností, aby bylo možné bezpečně aktualizovat rodičovské téma bez ztráty vlastních úprav.
Použití zásad responzivního designu
在 style.css V , použijte dotazy médií CSS k vytvoření responzivních rozvržení. Nastavte například různá pravidla stylování pro tablet a mobilní zařízení:
Doporučujeme k přečtení. Kompletní průvodce vývojem WordPress temat: Vytvoření vlastní webové stránky od nuly。
/* 基础样式 */
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
/* 平板设备 (宽度小于 768px) */
@media (max-width: 768px) {
.container { padding: 0 15px; }
.sidebar { display: none; }
}
/* 手机设备 (宽度小于 480px) */
@media (max-width: 480px) {
h1 { font-size: 1.5em; }
}Vytváření podřízených témat, která přepisují nadřazená témata
Dětská témata umožňují upravit nebo rozšířit funkce jiného tématu (rodičovského tématu). Vytvořte novou složku, např. “my-first-theme-child”, a v ní vytvořte složku style.cssInformace v záhlaví musí obsahovat řádek “Šablona”, na kterém je uveden název adresáře nadřazeného motivu:
/*
Theme Name: My First Theme Child
Template: my-first-theme
Version: 1.0
*/Pak v podtématu functions.php ve kterém je třeba seřadit soubory stylů nadřazeného a podřazeného motivu:
<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
// 排入父主题样式表
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// 排入子主题样式表，位于父主题样式之后
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}
?>Poté můžete vytvořit soubor šablony se stejným názvem tak, že jej vytvoříte v podřízeném tématu (např. header.php), abyste přepsali odpovídající soubor v nadřazeném tématu nebo přidali nová pravidla CSS pro změnu vzhledu.
Závěr
Vývoj témat WordPress je proces, který začíná pochopením základní struktury, postupným vytvářením základního tématu a následným hlubokým přizpůsobením pomocí pokročilých funkcí, jako jsou hierarchie šablon, háčky, responzivní design a podřízená témata. Dodržováním standardizované struktury souborů a vývojových postupů můžete vytvářet témata, která jsou výkonná, snadno se udržují a vypadají profesionálně. Ve své podstatě jde o praktické postupy, od úpravy jednoduchého index.php 和 style.css Začněte tím, že si postupně vytvoříte plnou kontrolu nad systémem motivů WordPress.
Časté dotazy
Jaký je minimální počet souborů potřebných pro šablonu WordPress?
Motiv WordPressu vyžaduje minimálně dva soubory:style.css 和 index.php。
Mezi nimi,style.css 'komentáře v záhlaví musí obsahovat správná metadata tématu, která jsou klíčová pro rozpoznání a použití témat ve WordPressu. Zatímco index.php slouží jako výchozí soubor šablony a je zodpovědný za zpracování požadavků, které neodpovídají konkrétnější šabloně.
Jak mohu přizpůsobit zobrazení jednotlivých stránek příspěvků?
Chcete-li přizpůsobit zobrazení jednoho příspěvku, musíte vytvořit hierarchii šablon WordPress na základě. single.php nebo pro přesnější kontrolu vytvořit šablony pro konkrétní typy článků, jako např. single-post.php。
V tomto souboru můžete libovolně uspořádat rozvržení názvu příspěvku, obsahu, metadat (např. autora, času zveřejnění, kategorií) a oblasti komentářů. Můžete použít značky šablon poskytované systémem WordPress, jako např. the_title()， the_content()， the_author() atd. k výstupu obsahu.
Co dělá soubor functions.php?
functions.php je základní funkční soubor tématu, který hraje roli pluginu pro přidávání funkcí, háčků a filtrů do tématu.
Mezi jeho hlavní úlohy patří: inicializace funkcí tématu (např. registrace nabídek, oblastí widgetů, přidání podpory pro doporučené obrázky), řazení stylů CSS a skriptů JavaScript, definování vlastních zkratek, úprava výchozího chování systému WordPress (pomocí háčků) a nastavení konfiguračních možností specifických pro téma. Bude automaticky volán systémem WordPress při načtení tématu.
Jaké jsou výhody používání podřízených témat?
Skvělé na používání podřízených témat je to, že umožňují bezpečně upravovat a přizpůsobovat nadřazené téma, aniž byste museli přímo upravovat zdrojové soubory nadřazeného tématu.
To znamená, že když nadřazené téma vydá aktualizaci zabezpečení nebo aktualizaci funkcí, můžete aktualizovat přímo nadřazené téma a všechny vlastní úpravy (styly, soubory šablon, vylepšení funkcí), které jste provedli prostřednictvím podřazeného tématu, budou zachovány a nebudou přepsány. To výrazně zvyšuje efektivitu a bezpečnost údržby webu a je to osvědčený postup při vývoji systému WordPress.
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.
- Průvodce vývojem tem pro WordPress: Vytvoření vlastní webové stránky od nuly
- Kompletní průvodce vývojem WordPress temat: Praktický kurz od základů až po pokročilé znalosti
- Kompletní průvodce vývojem temát pro WordPress: Vytvoření profesionálních webových šablon od nuly
- Praktické vývoj tem pro WordPress: Vytvoření responzivních firemních webových stránek od nuly
- Vytváření WordPress temát bez kódu: Kompletní průvodce od základů až po pokročilé znalosti
Čeština