Homepage/Kennis/WordPress/De details van de inhoud

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

3 minuten leestijd
2026-03-14
2026-06-05
2,369
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 begint met schrijven van code, is het van belang om de samenstelling van een WordPress-thema te begrijpen. Een basis-thema bestaat uit ten minste twee bestanden: een stylesheet die de inhoud van het thema definieert, en een PHP-templatebestand dat de inhoud van de website weergeeft. Samen vormen deze bestanden de kern van het thema en volgen ze bepaalde directorystructuren en namenregels.

De kernbestanden zijn…style.cssDe bestand bevat niet alleen CSS-stijlen, maar ook een blok met commentaren in het begin van het bestand. Dit blok vormt de “identiteitskaart” van het thema en geeft het WordPress-systeem informatie over de naam, de maker, de beschrijving en de versie van het thema. Als deze informatie niet op de juiste manier is geformatteerd, kan het thema niet correct worden gebruikt in WordPress.style.cssWordPress zal je thema niet herkennen en niet kunnen activeren.

Een andere essentiële bestand is…index.phpDit is het hoofdtemplatebestand van het thema. Als WordPress geen specifiekere templatebestand kan vinden (bijvoorbeeld...single.php或page.phpWanneer dit wordt gebruikt, wordt het automatisch ingezet voor het renderen van de pagina. Het is de alternatieve optie voor alle templatebestanden.

Aanbevolen leesmateriaal De geheimen van WordPress-themaontwikkeling: de belangrijkste technieken voor het bouwen van maatgeschapte websites vanuit het niets。

Het document met de verklaring van het onderwerp

Theme Style Sheetstyle.cssDe kop moet bevaten opgegeven annotaties. Hieronder staat een zeer basist example:

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: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Hieronder valt ook:Text DomainDit wordt gebruikt voor internationalisering en bevat identificatoren die worden gebruikt bij de latere vertalingen. De file bevat meestal ook al je CSS-stijlcodes.

Core template file

index.phpEen bestand is de ingang tot een bepaald onderwerp. Het simpelste voorbeeld hiervan is…index.phpHet is mogelijk om alleen basisteksten te gebruiken die WordPress-core-functies oproepen, om een lijst met artikelen te halen en te weergeven.

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

In deze code:wp_head()和wp_footer()Het zijn twee belangrijke ‘hooks’ (of: mechanismen om code te invoegen): ze bieden de mogelijkheid voor het WordPress-core, plugins en andere scripts om nodige code in te voegen aan het begin en einde van een pagina. Deze code kan bestaan uit stijlregels, scripts of meta-taggen.

Het opzetten van een lokale ontwikkelomgeving.

Voordat je een thema op een online server deponeert, is het efficiëntste en veiligste om een lokale ontwikkelingsomgeving op tezetten. In deze omgeving kun je de code vrij testen en fouten oplossen, zonder dat dit de online website beïnvloedt.

Aanbevolen leesmateriaal Alles over WordPress-themaontwikkeling: een complete gids, van beginner tot expert.。

Kies voor lokale serversoftware.

Voor beginners is geïntegreerde lokale serversoftware de beste keuze. Deze software bevat Apache/Nginx, PHP en een MySQL-database en kan in één stap worden geïnstalleerd en gebruikt. Populaire opties zijn XAMPP, Local by Flywheel en DevKinsta. Deze tools simuleren een echte webserveromgeving, zodat je WordPress op je eigen computer kunt uitvoeren.

WordPress installeren en een themadirectory maken

Nadat je het op de lokale server hebt uitgevoerd, moet je een nieuw exemplaar van WordPress installeren. Download de meest recente versie van WordPress in een compressiebestand, extracteer dit bestand in de wortelmap van je website op de lokale server (bijvoorbeeld de hdocs-map van XAMPP). Vervolgens kun je de beroemde “vijfminutige installatie” uitvoeren door de lokale adres (bijvoorbeeld http://localhost) in je browser op te roepen.

Nadat de installatie is voltooid, ga je naar WordPress.wp-content/themesVerzeichnis. Hier kun je een nieuw mapje maken voor het thema dat je gaat ontwikkelen, bijvoorbeeld met de naam “my-first-theme”. De mappen die je eerder hebt gemaakt…style.css和index.phpDe bestanden moeten in deze map worden geplaatst. Nu kun je inloggen in het WordPress-administratiepaneel en in het menu “Uiterlijk” -> “Thema’s” je thema vinden. Hoewel het thema nog erg simpel is in zijn functionaliteit, kun je het hier gebruiken.

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

Een basis van sjablonen en bestandssystemen opbouwen

Enkelindex.phpHet thema alleen is niet voldoende. Een volledig functionerend thema vereist een set templatebestanden om verschillende weergaveomstandigheden aan te kunnen gaan, zoals één artikel, een aparte pagina of een archief van artikelen. Het template-systeem van WordPress kiest automatisch het meest geschikte templatebestand uit om de gevraagde pagina te weergeven.

Artikelen en paginaontwerpen (templates)

single.phpHet template wordt gebruikt om een enkele blogartikel te weergeven. Wanneer een gebruiker op de optie ‘Het volledige artikel lezen’ klikt, gebruikt WordPress dit template. Het bevat meestal meer details over de artikel, zoals de categorie, tags, auteur en het commentaarveld.

page.phpDe templates worden gebruikt om afzonderlijke, statische pagina's te weergeven (zoals de “Over ons”- en “Contact”-pagina’s). Het verschil met de artikeltemplates is dat er meestal geen elementen worden weergegeven die kenmerkend zijn voor blogartikelen, zoals de publicatiedatum of de categorie.

Aanbevolen leesmateriaal Een gedetailleerde uitleg van WordPress-themaontwikkeling: een complete gids van beginner tot expert.。

Header- en footer-template

Om het DRY-principe (Don't Repeat Yourself) te naleven, worden de header- en footer-elementen van een WordPress-thema meestal in aparte bestanden opgeslagen.

header.phpDe bestand bevat al het code materiaal vanaf het begin tot aan de belangrijkste inhoudsregio van de pagina, inclusief de verschillende secties, het identificatieven van de website en het hoofdmenu.index.php、single.phpIn andere templates wordt dit ook gebruikt.get_header()Een functie wordt gebruikt om dit in te voeren.

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

In dezelfde mate…footer.phpDe bestand bevat al het inhoud van de voetnoot, zoals auteursrechtnieuws en extra navigatieopties, en dit wordt vervolgens gebruikt...get_footer()Function introductions. In addition to that…sidebar.php(De sidebar wordt ook vaak apart gebruikt.)get_sidebar()Oproep.

Herstructureerdindex.phpHet wordt erg kort en simpel:

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

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

Integreer stijlen en scripts

Moderne websites vereisen dat CSS-stylesheeten en JavaScript-scripts op de juiste manier en efficiënt worden geladen. WordPress biedt speciale functies om deze bronnen te beheren, zodat ze in de juiste volgorde worden geladen en dat dubbele invoeringen of conflicten worden vermeden.

Stijlen toevoegen met een function queue

De juiste manier om dit te doen is door…wp_enqueue_style()De functie voegt de stijlblaadjes toe aan de queue. Je moet in het thema een element met de naam … (de naam van het element moet nog worden ingevuld) creeren.functions.phpDeze file vormt het kernonderdeel van de functionaliteit van het thema en wordt gebruikt om verschillende eigenschappen, functies te toevoegen en de standaardgedrag te bewerken.

在functions.phpIn dit geval kun je een functie mounten (toepassen) op…wp_enqueue_scriptsOp deze actiehaak zit:

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()De functie haalt automatisch het onderwerp op.style.cssDe bestandspad. Door op deze manier te laden, kan WordPress de resources beter beheren.

Scripten toevoegen met een function queue

Het laden van JavaScript-scripts vereist ook het gebruik van een wachtrij; de corresponderende functie is…wp_enqueue_script()Je kunt ze allemaal toevoegen in dezelfde functie.

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Hier,array( 'jquery' )Het wordt gemeld dat deze script afhankelijk is van de kernbibliotheek van jQuery; WordPress zal ervoor zorgen dat jQuery eerst wordt geladen. De laatste parameter…trueDit betekent dat de script wordt geplaatst aan de onderkant van de pagina (vóór de rest van de inhoud), waardoor de laadsnelheid van de pagina wordt verbeterd.

Samenvatting

Het ontwikkelen van een WordPress-thema vanaf nul is een systeematische leerproces dat meerdere belangrijke stappen omvat, van het begrijpen van de basisstructuur van de bestanden, het opzetten van een lokale omgeving, het creeren van een sjabloonframework tot het correct integreren van bronnen. Door dit zelf te doen…style.css、index.php、header.php、footer.phptefunctions.phpJe hebt niet alleen een werkend thema gemaakt, maar je hebt ook dieper in de werking van de schijfels en het hook-systeem van WordPress gedoken. Vergeet niet dat het kernpunt van themaontwikkeling is om de regels en standaarden van WordPress te volgen; dit zorgt ervoor dat je thema compatibel is, efficiënt werkt en gemakkelijk te onderhouden is. Vanaf hier kun je verder ontwikkelen en meer geavanceerde functies ontdekken, zoals aangepaste artikeltypes, thema-customizators en toolbars, om zo een persoonlijk thema met veel mogelijkheden te creëren.

Veelgestelde vragen (FAQ)

Is het vereist om PHP te beheersen om thema's voor ontwikkeling te kunnen maken?

Ja, het beheersen van PHP is een vereiste voor het ontwikkelen van WordPress-themes. WordPress is namelijk zelf geschreven in PHP, en alle templatebestanden (zoals…)index.php、single.phpHet zijn allemaal PHP-bestanden die de kernfuncties van WordPress oproepen met PHP-code om de inhoud van de pagina's dynamisch te genereren. Daarnaast worden deze bestanden gebruikt om extra functies te toevoegen.functions.phpDe bestanden bestaan geheel uit PHP-code. HTML en CSS worden gebruikt om de structuur en het uiterlijk te bepalen, terwijl PHP de kern is van de dynamische functies en de interactie met de gegevens.

Wat doet het function.php-bestand van het thema?

functions.phpHet bestand vormt het “functiecentrum” van je thema. Het is geen template-bestand en zal geen specifieke delen van de pagina rechtstreeks genereren. In plaats daarvan wordt het gebruikt om al het PHP-code te bewaren die nodig is om de functies van het thema te bewerken en uit te breiden. Denk hierbij aan het instellen van de positie van de navigatie-menu’s, het definiëren van de plaatsing van widgets, en andere onderdelen van het thema.wp_enqueue_scriptsDe hook wordt gebruikt om CSS- en JavaScript-bestanden toe te voegen, om functies voor themaondersteuning te implementeren (zoals artikelafbeeldingen en aangepaste achtergronden), en om verschillende maatgeschikte functies te definiëren. Deze bestanden worden automatisch geladen wanneer het thema wordt activeerd.

Hoe zorg ik ervoor dat mijn thema meerdere talen ondersteunt?

Om een thema te ondersteunen voor meerdere talen (internationalisering en lokalisatie) zijn er in principe twee stappen te ondernemen. De eerste stap is om op alle plaatsen in het thema waar tekst moet worden vertaald, de specifieke WordPress-functies voor vertalingen te gebruiken.__('文本', 'text-domain')或_e('文本', 'text-domain')Daarvantext-domainMoet in overeenstemming zijn metstyle.cssHetgeen in de verklaring wordt gesteldText DomainOvereenkomstig. De tweede stap is om tools als Poedit te gebruiken om de themacode te scannen en te genereren..potTemplatefile: de vertaler gebruikt deze file om de corresponderende vertaling (bijvoorbeeld in het Chinees) te genereren..poEn de gecompileerde versie.moDe bestanden worden vervolgens in de map met het thema geplaatst./languages/De vertalingen worden automatisch geladen door WordPress, afhankelijk van de taalinstellingen van de website.

Wat is het verschil tussen een thema en een plugin?

Thema's en plugins hebben in WordPress totaal verschillende taken. Thema's bepalen vooral het uiterlijke aspect van een website, oftewel de visuele weergave, het lay-out, de stijl en de structuur van de templates. Ze bepalen hoe de website er uitziet. Plugins daarentegen worden gebruikt om specifieke functies toe te voegen aan een website; deze functies werken onafhankelijk van het gebruikte thema, bijvoorbeeld het maken van contactformulieren, het verbeteren van de SEO-opties of het toevoegen van een winkelwagen. Ze bepalen wat de website “kan doen”. Een goede praktijk is om de code die te maken heeft met de visuele weergave en het lay-out in het thema te plaatsen, en de code die te maken heeft met de kernfuncties zo veel mogelijk in plugins op te slaan. Dit zorgt ervoor dat belangrijke functies van de website niet verloren gaan wanneer het thema wordt gewijzigd.

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: