Een eigen WordPress-thema ontwikkelen is de beste manier om diep te duiken in het WordPress-framewerk en je front-endontwikkelingsvaardigheden te verbeteren. In tegenstelling tot het gebruik van bestaande thema's, heb je bij het bouwen van een thema vanaf nul de volledige controle over het uiterlijk en de functionaliteiten van je website, waardoor je een unieke website kunt creëren die precies voldoet aan de behoeften van je project. In dit artikel wordt je stap voor stap geleid door het proces van het bouwen van een basis-Thema met alle essentiële functies.
Configuratie van de ontwikkelingsomgeving en themastructuur
Voordat je begint met schrijven van code, heb je een lokale ontwikkelomgeving nodig. Dit omvat meestal een set lokale servers (zoals XAMPP, MAMP of Local by Flywheel), een code-editor (bijvoorbeeld VS Code) en de meest recente versie van WordPress.
Allereerst: in WordPress… <code>wp-content/themes</code> In de map moet je een nieuwe map maken voor je nieuwe thema, bijvoorbeeld: <code>my-custom-theme</code>Een basisWordPress-thema vereist ten minste twee kernbestanden.
Aanbevolen leesmateriaal Volledige handleiding voor het ontwikkelen van WordPress-themes: van nul beginnen met het bouwen van een custom theme。
Een stijlboek (stylesheet) maken
Het eerste vereiste bestand is… style.cssDeze bestand bevat niet alleen de stijlregels voor het thema, maar ook metadata in de commentaren aan het begin van het bestand die WordPress vertellen wat het thema inhoudt. Voeg de volgende commentaren toe aan het begin van het bestand:
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/“Text Domain” wordt gebruikt voor internationalisering en moet absoluut overeenkomen met de naam van je themapagina. Daarna kun je alle CSS-regels in deze bestand opschrijven.
Create a core function file
Het tweede vereiste bestand is functions.phpDit is het “brein” van het thema; het wordt gebruikt om stijlbestanden (style sheets), JavaScript-bestanden in te lezen, menu’s en sidebar’s te registreren, en om verschillende functionaliteiten te ondersteunen.
Een fundamenteel functions.php De tekst begint meestal op deze manier, om de stijlblaadjes te toevoegen aan de wachtrij:
<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );Op dit moment zijn er nog geen templatebestanden, maar je thema kan al worden gezien in de lijst met thema’s in het WordPress-beheerpaneel (“Uiterlijk” -> “Themata”) en kan worden activeerd. Na activering wordt er een lege pagina weergegeven op de website, omdat er geen templatebestanden zijn om de structuur van de pagina te bepalen.
Aanbevolen leesmateriaal Praktische gids voor het ontwikkelen van WordPress-themes: van nul een eigen thema-architectuur en -templates bouwen。
Een kerntemplatefile bouwen
De templatebestanden bepalen hoe de verschillende delen van een website worden weergegeven. WordPress bepaalt welke template wordt gebruikt voor de huidige vraag op basis van de hiërarchie van de templates.
Creëer een header en footer voor het hele website-platform.
De beste praktijk is om de gemeenschappelijke kop- en voetcode apart te houden. header.php Een bestand bevat meestal een verklaring over het type document dat erin is opgeslagen. Regio en openen Tags en hoofdnavigatie.
<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
<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>
<nav>
'primary' ) ); ?>
</nav>
</header>
<main>In overeenstemming met dit, wordt er een creatie gemaakt. footer.php Kom en sluit het af. header.php De hoofdcontainer en tags die zijn geopend in...
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>wp_head() 和 wp_footer() Dit zijn belangrijke ‘hooks’ die het mogelijk maken voor het WordPress-core-systeem, plugins en thema’s om op deze plekken de nodige code (zoals styles en scripts) in te voegen.
Indexen en artikeltemplates maken
index.php Dit is het eindelijke terugkeerbestand (fallback file) van de template-hiërarchie en tevens het uitgangspunt voor ons thema. Het wordt gebruikt... get_header() 和 get_footer() Om de gescheiden modules te introduceren…
<article>
<h2><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
<div><p><strong>Het volledige artikel is hier te lezen.</strong></p></div>
</article>
endwhile; ?
<p>Er is geen artikel beschikbaar.</p>Om een enkele artikel apart te kunnen weergeven, wordt een... (de tekst is hier afgebroken; de volledige opdracht of instructie zou nodig zijn om de vertaling te voltooien.) single.phpDe structuur ervan is… index.php In vergelijking met…, maar gebruikend… the_content() Om de hele tekst te weergeven…
Aanbevolen leesmateriaal WordPress-themaontwikkeling voor beginners: bouw je eerste custom-thema van scratch。
<article>
<h1><p><strong>Hallo wereld!</strong></p></h1>
<div><?php the_content(); ?></div>
</article>Verbetering van de themafunctie
Nu de basisstructuur er is, gaan we verder met... functions.php Om meer praktische functies toe te voegen, zodat het thema professioneler en gebruiksvriendelijker wordt.
Registreren van de navigatiemenu en de sidebar
在 functions.php Voeg de volgende code toe om een hoofdmenu en een sidebar (toolbar) aan te maken:
// 注册导航菜单
function my_custom_theme_register_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );
// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' );Na het registreren moet je deze functies oproepen in je template. Bijvoorbeeld: header.php We hebben dit al gebruikt. wp_nav_menu De “primary”-menu is geroepen. Om widgets in de sidebar te weergeven, kunt u… sidebar.php Hier wordt een sjabloon voor een sidebar gemaakt, en dit wordt vervolgens gebruikt in... index.php 或 single.php Gebruikt in het Chinees (vereenvoudigd) get_sidebar() Introductie.
Het toevoegen van ondersteuning voor het thema-functie
WordPress biedt veel ingebouwde functies aan, maar deze kunnen alleen in thema's worden gebruikt als je expliciet aangeeft dat je ze ondersteunt. Denk hierbij aan ondersteuning voor het toevoegen van artikelafbeeldingen (‘feature images’), het aanpassen van het logo en het gebruik van HTML5-markeringen.
// 添加主题功能支持
function my_custom_theme_setup() {
// 支持文章缩略图
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 对搜索表单、评论表单等使用HTML5标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 在管理后台提供<title>标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Nadat de ondersteuning voor “post-thumbnails” is toegevoegd, kun je deze gebruiken in de loop van de artikelen. the_post_thumbnail() De functie is nu in staat om speciale afbeeldingen uit te geven.
Stijlontwerp en responsieve lay-out
Een mooi thema dat goed past op verschillende apparaten is van groot belang. Je kunt... style.css Schrijf alle stijlen in het Chinees (vereenvoudigd). Het wordt aanbevolen om een mobiel-georiënteerde strategie te volgen.
Basic styling en typografie
Allereerst moeten we enkele reset-stijlen en basisopmaakregels instellen, zodat de website op alle browsers op een gelijke manier wordt weergegeven.
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: #f8f9fa;
padding: 2rem 0;
border-bottom: 1px solid #dee2e6;
}
/* 导航菜单样式 */
.main-navigation ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
.main-navigation a {
text-decoration: none;
color: #007bff;
}Responstief ontwerp realiseren
Gebruik mediaqueries om het lay-out aan te passen aan verschillende schermgrootten. Als de schermgrootte bijvoorbeeld kleiner wordt, kan het navigatiemenu worden veranderd in een verticale weergave.
/* 移动端样式 */
@media (max-width: 768px) {
.main-navigation ul {
flex-direction: column;
gap: 0.5rem;
}
.container {
padding: 0 15px;
}
article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
}Zorg ervoor dat de afbeeldingen ook responsief zijn:
img {
max-width: 100%;
height: auto;
}Samenvatting
Door de bovenstaande stappen te volgen, hebt u met succes een volledig functionerend, aangepast WordPress-thema gecreëerd. We begonnen met het instellen van de ontwikkelingsomgeving en het maken van de basis van het thema. style.css 与 functions.php Het document begint met het stap voor stap opbouwen van de kerntemplatebestanden.header.php, footer.php, index.php, single.phpWe hebben de functionaliteit van het thema versterkt, bijvoorbeeld met een registratiemenu, een sidebar en ondersteuning voor speciale afbeeldingen. Ten slotte hebben we basistijlen en een responsief ontwerp toegevoegd, zodat het thema goed op alle apparaten wordt weergegeven. Dit is alleen een startpunt; je kunt hierop verder bouwen en paginaontwerpen maken.page.phpArchiveringsmallen (Archive Templates)archive.phpSearch templatessearch.phpJe kunt zelfs gebruikmaken van subthema's om het websiteontwerp nog meer te personaliseren, waardoor je een nog sterker en professioneler uitziende website creëert.
Veelgestelde vragen (FAQ)
Welke technieken moet je beheersen om een WordPress-thema te ontwikkelen?
Om een basis-WWordPress-thema te ontwikkelen, moet je HTML, CSS en PHP beheersen. HTML wordt gebruikt om de structuur van de pagina's op te bouwen, CSS voor het ontwerp en de lay-out, en PHP vormt de kern van de dynamische inhoud van WordPress. Een basiskennis van JavaScript is handig om interactieve functies te kunnen toevoegen. Het is belangrijk om de kernconcepten van WordPress te begrijpen, zoals de template-hiërarchie, loops (The Loop), hooks en functies, om een succesvol thema te kunnen ontwikkelen.
Welke rol speelt de functions.php-fail van het thema?
functions.php Het bestand is het functionele centrum van een WordPress-thema. De belangrijkste taken zijn: CSS- en JavaScript-bestanden toevoegen aan de wachtrij, navigatiemenu's en zijbalk-widgetgebieden registreren, functies declareren die worden ondersteund door het thema (zoals artikelminiaturen en aangepaste logo's), aangepaste functies definiëren en het standaardgedrag van WordPress wijzigen met behulp van actie- en filterhaken. Hiermee kun je de functionaliteit van het thema aanzienlijk uitbreiden en aanpassen zonder de kernbestanden van WordPress te wijzigen.
Hoe zorg ik ervoor dat mijn thema meerdere talen ondersteunt?
Om een thema te ondersteunen voor meerdere talen (internationaal gebruik), zijn er twee belangrijke stappen te nemen. Allereerst moet je ervoor zorgen dat... style.css Zorg ervoor dat de “Text Domain” en alle plaatsen waar de vertaalfuncties worden gebruikt, overeenkomen met de tekstdomain; deze is meestal gelijk aan de naam van het themapakket. Daarnaast moet u, wanneer u de teksten voor de vertaling voorbereidt, de vertaalfuncties van WordPress gebruiken. __()、_e() 或 _x()Daarna kunt u tools gebruiken zoals Poedit om dit te realiseren. .pot Templatebestanden, en genereren de corresponderende… .po 和 .mo Vertaal het bestand. Plaats het vertaalde bestand in het thema. /languages In de map worden de bestanden automatisch door WordPress geladen, afhankelijk van de taainstellingen van de website.
Welke voordelen zijn er van het creeren van een subthema vergeleken met het direct bewerken van het hoofdthema?
Het creëren van subthema's is een goede praktijk om bestaande functies van een parent-thema te bewerken of uit te breiden. De belangrijkste voordel hiervan is de verbeterde veiligheid: wanneer het parent-thema wordt bijgewerkt, kun je het veilig updaten zonder dat je eigen aanpassingen (stijl, functies, templates) in het subthema verloren gaan. Het subthema heeft maar één… style.css En een optioneel… functions.php Het bestand werkt al als het is. In de subthema… style.css In dit proces wordt gebruik gemaakt van… @import Of introduceer een betere manier van het gebruiken van de queue-indeling (queueing) door de stijl van het parent-thema (parent theme) te gebruiken, en voeg daarna je eigen CSS-regels toe om deze stijl te overschrijven. functions.php De nieuwe functies worden samen met de bestanden met dezelfde naam uit het hoofdthema geladen, in plaats van ze te overschrijven. Dit zorgt ervoor dat je veilig nieuwe functies kunt toevoegen.
De volgende stap, wat moeten we als volgende doen?
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.
- Een dieper inzicht in het Tailwind CSS-framework: van praktische tools tot moderne front-end ontwikkelingspraktijken
- Ultimatumgids voor websiteontwikkeling in 2026: Het volledige proces om van nul een high-performance-website te bouwen
- Van nul naar één: een gedetailleerde uitleg van het hele proces van websitebouw en een gids voor het kiezen van technologieën
- Core concepts en praktische patronen van Tailwind CSS: van atoomklassen tot responsief ontwerp
- Ultimatum Gids voor Websitebouw: Het volledige proces van concept tot livegoed en een analyse van de belangrijkste technieken
Nederlands