Een introductie tot het ontwikkelen van WordPress-thema's: hoe je je eerste website-thema vanaf nul maakt.

Basics van WordPress-themaontwikkeling en het opzetten van een omgeving

Voordat je begint met schrijven van code, moet je de basis van een WordPress-thema begrijpen. Een thema is in feite een map die bestaat uit een reeks bestanden in PHP, CSS, JavaScript en afbeeldingen. Deze bestanden samen bepalen het uiterlijk en enkele functies van de website. De map met het thema moet zich bevinden in de installatiedirectory van WordPress.wp-content/themesIn de map vind je voor elk thema een kernstijlbestand (style file).style.cssEn een basistemplatebestandindex.phpDit zijn de minimale vereisten om met het ontwikkelen van een themaproject te kunnen starten.

Om efficiënt te kunnen ontwikkelen, is het sterk aan te raden om een lokale ontwikkelomgeving op te zetten. Dit geeft je de mogelijkheid om vrij te testen zonder dat de online website wordt beïnvloed. Je kunt gebruikmaken van geïntegreerde toolkits als XAMPP, MAMP, Local by Flywheel of DevKinsta; deze kunnen Apache/Nginx, PHP en MySQL in één stap installeren. In de lokale omgeving heb je ook een code-editor nodig, zoals VS Code,PhpStorm of Sublime Text. De functies voor het markeren van PHP-, HTML- en CSS-syntaxis en het bieden van tips, zorgen voor een aanzienlijke verbetering van je ontwikkelingsefficiëntie.

Nadat de voorbereidende werkzaamheden zijn voltooid, moet je…wp-content/themesMaak een nieuwe map in de map.my-first-themeVolgens de opgegeven instructies gaan we nu de eerste vereiste bestand maken.

Aanbevolen leesmateriaal Het ontwikkelen van WordPress-thema's vanaf nul: best practices en richtlijnen voor het bouwen van aangepaste websites。

Create a core style file

In de themapagina (theme folder) maak je een nieuwe map met de naamstyle.cssDeze bestand is niet alleen verantwoordelijk voor het uiterlijk van de website, maar de commentaarkop (header) aan het begin van de bestand is ook de enige manier voor WordPress om het thema te herkennen. De commentaarkop bevat meta-informatie over het thema, zoals de naam, de auteur en een beschrijving.

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.

toegangspagina

Hieronder staat…style.cssStandaardvoorbeeld van de bestandskop:

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://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
Tags: 博客, 简洁, 响应式
Text Domain: my-first-theme
*/

Naast de bestandsopmerkingen (file headers) kun je, net zoals je gewone CSS-code schrijft, beginnen met het toevoegen van stijlregels (style rules) voor de elementen op je website. Dit geldt ook voor tekstvelden (text fields).my-first-themeDit is een identificator die is gereserveerd voor de internationaleisering van het thema, en moet overeenkomen met de naam van de themapagina.

Constructeer een kerntemplatebestand voor het thema

Templatebestanden vormen het skelet van een WordPress-thema en bepalen hoe verschillende soorten content worden georganiseerd en weergegeven. Deze bestanden bestaan voornamelijk uit PHP-code, met daarnaast ook HTML-taggen. Het meest basistische templatebestand is…index.phpDit is een alternatieve template voor alle pagina's, wanneer er geen specifiekere template beschikbaar is (bijvoorbeeld...).single.php或page.phpAls dit het geval is, zal WordPress het gebruiken.

Een basisindexbestand maken

Maak een nieuw bestand in de map met de thema's.index.phpEen van de simpelste, maar toch volledig functionerende…index.phpWordPress kan de zogeheten ‘The Loop’ gebruiken; dit is het fundamentele mechanisme om inhoud van artikelen uit de database te halen en te weergeven.

Aanbevolen leesmateriaal WordPress-themaontwikkeling van het begin tot de volmaaktheid: stap voor stap leert u hoe u eigen websites bouwt。

Een minimaliseerde versieindex.phpEen voorbeeld is als volgt:

<!DOCTYPE html>
<html no numeric noise key 1017>
<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 1014>
    <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>
                    <h2><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
                    <div><?php the_content(); ?></div>
                </article>
            
            <p>Er is geen artikel beschikbaar.</p>
        <?php endif; ?>
    </main>

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

Deze bestand bevat enkele belangrijke onderdelen:wp_head()和wp_footer()Hookjes bieden WordPress Core, plugins en andere scripts de mogelijkheid om nodige code (zoals CSS en JS) in te voegen voordat de pagina wordt weergegeven en na de afronding van de pagina.the_post()De functie wordt gebruikt in een loop om de gegevens van het huidige artikel in te stellen, en daarna…the_title()和the_content()Door de juiste template-taggen te gebruiken, wordt het corresponderende content weergegeven.

Stijlen en scripts invoeren

Enkelstyle.cssEr is nog niet genoeg materiaal in de bestanden; je moet WordPress vertellen wanneer deze bestanden moeten worden geladen, door middel van een functie. Hiervoor moet je in de themapapier een andere, zeer belangrijke bestand maken:functions.phpDit is geen templatebestand, maar een “functiesbibliotheek” voor het thema. Het wordt gebruikt om de functionaliteiten van het thema te verbeteren, het registratiemenu en de sidebar te bewerken, en om stijlbestanden en scripts veilig in te voegen.

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%

toegangspagina

Expanderen van themafuncties en het laden van styles

functions.phpDe bestanden vormen de ‘motorruimte’ van het thema; alle PHP-code die niet rechtstreeks te maken heeft met de weergave op de pagina’s, moet hier worden opgeslagen. In deze bestanden moet je dus de vereiste code gebruiken.add_action()De functie maakt je code beschikbaar voor bepaalde actie-haken (action hooks) in WordPress, zodat deze op het juiste moment worden uitgevoerd.

Stijlbestanden veilig laden

De juiste manier is niet om tags rechtstreeks in het templatebestand in te voegen.style.cssNiet door… maar door…wp_enqueue_style()De functie wordt gebruikt om inhoud op een bepaalde volgorde te laden. Dit past bij het afhankelijkheidsbeheermechanisme van WordPress en voorkomt dat inhoud meerdere keren wordt geladen.

在functions.phpVoeg de volgende code toe in:

Aanbevolen leesmateriaal Populaire instromsgids voor 2026: Hoe u vanaf nul uw eerste WordPress-thema maakt。

<?php
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 可以在此加载其他样式或脚本，例如：
    // wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Hier,get_stylesheet_uri()De functie verzamelt automatisch de informatie over het thema.style.cssHet pad naar het bestand.add_action( 'wp_enqueue_scripts', ... )Zorg ervoor dat onze laadfunctie wordt opgeroepen wanneer WordPress de front-end-scripts en -stijlen klaarmaakt.

De basis-themafunctie is ingeschakeld.

在functions.phpIn deze configuratie kunnen we ook enkele functies activeren die essentieel zijn voor moderne websites. Denk hierbij aan het ondersteunen van speciale afbeeldingen (artikelthumbnails) voor artikelen en pagina's, evenals het toevoegen van aangepaste menuopties aan de website.

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.

toegangspagina

// 启用文章特色图像
add_theme_support( 'post-thumbnails' );

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

// 为WordPress生成的标签添加title属性支持
add_theme_support( 'title-tag' );

add_theme_support()Deze functies worden gebruikt om de verschillende mogelijkheden aan te geven die het onderwerp ondersteunt.register_nav_menus()Dit definieert waar de menu's kunnen worden geplaatst in het WordPress-beheerpaneel, onder “Uiterlijk” -> “Menü’s”.

Maak speciale templates en thema's voor testing.

Met de verbetering van de basisfuncties van het thema, wordt het steeds eenvoudiger om…index.phpDe bestand kan niet langer alle vereisten voor het weergeven van verschillende soorten pagina's vervullen. De template-hiërarchie van WordPress biedt de mogelijkheid om speciale template-bestanden aan te maken voor de homepagina, individuele artikelen, pagina's en archieven, waardoor je meer controle over het uiterlijk van de website hebt.

Maak een template voor een enkele artikelpagina

Wanneer een gebruiker op 'Lees het volledige artikel' klikt, wordt de gebruiker gebracht naar de specifieke pagina van dat artikel. Creëer een naam voor deze pagina, bijvoorbeeld: 'Artikelpagina'.single.phpDeze bestanden worden gebruikt om het weergeven van content specifiek te regelen. Ze bevatten meestal meer complete informatie over het artikel, zoals de categorie, tags, auteur en commentaren.

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
            <h1><p><strong>Hallo wereld!</strong></p></h1>
            <div class="meta">
                发布于： | 作者：
            </div>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="featured-image">
                    <?php the_post_thumbnail(); ?>
                </div>
            <?php endif; ?>
            <div class="content">
                <?php the_content(); ?>
            </div>
            <div class="taxonomies">
                分类：
                <br>
                标签：
            </div>
        </article>
        
</main>

Deze template bevat een nieuwe templatefunctie:get_header(), get_sidebar()和get_footer()Ze worden apart geladen onder de namen…header.php、sidebar.php和footer.phpDe template-componentenbestanden. Op deze manier wordt de structuur van de pagina gemodulariseerd, waardoor code duplicatie wordt voorkomen. Je moet deze bestanden maken en de vereiste inhoud daarin invoegen.index.phpDe corresponderende code voor de bovenste, onderste en zijbalken.

Test en verifieer je thema.

Nadat je het kerntemplate hebt gemaakt, log in je in bij het WordPress-administratiepaneel en ga naar “Uiterlijk” -> “Thema’s”. Je moet “Mijn eerste thema” zien in de lijst met thema’s. Activeer dit thema, en bezoek daarna de homepage van je website en de pagina van een individueel artikel om te controleren of alle elementen (titel, inhoud, menu en voetnoot) zoals verwacht worden weergegeven.

Gebruik de ontwikkelaarstool van je browser om te controleren of de HTML-structuur correct is en of de CSS-effecten echt worden geapplikeerd. Probeer enkele testartikelen te maken die bestaan uit unieke afbeeldingen, categorieën en tags, en zorg ervoor dat deze elementen in het template op de juiste manier worden opgeroepen en weergegeven. Dit is de beste manier om potentieel probleem te ontdekken en te verhelpen.

Samenvatting

Felicitaties met het voltooien van de basisconstructie van je eerste WordPress-thema! Met deze handleiding heb je geleerd hoe je vanaf nul een themafolder maakt en de benodigde bestanden schrijft.style.css和index.phpVan het opslaan van bestanden tot hun gebruikfunctions.phpHet volledige proces om functies te verbeteren, resources te laden, speciale sjabloonbestanden te maken en te werken met modulaire ontwikkeling… Dit is slechts het beginpunt in de wereld van themaontwikkeling. Daarna kunt u verder ontdekken hoe u nog meer sjabloonbestanden kunt gebruiken (bijvoorbeeld…)page.php、archive.phpJe kunt ook werken met geavanceerde functies als thema's, een toolgebied en aangepaste artikeltypes, en blijf je codestructuur en design continu verbeteren.

Veelgestelde vragen (FAQ)

###: Waarom wordt mijn thema niet weergegeven in de backend?
Dit gebeurt meestal vanwege...style.cssHet probleem wordt veroorzaakt door een incorrecte of ontbrekende opmaak van de commentaarkoppen in het bestand. Zorg ervoor dat het bestand zich bevindt in de root-map van de themapagina en dat de commentaarkoppen volledig en correct zijn opgesteld. Een andere mogelijke oorzaak zijn beperkingen op de toegang tot het bestand; controleer of WordPress de toegang heeft tot de themapagina.

Is het file functions.php vereist?

Technisch gezien...style.css和index.phpHet thema zou ook hier werken.functions.phpOm functies te realiseren die verder gaan dan de basis van HTML-output (zoals een registratiemenu, het toevoegen van een sidebar of het veilig laden van scripten en stijlen) is dit essentieel. Dit is de standaardmanier om thema's uit te breiden en aan te passen, dus het is nodig voor elke bruikbare thema.

Hoe voeg ik een zijbalk toe aan mijn thema?

Allereerst:functions.phpGebruikt in het Chinees (vereenvoudigd)register_sidebar()De functie registreert één of meerdere widgets (sidesbars). Vervolgens wordt dit gebruikt in de templatebestanden waar je de sidebar wilt weergeven.index.php或single.phpIn dit voorbeeld wordt gebruikgemaakt vandynamic_sidebar()Een functie wordt gebruikt om dit te kunnen oproepen. Nadat dit is gedaan, kunnen gebruikers widgets naar deze regio slepen op de pagina “Uiterlijk” -> “Widgets” in het WordPress-administratiepaneel.

Welke veiligheidsaspecten moet je bij het ontwikkelen van een thema in de gaten houden?

Vertrouw nooit blind op de invoer van gebruikers of op gegevens uit de database. Voordat je dynamische inhoud op de pagina weergeeft, moet je altijd de door WordPress beschikbare ontsluitingsfuncties gebruiken.esc_html()、esc_url()和wp_kses_post()Wanneer je in een thema custom functies of formulieren toevoegt, moet je de nonce-mechanismen en beveiligingscontroles van WordPress respecteren.wp_enqueue_style()和wp_enqueue_script()De bronnen worden geladen in plaats van dat ze worden hardgecodeerd of met tags worden gemarkeerd.