Homepage/Kennis/WordPress/De details van de inhoud

Een beginnetje met het ontwikkelen van WordPress-thema's: hoe je je eerste aangepaste thema vanaf nul maakt.

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

Om een volledig functionerende WordPress-thema te bouwen, moet je een aantal essentiële bestanden voorbereiden. Deze bestanden vormen de basis van het thema en ieder bestand heeft een specifieke rol.

De meest fundamentele bestanden zijn:
`style.css`: de stijlvolle tabel van het thema, die ook dienstdoet als de “identiteitskaart” van het thema. Hierin wordt informatie opgenomen als de naam van het thema, de auteur, een beschrijving en andere metagegevens.
`index.php`: Het hoofdmodelbestand van het thema, dat wordt gebruikt als standaardmodel voor de startpagina en de pagina met een lijst van artikelen.
* `header.php`：网站的头部模板，通常包含`<head>`部分和网站顶部的导航区域。
`footer.php`: De onderste template van de website, die meestal auteursrechtsinformatie, scripts, etc. bevat.
`functions.php`: het functiebestand van het thema, waarmee je aangepaste functies kunt toevoegen, menu's kunt registreren, sidebars kunt maken, etc.

Laten we beginnen met het maken van het `style.css`-bestand. Op de top van het bestand moet je een commentaar toevoegen met informatie over het thema.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习WordPress主题开发而创建的简单自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Volgens de instructies moet je nu de `index.php`-file maken. In de meest basale versie van deze file moet je de kop- (header) en voetnoten (footer) van het website-indelingssysteem invoeren, en vervolgens de artikelen op een cyclische manier weergeven (dus voor elke artikel moet de kop- en voetnoten opnieuw worden gebruikt).

<?php get_header(); ?>

<main id="main-content">
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>">
                <h2><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
                <div class="entry-content">
                    <?php the_content(); ?>
                </div>
            </article>
        
        <p>Er is geen artikel beschikbaar.</p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

De bestanden `header.php` en `footer.php` bevatten respectievelijk de algemene HTML-structuur voor de boven- en onderkant van de website. De bestand `functions.php` wordt gebruikt om de functionaliteiten van het thema te verbeteren.

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

Het begrijpen van de structuur van templates en het gebruik van cyclische constructies

WordPress gebruikt een intelligente systeem van template-lagen om te bepalen hoe de inhoud van verschillende pagina's wordt weergegeven. Als je bijvoorbeeld een specifiek artikel bezoekt, zal WordPress eerst naar het bestand `single.php` kijken; als je een categoriepagina bezoekt, wordt `category.php` gebruikt. Als deze bestanden niet bestaan, wordt `archive.php` gevraagd, en als ook dat niet werkt, wordt uiteindelijk `index.php` gebruikt.

Wat is een hoofdloop (main loop)?

`the loop`是WordPress主题开发的核心概念。它是一段PHP代码，用于从数据库中获取文章内容并将其显示在网页上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循环的开始。在循环内部，你可以使用一系列模板标签来输出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。

Aanbevolen leesmateriaal De ultieme gids voor het ontwikkelen van WordPress-thema's: van beginner tot expert.。

Create additional template files.

Om het thema professioneler te maken, moet je enkele standaardtemplatebestanden maken. Bijvoorbeeld `single.php`, waarmee artikelen apart kunnen worden weergegeven:

<?php get_header(); ?>

<main>
    <?php while ( have_posts() ) : the_post(); ?>
        <article>
            <h1><p><strong>Hallo wereld!</strong></p></h1>
            <div class="post-meta">
                发布于： | 作者：
            </div>
            <div class="post-content">
                <?php the_content(); ?>
            </div>
        </article>
        
</main>

<?php get_footer(); ?>

In dezelfde mate kun je `page.php` maken om de template voor een gewone pagina te definiëren, en `archive.php` om de template voor archiveringspagina's met categorieën, tags en dergelijke te definiëren.

Integreer het menu met de sidebar

Een modern thema bevat meestal een nauwkeurig te configureren navigatiemenu en een gebied met bijbehorende functies (tools) aan de zijkant van de pagina. Deze functies moeten worden geregistreerd en activerd in het bestand `functions.php`.

Registreren in het navigatiemenu

Voeg de volgende code toe in `functions.php` om een menu-item te registreren voor een thema, bijvoorbeeld “Hoofdmenu”.

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Na het registreren kunnen gebruikers in het WordPress-beheerpaneel, onder “Uiterlijk” → “Menü’s”, het menu toewijzen aan de gewenste positie. Vervolgens moet je in het bestand `header.php` de volgende code toevoegen op de plek waar het menu moet worden weergegeven:

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 
<nav id="site-navigation">
    <?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
    ) );
    ?>
</nav>

Voeg een sidebar met widgets toe

Widgets zijn een zeer flexibele functie van WordPress. Om een sidebar toe te voegen, moet je ook een “widgetgebied” registreren in `functions.php`.

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' );  
};

Vervolgens, in het templatebestand waar je de sidebar wilt weergeven (bijvoorbeeld `sidebar.php`), gebruik je de `dynamic_sidebar()`-functie om de sidebar te genereren en weergeven.

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

Ten slotte: vergeet niet om in `index.php` of `single.php` deze sidebar-indeling te gebruiken met `get_sidebar();`.

Aanbevolen leesmateriaal WordPress-themaontwikkelingsgids: Hoe je van nul een custom thema bouwt。

Stijlen en scripts toevoegen

为了保持代码的整洁和可维护性，不应该直接在HTML中硬编码样式和脚本链接。正确的方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数将它们加入队列。

Een stijlblaad invoeren

Hoewel `style.css` essentieel is, laadt WordPress het niet automatisch op. Je moet het expliciet toevoegen aan de lijst met bestanden die worden geladen. Meestal worden ook de hoofdstyle sheet en de reset-style sheet apart gehouden.

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() );

// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
    wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );

// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Het gebruik van moderne CSS-ontwikkelingspraktijken

In front-end development in 2026 is het van belang om aandacht te besteden aan responsief ontwerp en toegankelijkheid. In je `style.css` of aparte `main.css` moet je mediabestellingen (media queries) gebruiken om te zorgen dat de website goed wordt weergegeven op verschillende apparaten.

/* 基础样式 */
body {
    font-family: sans-serif;
    line-height: 1.6;
}

/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
    #primary-menu {
        display: none;
    }
    /* 移动端菜单样式 */
}

Testen en oplossen van problemen (debugging)

Nadat het thema is ontwikkeld, is testing een essentieel onderdeel van het proces. Je moet het thema grondig testen in verschillende omgevingen, met verschillende browsers en op verschillende apparaten.

De debugmodus inschakelen

Tijdens het ontwikkelingsproces is het heel belangrijk om de debug-modus van WordPress aan te zetten. Dit helpt je om snel PHP-fouten, waarschuwingen en berichten op te sporen. Open het bestand `wp-config.php` en zoek naar de volgende code, of voeg deze toe:

Aanbevolen leesmateriaal De geavanceerde handleiding voor het ontwikkelen van WordPress-thema's in 2026: van nul naar een responsieve bedrijfswebsite。

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全

Thema-unittesten

Het wordt aanbevolen om de officiële WordPress-thema-unittestgegevens te gebruiken voor een grondige test van je thema. Deze gegevens bevatten verschillende soorten artikelen, pagina's, media, commentaren, etc., waardoor je kunt controleren of je thema op alle mogelijke inhoudsoorten correct wordt weergegeven, zonder dat er stijl- of layaoutproblemen optreden.

Samenvatting

Van het maken van de basisbestanden `style.css` en `index.php` tot het begrijpen van de structuur van templates en cycli, en vervolgens het registreren van menu's en sidebar's en het veilig toevoegen van stijlscripten, heb je de hele procedure doorlopen om een basis-, maar compleet, aangepast WordPress-thema te bouwen. Vergeet niet dat themaontwikkeling een iteratief proces is: het is de beste praktijk om met een minimale versie te starten en steeds meer functies te toevoegen en details te verbeteren. Door continu te leren over template-taggen, action hooks en filters, zul je in staat zijn om sterke en flexibele thema's te creeren.

Veelgestelde vragen (FAQ)

Welke basiskennis is nodig om een WordPress-thema te ontwikkelen?

Je moet de basiskenningen van HTML, CSS en PHP beheersen. Een beperkte kennis van JavaScript is ook handig, omdat dit gebruikt kan worden om interactieve functies te toevoegen. Daarnaast is het essentieel om vertrouwd te zijn met de fundamentele concepten van WordPress, zoals artikelen, pagina's, categorieën, tags, widgets en menu's.

Waarom werken de modificaties aan mijn thema niet in de backend?

Dit probleem wordt meestal veroorzaakt door de browsercache of de WordPress-cache. Probeer eerst de browser te forceeren om te worden bijgewerkt (Ctrl + F5 of Cmd + Shift + R). Als het probleem nog steeds aanwezig is, controleer of je de stijlen en scripts correct hebt toegevoegd aan de juiste plaats en of er geen syntactische fouten zijn in het bestand `functions.php`. In uiterst zeldelijke gevallen kan het nodig zijn de cache van de server of plugins te wissen.

Hoe maak ik mijn thema multilingual (meerdere talen ondersteunend)?

你需要做好主题的“国际化”准备。这意味着在代码中所有需要翻译的文本，都应使用翻译函数（如`__()`， `_e()`）进行包装，并为`text-domain`设置一个唯一标识（在`style.css`的头部已定义）。然后，你可以使用如Poedit这样的工具创建`.po`和`.mo`翻译文件，使你的主题能够被轻松翻译成其他语言。

Wat is het verschil tussen een aangepast thema (custom theme) en een subthemaa (subtheme)?

Een custom theme is een geheel nieuw thema dat vanaf nul wordt ontwikkeld. Een subtheme daarentegen is gebaseerd op een bestaand “moederthema” en erft alle functies, stijlen en templatebestanden van het moederthema. Met een subtheme kun je alleen de delen die je nodig hebt aanpassen of toevoegen (meestal de stijlen en enkele templatebestanden), zonder dat het moederthema hoeft te worden veranderd. Dit maakt het veiliger en efficiënter om populaire thema’s aan te passen of te upgraden, omdat je modificaties niet kunnen worden overschreven.

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: