Homepage/Kennis/WordPress/De details van de inhoud

WordPress-themaontwikkeling: Een gids om van nul tot één je eerste thema te bouwen

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

Als je de wereld van WordPress betreedt, is het ontwikkelen van je eigen thema een spannend mijlpaal. Het geeft je niet alleen de volledige controle over het uiterlijk en de functionaliteiten van je website, maar is ook de beste manier om de kernprincipes van WordPress te begrijpen. In deze gids worden je stap voor stap geholpen bij het bouwen van een basisthema, vanaf het begin tot de voltooiing. Alle belangrijke stappen worden behandeld, van de bestandsstructuur tot de kerntemplates.

Ontwikkelingsomgeving en opbouw van themastructuur

Voordat je met het schrijven van code begint, is een geschikte ontwikkelomgeving nodig. Het wordt aanbevolen om lokale serversoftware te gebruiken, zoals XAMPP, WAMP of MAMP. Met deze software kun je snel een omgeving op je lokale computer opzetten waarin Apache, MySQL en PHP zijn geïnstalleerd. Daarnaast is een handige code-editor onmisbaar, bijvoorbeeld Visual Studio Code, Sublime Text of PHPStorm.

Een basisWordPress-thema vereist ten minste twee bestanden:style.css和index.php。style.cssHet is niet alleen een stylesheet, maar ook een soort “identiteitsbewijs” van je thema. WordPress herkent je thema door de commentaren die zich in het begin van deze bestand bevinden te lezen. Eerst moet je naar de map met je lokale WordPress-installatie gaan…wp-content/themesIn de map maak je een nieuwe map, bijvoorbeeld...my-first-themeVervolgens wordt er een nieuwe map (folder) binnen deze map gecreëerd.style.cssHet document.

Aanbevolen leesmateriaal WordPress-themaontwikkeling beheersen: een volledig handboek van nul tot één met praktische tips。

Definieerings van thema-informatie

在style.cssOp de top van het bestand moet je een specifiek commentaarblok toevoegen om de meta-informatie over het onderwerp te definiëren.

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 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://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
*/

Hieronder valt ook:Theme Name和Text DomainDit is een vereiste. Het tekstveld wordt gebruikt voor internationale vertalingen en is meestal gelijk aan de naam van het themapakket.

Creatie van een kerntemplatebestand

index.phpDit is het standaardtemplate voor het thema en tevens het belangrijkste back-up-template. Wanneer WordPress geen specifiekere templatefile kan vinden…single.php, page.phpAls je dit gebruikt, kun je de meest basistische HTML-structuur en enkele WordPress-functies erin plaatsen om content te halen en weergeven.

Core template files and loops

Het themasysteem van WordPress is gebaseerd op templates; verschillende soorten pagina's worden beheerd door verschillende templatebestanden. Het begrijpen en maken van deze kerntemplatebestanden is essentieel voor het ontwikkelen van thema's.

Het meest fundamentele concept is de “WordPress-loop” (The Loop). Dit is een PHP-codestructuur die wordt gebruikt om artikelen (Posts) uit de database te halen en deze een voor een te weergeven. Bijna alle templatebestanden die worden gebruikt om inhoud te tonen, zijn afhankelijk van deze loop.

Aanbevolen leesmateriaal Hoe maak je een professioneel WordPress-thema: een volledig handboek vanaf nul tot livegoed。

Het bouwen van een homepage-template

index.phpHet bestand moet de volledige HTML-schil en de cycli bevatten. Hier is een simpel voorbeeld:

<!DOCTYPE html>
<html no numeric noise key 1021>
<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 1018>
    <p><strong>Deze pagina is momenteel niet beschikbaar.</strong></p>
    <header>
        <h1><a href="/nl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><p><strong>Deze website is bedoeld om u te informeren over de activiteiten van het bedrijf.</strong></p></p>
    </header>
    <main>
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
                    <h2><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
                    <div class="entry-content">
                        <p><strong>Het volledige artikel is hier te lezen.</strong></p>
                    </div>
                </article>
            
            <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Deze file bepaalt de basisstructuur van de webpagina en gebruikt een loop om in het hoofdgebied een lijst met artikelen af te drukken. Functies als…the_title()、the_excerpt()Gebruikt om de inhoud van een artikel af te drukken.wp_head()和wp_footer()Dit is een zeer belangrijke ‘hook’: het wordt gebruikt om de WordPress-core, plugins en andere scripts in staat te stellen om de benodigde code in te voegen.

Artikelen en paginaontwerpen (templates)

single.phpGebruikt om één artikel te weergeven.page.phpZe worden gebruikt om één specifieke pagina te weergeven. Ze hebben een vergelijkbare structuur, maar zijn meestal…single.phpHet zal elementen zoals categorieën en tags bevatten.page.phpDit is dan nog korter. Je kunt het gewoon kopiëren.index.phpBegin met het maken ervan, en vervang vervolgens de inhoud binnen de loop met…the_content()Om de hele tekst te weergeven…

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

Stijlen en scripts invoeren

Modern thema's vereisen een goede stijl en interactieve functies. WordPress biedt standaardfuncties om CSS- en JavaScript-bestanden veilig in te voegen, in plaats van ze rechtstreeks in het HTML-tekenbestand te gebruiken.<link>或<script>Taggen.

Creatie en gebruik van functiebestanden

Je moet een item met de naam ‘’ creeren.functions.phpHet gaat om een bestand. Dit bestand is geen template-bestand, maar een “functieverbeterings”-bestand voor een thema. Het wordt gebruikt om functies toe te voegen, kenmerkens te activeren of de standaardwerking van WordPress te wijzigen. Hier registreren we de style sheets en scripts.

Resourceen veilig toevoegen

在functions.phpIn, gebruikenwp_enqueue_style()和wp_enqueue_script()Een standaardmanier om dit te doen is om een functie te creeren en deze vervolgens te gebruiken.wp_enqueue_scriptsDeze action-hook wordt gebruikt om het te roepen.

Aanbevolen leesmateriaal De ultieme gids: hoe je vanuit het niets een professioneel WordPress-thema ontwikkelt。

<?php
function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入自定义CSS文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 引入JavaScript文件
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Deze code zorgt ervoor dat CSS- en JS-bestanden op het juiste moment worden geladen.get_stylesheet_uri()De functie retourneert het thema.style.cssHet pad naar het bestand.get_template_directory_uri()Dan wordt de URL van het themakatalog teruggegeven.

Template components en themafuncties

Als het onderwerp steeds complexer wordt, is het een goede praktijk om herhaalde codefragmenten te modulariseren. WordPress biedt hiervoor de mogelijkheden van “Template Parts” (templateonderdelen) en “Navigation Menus” (navigatie-menuden).

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

Creëer herbruikbare templateonderdelen

Als voorbeeld: splitst u de header en footer van een website in aparte bestanden op. Hiervoor kunt u een nieuwe bestand maken voor de header en een nieuw bestand voor de footer.header.php和footer.phpDe bestand zal...index.phpDe corresponderende code uit het Chinese deel moet worden gekopieerd en vervolgens op de oorspronkelijke plek worden gebruikt in combinatie met de volgende functieoproepen:

<?php get_header(); ?>
<?php get_footer(); ?>

Je kunt ook meer algemene onderdelen maken, bijvoorbeeld...content.php或post-item.phpGebruik dit binnen een loop.get_template_part()Deze functie wordt gebruikt om bestanden te laden, waardoor de herbruikbaarheid van het codepatroon aanzienlijk wordt verbeterd.

Deelnemen aan en personaliseren van het navigatiemenu

Het menu-systeem van WordPress is zeer krachtig. Allereerst moet je…functions.phpGebruikt in het Chinees (vereenvoudigd)register_nav_menus()Een functie om de positie van de keukenunit te registreren.

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Vervolgens, in het templatebestand (bijvoorbeeld...)header.phpAls je de positie van het menu wilt weergeven in de app, gebruik je hiervoorwp_nav_menu()De functie gebruikt om de uitgave te genereren.

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) );
?>

Nu kunnen gebruikers in het WordPress-beheerpaneel, onder “Uiterlijk” → “Menü’s”, een menu maken en dit toewijzen aan de positie “Primary Menu”.

Samenvatting

Met deze handleiding heb je het hele proces afgerond: van een lege map tot een WordPress-thema met basisfuncties. Je hebt geleerd hoe je de benodigde bestanden moet maken.style.css和index.phpIk begrijp de kernfunctie van de WordPress-loop en heb deze zelf gebouwd.single.php和page.phpJe hebt ook geleerd hoe je dit kunt doen door...functions.phpStijlen en scripts kunnen veilig worden toegevoegd, en je kunt ook template-componenten en navigatie-menüsystemen gebruiken om je code te organiseren en de functionaliteiten van je thema te verbeteren. Dit is alleen een eerste stap; daarna kun je verder ontwikkelen met bijvoorbeeld sidebar’s, toolbars, aangepaste artikeltypen en de thema-customizer-API, om je thema nog verder te verbeteren en uit te breiden.

Veelgestelde vragen (FAQ)

Moet het ontwikkelen van een thema altijd vanaf nul beginnen?

Niet altijd. Voor beginners is het beste om vanaf nul te beginnen. In praktische projecten kun je echter kiezen voor een officiële, lege thema (bijvoorbeeld Underscores), een framework (bijvoorbeeld Genesis) of een eenvoudig thema (bijvoorbeeld _s) als uitgangspunt. Deze bieden al een solide basis in code, zodat je je kunt concentreren op het ontwerp en de ontwikkeling van de businesslogica.

Is het file index.php vereist?

Ja.index.phpDit is een templatebestand dat essentieel is voor een WordPress-thema. Het vormt de laatste verdedigingslinie in de hiërarchie van templates. Als andere, meer specifieke templatebestanden (bijvoorbeeld...) niet werken, is dit bestand nog steeds van belang.archive.php, search.phpAls de betreffende functie niet bestaat, gebruikt WordPress automatisch een alternatieve oplossing.index.phpDe pagina wordt weergegeven, zodat er altijd inhoud wordt afgeleverd op de website.

Hoe debug ik problemen met het ontwikkelen van mijn thema?

Allereerst moet je zorgen dat…wp-config.phpIn het bestand is de WP_DEBUG-modus ingeschakeld.define( ‘WP_DEBUG’, true );Deze regel is ingesteld op ‘true’. Hierdoor worden PHP-fouten en WordPress-waarschuwingen direct weergegeven op de pagina, waardoor het gemakkelijker is om problemen te lokaliseren. Het is ook belangrijk om de ontwikkelaarsmogelijkheden van de browser (open met F12) te gebruiken om CSS- en JavaScript-fouten te controleren.

Mag ik alles doen in het functions.php-bestand van het thema?

Theoretisch is het mogelijk, maar de beste praktijk is om alleen code te toevoegen die rechtstreeks te maken heeft met het uiterlijk en de functionaliteit van het thema. Complexe functies die te maken hebben met de kernlogica van het bedrijf of met dataverwerking, moeten worden ontwikkeld als aparte plugins. De voordelen hiervan zijn dat deze functies niet verloren gaan wanneer de gebruiker het thema vervangt, en dat de code daardoor beter te onderhouden en herbruikbaar is.

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: