Kompletní průvodce vývojem témat WordPressu: od začátku až po vytvoření vlastního tématu.

Přípravné práce a nastavení prostředí.

Předtím, než začnete psát první řádky kódu, je správné vývojové prostředí polovinou úspěchu. Efektivní lokální vývojové prostředí vám umožní rychle testovat a provádět změny, aniž byste museli používat produkční server.

Nastavení lokálního vývojového prostředí.

Doporučujeme použít místní serverový software, například Local by Flywheel、MAMP 或 XAMPPTyto nástroje lze nainstalovat jedním kliknutím. Apache(Nebo Nginx）、MySQL 和 PHPDokonalá simulace online serverového prostředí. Po instalaci lokálního prostředí vytvořte novou instalaci WordPressu. Ujistěte se, že vaše verze PHP je 7.4 nebo vyšší, a že jsou aktivována nezbytná rozšíření, jako například mysqli 和 gd。

Výběr editorů a nástrojů pro kódování

Výběr výkonného editoru kódu je nesmírně důležitý.Visual Studio Code、PhpStorm 或 Sublime Text Obě jsou vynikající volbou a mají pozitivní vliv na PHP、HTML、CSS、JavaScript 和 WordPress Všechny funkce mají dobré zvýraznění syntaxe a funkci nápovědy kódů. Kromě toho je možné nainstalovat nástroje pro vývojáře prohlížeče (například Chrome DevTools) a systémy pro řízení verzí (například Git). GitJe to také standardní součást moderního vývoje.

Doporučujeme k přečtení. Návod k vývoji témat pro WordPress: Vytvořte své první dílo od nuly.。

Pochopte základní strukturu tématu.

Nejjednodušší WordPress téma vyžaduje alespoň dva soubory:style.css 和 index.php。style.css Nejenže poskytuje styl, ale poznámky v záhlaví dokumentu také obsahují meta informace o tématu. A navíc… index.php Je to hlavní šablonový soubor tématu. Kromě toho obvykle kompletní téma obsahuje také header.php、footer.php、sidebar.php A také šablonové soubory pro různé typy obsahu, například single.php(Jednotlivý článek) a page.php(Samostatná stránka).

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.

přístupová stránka

Hlavní šablonový soubor a hierarchie šablon

WordPress používá komplexní systém hierarchie šablon k určení toho, která šablona se načte pro konkrétní stránku. Pochopení této hierarchie je klíčem k vytvoření flexibilních šablon.

Funkce a vytvoření šablonových souborů

Každý šablonový soubor je zodpovědný za vykreslení části stránky nebo konkrétního typu stránky. Například při přístupu k blogovému příspěvku bude WordPress postupně vyhledávat single-post-{slug}.php、single-post-{id}.php、single.php、singular.phpA nakonec se vrátit zpátky na index.phpMůžete přepsat výchozí způsob zobrazení vytvořením těchto souborů. Pořadí vyhledávání na domovské stránce je následující: front-page.php、home.phpA pak je tu index.php。

Pochopte hierarchii šablon.

Hierarchie šablon je řetězec vyhledávání od specifického k obecnému. Poskytuje vývojářům velkou flexibilitu. Například můžete vytvořit jedinečnou šablonu pro určitou kategorii (s ID 5) a jednoduše ji pojmenovat. category-5.phpWordPress ji bude upřednostňovat před běžnými. category.php 或 archive.phpDosažení této úrovně znamená, že můžete přesně kontrolovat zobrazení každé části webové stránky.

Podrobné vysvětlení běžně používaných souborů šablon jádra.

Pojďme se podrobněji podívat na několik nezbytných dokumentů.header.php Obvykle obsahuje deklaraci typu dokumentu, Začínající části oblastí a webových stránek (například logo a navigační menu). V ní budete volat wp_head() Funkce, která je hookem pro klíčový kód výstupu jádra WordPressu a pluginů.footer.php Zahrnuje koncovou část webové stránky a volá funkci. wp_footer() Funkce.functions.php Ačkoliv se nejedná o šablonový soubor, je to “mozek” tématu, který slouží k přidávání funkcí, registrování menu, postranních panelů atd.

Doporučujeme k přečtení. Kompletní průvodce vývojem pluginů pro WordPress: od nuly až po pokročilé techniky.。

Funkce tématu a vývoj funkcí

functions.php Dokumenty jsou centrem funkcí vašeho tématu. Zde můžete využít různé funkce nabízené WordPressem. Hook(Háky) k rozšíření nebo úpravě základních funkcí.

Initalizace tématu a přidávání funkcí

在 functions.php Na začátku obvykle používáme add_action Hooky slouží k inicializaci funkcí tématu. Běžným příkladem je použití after_setup_theme Hooky slouží k přidání funkcí podporovaných tématem.

function my_custom_theme_setup() {
    // 添加文章和评论的 RSS feed 链接到 head
    add_theme_support( 'automatic-feed-links' );
    // 让 WordPress 管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Registrační nástrojová oblast

Boční lišta nebo oblast nástrojů jsou běžnou součástí témat. Můžete je použít… register_sidebar Definují je pomocí funkcí. To umožňuje uživatelům dynamicky přidávat obsah v rozhraní “widgetů” v administrativní části WordPressu.

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.

přístupová stránka

Funkce my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Hlavní postranní panel', 'my-custom-theme' ),
        'id' => 'sidebar-1',
        'description' => __( 'Zde přidejte widgety do hlavního postranního panelu.', 'my-custom-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>',
    ) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );

Přidejte vlastní styly a skripty.

Aby byly kódy modulární a výkonné, měly by být soubory CSS a JavaScript spojeny pomocí wp_enqueue_style 和 wp_enqueue_script Funkce čekají na načtení. Nikdy nepřipojujte zdroje přímo do šablonových souborů. Správný postup je použít wp_enqueue_scripts Hák.

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
    // 加载自定义 JavaScript 文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Cyklické a tematické šablonové štítky

“ Cyklus ”je základním konceptem WordPressu, jedná se o kód PHP, který se používá k zobrazení článků na stránce. Šablonové značky jsou funkce PHP poskytované WordPressem pro načítání dynamického obsahu do šablon.

Pochopení hlavního cyklu WordPressu.

Cykly obvykle začínají na if ( have_posts() ) : while ( have_posts() ) : the_post(); Začněme. Zkontroluje, zda aktuální dotaz obsahuje články, a poté projde každý článek. Uvnitř smyčky můžete použít například následující kód: the_title()、the_content()、the_permalink() Použijte šablonové značky k výstupu informací o článku. Po skončení smyčky je nutné použít endwhile; endif; Zavřít.

Doporučujeme k přečtení. Jak vyvinout vlastní WordPress téma od nuly: kompletní návod。

Používání běžně používaných šablonových tagů.

Šablonové značky zjednodušují výstup dat. Například,the_title() Budou přímo zobrazovat titulky článků, zatímco get_the_title() Poté se vrátí název řetězce, který můžete zpracovat. Mimo smyčku můžete použít get_header()、get_footer()、get_sidebar() Včetně odpovídajících šablonových komponentů. Podmíněné značky, jako například < is_home()、is_single()、is_page() To vám umožní spouštět různý kód v závislosti na typu aktuální stránky.

Vlastní dotazy a smyčky

Někdy potřebujete zobrazit seznam článků, které neodpovídají hlavnímu dotazu, například když na domovské stránce chcete zobrazit soubor článků z konkrétní kategorie. V takovém případě můžete použít WP_Query Třída vytvoří vlastní dotaz.

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.

přístupová stránka

$custom_query = new WP_Query( array(
    'post_type' => 'post',
    'category_name' => 'featured',
    'posts_per_page' => 3,
) );

if ( $custom_query->have_posts() ) {
    while ( $custom_query->have_posts() ) {
        $custom_query->the_post();
        // 输出文章标题、摘要等
        the_title( '<h3>', '</h3>'Zkontrolujte, zda existuje nějaký text v poli excerpt, a pokud ano, zobrazte ho jako výňatek. Pokud ne, použijte výchozí text.  
if ( ! is_null( get_the_excerpt() ) ) {  
    the_excerpt();  
} else {  
    the_content();  
}  
wp_reset_postdata(); // reset globální proměnnou $post

Po použití je nutné zavolat wp_reset_postdata() Abychom obnovili data hlavního dotazu a zabránili tak chybám v následném kódu.

Závěr

Vývoj témat WordPressu je proces, který kombinuje design, front-end technologie a programování v PHP. Začíná vytvořením lokálního prostředí, pokračuje hlubším pochopením struktury adresářů tématu a systému hierarchie šablon a končí u functions.php Pro rozšíření funkčnosti tématu pomocí hooků a funkcí a nakonec pro dynamické zobrazování obsahu pomocí smyček a šablonových značek tvoří základní cestu vývoje tématu. Dodržování standardů kódování a osvědčených postupů WordPressu, jako je správné načasování stylů skriptů a používání šablonových značek místo přímých dotazů na databázi, zajistí, že vámi vyvinuté téma bude efektivní, bezpečné a snadno udržovatelné. Nezapomeňte, že dobré téma má nejen pěkný vzhled, ale také jasnou strukturu kódu, stabilní fungování a dostatek prostoru pro přizpůsobení jak pro uživatele, tak pro vývojáře.

Časté dotazy

Jaké programovací jazyky jsou potřebné k vývoji témat WordPressu?

K vývoji plně funkčního WordPressového motivu potřebujete ovládat HTML, CSS a PHP. HTML slouží k vytváření struktury stránky, CSS se stará o styly a rozložení, zatímco PHP je vývojovým jazykem samotného WordPressu, který se používá ke zpracování logiky, načítání dat a generování dynamického obsahu. Kromě toho je užitečné znát i něco o JavaScriptu (zejména jQuery, protože je součástí jádra WordPressu) pro implementaci interaktivních funkcí.

Jak zajistit, aby mé téma podporovalo vícejazyčné překlady?

Podpora internacionalizace (i18n) v tématu je klíčová pro globální uživatele. Při vývoji tématu by všechny textové řetězce, které je třeba přeložit, měly být zabaleny pomocí překladových funkcí WordPressu, například () K zobrazení výstupu,() \nPro vrácení řetězce,_e() Používá se k přímému zobrazení. Také budete potřebovat load_theme_textdomain() V funkci je nastaveno textové pole (Text Domain), které je obvykle v souladu s názvem tématu. Překladatelé mohou použít soubory .po a .mo k poskytnutí překladových balíčků pro vaše téma v různých jazycích.

Jaký je rozdíl mezi podtématem a nadtématem a jak si mám vybrat?

Rodičovská témata jsou plně funkční a samostatně provozovatelné témata WordPress. Dceřiná témata závisí na rodičovském tématu, dědí všechny jeho funkce a styly, ale umožňují bezpečně přepisovat soubory rodičovského tématu (jako style.css, šablony) nebo přidávat nové funkce. Hlavním důvodem pro používání dceřiných témat je možnost provádět vlastní úpravy. Pokud je rodičovské téma aktualizováno, změny provedené v dceřiném tématu nebudou ztraceny. Jedná se o standardní a doporučený způsob přizpůsobování komerčních nebo rámcových témat, jako je Genesis nebo Underscores.

Jaký je nejlepší způsob, jak do tématu začlenit CSS a JavaScript?

Nejlepším způsobem je použít funkci fronty poskytnutou WordPressem:wp_enqueue_style() Pro CSS,wp_enqueue_script() Pro JavaScript. Musíte to přidat do souboru „theme.js“ v adresáři „/wp-content/themes/“. functions.php V souboru vytvoříme funkci, ve které vyvoláme tyto frontovací funkce, a poté tuto funkci připojíme k wp_enqueue_scripts Na tento akční háček. Tento způsob zajistí, že závislosti budou správně zpracovány, zabrání opětovnému načtení a usnadní správu pluginů nebo jiných témat. Nikdy nepoužívejte šablony přímo v souborech. 或 Zavedení tvrdě kódovaných štítků.