Homepage/Kennis/WordPress/De details van de inhoud

Eenvoudig starten met het ontwikkelen van WordPress-themes: van nul tot een op maat gemaakte website

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

Het begrijpen van de basisstructuur van een WordPress-thema

Voordat je met het schrijven van code begint, is het van belang om te begrijpen hoe een WordPress-thema is opgebouwd. Een thema is in feite een map die bevat een reeks bestanden in een specifieke format. Deze bestanden bepalen samen het uiterlijk en de functionaliteiten van de website. Een basis-thema vereist maar twee bestanden:style.css和index.php。

Core Style Sheet File

style.cssDe bestand is niet alleen een plek om CSS-stijlen op te slaan, maar ook een soort “identiteitsbewijs” van het thema. Op de top van deze bestand moet een specifiek commentaarblok staan, oftewel de “stylesheet header”. Hierin worden meta-informaties over het thema vermeld, zoals de naam, de auteur, een beschrijving en de versie. zonder deze header herkent WordPress de map niet als een geldig thema.

Een van de meest fundamentele…style.cssEen voorbeeld van de bestandskop is als volgt:

Aanbevolen leesmateriaal WordPress-themaontwikkeling: bouw je eerste custom-thema van scratch。

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

Core template file

index.phpDit is het standaardtemplatebestand van het thema en tevens het belangrijkste bestand. Wanneer WordPress geen meer specifiek templatebestand kan vinden voor de gevraagde pagina, wordt er automatisch teruggevallen op dit standaardtemplate.index.phpHet is verantwoordelijk voor het ophalen van inhoud uit de database en het weergeven van deze inhoud in een HTML-structuur in de browser. Een van de simpelste voorbeelden…index.phpDe bestand bevat waarschijnlijk alleen het basistekstueel van HTML en PHP-code die de kernfuncties van WordPress oproept.

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

Naast deze twee kernbestanden bevat een volledig functionerend thema meestal ook:
* header.phpDe header van de website.
* footer.phpDe voetnoot van de website.
* functions.phpVerwend om de functionaliteit van thema's, het registratiemenu, de sidebar en dergelijke te verbeteren.
* page.phpWordt gebruikt om een enkele pagina te weergeven.
* single.phpWordt gebruikt om een enkele blogartikel te weergeven.

Opzetten van een lokale ontwikkelingsomgeving en maken van het eerste thema

Het is gevaarlijk en onefficiënt om thema's rechtstreeks op een echte server te ontwikkelen. De beste praktijk is om op je lokale computer een ontwikkelomgeving op te zetten die op de online omgeving lijkt. Je kunt tools gebruiken als XAMPP, MAMP, Local by Flywheel of DevKinsta; deze kunnen PHP, MySQL en een webserver in één stap installeren.

Een themapagina en bestanden maken

Allereerst: in het lokale WordPress-installatieverwijfingspad, vind je...wp-content/themes/Pijl. Hier kun je een nieuwe map maken; de naam van de map moet overeenkomen met het identificatief van je thema. Het is aan te raden om alleen kleine letters en strepen te gebruiken, bijvoorbeeld:my-first-theme。

Vervolgens worden in die map de twee belangrijkste bestanden gecreëerd die eerder worden genoemd:style.css和index.phpKopieer de bovenstaande stijlboekcode naarstyle.cssVervang de inhoud in het midden met je eigen informatie.

Aanbevolen leesmateriaal WordPress-themaontwikkeling voor beginners: bouw je eerste website-thema van scratch。

Een basistemplatefile schrijven

Vervolgens, inindex.phpVul het volgende basiscode-in de tekst in; dit bevat de nodige template-taggen voor WordPress.

<!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 :
            _e( '抱歉，没有找到任何内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>

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

Na het voltooien van de bovenstaande stappen, ga je naar het lokale WordPress-beheerpaneel en kies je voor “Uiterlijk” → “Thema’s”. Hier moet je het thema “Mijn eerste thema” zien. Activeer dit thema en bezoek daarna de homepage van je website. Je ziet dat de titels en inhoud van de artikelen worden weergegeven.

Het gebruik van template-lagen en kernfuncties

WordPress gebruikt een intelligente systeem van “template-lagen” om te bepalen welke template-bestanden worden gebruikt voor verschillende pagina-verzoeken (zoals de homepagina, artikelpagina’s en categoriepagina’s). Het begrijpen van dit systeem is essentieel voor het ontwikkelen van thema’s.

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

Het begrijpen van de volgorde waarin sjablonen worden geladen.

Als je bijvoorbeeld een blogartikel bezoekt, zal WordPress de templatebestanden op de volgende manier opzoeken:single-post.php -> single.php -> singular.php -> index.phpHet gebruikt de eerste gevonden bestand. Dit ontwerp biedt de mogelijkheid om voor verschillende soorten pagina's zeer geavanceerde en aangepaste lay-outs te creeren.index.phpAls ultimatum, als laatste optie om het probleem op te lossen.

Het gebruik van cycli en template-taggen

在index.phpDe PHP-code die je ziet, is de beroemde “WordPress-loop”. Dit is het hart van alle templatebestanden en wordt gebruikt om de artikelen of inhoud die op de huidige pagina moeten worden weergegeven te doorlopen en af te drukken.

in de loopthe_title()、the_content()、the_excerpt()Functies als deze worden “template tags” genoemd. Ze dienen om de corresponderende artikelgegevens veilig te weergeven. Een andere belangrijke functie is…the_post()Het wordt in elke iteratie van de loop opgeroepen en wordt gebruikt om de globale…$postHet object wordt ingesteld met de gegevens van het huidige artikel, en daarna wordt de procedure voortgezet naar het volgende artikel.

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

Het modulariseren van de paginastructuur is een goede manier om de onderhoudbaarheid van het codebestand te verbeteren.header.php和footer.phpEen plek waar het kan worden ingezet.

Separate the header from the footer.

将index.phpDe Chinese versie van dit bericht is niet beschikbaar.<head>Deel en<header>Het gedeelte dat je hebt uitgesneden, plak je in een nieuw document.header.phpIn het bestand. Net zoals eerder gezegd…<footer>Deel van de tekst is gemigreerd/gesneden over.footer.phpChina.

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

En vervolgens, in het originele…index.phpIn, gebruikenget_header()和get_footer()Deze twee template-taggen worden gebruikt om ze te introduceren.

<?php get_header(); ?>

<main>
    &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        <p><?php _e( '抱歉，没有找到任何内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

Op deze manier kunnen alle paginaontwerpen dezelfde boven- en onderste delen (header en footer) delen. Als er iets veranderd moet worden, is het voldoende om maar één bestand aan te passen.

De functionaliteit van het thema wordt versterkt door Functions.php.

functions.phpHet bestand vormt het “bestuurscentrum” van je thema. Het is geen template-bestand, maar een bibliotheek met functies die automatisch wordt geladen wanneer het thema wordt geïnstalleerd. Hier kun je nieuwe functies toevoegen en het standaardgedrag aanpassen, zonder de kernbestanden van WordPress te hoeven bewerken.

De functies die worden ondersteund bij het registreren van een topic:

在functions.phpHier kun je gebruikmaken van…add_theme_support()Je kunt functies gebruiken om aan te geven welke WordPress-functionaliteiten je thema ondersteunt. Denk hierbij aan het activeren van artikelafbeeldingen (feature images) en het instellen van aangepaste menu's; dit zijn veel voorkomende acties.

<?php
function my_theme_setup() {
    // 添加对文章缩略图的支持
    add_theme_support( 'post-thumbnails' );

// 添加对自定义菜单的支持
    add_theme_support( 'menus' );

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

Stijlen en scripts toevoegen

De juiste manier om CSS en JavaScript toe te voegen, is door…wp_enqueue_style()和wp_enqueue_script()Functies, en deze worden vervolgens geïntegreerd inwp_enqueue_scriptsOp deze haak… Dit zorgt ervoor dat de afhankelijkheden correct zijn en dat er geen dubbele laden van bestanden of functies plaatsvindt.

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 引入自定义的JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Nadat je dit hebt afgerond, kun je verdergaan.header.phpGebruikt in het Chinees (vereenvoudigd)wp_nav_menu()Een functie om het menu dat je hebt geregistreerd te weergeven, die wordt gebruikt in de loop van de artikelen.the_post_thumbnail()De speciale afbeeldingen worden nu weergegeven.

Samenvatting

Het ontwikkelen van WordPress-themes is een geleidelijk proces dat van de structuur tot de details loopt. Allereerst moet je begrijpen hoe de verschillende onderdelen van een thema met elkaar zijn verbonden.style.css和index.phpVorm het kernonderdeel van het systeem en installeer een lokale ontwikkelingsomgeving. Daarna moet je het concept van template-lagen en cycli begrijpen, zodat je precieze lay-outs kunt creeren voor verschillende pagina's. Door dit te doen…header.php和footer.phpDoor het gebruik van modulair ontwerp wordt je code duidelijker en gemakkelijker te onderhouden.functions.phpDe bestanden openen de deur voor functionaliteitenuitbreidingen: van het registratiemenu tot het veilig laden van bronnen. Ze veranderen thema’s van statische templates in dynamische, krachtige website-skins. Volg deze weg, oefen continu en ontdek meer specifieke templatebestanden.single.php、page.php、archive.phpOp deze manier kun je steeds verder een geavanceerde en uniek ontworpen WordPress-website bouwen die is aangepast aan je behoeften.

Veelgestelde vragen (FAQ)

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

Je moet de basis van HTML en CSS beheersen om de structuur en het uiterlijk van webpagina's te kunnen bepalen. Daarnaast is een basiskennis van PHP nodig, omdat de templatebestanden van WordPress voornamelijk uit PHP-code bestaan en worden gebruikt om dynamisch inhoud te genereren. Het beheersen van JavaScript geeft je de mogelijkheid om interactieve functies toe te voegen aan je thema's; dit is in het begin niet vereist, maar wordt later zeer belangrijk.

Waarom verschijnt mijn thema niet op de achtergrond?

De meest voorkomende reden is...style.cssDe opmaak van de koppen met thema-informatie in het bestand is incorrect of ontbreekt. Zorg ervoor dat er een volledig en goed opgemaakte commentaarblock aan het begin van het bestand staat. Controleer ook of de themapagina's zich op de juiste plek bevinden.wp-content/themes/De map staat in de mapstructuur, en de namen van de mappen bevatten geen speciale tekens.

Hoe voeg ik een widgetgebied (sidesbar) toe aan mijn thema?

Je moet eerst…functions.phpGebruikt in het Chinees (vereenvoudigd)register_sidebar()De functie registreert één of meerdere toolgebieden. Vervolgens worden deze toolgebieden gebruikt in de corresponderende templatebestanden (bijvoorbeeld…)sidebar.phpIn dit voorbeeld wordt gebruikgemaakt vandynamic_sidebar()Een functie wordt gebruikt om deze op te roepen en te weergeven. Ten slotte wordt dit in de pagina-template gerealiseerd.get_sidebar()Voeg deze bestand toe.

Wat moet je doen als het wijzigen van de functions.php-fail het webbericht op een leeg scherm (white screen) veroorzaakt?

Dit gebeurt meestal omdat...functions.phpEr zijn PHP-syntaxefouten in het bestand. Aangezien dit bestand al wordt uitgevoerd in de eerste fase van het laden van het thema, kunnen deze fouten het hele website-functioneren onderbreken. De oplossing is om het foutige bestand via FTP of de bestandsbeheerder in het host-panel te vervangen.functions.phpOm te hernoemen (bijvoorbeeld in...)functions.php.bakOp deze manier zal WordPress het bestand negeren, waarna de toegang tot de website weer wordt hersteld. Je kunt het vervolgens opnieuw een geprobeerde, verbeterde versie van het bestand uploaden.

Hoe zorg ik ervoor dat mijn thema ondersteunt wordt bij meertalige vertalingen?

Je moet twee dingen doen. Allereerst moet je op alle plaatsen in het tekstuitvoer van het thema de vertaalfunctie van WordPress gebruiken, bijvoorbeeld…__()、_e()En bepaal waar ze moeten worden geplaatst.style.cssEerst wordt de “Text Domain” gedefinieerd in de hoofdinstellingen. Vervolgens wordt met een tool als Poedit de inhoud van de themafailen gescannd om de benodigde gegevens te genereren..potTemplatebestanden, en op basis daarvan de corresponderende talversies (bijvoorbeeld…)zh_CN.po和.moDe vertaalde documenten van (...) worden in het onderwerp geplaatst./languages/Catalogus.

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: