Van nul naar één: Een stappenplan om de essentiële technieken van het ontwikkelen van moderne WordPress-themes onder de knie te krijgen

Fundamentale concepten voor het ontwikkelen van moderne WordPress-themes

De architectuur van moderne WordPress-themes verschilt significant van de traditionele methoden. De belangrijkste veranderingen zijn het volledige gebruik van block-themes en het Full Site Editing (FSE)-model. Dit betekent dat het uiterlijk en de lay-out van een thema – van de header en footer tot de inhoud van de artikelen – kan worden gecreëerd en gewijzigd met behulp van “blocks” in de Gutenberg-editor, zonder dat er complexe PHP-sjablonen hoeven te worden geschreven.

De kernstructuur van een bestand met een modern thema is fundamenteel vereenvoudigd. Het belangrijkste template-bestand hierbij is…theme.jsonHet bepaalt de stijl van het thema, de kleurpalet, de opmaak en andere globale instellingen. Een andere zeer belangrijke bestand is…index.htmlHet vervangt de traditionele variant.index.phpAls standaardtemplate worden statische HTML-blokken gebruikt die door de editor kunnen worden verwerkt, om de structuur van de pagina op te bouwen.style.cssDe bestanden zijn nog steeds beschikbaar en worden voornamelijk gebruikt om de thema-informatie aan te geven. De meeste CSS-stijldefinities zijn echter overgebracht naar andere bestanden.theme.jsonOf wordt het beheerd door een editor.

Om backwards-compatibiliteit te bewaren, controleert WordPress of er een bestand met de naam ‘wp-content.php’ bestaat in de root-map van het thema.block-templates或templatesMappen. Deze mappen worden gebruikt om HTML-templaatbestanden op basis van blokken op te slaan, bijvoorbeeldsingle.html或page.htmlZe worden prioriterend gebruikt ten opzichte van PHP-templaatbestanden. Tevens is de manier waarop de stijlen en front-end-resources uit het thema worden verwerkt afhankelijk van…wp_enqueue_style和wp_enqueue_scriptFuncties worden meestal opgenomen in de hoofdbestand (de main file).functions.phpRegistreren en in de rij staan vindt hier plaats.

Aanbevolen leesmateriaal WordPress-themaontwikkeling van het begin tot de volmaaktheid: stap voor stap leert u hoe u eigen websites bouwt。

Het begrijpen van deze verschuiving in mindset – van het schrijven van statische PHP-templates naar het definiëren van stijl en structuur met JSON en blokmarkeringen – is de eerste stap in het beheersen van moderne themaontwikkeling.

UltaHost WordPress-hosting

30-daagse garantie voor het terugbetalen van het geld, onbeperkt bandbreedte- en databestand, gratis DDoS-beveiliging, en een prijsvoordeel van 50% bij een aankoop van 3 jaar.

toegangspagina

Creatie en configuratie van kernbestanden voor het thema

Om een moderne WordPress-thema te creëren, moet je eerst…wp-content/themesMaak een nieuwe themapagina in de map. Dit geldt ook voor block-themes.style.cssDe bestanden blijven vereist als “identiteitsbewijs”. Het commentaarblok aan het begin van de bestanden moet bevaten zijn op bepaalde informatie.

/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/

Vervolgens moet je een “brein” met een modern thema creeren.theme.jsonDeze JSON-bestand bevindt zich in de hoofdmap van het thema en wordt gebruikt voor het centraliseren van de instellingen van de globale stijl en het thema. Met dit bestand kun je het lay-out-systeem (bijvoorbeeld fontgrootte, fontfamilies), de kleurpalet en de standaardstijlen van blokken definiëren. Plugins en subthema's kunnen deze instellingen verder aanpassen om een persoonlijke stijl te creëren.theme.jsonDe structuur is als volgt:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "黑色", "slug": "black", "color": "#000000" },
        { "name": "白色", "slug": "white", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "14px" },
        { "name": "中", "slug": "medium", "size": "20px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)"
    }
  },
  "customTemplates": [
    {
      "name": "宽幅页面",
      "title": "宽幅页面",
      "postTypes": [ "page" ]
    }
  ]
}

Het hoofdtemplate van het themaindex.htmlDe standaardpaginastructuur is gedefinieerd. Deze bestaat geheel uit blokmerkeringen die zijn omgeven door HTML-commentaren die door de editor worden herkend. Voorbeeld:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Deze structuur verdeelt het header-, inhouds- en voetgebied duidelijk van elkaar.wp:post-contentDe inhoud van de artikelen wordt dynamisch in blokken geladen. Ten slotte moet er in de hoofdmap van het thema een map met de namen ‘Template Parts’ worden gecreëerd.partsEn plaats dit daarin.header.html和footer.htmlEn andere onderdelenbestanden.

Aanbevolen leesmateriaal Populaire instromsgids voor 2026: Hoe u vanaf nul uw eerste WordPress-thema maakt。

Pagines bouwen met templates en templateonderdelen

In de block-thema-indeling worden de lay-outstructuren van de pagina's voornamelijk gecreëerd met templates en template-parts. Templates worden gebruikt om het algemene ontwerp van bepaalde soorten pagina's (bijvoorbeeld een enkele artikel of een archievenpagina) vast te stellen, terwijl template-parts herbruikbare onderdelen zijn, zoals de header en de footer.

Templatebestanden worden meestal opgeslagen in het thema (theme) van een website.templatesBinnen de map. WordPress past automatisch specifieke templatebestanden toe voor verschillende soorten zoekvragen.single.htmlGebruikt voor het weergeven van één artikel.page.htmlGeschikt voor statische webpagina's.home.html或index.htmlGeeft gebruik voor de homepage van een blog. Je kunt hier...theme.json的customTemplatesDeze aankondigingen bevaten aangepaste templates, die de gebruikers in de pagina-editor kunnen kiezen.

De templateonderdelen zijn opgeslagen in:partsIn de map wordt de hergebruikbaarheid van code en de onderhoudsvriendelijkheid aanzienlijk verbeterd. Een headerbestand wordt gecreëerd.header.htmlJe kunt de bovenste regio van de pagina opbouwen met elementen als de titelblok en de navigatieblok. Een voetnotenbestand (footer file) kan ook worden gemaakt.footer.htmlHier kan je auteursrechtniveau-informatie en een gebied voor kleine tools plaatsen.

hosting.com gedeelde hosting

Hoge prestaties met AMD EPYC CPU's, NVMe SSD opslag en LiteSpeed, 24/7 deskundige interne ondersteuning, geavanceerde beveiligingsmaatregelen waaronder SSL, bescherming tegen brute kracht, malware en DDoS, besparingen tot 73%

toegangspagina

Een typisch…header.htmlHet kan er als volgt uitzien:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->

In dit voorbeeld:wp:navigationDe blokken worden beheerd via hun…refDe eigenschappen refereren naar een navigatiemenu dat is gecreëerd en gesaved in “Uiterlijk” -> “Editor” (met de ID 4). Dit illustreert de krachtige mogelijkheid om de inhoud en structuur van een hele website te separeren. Door deze onderdelen te refereren in het hoofdtemplate…Je kunt ze eenvoudig op de pagina invoegen.

Voor complexere lay-outs kun je gebruikmaken van…wp:group、wp:columns、wp:queryJe kunt blokken gebruiken om rijen, kolommen en cyclische inhoud te bouwen. Hier is een voorbeeld:wp:queryDe blokken kunnen dynamisch de meest recente artikelen weergeven; dit is vergelijkbaar met de hoofdloop (main loop) in traditionele thema's. Nu wordt dit echter geheel geregeld via een visueel editor.

Aanbevolen leesmateriaal Van nul tot expert: Een volledig handboek en praktische tutorial voor het ontwikkelen van WordPress-themes。

Functies en stijlen worden toegevoegd via bestanden met functies.

Hoewel de thema's van de blokken sterk afhankelijk zijn van...theme.jsonEn HTML-templates, maar…functions.phpDe bestanden blijven het kernpunt van de extensietoepassingen voor thema's. Het gaat om PHP-bestanden zonder teruggegeven waarden, die worden gebruikt om functies te toevoegen, stijlscripten te registreren en de ondersteuning voor thema's te definiëren.

Een basisoperatie is het registreren en opstellen van een lijst met de sjablonen en scripts voor thema’s. Ook al bestaan de sjablonen voornamelijk uit…theme.jsonHet kan nog steeds nodig zijn om extra, aangepaste CSS-klassen te gebruiken voor het beheer.

InterServer gedeelde hosting

Shared hosting $2.50 USD per maand, eerste maand $0.1 USD promo code tryinterserver, 461 cloud apps scripts, een klik te installeren.

toegangspagina

function my_modern_theme_setup() {
    // 添加对特定功能的支持，例如自定义标志
    add_theme_support('custom-logo');
    // 通过区块编辑器添加主题样式
    add_theme_support('wp-block-styles');
    // 添加对全站编辑器的支持
    add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');

function my_modern_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style(
        'my-modern-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
    // 排队编辑器样式
    add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');

functions.phpHet is ook een uitstekende plek om zelfontworpen, functionele elementen toe te voegen. Bijvoorbeeld kun je hier…register_block_styleDe functie registreert een custom visuele variant voor bestaande kernblokken (zoals paragrafen), zodat deze te zien zijn in het “Stijl”-paneel van de editor en kunnen worden gekozen door de gebruiker.

// 为段落块注册一个“特别提示”样式
register_block_style(
    'core/paragraph',
    array(
        'name'         => 'notice',
        'label'        => __( '特别提示', 'my-modern-theme' ),
        'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
    )
);

Daarnaast kun je ook gebruikmaken van hooks (bijvoorbeeld)...wp_head、wp_footerVoeg zelfgemaakte code toe, of doe dit op een andere manier.add_filterDe standaardverwerking van vragen en de uitgegeven inhoud kunnen worden gewijzigd. Voor complexe, maatgeschikte vereisten kan het beter zijn om een klein plugin te maken; dit biedt meer modulariteit.

Testen en debuggen

Nadat de ontwikkeling is afgerond, is het van belang om het thema grondig te testen. Allereerst moet het thema worden geactiveerd in een lokale of tijdelijke omgeving, om te controleren of de basisopstelling van de front-end-pagina's, het responsieve ontwerp en de stijl van alle belangrijke elementen (koppen, paragrafen, afbeeldingen, galeries, knoppen, etc.) correct weergegeven worden. Daarnaast moet worden gecontroleerd of het navigatiemenu en de links goed werken.

Ten tweede is het nodig om de Gutenberg-editor grondig te testen. Maak nieuwe pagina's en artikelen en probeer complexe lay-outs te bouwen met verschillende blokken. Kontroleer of de toolbars en instellingen van deze blokken goed werken, en of het mogelijk is om stijlen aan te passen (bijvoorbeeld via speciale opties in de editor).theme.jsonOf de gedefinieerde kleurpaletten of fontgrootten correct zijn toegepast op de verschillende blokken, moet worden gecontroleerd. Het is belangrijk om de website-editor te gebruiken (“Uiterlijk” -> “Editor”) en te proberen met elementen als de koppen, voeten en het homepage-template te werken. Zorg ervoor dat de gewijzigingen na het opslaan ook daadwerkelijk worden weergegeven op de website.

Foutopsporing is een essentieel onderdeel van moderne ontwikkeling. Open de ontwikkelaarstool van je browser (meestal met F12) en controleer of er JavaScript-fouten of CSS-conflicten zijn.wp-config.phpMaak een nieuwe map in de app Instellingen.define('WP_DEBUG', true);Op de pagina kunnen PHP-waarschuwingen en fouten worden weergegeven, waardoor je snel kunt bepalen waar het probleem in je code zit. Zorg ervoor dat het thema voldoet aan de codingstandaarden van WordPress, en controleer ook of er fouten in de HTML-structuur zijn met de W3C-valider in de console.

Ten slotte moet de cross-platform-compatibiliteit worden getest in verschillende browsers (Chrome, Firefox, Safari, Edge) en op verschillende apparaten (desktop, tablet, smartphone), om te zorgen dat alle gebruikers een gelijkmatige ervaring hebben.

Samenvatting

De ontwikkeling van moderne WordPress-themes is een innovatie op het gebied van concepten. Er is een verschuiving van het schrijven van procedurerende PHP-templates naar een andere benadering.theme.jsonDeclaratieve ontwikkeling, waarbij blockmarkeringen en het mogelijkheid om het hele website-content te bewerken centraal staan. Ontwikkelaars moeten deze technieken vloeiend beheersen.theme.jsonDe configuratie wordt gebruikt om de globale stijl te bepalen. HTML-block templates worden ingezet om de structuur van de pagina op te bouwen.functions.phpFuncties worden versterkt. Dit model verlaagt de drempel voor het aanpassen van lay-outs aanzienlijk, waardoor contentcreators veel meer designvrijheid krijgen. Daarnaast vereist het van ontwikkelaars dat ze diep in het systeem van de blokeditor kunnen duiken. Door het volgen van de hierboven genoemde kernvaardigheden, kun je flexibele, krachtige en toekomstbestendige WordPress-themes bouwen.

Veelgestelde vragen (FAQ)

Is PHP-kennis nog steeds nodig om met het thema '### Development Block' te werken?
Ja, dit is nog steeds nodig. Hoewel de belangrijkste structuur van de pagina wordt bepaald door HTML-templates,functions.phpDe bestanden blijven essentieel voor het toevoegen van thema's, het registreren van stijlscripten, en het dieper personaliseren van functies met behulp van hooks en filters. Bovendien is kennis van PHP van belang wanneer je dynamische templateonderdelen wilt maken die zijn gebaseerd op aangepaste zoekvragen, of wanneer je complexe bedrijfslogica wilt verwerken.

Kunnen block-themes en traditionele themes samenbestaan?

Ja, dat is mogelijk. WordPress bepaalt automatisch welk type thema het is. Als de rootmap van je thema bevat…theme.jsonFiles andtemplates/partsDe bloktemplates in de map worden door WordPress herkend als blokthema’s, waarna de mogelijkheid tot editeren op het hele website-niveau wordt geactiveerd. Ook al bestaan deze bestanden, wordt het traditionele PHP-template-systeem van het thema nog steeds als back-up behouden. Als de bloktemplate die correspondeert met een bepaald verzoek niet beschikbaar is, zal het systeem automatisch terugvallen op het gebruik van het corresponderende PHP-template.single.php）。

Hoe voeg ik custom CSS toe aan mijn block-topic?

Er zijn in principe drie manieren om dit te doen. De meest aanbevolen manier is…theme.jsonDe documenten vanstylesEen deel van de toegevoegde CSS-regels is van toepassing op het hele systeem of op specifieke blokken. Daarnaast is het ook mogelijk om deze regels aan te passen in het thema (theme).style.cssEr kunnen extra stijlregels worden opgenomen in het bestand. Voor een dynamischer of paginagespecifieke stijl kunt u deze regels ook op een andere plek opslaan.functions.phpGebruikt in het Chinees (vereenvoudigd)wp_add_inline_styleJe kunt custom-stijlen rechtstreeks in een functie toevoegen, of ze registreren voor een bepaald blok.

Is het editeren in de ‘algemene editmodus’ voor bestaande websites gevaarlijk?

Voor websites met bestaande inhoud moet je voorzichtig zijn wanneer je overgaat naar een geheel nieuw thema. Het is aan te raden om het thema eerst grondig te testen in een testomgeving (bijvoorbeeld je lokale ontwikkelingsomgeving of een tijdelijk station), om te controleren of alle bestaande inhoud correct wordt weergegeven en dat de lay-out niet verstoord wordt. Voordat je de overgang maakt, is het heel belangrijk om de hele website te back-uppen (inclusief bestanden en database). De functies van een website-editor zijn zeer krachtig, maar omdat je hierbij rechtstreeks de templates bewerkt, kan het ongewenste gevolgen hebben voor alle pagina's die gebruikmaken van deze templates.