Homepage/Kennis/WordPress/De details van de inhoud

WordPress-themaontwikkeling voor beginners: stap voor stap je eerste custom-made thema maken

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

Forbereidende werkzaamheden en omgevingsconfiguratie

Voordat je begint met schrijven van de eerste regel code, heb je een geschikte ontwikkelomgeving nodig. Dit omvat een lokale serveromgeving en een code-editor. Het wordt aanbevolen om XAMPP, MAMP of Laragon te gebruiken om een lokale server op te zetten; deze bieden de mogelijkheid om Apache, MySQL en PHP in één stap te installeren en te starten. Kies een code-editor van je keuze, bijvoorbeeld Visual Studio Code, Sublime Text of PHPStorm. De ondersteuning voor code-highlighting en automatische suggesties voor code zal je ontwikkelingswerkzaamheden aanzienlijk versnellen.

Volgens de opgegeven instructies moet je in je lokale WordPress-installatie een nieuwe map maken voor je nieuwe thema. Alle WordPress-themata zijn opgeslagen in een specifieke map. /wp-content/themes/ In de map vind je een aantal andere mappen. Maak in deze map een nieuwe map voor het thema dat je gaat maken, bijvoorbeeld met de naam ‘MijnThema’. my-first-themeDe naam van deze map is ook je thema-identificatie; deze zal worden weergegeven in de lijst met beschikbare thema's in de backend.

Daarnaast moet je de twee belangrijkste onderdelen van het ontwikkelen van WordPress-themes begrijpen: de templatebestanden en de styleheets. Een basis-WWordPress-theme bestaat uit maar twee bestanden:style.css 和 index.php。style.css De bestanden beheersen niet alleen het visuele uiterlijk van de website, maar de commentaarblokken in de bestandskoppen vormen ook de “identiteitskaart” van het thema. Hierin staan meta-informatie zoals de naam van het thema, de auteur en een beschrijving.index.php Dit is de standaard hoofdtemplatefile.

Aanbevolen leesmateriaal Volledig handboek voor het ontwikkelen van WordPress-themes: van nul beginnen met het bouwen van aangepaste themes。

Create a core theme file

Definieren van thema-stijlen en informatie

Alles begint met... style.css Beginnen. Maak deze bestand in de root-map van de themapagina en voeg aan het begin van het bestand een geformatteerde commentaarblock toe. Dit commentaarblock is essentieel voor WordPress om het thema te herkennen en te laden. De onderstaande code toont een basisvoorbeeld van een hoofdblock voor een stijlboek (stylesheet):

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://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Hieronder valt ook:Text Domain Dit bestand wordt gebruikt voor internationalisering (i18n) en is bedoeld om later gemakkelijk te kunnen vertalen naar meerdere talen. Nadat je het bestand hebt gemaakt, log in je bij het WordPress-administratiepaneel en ga naar “Uiterlijk” → “Thema’s”. Hier moet je je thema kunnen zien, al beschikt het voorlopig nog over geen functies.

Constructeer een basisstructuur voor het template.

Vervolgens wordt een skelettfail voor het thema gemaakt. index.phpDit is het meest basistische template. Wanneer WordPress geen specifiekere templatefile kan vinden (bijvoorbeeld... single.php 或 page.phpAls dit nodig is, wordt het gebruikt. Een van de simpelste varianten… index.php Je mag alleen de basisfuncties gebruiken die het WordPress-headgedeelte, de cycli en het tailgedeelte oproepen.

<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
    <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>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 文章内容输出
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Deze bestand gebruikt de kerntemplate-taggen van WordPress, zoals… bloginfo() Website-informatie verkrijgen.the_title() 和 the_content() In een loop worden de titels en inhoud van de artikelen weergegeven.wp_head() 和 wp_footer() Het zijn zeer belangrijke ‘hooks’; ze bieden de mogelijkheid voor het WordPress-core, plugins en andere scripts om toegang te krijgen tot de inhoud van de pagina. <head> 和 <footer> Regional code injection.

Split the template and introduce the functionality separately.

Modulaire templatebestanden

将 index.php Als al het codegedeelte in één bestand staat, wordt het moeilijk om de code te onderhouden. De beste praktijk is om de code op te delen in meerdere templateonderdelen (Template Parts). Maak de volgende bestanden om de codestructuur te organiseren:
* header.phpOpslaan <head> Algemeen hoofdinhoud, zoals de regio-indicaties en de navigatie aan de bovenkant van de website.
* footer.phpPlaats hier de auteursrechtnalege en andere publieke onderdelen die zich aan het onderste deel van de website bevinden.
* sidebar.phpOpslagruimte voor de sidebar-tools (optioneel).
* functions.phpFunctionele bestanden voor de thema's.

Aanbevolen leesmateriaal Van nul af: Een stappenplan om een eigen WordPress-thema te ontwikkelen。

En vervolgens, gebruik… get_header()、get_footer() 和 get_sidebar() Functies als 'wait' zijn beschikbaar in... index.php Ze worden hierin geïntroduceerd. Na de renovatie… index.php De kern van het systeem zal zeer eenvoudig worden.

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article>
            &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        </article>
    <?php endwhile; else : ?>
        <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

Let op: we hebben… gebruikt. esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) De vertaling is klaar voor publicatie; dit is een standaardproces in de internationale communicatie.

Verbetering van de themafunctie

functions.php Het bestand vormt het “bestuurscentrum” van je thema. Het wordt gebruikt om functies voor themaondersteuning toe te voegen, menu’s en zijbalken te registreren, en sjablonen en scripts te laden. Het is geen template-bestand, maar wordt automatisch geladen wanneer het thema wordt initialiseerd.

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

Hieronder staat een basisversie: functions.php Voorbeeld:

__( '主导航菜单', 'my-first-theme' ),
    ) );

// 添加对 HTML5 标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 添加标题标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

// 加载主题的样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?&gt;

In deze bestand hebben we een function gedefinieerd. my_first_theme_setupEn door… add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) Mounteer dit op een specifiek action-hook van het WordPress-initiële thema. Op vergelijkbare manier gebruiken we… register_sidebar De functie heeft een klein hulpmiddelgebied geregistreerd en gebruikt dit vervolgens… wp_enqueue_style De functie heeft de thema-stylesheet correct geïntroduceerd.

Een speciaal ontworpen template en stijl maken

Maak templates op maat voor verschillende soorten pagina's.

De hiërarchische structuur van templates in WordPress biedt je de mogelijkheid om specifieke templatebestanden aan te maken voor verschillende soorten pagina's.
* front-page.phpGebruikt als statische homepage.
* home.phpPagina met lijst van blogartikelen.
* single.phpDetaliespagina van een enkele artikkel.
* page.phpEnkele pagina's.
* archive.phpArchiveringspagina's met categorieën, tags, auteurs en meer.
* search.phpPagina met zoekresultaten.
* 404.php404-foutpagina.

Aanbevolen leesmateriaal Praktische gids voor het ontwikkelen van WordPress-themes: van nul een eigen thema-architectuur en -templates bouwen。

Creeren page.php Je kunt de uitstraling van alle pagina's onafhankelijk bepalen, zonder dat dit de inhoudspagina's beïnvloedt. De structuur hiervan is… index.php In vergelijking met de vorige variant, worden de metagegevens van het gepubliceerde artikel (zoals de datum en de auteur) meestal niet weergegeven.

Ontwerpen van een responsieve lay-out en interactie

Modern WordPress-themes moeten responsief zijn. Dat betekent dat je CSS moet worden aangepast aan alle schermgrootten, van mobiele apparaten tot desktops. Het is aan te raden om de 'Mobile First'-CSS-strategie te gebruiken: eerst de basisstijlen voor kleine schermen op te stellen en vervolgens, met behulp van mediaqueries, extra stijlen voor grotere schermen toe te voegen.

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

Ook kan je thema enkele JavaScript-code nodig hebben om interactieve functies te realiseren, zoals drop-down-menu's en slider-beelden. Het is het beste om deze code op de juiste plek in je project te plaatsen. functions.php Gebruikt in het Chinees (vereenvoudigd) wp_enqueue_script() Er zijn functies beschikbaar om scripts te registreren en in een wachtrij te plaatsen, waardoor de afhankelijkheden (zoals jQuery) correct worden gemeld. Dit voorkomt dat scripts met elkaar in conflict raken of dubbel worden geladen, en zorgt ook voor compatibiliteit met de script-optimalisatiefuncties van WordPress.

Samenvatting

Door de bovenstaande stappen hebt u een zeer basistische, werkende WordPress-customized theme gemaakt. U hebt geleerd hoe u de informatie voor het thema definieert. style.cssConstructeer de basis. index.php Templates: splits de templates op in modulaire onderdelen. functions.php Je hebt de mogelijkheden om thema's te bewerken in WordPress versterkt. Daarnaast hebt je kennisgemaakt met de sterke template-hiërarchie van WordPress, waardoor het gemakkelijker wordt om complexere, maatgeschikte template-pagina's te creeren.

Themaontwikkeling is een proces van voortdurende iteratie en verdieping. Daarnaast kun je je verder ontwikkelen in het maken van subthema's (Child Themes) om bestaande thema's veilig te kunnen aanpassen. Je kunt leren hoe je de WordPress Customizer API gebruikt, zodat gebruikers thema-instellingen in real time kunnen aanpassen via het backend. Ook kun je de REST API van WordPress verder bestuderen om thema's te creeren die goed samenwerken met front-end frameworks. Het is belangrijk om de officiële ontwikkelaarsdocumentatie te volgen en actief deel te nemen aan de community; dit is essentieel voor continue verbetering van je skills.

Veelgestelde vragen (FAQ)

Is het vereist om PHP te beheersen om een WordPress-thema te ontwikkelen?

Ja, een solide kennis van PHP is een vereiste voor het ontwikkelen van WordPress-themes. WordPress is immers zelf geschreven in PHP, en alle templatebestanden (zoals…) index.php、single.phpFunction filesfunctions.phpEr is in alle gevallen PHP-code nodig om dynamisch content te genereren, WordPress-functies op te roepen en met gegevens te werken.

Daarnaast moet je vertrouwd zijn met HTML en CSS om de structuur en het uiterlijk van pagina's te bepalen, en moet je een basiskennis hebben van JavaScript (met name jQuery, omdat dit is opgenomen in het kernprogramma van WordPress) om interactieve functies te kunnen toevoegen.

Waarom wordt de verandering van mijn thema niet weergegeven in de WordPress-beheerpanel?

Dit probleem wordt meestal veroorzaakt door het cachegeheugen van de browser of de server. Probeer eerst in de browser de pagina opnieuw te laden. Ctrl + F5(Win/Linux) of Cmd + Shift + R(Mac) Force een refresh om de browsercache te verwijderen.

Als het probleem nog steeds bestaat, kan het zijn dat de server of een WordPress-cacheprogramma (zoals W3 Total Cache of WP Super Cache) oude bestanden heeft opgeslagen in de cache. Probeer alle caches in deze programma’s te leegmaken. Tijdens de ontwikkelingsfase is het verstandig om deze cacheprogramma’s tijdelijk uit te schakelen om storingen te voorkomen.

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

Het ondersteunen van meerdere talen in een thema (internationaal en lokaliseren, oftewel i18n en l10n) is voornamelijk afhankelijk van de vertaalfuncties van WordPress. In een thema moeten alle tekststringen die worden getoond aan de gebruiker niet rechtstreeks worden opgeslagen, maar moeten worden omhuld met vertaalfuncties.

Als voorbeeld: (‘文本’， ‘my-first-theme’) Vertalen of gebruiken… echo esc_html(‘文本’， ‘my-first-theme’) Output en ontsnappingssequenties uitvoeren. Je moet dit doen in style.css De koppen en… load_theme_textdomain() De function call is correct geset. Text Domain(Veld voor tekst), en vervolgens gebruik je een tool als Poedit om dit te bewerken. .pot Vertaalmodule en .po/.mo Taalbestand.

Wat is het verschil tussen de functions.php-fail van het thema en de functionaliteiten van een plugin?

functions.php De code in de bestand heeft een vergelijkbare functionaliteit met de code van plugins; beide kunnen worden gebruikt om WordPress te uitbreiden. De belangrijkste verschillen zitten in het bereik (scope) en de toepassing.

functions.php De functies die hier worden genoemd zijn sterk verbonden met het huidige thema. Als de gebruiker het thema wijzelt, zijn deze functies meestal niet meer beschikbaar. Ze zijn geschikt om functies te toevoegen die rechtstreeks te maken hebben met de visuele presentatie, lay-out en templates van het thema (bijvoorbeeld de plaatsing van het registratieformulier of opties voor themaondersteuning).

De functies die worden aangeboden door plugins zijn onafhankelijk van het thema; ongeacht welk thema wordt gebruikt, zijn deze functies beschikbaar zodra de plugin is geactiveerd. Plugins zijn ideaal om algemene functies te toevoegen die niets te maken hebben met het uiterlijk van het thema (bijvoorbeeld contactformulieren, SEO-optimalisatie of e-commerce-mogelijkheden). Als een functie ook na het vervangen van het thema nog nodig is, moet deze worden omgezet in een plugin.

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: