Homepage/Kennis/WordPress/De details van de inhoud

Beheer de belangrijkste technieken: maak je eerste WordPress-thema vanaf nul.

3 minuten leestijd
2026-03-19
2026-06-04
2,807
Ik verdien commissies wanneer je via de onderstaande links winkelt, zonder dat dit extra kosten voor jou met zich meebrengt.

Ontwikkelingsomgeving en voorbereiding van basisbestanden

Voordat je met het schrijven van code begint, is het van belang om een stabiele lokale ontwikkelomgeving op te zetten. Dit zorgt ervoor dat je kunt testen zonder dat de online website wordt beïnvloed. Het wordt aanbevolen om tools als Local by Flywheel, XAMPP of MAMP te gebruiken om snel een lokale serveromgeving op te bouwen met PHP en MySQL.

Volgens de opgegeven instructies moet je nu naar de installatie-map van WordPress gaan. wp-content/themes Maak binnen de map een nieuwe map voor je onderwerp, bijvoorbeeld met de naam: my-first-themeDeze map is de rootmap van je thema. Vervolgens moet je twee basisdocumenten maken die essentieel zijn:style.css 和 index.php。

style.css Het bestand bevat niet alleen je thema-stijlbestand, maar ook, en dat is nog belangrijker, een thema-informatiehoofd (Theme Header) dat is opgesteld met CSS-commentaren. Dit thema-informatiehoofd is het enige bewijs dat WordPress herkent welk thema je gebruikt.

Aanbevolen leesmateriaal Van nul naar één: een handleiding en praktische tips voor het ontwikkelen van WordPress-themes。

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个从零开始创建的 WordPress 主题示例。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

index.php Dit is het hoofdtemplate-fail voor je thema, en ook het laatste alternatief dat WordPress gebruikt wanneer het een template probeert te vinden. Het moet in ieder geval de vereiste oproepen van het WordPress-core bevatten, zodat de header, de inhoud en de footer van de pagina kunnen worden weergegeven.

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.
Het logo van UltaHost. toegangspagina 
<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
    
</body>
</html>

Het begrijpen van de structuur (of 'laag niveau') van een template met betrekking tot het thema

Voordat je andere templatebestanden maakt, is het belangrijk om de templatehiërarchie (Template Hierarchy) van WordPress te begrijpen. Deze bepaalt welke templatebestand WordPress gebruikt om verschillende soorten pagina’s (zoals de startpagina, artikelpagina’s, specifieke pagina’s en categoriepagina’s) te weergeven. Als je bijvoorbeeld een specifieke artikel bezoekt, zal WordPress op volgende manier naar de juiste template zoeken:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> index.phpAls je deze regel beheerst, kun je door het maken van specifieke bestanden… single.php 或 page.phpOm het uiterlijk van verschillende pagina's precies te kunnen controleren…

Het bouwen van een kerntemplate voor een thema

Een volledig thema zou niet alleen uit één onderdeel moeten bestaan. index.phpOm een betere organisatie en hergebruik van het codebestand te realiseren, moeten we de pagina opdelen in meerdere delen en deze delen invoeren via functies.

Het onderscheiden van de kop en voet van een pagina

Creeren header.php Deze bestand bevat de koppen (headers) van HTML-documenten, waaronder de `DOCTYPE`-informatie., <head> Een deel van de inhoud, evenals het begin van het hoofddeel van de pagina (zoals de website-titel en de hoofdnavigatie). Hierop volgens moet de inhoud worden gecreëerd. footer.php Deze bestand wordt gebruikt om inhoud aan de onderkant van de pagina op te slaan (bijvoorbeeld auteursrechtniveau-informatie) en afsluitende tags.

Daarna, index.php Daarin kun je het gebruiken. get_header() 和 get_footer() Gebruik functies om deze elementen in te voeren, zodat de structuur duidelijker wordt.

Aanbevolen leesmateriaal Volledig handboek voor beginners in het ontwikkelen van WordPress-themes: bouw je eerste thema van scratch。

Een template voor een sidebar maken

Als het onderwerp een sidebar vereist, kan deze worden gecreëerd. sidebar.php Deze bestand bevat gebruikte inhoud. dynamic_sidebar() Een functie die de sidebar oproept die is geregistreerd in het widgetgebied. In het hoofdtemplate wordt deze functie gebruikt. get_sidebar() Een functie wordt gebruikt om dit in te voeren.

Realisatie van een artikelcyclus en contenttemplates

De artikelcyclus vormt het hart van een WordPress-thema en wordt gebruikt om artikelen uit de database te halen en te weergeven. index.php 或 single.php Hier gebruiken we een standaard cyclische structuur. Om de weergave van artikelen op verschillende pagina's (zoals de homepagina, archievenpagina en de individuele artikelpagina) modulerder te kunnen beheersen, is het mogelijk om… content.php Of worden ze apart gecreëerd. content-single.php 和 content-excerpt.php。

Binnen de loop: gebruiken get_template_part() Er zijn functies beschikbaar om deze contenttemplatebestanden op te roepen, bijvoorbeeld:get_template_part( 'content', get_post_format() );。

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%
hosting.com logo toegangspagina

Integratie van themafuncties en styling

Een uitstekend thema moet niet alleen goed uitsehen, maar ook zijn mogelijkheden worden versterkt met functionele bestanden.

Introduceren van themafunctiebestanden

Creeren functions.php Deze bestand is geen template-bestand, maar vormt het “brein” van het thema. Het wordt gebruikt om functies van het thema toe te voegen, het registratiemenu en de sidebar in te richten, en om scripts en stijlen te laden. Het wordt automatisch door WordPress geladen wanneer het thema wordt geïnstalleerd.

In deze bestand kun je gebruikmaken van… add_theme_support() Functies om themefuncties te activeren, zoals artikelafbeeldingen (Featured Image), aangepaste logos (Custom Logo) en ondersteuning voor HTML5-markeringen.

Aanbevolen leesmateriaal WordPress-themaontwikkeling van het begin tot de volmaaktheid: een essentieel handboek voor het bouwen van persoonlijke websites。

function my_first_theme_setup() {
    // 添加文章和评论的 RSS feed 链接到 head
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Registratiegebied voor widgets

在 functions.php In, gebruiken register_sidebar() Een functie kan één of meerdere Widget Areas definiëren, waardoor gebruikers op de achtergrondinterface voor widgets componenten kunnen slepen en plakken.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hoofdzijbalk', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Voeg hier widgets toe.', 'my-first-theme' ),
        'before_widget' =&gt; '   function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hoofdzijbalk', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Voeg hier widgets toe.', '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(  
        'name' =&gt; 'My First Theme Sidebar',  
        'id' =&gt; 'my-first-theme-sidebar',  
        'description' =&gt; 'De eerste sidebar van mijn thema',  
    ) );  
    add_action( 'widgets_init', 'my_first_theme_widgets_init' );  
};

De stijlen en scripts worden correct geladen.

Vergeet nooit om rechtstreeks in de templatebestanden niets te gebruiken. <link> 或 <script> CSS- en JavaScript-bestanden worden vaak hardgecodeerd in de HTML-code. De juiste manier om dit te doen, is door de bronadressen van deze bestanden te gebruiken in de HTML-elementen. Hierdoor worden de bestanden automatisch en correct geladen op de gebruikerscomputer. functions.php Gebruikt in het Chinees (vereenvoudigd) wp_enqueue_style() 和 wp_enqueue_script() Function, en mounten het wp_enqueue_scripts Op de haak. Dit zorgt ervoor dat de afhankelijkheden correct zijn en dat dubbele laden wordt voorkomen.

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.
InterServer logo toegangspagina 
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载导航脚本，依赖 jQuery
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Internationalisatie van het thema en voorbereiding op de publicatie

Implementeren van thematische vertalingen

Om zodat je thema gebruikt kan worden door gebruikers overal ter wereld, is internationalisering (i18n) een essentieel stap. Dat betekent dat je alle teksten die gericht zijn naar gebruikers moet omringen met vertaalfuncties. De meest gebruikelijke functie hiervoor is… __()(Dit wordt gebruikt om vertalingen in PHP weer te geven) En _e()(Dit wordt gebruikt om vertalingen uit te geven in PHP.) Tevens: style.css De koppen en… functions.php In de laadfunctie moet de tekstdomain (Text Domain) correct worden ingesteld, net zoals we dat eerder hebben gedaan. my-first-theme。

Voer de eindtesten uit en comprimeer de gegevens.

Voor de publicatie moet het product grondig getest worden in verschillende omgevingen (verschillende PHP-versies, verschillende WordPress-versies) en op verschillende apparaten (desktop, tablet, telefoon). Controleer of alle templatebestanden goed werken, of de functies zoals verwacht zijn uitgevoerd, en of het product voldoet aan de officiële WordPress-themaregels.

Ten slotte: verwijder alle debugcode en commentaren (tenzij deze voor de gebruikers van nut zijn), en compressieer je CSS- en JavaScript-bestanden met hulpmiddelen als CodeKit of online compressoren om de grootte te verkleinen. Pak het hele themapakket in een ZIP-bestand in, zodat je het kunt indienen in het themadirectory van WordPress.org of kunt distribueren aan gebruikers.

Samenvatting

Het opnieuw maken van een WordPress-thema vanaf nul is een systeematische leerproces. Dit omvat het opzetten van een omgeving, het begrijpen van de structuur van templates, het bouwen van de belangrijkste template-bestanden, tot het... functions.php Een volledig proces voor het integreren van geavanceerde functies. Het belangrijkste is om de codingstandaarden en beste praktijken van WordPress te volgen, zoals het gebruik van ingebouwde functies, het correct invoeren van bronnen en het realiseren van internationalisering. Door de stappen uit dit artikel te volgen, zal je niet alleen een werkend thema krijgen, maar ook een dieper inzicht in de kernmechanismen van WordPress-themes. Dit vormt een solide basis voor het ontwikkelen van nog complexere en professionelere thema's.

Veelgestelde vragen (FAQ)

Is het nodig om PHP te beheersen om een thema te creeren?

Ja, een goede kennis van PHP is essentieel om zelf WordPress-themes te ontwikkelen. WordPress is immers zelf geschreven in PHP, en alle templatebestanden (zoals…) index.php, single.phpFunction filesfunctions.phpAlles wordt rechtstreeks met PHP-code gemaakt om dynamisch content te genereren, databases te raadplegen en logische processen uit te voeren. zonder kennis van PHP kun je de essentieelste delen van het systeem niet begrijpen of gebruiken.

Moet de ontwikkeling van een thema alle code opnieuw vanaf nul schrijven?

Niet altijd. Voor beginners is het zeer verstandig om vanaf nul te beginnen. In de praktijk gebruiken ontwikkelaars echter vaak een “Starter Theme” of een “Parent Theme” als basis. Het officiële _Underscores (_s)-themaprogram is bijvoorbeeld een minimalistisch en hoogkwalitatief thema dat voldoet aan de coderingsspecificaties. Het bevat al een basisstructuur van bestanden en veelgebruikte functies, waardoor je direct kunt starten met ontwikkelen. Dit bespaart tijd en zorgt voor een betere kwaliteit van je code.

Welke gevolgen kunnen er zijn als er een fout is in het bestand functions.php?

functions.php Sintaxisfouten of fatale fouten in een bestand kunnen zorgen voor een “White Screen of Death” op een WordPress-site, waardoor zowel de front-end als de back-end beheerinterface niet meer bereikbaar zijn. Dit komt doordat het betreffende bestand al in een vroege fase van het laden van het thema wordt uitgevoerd. In dit geval moet je het foutieve thema-bestand via FTP of een bestandsbeheerprogramma op de server vervangen door een werkend thema (bijvoorbeeld Twenty Twenty-Six), zodat de toegang tot de site wordt hersteld. Daarna kun je de foutige code zelf repareren.

Hoe zorg ik ervoor dat mijn thema ondersteund wordt door het Gutenberg-editor?

Om het thema beter te ondersteunen bij het gebruiken van de Gutenberg-block-editor, moet eerst… functions.php Gebruikt in het Chinees (vereenvoudigd) add_theme_support( ‘editor-styles’ ) Om de ondersteuning voor editor-stijlen te activeren, moet je dit eerst doen. Daarna kun je het gebruiken. add_editor_style() De functie introduceert je thema-stylesheet of een CSS-bestand dat speciaal is gemaakt voor de editor in de achtergrondeditor. Dit zorgt ervoor dat de stijl die de gebruiker ziet tijdens het bewerken zo consistent is mogelijk met de weergave op de front-end. Daarnaast kun je ook ondersteuning toevoegen voor functies als breedtealignering en kleurpersonalisatie.

De volgende stap, wat moeten we als volgende doen?

Als je een WordPress-website aan het opzetten of optimaliseren bent, raden we je aan om verder te lezen over prestatie-optimalisatie, plug-inconfiguratie en thema-aanpassingen.

Voor meer informatie en praktische kennis

De volgende content is relevant voor het onderwerp van dit artikel en is geschikt voor verder lezen. Het kan vaak effectief zijn om eerst het artikel te lezen dat het dichtst bij uw huidige vraagstuk staat en vervolgens geleidelijk aan artikelen over aanverwante onderwerpen te bekijken.

Labels: