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

Praktické vývoj tem pro WordPress: Vytvoření responzivních firemních webových stránek od nuly

Čtení za 2 minuty.
2026-05-23
2026-06-03
2,361
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.

Struktura projektu a přípravné práce

Než začnete psát kód, je klíčem k úspěchu správné plánování struktury projektu. Standardní složka pro tematiku WordPress by měla obsahovat následující elementy:/wp-content/themes/V adresáři by měla být název složky tvořena malými písmeny, podtržkami a čísly, například:my-enterprise-themeNejprve potřebujete vytvořit následující základní soubory:style.css、index.php、functions.phppřílišscreenshot.png。

style.cssNejedná se pouze o šablony stylů, ale také o “občanské doklady” tématu – blok poznámek na vrcholu obsahuje veškeré metadaty tohoto tématu. Standardní informace o hlavičce firemního tématu vypadají následovně:

/*
Theme Name: My Enterprise Theme
Theme URI: https://www.yourdomain.com/theme
Author: Your Name
Author URI: https://www.yourdomain.com
Description: 一个响应式、功能强大的企业级WordPress主题，专为现代企业官网设计。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-enterprise-theme
*/

functions.phpSoubory představují “mozek” tématu a slouží k načítání skriptů, stylů, registrací menu, bočních panelů a dalších funkcí. Na počátku vývoje bychom měli do těchto souborů bezpečně vložit hlavní šablonu stylů a soubory JavaScriptu.wp_enqueue_style和wp_enqueue_scriptFunkce jsou doporučeným způsobem použití v WordPressu.

Doporučujeme k přečtení. Podrobný rozbor Tailwind CSS: Praktický průvodce moderním CSS frameworkem od základů až po pokročilé znalosti。

Vytvoření základní šablonové soubory

WordPress určuje, který soubor se použije k renderování jednotlivých stránek, pomocí systému hierarchie šablon. Pro vytvoření firemní webové stránky je třeba začít z základních šablon.

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

Vytvořit základní šablonu rozložení

Části, které lze opakovaně použít, jako jsou hlavička, patka a boční lišty, by měly být rozděleny do samostatných souborů. Nejprve tedy vytvoříme…header.phpSoubor by měl obsahovat záhlaví HTML dokumentu, logo značky webové stránky a hlavní navigační menu. Navigační menu musí být…wp_nav_menuFunkční volání, a poté…functions.phpProstřednictvím Čínyregister_nav_menusMísto registrace funkcí.

Vytvořitfooter.phpSoubor slouží k uložení informací o autorských právech, doplňujících odkazů a skriptů. Nakonec vytvořte…sidebar.phpChceme definovat obsah bočního panelu, a to také vyžaduje nejprve…functions.phpUžitečnéregister_sidebarRegistrování funkcí.

Implementace domovské stránky a stránek s články

index.phpJedná se o finální soubor určený k návratu na předchozí verzi šablony. Pro firemní weby obvykle potřebujeme upravenou (customizovanou) verzi této šablony.front-page.phpJako domovská stránka slouží k zobrazení bannérů, představení služeb, aktuálních zpráv a dalších modulů. Tento soubor toho dosahuje prostřednictvím volání…get_header()、get_footer()Funkce jako `wait` slouží k organizaci struktury stránek.

single.phpSlouží k zobrazení jednotlivých blogových článků nebo vlastních typů článků. Jádrem je použití WordPressového cyklu (The Loop) k výstupu obsahu článku, nadpisu, metadat (autor, datum) a komentářů. Pokud článek obsahuje speciální obrázek, lze jej také zobrazit.the_post_thumbnail()Funkce je volána pomocí příkazu.

Doporučujeme k přečtení. Vytváření WordPress temát bez kódu: Kompletní průvodce od základů až po pokročilé znalosti。

Implementace responsive designu a stylů

Webové stránky moderních firem musí poskytovat dobrý zážitek při prohlížení na různých zařízeních. Pro dosažení responzivního designu je třeba začít s myšlenkou upřednostňování mobilních zařízení.

Použití moderního CSS pro úpravu layoutu

Už se nepoužívají starší frameworky, místo toho se široce využívají techniky CSS Flexbox a Grid pro úpravu layoutu. Tím je možné lépe organizovat strukturu stránek a jejich prvek.style.cssDefinováním vlastních CSS proměnných (CSS Variables) lze spravovat designové parametry jako barvy, mezery a písma, což výrazně zvyšuje udržovatelnost kódu.

:root {
  --primary-color: #0073aa;
  --spacing-unit: 1rem;
  --font-heading: 'Helvetica Neue', sans-serif;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-unit);
}

Přidat mediální dotaz

Mediální dotazy jsou klíčem k implementaci responsivních prvků („reaktivních rozhraní“). Na konci souboru se stylů se nastaví rozvrh podle různých velikostí obrazovek.

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 
/* 平板电脑及更大屏幕 */
@media (min-width: 768px) {
  .content-area {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: calc(var(--spacing-unit) * 2);
  }
}

/* 桌面电脑 */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Integrace pokročilých funkcí s možnostmi personalizace

Webové stránky firem obvykle potřebují více než pouhé funkce běžných blogů – např. možnost vytváření vlastních typů článků (Custom Post Types – CPT), nástroje pro stavbu stránek a optimalizaci výkonnosti.

Vytvoření vlastního typu článku

Například vytvoření samostatných typů obsahu pro “členy týmu” nebo “úspěšné příklady”. To vyžaduje…functions.phpPoužijte to v čínštině.register_post_typeFunkce. Správné nastavení parametrů umožňuje, aby měla v pozadí samostatné editační menu a podporovala všechny standardní vlastnosti článků, jako jsou kategorie, tagy, speciální obrázky atd.

function register_team_post_type() {
    $args = array(
        'public' => true,
        'label'  => '团队成员',
        'supports' => array('title', 'editor', 'thumbnail'),
        'menu_icon' => 'dashicons-groups',
        'has_archive' => true,
    );
    register_post_type('team', $args);
}
add_action('init', 'register_team_post_type');

Přidání podpory pro nástroj pro přizpůsobení tématu.

WordPress Customizer umožňuje uživatelům upravovat vzhled témat bez nutnosti přistupovat k kódu.functions.phpNěco v čínštině (zjednodušené)add_action('customize_register', 'your_theme_customizer')„Hooky“ – možnost přidání nastavení a ovladačů, např. barvy hlavičky stránky nebo textu v patičce stránky.

Doporučujeme k přečtení. Vývoj WordPress temat od základů po pokročilé znalosti: Kompletní průvodce vytvářením responsivních temat。

Opatření pro optimalizaci výkonu

Rychlost je důležitým faktorem pro uživatelský zážitek na webových stránkách firem a pro výsledky v SEO. Mezi opatření ke zlepšení rychlosti patří např.:add_image_size()Generovat obrázky vhodných rozměrů pro různé zobrazovací oblasti; použítget_template_part()Modulární kód funkcí napomáhá ke zlepšení výkonu aplikace díky efektivnímu ukládání dat do mezipaměti (cache). Kromě toho je důležité správně nastavit způsob načítání skriptů a prvků grafického rozhraní, aby nedocházelo k zpoždění procesu renderování stránek.

Závěr

Vývoj firemního WordPress tématu je systémový proces, který začíná jasnou projektovou strukturou a postupně vytváří základ tématu pomocí vytváření klíčových souborů v souladu s hierarchií šablon. Responzivní design je základem pro zajištění kompatibility s různými zařízeními a vyžaduje použití moderních CSS technologií spolu s uplatněním principu „mobile first“ (přednost mobilním zařízením). Nakonec lze prostřednictvím integrace vlastních typů článků, možností přizpůsobení tématu a přísné optimalizace výkonu poskytnout zákazníkovi silné, flexibilní a efektivní webové řešení. Dodržováním těchto kroků nejen vytvoříte téma, které splňuje aktuální požadavky, ale také si vybudujete kódovou základnu, která bude snadná na údržbu a rozšíření v budoucnu.

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

Časté dotazy

###: Jak přidat podporu pro podtémata ke svému tématu?
Aby bylo zajištěno, že úpravy uživatelů nebudou při aktualizaci témat přepsány, doporučujeme uživatelům vytvářet podtémata. Ve vašem hlavním tématu byste měli vyhnout se používání pevně zakódovaných cest k šablonám a místo toho používat dynamické způsoby načítání šablon.get_template_directory_uri()místo tohoget_stylesheet_directory_uri()Uveďte odkazy na zdroje. Zároveň v tematickém dokumentu jasně vysvětlete, jak vytvořit podtémata.

Proč se můj vlastní typ článku po uložení nezobrazuje?

To je obvykle způsobeno tím, že pravidla přepisování nebyla aktualizována. Po registraci vlastních typů článků nebo kategorií je nutné přejít do administrace WordPressu na stránku “Nastavení” -> “Fixní odkazy” a jednoduše kliknout na tlačítko “Uložit změny”. Tím se pravidla přepisování aktualizují a nová struktura URL adres začne fungovat.

Jak bych měl přidat podporu více jazyků pro dané téma?

Potřebujete použít funkce pro internacionalizaci, abyste zabalili veškerý text viditelný pro uživatele. Například:__('Hello World', 'my-enterprise-theme')和_e('Hello World', 'my-enterprise-theme')Poté pomocí nástrojů, jako je Poedit, vytvoříte požadovaný obsah..potPřeložte šablonový soubor a nechte uživatele vytvořit něco na základě tohoto souboru..po和.moDokumenty. Nakonec vfunctions.phpProstřednictvím Čínyload_theme_textdomain()Překlad textu „Funkce načítání“: „Function loading“.

Jak zajistit, aby můj téma splňovalo standardy pro vložení do oficiálního katalogu WordPressu?

Témata musí striktně dodržovat Průvodce přezkumem WordPress temat. To zahrnuje: používání bezpečných praktik kódování (vyhodnocování výstupu, ověřování vstupu), nepřidávání nepotřebných třetích stran knihoven nebo doplňků, dodržování standardů PHP a HTML značek, podporu pomocných funkcí a splnění požadavků všech nástrojů pro automatizovaný testování. Doporučujeme během vývoje pravidelně používat doplněk Theme Check k samostatné kontrole.

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: