Hlavní stránka/Znalosti/WordPress/Podrobnosti o obsahu

Jak vytvořit a přizpůsobit svůj první responsive (responzivní) WordPress tema?

Čtení za 4 minuty.
2026-03-21
2026-06-04
2,420
Získávám provize, když nakupujete prostřednictvím níže uvedených odkazů, aniž by vás to něco stálo navíc.

Přípravné práce a nastavení vývojového prostředí

Než začnete psát kód, je velmi důležité vytvořit efektivní vývojové prostředí. To nejenže zvýší vaši pracovní efektivitu, ale také zajistí, že bude kód standardizovaný a snadno udržovatelný.

Nejprve potřebujete místní vývojové prostředí. Můžete použít nástroje jako XAMPP, MAMP nebo Local by Flywheel, které vám rychle umožní nastavit serverové prostředí obsahující PHP a MySQL na vašem počítači. Po instalaci a spuštění těchto nástrojů se ujistěte, že Apache (nebo Nginx) a MySQL jsou aktivně běžící.

Následně stáhněte nejnovější základní soubory WordPress a rozbalte je do kořenového adresáře webové stránky na vašem lokálním serveru (např. v prostředí XAMPP). htdocs Souborová složka). Přístup pomocí prohlížeče http://localhost/your-wordpress-folder Pro dokončení procesu instalace WordPressu si pamatujte název databáze, uživatelské jméno a heslo, které jste nastavili.

Doporučujeme k přečtení. Praktický úvod do Tailwind CSS: Návod k vytváření responzivních moderních webových stránek.。

Pro editory kódu doporučujeme použít Visual Studio Code, PhpStorm nebo Sublime Text. Tyto editory poskytují vynikající podporu pro výrazovou syntaxi jazyků PHP, HTML, CSS a JavaScript, stejně jako funkce pro automatické doplňování kódu. Kromě toho je důležité nainstalovat některé potřebné doplňky – např. doplňky poskytující inteligentní tipy při práci s WordPressem, stejně jako nástroj Git pro správu verzí kódu.

UltaHost – hosting služby pro weby postavené na platformě WordPress
Záruka vrácení peněz do 30 dnů, neomezený šířka pásma a databáze, bezplatná ochrana proti DDoS útokům. Sleva 501 TP4T při nákupu na 3 roky.
LOGO UltaHostu přístupová stránka

Na závěr, v adresáři s vaší lokální instalací WordPressu přejděte na wp-content/themes Složka. Zde vytvořte novou složku pro téma, které chcete vytvořit, například s názvem… my-first-themeTento složek bude obsahovat všechny soubory týkající se vašeho tématu.

Vytvoření základního souboru pro téma

WordPress téma se skládá ze série standardních souborů, z nichž dva jsou nutné k existenci:style.css 和 index.phpTyto soubory definují základní informace a strukturu tématu.

Nejprve vytvořte… style.css Tento soubor není pouze vaším šablonovým souborem, ale také obsahuje metadata o tématu. Tyto informace se zobrazí na stránce “Vzhled” -> “Témata” v administraci WordPress.

/*
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
*/

Dále vytvořte index.php Soubor. Jedná se o hlavní šablonový soubor tématu; když WordPress nenajde konkrétnější šablonový soubor (např.…) single.php 或 page.phpKdyž to bude potřeba, použijeme ho. Jeden z nejjednodušších… index.php Může obsahovat pouze základní kód potřebný k načtení hlavičky WordPressu, hlavního cyklu a patice stránky.

Doporučujeme k přečtení. Ovládněte Tailwind CSS: praktický průvodce od začátku až po praxi.。

<!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>
    <?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(); ?>
            <article>
                <h2><p><strong> Řekněte mi něco o sobě.</strong></p></h2>
                <?php the_content(); ?>
            </article>
        <?php endwhile; endif; ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

V tuto chvíli můžete své téma aktivovat. Přejděte do administrace WordPress na stránku “Vzhled” -> “Témata” a měli byste vidět “Moje první responsive téma”. Aktivujte ho a navštivte domovskou stránku webu, abyste viděli základní výsledky jeho použití.

Přidání podpory funkce tematického řazení

Aby byla funkce temat „dokonalejší“, potřebujeme prostřednictvím… functions.php Tyto soubory slouží k přidání podpory pro základní funkce WordPressu.functions.php Soubory jsou vlastně „mozkem“ této aplikace – slouží k uložení všech vlastních funkcí, tříd, hooků a filtrů.

Vytvořit… functions.php Soubor a přidejte následující kód pro podporu přehledů článků, vlastního menu a HTML5 značek.

Shared hosting na hosting.com
Vysoký výkon, vybavený procesorem AMD EPYC, úložištěm NVMe SSD a LiteSpeedem, nepřetržitá interní podpora odborníků 24 hodin denně a 7 dní v týdnu, pokročilá bezpečnostní opatření včetně SSL, ochrany proti útokům hrubou silou, malwaru a DDoS, úspora až 731 TB/měsíc.
LOGO hosting.com přístupová stránka 
<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面上的“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置（主菜单）
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

// 对评论表单、搜索表单等输出 HTML5 标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加对<title>标签的WordPress原生支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 引入样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

Implementace responsive layoutu a stylů

Responzivní design znamená, že váš web poskytuje dobrý zážitek při prohlížení na různých zařízeních s různými rozměry, jako jsou stolní počítače, tablety a mobilní telefony. Toho dosahujeme především pomocí CSS mediálních dotazů (Media Queries) a fluidního uspořádání stránek.

Nejprve, style.css Pod metadaty sepsat základní globální styly, které položí základ pro responzivní design. Používáme moderní CSS layoutové techniky, jako je Flexbox.

/* 基础样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
header, footer {
    background: #f4f4f4;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
}
main {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
article {
    flex: 1 1 300px; /* 基础宽度300px，可伸缩 */
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #ddd;
}

Následně přidejte mediální dotazy, které umožní přizpůsobení obsahu různým šířkám obrazovek. To je jádrem responsivního designu.

Doporučujeme k přečtení. Vytvořte jedinečný web: kompletní průvodce vývojem WordPress témat od začátku až po pokročilou úroveň.。

/* 平板设备（宽度小于 768px） */
@media (max-width: 768px) {
    body {
        padding: 0 15px;
    }
    main {
        flex-direction: column;
        gap: 1.5rem;
    }
    article {
        flex: 1 1 auto;
    }
}

/* 手机设备（宽度小于 480px） */
@media (max-width: 480px) {
    header, footer {
        padding: 1rem;
    }
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.2rem;
    }
}

Optimalizace reaktivního chování navigačního menu

Na malých obrazovkách zařízení, jako jsou mobilní telefony, se tradiční horizontální navigační menu mohou jevit jako přeplněná. Běžným řešením je přeměnit je na „hamburger menu“ (tj. menu zobrazené jako trojúhelník). K implementaci tohoto řešení potřebujeme kombinovat CSS a trochu JavaScriptu.

Nejprve, header Částečná úprava HTML struktury menu obvykle probíhá pomocí nástrojů dostupných v WordPressu. wp_nav_menu Generování funkce. Pro účely řízení stylu jsme této funkci přidali název třídy a také tlačítko ve tvaru hamburgeru.

Shared hosting od InterServeru
Sdílený hosting za 1 TB + 5 TB měsíčně za 2,50 USD, slevový kód tryinterserver pro první měsíc za 1 TB + 5 TB za 0,1 USD, a 461 skriptů cloudových aplikací k jednoduché instalaci.
Logo InterServeru přístupová stránka

Ve vašem header.php V souboru šablony (je potřeba z…) index.php Pokud by se kód menu měl oddělit (např. z hlavního kódu aplikace), mohl vypadat následovně:

<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">菜单</button>
<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_id'        => 'primary-menu',
    'menu_class'     => 'nav-menu',
) );
?>

Poté, v CSS se menu ve výchozím nastavení skrývá na malých obrazovkách. Když uživatel klikne na tlačítko ve tvaru hamburgeru, pomocí JavaScriptu se změní přiřazená třída (např.…) .toggled) se zobrazí menu.

/* 小屏幕下隐藏菜单 */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .nav-menu.toggled {
        display: flex;
    }
    .menu-toggle {
        display: block;
    }
}
/* 大屏幕下显示菜单并隐藏按钮 */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
    .nav-menu {
        display: flex;
        list-style: none;
    }
}

Na závěr přidejte jednoduchý soubor s kódem v JavaScriptu (například: js/navigation.jsA prostřednictvím toho… functions.php Zavádíme mechanismus pro zpracování událostí kliknutí na tlačítka.

Vytvoření vlastních šablon stránek a komponent

Flexibilita WordPressu se do značné míry odvíjí od jeho systému šablon a komponent (Widgetů). Vytváření vlastních šablon a oblastí pro komponenty může výrazně rozšířit funkce vašeho tématu.

Vytvoření vlastního šablónu stránky

Předpokládejme, že chcete vytvořit šablonu “úplně široké stránky”, která nemá postranní lišty a obsah stránky zabírá celou šířku. Nejprve v hlavním adresáři tématu vytvořte nový soubor a pojmenujte ho… page-fullwidth.phpNa nejvyšším místě tohoto souboru musí být přidán komentář s názvem šablony.

<br />
<main id="main" class="site-main full-width">
    &lt; ?php
    zatímco (existují příspěvky) :
        the_post();
        the_title( &#039;<h1 class="entry-title">', '</h1>' );
        the_content();
    endwhile;
    ?&gt;
</main>
<br />

Nyní, když v administraci WordPressu vytváříte nebo upravujete stránku, můžete v rozbalovacím menu “Šablona” pod položkou “Vlastnosti stránky” zvolit možnost “Celoplošná stránka”. Po tomto výběru bude tato stránka renderována pomocí právě vytvořeného šablonového souboru.

Registrační sekce pro nastavování prvků na bočním panelu

Oblast pro přidávání komponent umožňuje uživatelům přidávat obsah na konkrétní místa tématu (např. do postranního panelu, do patra stránky) pomocí přetahování. Potřebujeme… functions.php Zaregistrujte si oblast pro bokovou lištu.

Použití register_sidebar Funkce slouží k registraci. Tato funkce přijímá pole parametrů, které slouží k definování názvu, ID, popisu a zábalového tagu bočního panelu.

Funkce my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hlavní postranní panel', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Zde přidejte widgety.', 'my-first-theme' ),
        'before_widget' =&gt; '  Funkce my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hlavní postranní panel', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Zde přidejte widgety.', 'my-first-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>'function my_first_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'My first theme',  
            'id' =&gt; 'my_first_theme',  
            'desc' =&gt; 'Sidebar for my first theme',  
        ),  
    ) );  
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Po registraci budete muset v příslušném místě šablony tématu vyvolat tuto část obsahu. Obvykle se boční panel nachází… sidebar.php Ve souboru, a poté v hlavním šablonovém souboru (např.) index.php 或 single.phpProstřednictvím get_sidebar() Zavedení funkce.

在 sidebar.php V čínštině se používá dynamic_sidebar Funkce slouží k výstupu informací o oblastech jednotlivých komponent.

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

Závěr

Vývoj a přizpůsobení vašeho prvního responzivního WordPress tématu je proces plný výzev, ale zároveň i velkého uspokojení. Podle kroků uvedených v tomto článku jste si od začátku vytvořili vývojové prostředí a vytvořili základní soubory, které jsou pro téma nezbytné. style.css 和 index.phpA prostřednictvím… functions.php Byly vylepšeny funkce tém. Důkladně jste se věnovali praktickému využití responsive designu a pomocí CSS media queries a Flexbox layoutu zajistili kompatibilitu webové stránky na různých zařízeních. Nakonec jste také prozkoumali výkonný systém šablon a API komponent WordPress a naučili se vytvářet vlastní šablony stránek a oblasti pro přetahování komponent.

Po zvládnutí těchto základů můžete pokračovat v prozkoumávání pokročilejších funkcí témat WordPress, jako jsou vlastní typy článků, API pro přizpůsobování témat, podpora editoru bloků atd., a tak vytvořit temata s většími možnostmi a profesionálnějším designem.

Časté dotazy

Musí se vývoj témat začínat od nuly?

Nemusí to být nutné. I když začátek od nuly vám umožní plně ovládnout a pochopit každý detail, pro začátečníky nebo situace, kdy je potřeba rychle vyvíjet, je efektivnější začít s existujícími základními tematikami (např. Underscores, _s) nebo s frameworky (jako jsou integrované tematiky Bootstrap). To vám poskytne solidní základ kódu v souladu s osvědčenými postupy, na kterém můžete dále stavět a přizpůsobovat.

Jak ladit můj WordPress téma?

Během vývoje pro WordPress se často používá metoda ladění, která spočívá v aktivaci… WP_DEBUG…Ve vašem… wp-config.php V dokumentu budou uvedeny následující informace: define( 'WP_DEBUG', false ); Změnit na… define( 'WP_DEBUG', true );Tím se WordPress donutí zobrazovat všechny PHP chyby, varování a upozornění na obrazovce. K ladění JavaScriptu, CSS a síťových požadavků lze také využít nástroje pro vývojáře v prohlížeči (konzola, kartice „Prvky“ a „Síť“).

Proč se změna mého tématu neprojevila okamžitě?

Obvykle je to způsobeno mezipamětí prohlížeče nebo pluginem pro mezipaměť WordPress. Nejprve zkuste provést nucené obnovení stránky v prohlížeči (stiskněte Ctrl+F5 nebo Cmd+Shift+R). Pokud používáte plugin pro mezipaměť, vyprázdněte jeho mezipaměť. Také se ujistěte, že upravujete správný soubor ve složce aktuálního aktivního tématu. functions.php Pro soubory někdy stačí pouze obnovit stránku na pozadí (refresh), protože tento soubor je při každém načtení stránky znovu přečten.

Jak zajistit, aby můj webový design („témata“) podporovalo více jazyků?

Umožnit tématu podporu více jazyků ( internacionalizace a lokalizace) je dobrým návykem. To zahrnuje hlavně dvě kroky: Za prvé, ve všech částech tématu, kde je potřeba text přeložit, je třeba použít funkce pro překlad v WordPressu. __('Hello World', 'my-first-theme')Zadruhé, pomocí nástrojů jako Poedit provedete skenování souborů temat a vytvoříte potřebné data. .pot Šablonový soubor a poté vytvořte odpovídající verzi pro každý jazyk. .po A po kompilaci .mo Soubor a umístěte ho do tématu. /languages/ V adresáři. Nakonec, functions.php Použijte to v čínštině. load_theme_textdomain Funkce pro načtení překladu.

Na co je třeba dbát při vývoji komerčních témat?

Vývoj komerčních temat určených k distribuci vyžaduje mnohem vyšší standardy než vývoj temat pro osobní použití. Je nutné striktně dodržovat pravidla přijímání nových temat v adresáři WordPressu, aby bylo zajištěno bezpečí kódu a absence chyb. Všechny vstupy a výstupy od uživatelů musí být přísně označeny a ověřeny pomocí bezpečných funkcí. esc_html, esc_urlTéma by mělo obsahovat podrobné dokumentace a poznámky. Dále je velmi doporučeno, abyste vaše téma podporovalo základní funkce WordPressu, jako je blokový editor a vlastní logo, a abyste zajistili kompatibilitu s populárními doplňky. Nakonec zvažte přidání podpory pro přizpůsobení tématu, aby uživatelé mohli dosáhnout intuitivního a v reálném čase provedeného úprav.

Jaký je další krok? Co bych měl udělat dál?

Pokud právě vytváříte nebo optimalizujete webové stránky pomocí WordPressu, doporučujeme vám pokračovat ve čtení o optimalizaci výkonu, konfiguraci pluginů a přizpůsobování témat.

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.

Štítky: