Homepage/Kennis/WordPress/De details van de inhoud

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

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

Forbereidende werkzaamheden: Installeer uw lokale ontwikkelomgeving

Voordat je met het schrijven van code begint, is een stabiele en efficiënte lokale ontwikkelingsomgeving essentieel. Dit zorgt ervoor dat je vrij kunt testen en debuggen zonder dat de online website wordt beïnvloed. De meest populaire optie vandaag de dag is het gebruiken van lokale serverpakketten die Apache/Nginx, MySQL/MariaDB en PHP integreren, zoals Local by Flywheel, XAMPP of MAMP. Zorg ervoor dat je PHP-versie minstens 7.4 is en dat de nodige extensies, zoals MySQLi of PDO, zijn geactiveerd.

Volgens de instructies moet je eerst een nieuwe versie van WordPress op je lokale computer installeren. Download de meest recente installatiepakket van de officiële WordPress-website (WordPress.org), en extracteer het pakket in de wortelmap van je lokale server (bijvoorbeeld de map hhtdocs of www). Daarna kun je de lokale website bereiken door in een browser de volgende adres te gebruiken:http://localhost/your-siteVolg de bekende “vijf-minuten-installatie’procedure om de instellingen te voltooien. Onthoud de naam van je database, je gebruikersnaam en je wachtwoord; deze gegevens worden later gebruikt.wp-config.phpIn het bestand.

Ten slotte heb je een handig code-editor of een Integrated Development Environment (IDE) nodig. Visual Studio Code, PhpStorm of Sublime Text zijn allemaal uitstekende keuzen; ze bieden goede ondersteuning voor PHP, HTML, CSS en JavaScript, met functies als syntaxis-highlighting, codevoorstellen en debugging. Zorg ervoor dat de editor de relevante WordPress-codefragmenten of intelligentievere plugins bevat, dit zal je ontwikkelingswerkzaamheden aanzienlijk versnellen.

Aanbevolen leesmateriaal Volledig handboek voor het ontwikkelen van WordPress-themes: van nul een persoonlijke website bouwen。

Het begrijpen van de basisstructuur en belangrijkste bestanden van een WordPress-thema

Een zeer basisch WordPress-thema is in feite een set bestanden die zich bevindt in de map `wp-content/themes` van je WordPress-installatie.wp-content/themes/De mappen in de map bevatten een reeks bestanden met specifieke functies. Deze bestanden werken samen om WordPress te vertellen hoe je website-inhoud moet worden weergegeven. Laten we beginnen met twee absolute must-have-bestanden.

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

Het eerste is…style.cssDeze bestand is niet alleen je thema-stylesheet, maar ook het “identiteitsbewijs” van het thema. De blok met commentaren in het bestandskop bevat alle meta-informatie die WordPress nodig heeft om het thema te herkennen. Een van de basisvereisten voor een thema is…style.cssDe koppen zijn als volgt:

/*
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: GPL v2 or later
Text Domain: my-first-theme
*/

Het tweede vereiste bestand isindex.phpDit is het hoofdtemplatebestand van het thema. Als WordPress geen specifiekere templatebestand kan vinden, wordt dit bestand automatisch gebruikt om de pagina te weergeven. Het moet dus aanwezig zijn, zelfs al bevat het in eerste instantie alleen de simpele tekst “Hello World”.

Naast deze twee bestanden bevat een volledig functionerend thema meestal ook:
* header.phpDe header-regio van een webpagina bevat meestal de volgende elementen:<head>Deel van de inhoud, de website-titel en het hoofdmenu.
* footer.phpDe voetnoot van een webpagina bevat informatie over de auteursrechten, scripts en andere elementen.
* sidebar.phpDefinieer de sidebar-gebied.
* functions.phpDit is een zeer krachtig bestand dat wordt gebruikt om functies toe te voegen aan een thema, menu's en zijbalken te registreren, en om andere scripts en style sheets te introduceren.
* page.phpWordt gebruikt voor het renderen van statische pagina's.
* single.phpWordt gebruikt voor het weergeven van een enkele blogartikel.
* archive.phpWordt gebruikt voor het weergeven van artikelen categorieën, tags en andere archiveringspagina's.

Vanaf nul een kerntemplate bouwen voor een thema

Nu gaan we de kernstructuur van het thema maken. Eerst…wp-content/themes/Maak een nieuwe map in de map en geef deze de naammy-first-themeVervolgens wordt er, zoals eerder genoemd, iets in dat gecreëerd.style.css和index.phpHet document.

Aanbevolen leesmateriaal Handboek voor het bouwen van moderne websites: Het volledige proces van planvning tot livegoeding en praktische tips。

Maak templates voor de header en de footer.

Het ontsluiten van de structuur van een webpagina in herbruikbare onderdelen is essentieel voor efficiënt ontwikkelen. We hebben...header.phpDeze file is verantwoordelijk voor het genereren van de beginsectie van het HTML-document. In deze file moet je gebruikmaken van…wp_head()De `functions`-functie is een belangrijk hulpmiddel dat het mogelijk maakt voor het WordPress-core, plugins en je eigen thema om hier nodige code in te voegen (bijvoorbeeld links naar styleheets of meta-taggen).

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<header id="masthead">
    <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>

In dezelfde mate, creëer ook...footer.phpDe bestand wordt gebruikt om de pagina te sluiten. Zorg ervoor dat deze op deze plek wordt geroepen.wp_footer()Hooken is van essentieel belang voor het correcte functioneren van veel plugins (bijvoorbeeld voor het analyseren van code).

<footer id="colophon">
    <p>©  . All Rights Reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Assemblen van het hoofdindexbestand

Nu je een header en een footer hebt, kun je verder met het ontwerp van je pagina.index.phpDe documenten worden daardoor simpeler en krachtiger in hun uitstraling.get_header()和get_footer()Gebruik templatefuncties om ze te introduceren.

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 
<?php get_header(); ?>

<main id="primary">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
                <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>
        &lt;?php
        endwhile;
    else :
        echo &#039;<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

Deze code vormt een typisch “mainloop”: het controleert of er artikelen zijn, en vervolgens worden alle artikelen doorlopen om de titel (met een link naar het volledige artikel) en de samenvatting te weergeven.

Thema's worden versterkt met behulp van functionaliteitsbestanden.

functions.phpDit is het “Control Center” voor je thema. Hier kun je op veilige manier de standaardinstellingen van WordPress wijzzen, zonder de kernbestanden te hoeven aanpassen.

Registreren van de navigatiemenu en de sidebar

Om je thema te ondersteunen met een aangepast menu, moet je gebruikmaken van...register_nav_menus()Deze functie wordt gebruikt om de locatie van de keukenunit te registreren. Dit gebeurt meestal...functions.phpDeze actie wordt uitgevoerd binnen een functie in een bestand, en deze functie doet dit door...after_setup_themeHook uitvoeren.

Aanbevolen leesmateriaal Webdesign van het begin tot de volmaaktheid: een compleet handboek voor het bouwen van high-performance websites。

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Na het registreren kunt u…header.phpGebruikt in het Chinees (vereenvoudigd)wp_nav_menu( array( 'theme_location' => 'primary' ) )Om dit menu te weergeven...

In dezelfde mate kun je ook gebruikmaken van...register_sidebar()De functie is klaar om een gebied voor het maken van widgets (sidesbars) te creeren.

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

De scripts en stijlen moeten op de juiste manier worden ingevoerd.

Verbind nooit rechtstreeks CSS- of JavaScript-bestanden in een templatebestand. De juiste manier is om deze bestanden via een referentie of import in te voegen.wp_enqueue_scriptsHook, gebruikenwp_enqueue_style()和wp_enqueue_script()Er wordt een functie gebruikt om de invoer in een rij te ordenen. Dit zorgt ervoor dat de afhankelijkheden correct worden verwerkt en dat dubbele laden wordt voorkomen.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

// 引入一个自定义JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Samenvatting

Het maken van je eerste WordPress-thema is een stap voor stap proces: je begint met het opzetten van een omgeving, het begrijpen van de basisstructuur, daarna schrijf je zelf de belangrijkste template-bestanden en ten slotte geef je het thema meer functionaliteit met behulp van extra bestanden. Het belangrijkste is om de hiërarchie van de templates te begrijpen (hoe WordPress bepaalt welke template-bestanden worden gebruikt voor verschillende pagina’s) en te weten hoe je deze templates optimaal kunt inzetten.functions.phpEn met verschillende ‘hooks’ kun je de functionaliteit uitbreiden. Hoewel het introductietopic eenvoudig lijkt, bevat het alle kernconcepten. Nadat je deze hebt begrepen, kun je verder ontdekken hoe je complexere templates kunt bouwen.single.php、page.phpJe kunt ook gebruikmaken van functies als aangepaste artikeltypes, een themaker-API en andere geavanceerde mogelijkheden om unieke en persoonlijke thema's te creëren die rijk aan functies zijn en mooi zijn ontworpen.

Veelgestelde vragen (FAQ)

Is het nodig om vloeiend PHP te beheersen om een WordPress-thema te maken?

Je hoeft geen expert te zijn, maar je moet wel basiskennis van PHP hebben. Je moet de basisbeginselen van variabelen, arrays, voorwaardelijke uitspraken, lussen en functies begrijpen, omdat WordPress-sjablonen in feite PHP-functies zijn. Naarmate je meer ontwikkelt, zul je vanzelf meer PHP-vaardigheden ontwikkelen.

Waarom verschijnt mijn thema niet op de achtergrond?

De meest voorkomende reden is...style.cssDe meta-informatie in de commentaren aan het begin van het bestand is niet in het juiste format, of er ontbreken vereiste elementen (bijvoorbeeld)...Theme NameControleer alstublieft deze bestand opnieuw om te zorgen dat de commentaren op de juiste manier zijn opgesteld en dat alle informatie compleet is. Bovendien moet de themapagina (theme folder) zich rechtstreeks bevinden in de juiste locatie.wp-content/themes/Er mogen geen meerdere lagen van nesting in de map zijn.

Wat is het verschil tussen functions.php en plugins?

functions.phpDeze functies maken deel uit van het actieve thema en zijn verbonden met de specificaties van dat thema. Als je het thema wijzelt, werken deze functies meestal niet meer. Plugins daarentegen bieden onafhankelijke functies aan die onafhankelijk van het gebruikte thema actief blijven. Functies die sterk gerelateerd zijn aan het uiterlijk en de lay-out van de website, worden meestal geplaatst in de onderdelen van het systeem die zich specifiek met thema-instellingen bezighouden.functions.phpDeze functies zijn meer algemeen en onafhankelijk van het platform, waardoor ze beter kunnen worden uitgevoerd als plugins. Voorbeelden hiervan zijn contactformulieren en SEO-optimalisatie.

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

Je moet de internationaleisering (i18n)-functies van WordPress gebruiken om alle tekststringen die voor de gebruiker bestemd zijn te verwerken. In je code moet je deze functies op de juiste manier inzetten.__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )Maak een tekstuitvoer waarinmy-first-themeDit is je tekstgebied (Text Domain); dit moet overeenkomen met…style.cssDeze verklaring is in overeenstemming met de eerdere uitspraken. Vervolgens kun je tools als Poedit gebruiken om de gewenste vertalingen te genereren..potHet vertalen van sjabloonbestanden en.po/.moTaalbestand.

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: