Homepage/Kennis/WordPress/De details van de inhoud

Een introductie tot het ontwikkelen van WordPress-thema's: hoe je vanaf nul je eigen aangepaste thema kunt maken.

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

Basisconcepten voor het ontwikkelen van WordPress-themes

Voordat je met het schrijven van code begint, is het van belang om de basis van een WordPress-thema te begrijpen. Een WordPress-thema is in feite een map die zich bevindt in de map `wp-content/themes/`. Deze map bevat een reeks bestanden met specifieke namen, en deze bestanden bepalen samen het uiterlijk en de functionaliteiten van een website. Het kernsysteem van WordPress leest deze bestanden en combineert de inhoud uit de database (bijvoorbeeld artikelen en pagina's) met de stijl en structuur van het thema, waarna de webpagina die de gebruiker ziet wordt gecreëerd.

Een basis-thema vereist ten minste twee bestanden: `index.php` en `style.css`. `index.php` is het hoofdtemplate van het thema, terwijl `style.css` niet alleen de CSS-stijlen bevat, maar ook meta-informatie over het thema, zoals de naam van het thema, de maker en een beschrijving. Op deze manier herkent WordPress het thema.

Naast de basisbestanden zijn er ook een aantal templatebestanden nodig voor het ontwikkelen van thema's. Deze bestanden volgen een bepaald systeem van “template-hiërarchie”. Dit betekent dat WordPress automatisch het meest specifieke templatebestand kiest afhankelijk van het type pagina die wordt weergegeven (bijvoorbeeld de homepagina, een enkele artikel of een archievenpagina). Als je bijvoorbeeld een artikel bezoekt, zal WordPress op volgorde de bestanden `single-post-{slug}.php`, `single-post-{id}.php` en `single-post.php` opzoeken; pas als deze niet gevonden worden, worden de algemene bestanden `singular.php` of `index.php` gebruikt. Het begrijpen en gebruiken van deze werking is essentieel voor het creeren van flexibele en krachtige thema's.

Maak je eerste themastructuur op

Laten we beginnen met het maken van het simpelste thema, zodat we vertrouwd raken met de belangrijkste bestanden en de structuur van de directory.

Eerst moet je in het lokale WordPress-installatieverkeer onder de map `wp-content/themes/` een nieuwe map maken met de naam `my-first-theme`. Vervolgens moet je in deze map een bestand met de naam `style.css` aanmaken, en aan het begin van het bestand de volgende nodige commentaren toevoegen:

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

"""`css
/*
Theme Name: Mijn eerste thema
Theme-URI: https://example.com/my-first-theme
Auteur: Je naam
Auteur-URI: https://example.com
Beschrijving: Dit is een simpel thema dat wordt gebruikt om te leren hoe je WordPress-themes ontwikkelt.
Versie: 1.0
License: GNU General Public License v2 or later
Text Domein: my-first-theme
*/
```

Vervolgens wordt de `index.php`-file gecreëerd. Dit is het standaardtemplate voor alle pagina's. We kunnen er eerst een zeer basistische HTML-structuur in schrijven:

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

PHP
<!DOCTYPE html>
<html no numeric noise key 1000>
<head>
<meta charset="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1000>


<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>


<?php
if ( have_posts() ) :
while ( have_posts() ) :
`the_post();`;
?>

<h2><p><strong>Hallo wereld!</strong></p></h2>
<div><?php the_content(); ?></div>

<?php
`endwhile;`;
else :
echo '<p>Er is geen inhoud beschikbaar.</p>';
endif;
?>


<p>©</p>

<?php wp_footer(); ?>
</body>
</html>
```

Na het voltooien van deze twee bestanden, ga je naar het WordPress-beheerpaneel en kies je voor “Uiterlijk” → “Thema’s”. Hier moet je het thema “Mijn eerste thema” zien. Activeer dit thema en je website wordt nu gevoerd door het thema dat je zelf hebt gemaakt.

Het begrijpen van de belangrijkste template-taggen

In de bovenstaande `index.php`-code hebben we enkele “template tags” van het WordPress-core gebruikt. Dit zijn PHP-functies die worden gebruikt om dynamische inhoud te weergeven.
`bloginfo('name')`: Dit geeft de website-titel terug die is ingesteld in “Instellingen” -> “Algemeen”.
`the_title()`: Geeft de titel van het huidige artikel of de huidige pagina weer binnen de lus.
`the_content()`: geeft de volledige inhoud van het huidige artikel of de huidige pagina weer binnen een lus.
`have_posts()` / `the_post()`: worden gebruikt om de hoofdlus te besturen, waarbij de huidige artikelgegevens worden doorlopen en ingesteld.
`wp_head()` en `wp_footer()`: dit zijn cruciale hooks die het mogelijk maken voor de WordPress-kern, plug-ins en andere scripts om code in de en footer van een pagina te injecteren.

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

Uitbreiden van themafuncties en templates

De basisthema's kunnen alleen op alle pagina's dezelfde lay-out weergeven. Om een professionelerere website te creëren, moeten we gebruikmaken van template-lagen om templates voor specifieke pagina's te maken, en de gemeenschappelijke delen opdelen in modulaire bestanden.

Creëer componenten voor de header en footer van een pagina.

Het is een standaardpraktijk om de `header`- en `footer`-onderdelen in aparte bestanden op te slaan, omdat dit de onderhoudbaarheid van het codebestand verbetert. Maak de bestanden `header.php` en `footer.php` aan.

Verwijzig de inhoud van `index.php` naar de juiste bestandseenheid.<body>Alles code dat zich bevindt vóór de tag moet worden verplaatst naar `header.php`.</body>En</html>Alles code dat zich bevindt voor de tag (meestal vanaf…)<footer>Verplaats de inhoud van `header.php` naar `footer.php`.

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

Vervolgens moet je `index.php` aanpassen en de `get_header()` en `get_footer()`-functies gebruiken om de benodigde elementen te includeren:

PHP
<?php get_header(); ?>

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


<?php
if ( have_posts() ) :
while ( have_posts() ) :
`the_post();`;
?>

<h2><p><strong>Hallo wereld!</strong></p></h2>
<div><?php the_content(); ?></div>

<?php
`endwhile;`;
else :
echo '<p>Er is geen inhoud beschikbaar.</p>';
endif;
?>

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

Maak andere paginaontwerpen (templates)

Nu kun je templates maken voor verschillende soorten pagina's. Bijvoorbeeld kun je een `single.php`-template maken om een enkele artikkel te weergeven. Deze kan worden gekopieerd uit `index.php`, maar kan worden aangepast met meer details, zoals het toevoegen van categorieën, tags, de auteursgegevens en een commentaarformulier.

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

Maak nog een bestand genaamd `page.php` om een statische pagina te weergeven. Een veel voorkomend verzoek is om een aangepaste startpagina te maken; je kunt hierbij een bestand met de naam `front-page.php` maken. WordPress gebruikt dit bestand dan als voorkeur als startpagina van de website, in plaats van `home.php` of `index.php`.

Stijlen en scripts invoeren

正确的样式和脚本引入方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数。这确保了依赖关系管理，并避免了重复加载。

Maak een bestand met de naam `functions.php` in de hoofdmap van het thema en voeg de volgende code toe om de hoofdstaalbestand te importeren:

PHP
<?php
function my_first_theme_scripts() {
// Importeren van het hoofdstyleboek voor het thema
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// Het is mogelijk om Google Fonts te gebruiken.
wp_enqueue_style( 'my-first-theme-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap', array(), null );
// Importeer het zelfgemaakte JavaScript-bestand
wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
```

Ook kun je in deze bestand een functie toevoegen voor themaondersteuning, bijvoorbeeld:
PHP
// Unterstützung voor speciale afbeeldingen van artikelen
`add_theme_support('post-thumbnails');`;
// Steun voor het instellen van een eigen logo
`add_theme_support('custom-logo');`;
// HTML5-markeringen worden ondersteund
`add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));`;
```

Personalisatie en optimalisatie van thema's

Een uitstekend thema moet niet alleen alle vereiste functies hebben, maar ook gemakkelijk te personaliseren zijn door de gebruiker en moet bovendien goede prestaties leveren.

Integreren van een WordPress-customizer

De WordPress Customizer biedt gebruikers de mogelijkheid om het uiterlijk van een thema in real time te bekijken en te bewerken. Met `functions.php` kun je eenvoudig nieuwe instellingsopties toevoegen. Denk hierbij aan het toevoegen van een optie voor auteursrechtaanwijzingen in de voetnoot.

PHP
function my_first_theme_customize_register( $wp_customize ) {
// Voeg een sectie “Voetnoteninstellingen” toe
$wp_customize->add_section( 'my_footer_section', array(
'title' => __( '页脚设置', 'my-first-theme' ),
'priority' => 160,
) );

// Voeg een instelling toe binnen de sectie
$wp_customize->add_setting( 'footer_copyright_text', array(
'default' => '© 2026 我的网站。保留所有权利。',
'sanitize_callback' => 'sanitize_text_field',
'transport' => 'postMessage', // 支持实时预览
) );

// Voeg een controlelement (ingevulingsveld) toe aan het instellingselement
$wp_customize->add_control( 'footer_copyright_text', array(
'label' => __( '页脚版权文本', 'my-first-theme' ),
'section' => 'my_footer_section',
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_first_theme_customize_register' );
```

Vervolgens, in `footer.php`, gebruikt u de `get_theme_mod()`-functie om deze waarde uit te geven:
PHP


<p><?php echo esc_html( get_theme_mod( 'footer_copyright_text', '© 2026 我的网站。保留所有权利。' ) ); ?></p>

```

Zorg ervoor dat de website responsief is en dat de prestaties goed zijn.

Moderne thema's moeten responsief zijn, oftewel dat ze op alle schermformaten goed weergegeven worden, van mobiele telefoons tot desktops. Dit wordt voornamelijk gerealiseerd met CSS-mediaqueries. Zorg ervoor dat de lay-out in je `style.css` op alle schermgrootten past.

Voor het optimaliseren van de prestaties moet men, naast het compresseren van CSS/JS en afbeeldingen, ook het volgende in acht nemen bij het ontwikkelen van thema's:
1. Selectief laden van scripts: Beperk het laden van specifieke JS-bestanden alleen tot de pagina's waar ze nodig zijn (bijvoorbeeld `comment-reply.js` op de pagina voor commentaren).
2. Afbeeldingsoptimalisatie: Wanneer je `the_post_thumbnail()` en gerelateerde functies gebruikt, zorg ervoor dat de afbeelding de juiste afmetingen heeft.
3. Verminderen van database-verzoeken: Gebruik de Transients API op een verantwoordelijke manier om tijdverslindende verzoeken te cacheren, en voorkom onnodige `WP_Query`-uitvoeringen in templates.

Samenvatting

Je hebt de hele bouwprocedure van een aangepast WordPress-thema doorlopen: van het maken van een basismap met `style.css` en `index.php` tot het begrijpen van de structuur van templates, het splitsen van templateonderdelen, het toevoegen van functies en stijlen via `functions.php`, en het aanbieden van gebruikersopties met behulp van customizers. Het hart van themaontwikkeling is om te begrijpen hoe WordPress data combineert met templates, en om gebruik te maken van zijn uitgebreide bibliotheek met functies en het hook-systeem om flexibele en efficiënte websites te bouwen. Nadat je deze basisprincipes onder de knie hebt, kun je verder ontwikkelen met meer geavanceerde thema's, bijvoorbeeld door zelf artikeltypen te creeren, widgets te ontwikkelen of thema's te bouwen die het Gutenberg-blockeditor ondersteunen. Het enige echte middel om te leren is door te oefenen: probeer en bewerk steeds opnieuw, en zo kun je je eigen unieke WordPress-thema creeren.

Veelgestelde vragen (FAQ)

Welke voorafgaande kennis is nodig om een WordPress-thema te ontwikkelen?

Je moet basiskennis hebben van HTML en CSS, aangezien dit de fundamenten vormt voor het bouwen van de structuur en het uiterlijk van webpagina's. Daarnaast is het belangrijk om de basis van PHP te beheersen, aangezien WordPress-themafailen voornamelijk bestaan uit PHP-code die wordt gebruikt om gegevens dynamisch op te halen en weergeven. Een basiskennis van JavaScript kan handig zijn voor het toevoegen van interactieve functies, maar is niet vereist voor het beginnen.

Kan ik thema's lokal ontwikkelen? Welke omgeving is daarvoor nodig?

Het wordt sterk aanbevolen om themaontwikkeling op de lokale computer uit te voeren. Hiervoor moet je een lokale serveromgeving opzetten. De eenvoudigste manier is om gebruik te maken van geïntegreerde pakketten zoals XAMPP, MAMP (voor Mac) of Local by Flywheel. Deze pakketten installeren tegelijkertijd de Apache/Nginx-servers, PHP en de MySQL-database. Je hoeft alleen nog WordPress te installeren om met de lokale ontwikkeling te kunnen starten. Er is geen behoef aan een internetverbinding, waardoor het sneller en veiliger is.

Wat is het verschil tussen `functions.php` in het thema en plugins?

De `functions.php`-bestand wordt gebruikt om functies toe te voegen of te bewerken die sterk gerelateerd zijn aan het uiterlijk en de mogelijkheden van het huidige thema. Wanneer je het thema vervangt, werken deze functies meestal niet meer. Plugins daarentegen worden gebruikt om algemene functies te toevoegen die onafhankelijk van het thema zijn (bijvoorbeeld contactformulieren of SEO-optimalisatie). Als een bepaalde functie ook in de toekomst nog nodig is wanneer je het thema vervangt, moet deze als plugin worden ontwikkeld. In de praktijk kan de `functions.php`-bestand van een groot thema zeer omvangrijk zijn.

Hoe kan ik ervoor zorgen dat mijn thema meerdere talen ondersteunt (internationalisering)?

你需要使用WordPress的国际化（i18n）功能。在代码中，所有需要翻译的文本字符串都应使用特定的函数进行包装，例如`__('文本', 'my-text-domain')`或`_e('文本', 'my-text-domain')`。然后在`functions.php`中使用`load_theme_textdomain()`函数来设置翻译文件的加载路径。最后，使用如Poedit这样的工具创建`.pot`模板文件，并让翻译人员生成不同语言的`.po`和`.mo`文件。

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: