Homepage/Kennis/WordPress/De details van de inhoud

Een volledige handleiding voor het ontwikkelen van WordPress-thema's: vanaf nul een professioneel thema bouwen.

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

Forbereidende werkzaamheden en opzet van de omgeving

Voordat je met het schrijven van code begint, is een efficiënte lokale ontwikkelomgeving van belang. We raden aan om een pakket te gebruiken dat Apache/Nginx, PHP en MySQL integreert, zoals Local by Flywheel, MAMP of XAMPP. Zorg ervoor dat je PHP-versie op of na 7.4 staat en je MySQL-versie op of na 5.6 staat. Het is ook aan te raden om de meest recente versie van het WordPress-core-systeem te gebruiken.

Een WordPress-thema is in feite een verzameling bestanden die zich op een bepaalde locatie bevinden./wp-content/themes/De mappen in de directory hebben in principe maar twee essentiële bestanden nodig. Je moet in je lokale omgeving een nieuwe map maken, bijvoorbeeld…my-professional-themeEn maak daarin het eerste belangrijke bestand.

Creëer de kerngegevens voor de configuratie van het thema.

Elk onderwerp moet een bepaald element of aspect hebben.style.cssHet bestand bevat een sectie met commentaren in de kop die gebruikt wordt om WordPress de basisinformatie over het thema mee te delen. De naam van dit bestand is vastgelegd en WordPress herkent en list je thema op door de inhoud van deze kopsectie te lezen.

Aanbevolen leesmateriaal Volledig handboek voor het ontwikkelen van WordPress-themes: van het begin tot de volmaakte beheersing。

/*
Theme Name: My Professional 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
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-professional-theme
*/

Text DomainVoor internationaal gebruik: dit wordt gebruikt als identificator voor de volgende omschrijving van de vertaalfunctie.

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

Create a core startup file for the theme.

Het tweede vereiste bestand is:index.phpHet is het standaardtermpel voor het terugkeren naar een vorige versie van alle pagina's. Maar het belangrijkste startbestand is…functions.phpJe moet deze bestand maken in het themadirectory. Dit bestand vormt het “brein” van het hele thema en wordt gebruikt om stijlbestanden (style sheets), JavaScript-scripts, registratie-menuden, sidebar’s en andere onderdelen van het thema in te voeren.

<?php
// 安全措施：防止直接访问文件
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// 1. 引入样式表和脚本
function my_theme_enqueue_scripts() {
	// 引入主样式表
	wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
	// 引入自定义样式
	wp_enqueue_style( 'my-theme-custom-style', get_template_directory_uri() . '/assets/css/main.css' );
	// 引入JavaScript
	wp_enqueue_script( 'my-theme-main-js', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

Constructeer een hiërarchische structuur voor themaattemplates

De hiërarchie van templates in WordPress vormt de kern van zijn designfilosofie. Wanneer een pagina wordt bezocht, zoekt WordPress naar de corresponderende templatebestanden volgens een bepaalde prioriteit. Het begrijpen en creëren van deze belangrijke templatebestanden is de basis voor het bouwen van flexibele thema's.

Een algemeen layouttemplate voor het bouwen van websites

header.php和footer.phpDit vormt de boven- en onderste delen van alle pagina's op de website. We kunnen hierdoor... get_header() 和 get_footer() Functies kunnen in alle templates worden gebruikt. Maak ze maar!header.phpHierin moet een HTML-document zijn opgenomen.<head>Deel van de visuele inhoud en de bovenste regio van de website (zoals het logo en het navigatiemenu).

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<?php wp_head(); ?>
</head>
<body no numeric noise key 1003>
	<header id="masthead" class="site-header">
        <div class="site-branding">
            <h1 class="site-title"><a href="/nl/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        </div>
        <nav id="site-navigation" class="main-navigation">
            'menu-primary',
                'menu_id'        =&gt; 'primary-menu',
            ) );
            ?&gt;
        </nav>
	</header>

footer.phpDit bevat de onderste informatie van de website en de invoer van scripts (via…) wp_footer()) en de uiteindelijke sluittag.

Aanbevolen leesmateriaal Een professionele website maken: een volledige handleiding voor het bouwen van een aangepast WordPress-thema vanaf nul.。

Creëer een cyclische inhoudsopvolging voor artikelen en een template voor de homepage.

index.phpDit is het algemene template voor het terugvallen op een vorige staat van alle pagina's, maar voor betere controle zou het beter zijn om specifiekere templates te maken. Op de pagina met een lijst van blogartikelen wordt bijvoorbeeld vaak een andere behandeling nodig…home.php或index.phpControle. De template voor de detailspagina van een enkele artikel is…single.phpDe kern van deze templates is “The Loop”, een mechanisme die WordPress gebruikt om artikelen te doorlopen en de inhoud af te drukken.

Creerenhome.phpHier wordt de lijst met blogartikelen weergegeven:

<?php get_header(); ?>
<main id="primary" class="site-main">
	
			<article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
				<header class="entry-header">
					<h2 class="entry-title"><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
				</header>
				<div class="entry-content">
					<p><strong>Het volledige artikel is hier te lezen.</strong></p>
				</div>
			</article>
		
		<p><?php esc_html_e( 'No posts found.', 'my-professional-theme' ); ?></p>
	<?php endif; ?>
</main>

Implementeren van een pagina- en sidebar-template

Statische pagina's in gebruikpage.phpTemplate. Dit is de ideale optie voor het weergeven van pagina's zoals “Over ons” en “Contact”. De structuur is…single.phpSimilair, maar meestal bevat het geen meta-informatie zoals categorieën of tags.

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

De sidebar bestaat uit…sidebar.phpDe bestandsdefinities bevatten meestal een gebied met kleine hulpmiddelen (tools).functions.phpIn dit geval moet je gebruikmaken van register_sidebar() Een functie om één of meerdere widgetsgebieden te registreren, en vervolgens...sidebar.phpGebruikt in het Chinees (vereenvoudigd) dynamic_sidebar() Roep het op.

// 在functions.php中注册侧边栏
function my_theme_widgets_init() {
	register_sidebar( array(
		'name'          =&gt; esc_html__( 'Main Sidebar', 'my-professional-theme' ),
		'id'            =&gt; 'sidebar-1',
		'description'   =&gt; esc_html__( 'Add widgets here.', 'my-professional-theme' ),
		'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
		'after_widget'  =&gt; '</section>',
		'before_title'  =&gt; '<h2 class="widget-title">',
		'after_title'   =&gt; '</h2>',
	) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Implementeren van geavanceerde themafuncties

Een professioneel thema moet niet alleen een goede structuur hebben, maar ook uitgebreide functionaliteiten en een optimale gebruikers- en ontwikkelaarservaring bieden. Dit omvat onder andere ondersteuning voor thema-customisaties, een menu-systeem, speciale afbeeldingen en ondersteuning voor miniaturen.

Integreren van het WordPress-menüsysteem

在functions.phpIn, gebruiken register_nav_menus() Een functie om de locaties van de door het thema ondersteunde menu-items te registreren.header.phpIn het voorbeeld is al een functie genaamd ‘’ opgeroepen.menu-primaryDe locatie van de keuken.

Aanbevolen leesmateriaal Volledige handleiding voor het ontwikkelen van WordPress-themes: van nul beginnen met het bouwen van een custom theme。

function my_theme_register_menus() {
	register_nav_menus(
		array(
			'menu-primary' => esc_html__( 'Primary Menu', 'my-professional-theme' ),
			'menu-footer'  => esc_html__( 'Footer Menu', 'my-professional-theme' ),
		)
	);
}
add_action( 'init', 'my_theme_register_menus' );

Er wordt nu ondersteuning voor het toevoegen van speciale foto's en miniaturen bij artikelen geboden.

Een 'gefeatured image' (speciale afbeelding) is een standaardelement in het ontwerp van moderne websites. add_theme_support() Je kunt deze functie voor je thema activeren en verschillende afmetingen voor artikelafbeeldingen (thumbnails) definiëren.

function my_theme_setup() {
	// 支持特色图片
	add_theme_support( 'post-thumbnails' );
	// 为特色图片添加自定义尺寸
	add_image_size( 'my-theme-blog-thumbnail', 800, 400, true ); // 裁剪模式
}
add_action( 'after_setup_theme', 'my_theme_setup' );

In het templatebestand wordt dit gebruikt: the_post_thumbnail( 'my-theme-blog-thumbnail' ) Stuur me deze foto.

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

Toegang tot de WordPress Customizer voor meer controle

De WordPress Customizer biedt gebruikers de mogelijkheid om thema-instellingen in real time te bekijken en te bewerken. Je kunt er zelfs nieuwe instellingen toevoegen.settings), controls (controls) en de uitvoerlogica. Bijvoorbeeld, voeg een optie toe voor auteursrechtaanwijzingen in de voetnoot:

function my_theme_customize_register( $wp_customize ) {
	// 添加一个设置
	$wp_customize->add_setting( 'footer_copyright_text', array(
		'default'           => '© 2026 Your Company Name. All rights reserved.',
		'sanitize_callback' => 'sanitize_text_field',
	) );
	// 添加一个控件（输入框）到该设置
	$wp_customize->add_control( 'footer_copyright_text', array(
		'label'    => __( 'Footer Copyright Text', 'my-professional-theme' ),
		'section'  => 'title_tagline', // 放在“站点身份”区域
		'type'     => 'text',
	) );
}
add_action( 'customize_register', 'my_theme_customize_register' );

在footer.phpIn, gebruiken get_theme_mod( 'footer_copyright_text' ) Om deze waarde op te halen en weer te geven.

Themaoptimalisatie en voorbereiding op publicatie

Nadat de ontwikkeling is afgerond, is het belangrijkste steunpunt om te zorgen dat je thema soepel werkt, veilig is en gemakkelijk kan worden verspreid.

Zorg ervoor dat het thema internationaal ondersteund wordt.

Internationalisatie (i18n) zorgt ervoor dat je thema naar willekeurige talen kan worden vertaald.functions.phpHet eerste stap is om de tekstinhoud van het thema te laden.

function my_theme_load_theme_textdomain() {
	load_theme_textdomain( 'my-professional-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_theme_load_theme_textdomain' );

Daarna moeten alle strings in het onderwerp die worden vertaald worden gemarkeerd met een speciale code of aandachtspunt. ()、_e() 或 esc_html() Deze functies worden verpakt (wrapped) in andere functies.

Code review moet worden uitgevoerd in overeenstemming met bepaalde coderingstandaarden.

WordPress beschikt over officiële standaarden voor het schrijven van PHP-, CSS- en JavaScript-code. Het naleven van deze standaarden zorgt voor een betere leesbaarheid en onderhoudbaarheid van de code, en maakt het ook gemakkelijker voor de community om de code te begrijpen en te accepteren. Je kunt tools gebruiken zoals PHP_CodeSniffer in combinatie met de regels van de WordPress-编码standaarden om je code automatisch te controleren.

Veiligheidsmaatregelen treffen en alles op orde brengen

Veiligheid is van het hoogste belang. Naast...functions.phpInitial checkABSPATHNaast constante moeten alle door gebruikers ingevoerde gegevens en dynamische uitstoot worden gevalideerd, gereinigd en geëscapeseerd. Enkele veelgebruikte functies hiervoor zijn:
Escape: esc_html(), esc_attr(), esc_url()
Opruimen: sanitize_text_field(), sanitize_email()
Verificatie: is_email(), absint()

Voor de publicatie moet alle code die wordt gebruikt voor het opsporen en oplossen van fouten (debugging-code) worden verwijderd. var_dump()， print_r()Zorg ervoor dat alle functies zoals verwacht werken en dat ze grondig worden getest in verschillende omgevingen.

Samenvatting

Een professioneel WordPress-thema van scratch opbouwen is een systeematische klus die vereist dat de ontwikkelaar niet alleen PHP/HTML/CSS/JavaScript begrijpt, maar ook diep in de kernprincipes van WordPress kent, zoals de hiërarchie van templates, cycli, het hook-systeem en de mogelijkheden voor thema-ondersteuning. Met deze gids hebt u het volledige proces afgerond: van het opzetten van de omgeving, het maken van templates, het implementeren van functies tot het optimaliseren en publiceren van het thema. Het belangrijkste is dat een goed thema niet alleen krachtige functies en een aantrekkelijk ontwerp biedt, maar ook dat de code duidelijk, efficiënt en veilig is, en dat het goede schaalbaarheid biedt voor gebruikers en toekomstige ontwikkelaars. Door continu te oefenen, de kerncode en goede voorbeelden van thema's te bestuderen, kunt u uw ontwikkelingsniveau verhogen.

Veelgestelde vragen (FAQ)

Welke programmeeringsvaardigheden zijn nodig om een WordPress-thema voor ### te ontwikkelen?
Om een WordPress-thema te ontwikkelen, is PHP een essentieel onderdeel van je vaardigheden, aangezien dit de programmeertaal is waarin WordPress zelf en de meeste template-taggen zijn geschreven. Daarnaast moet je HTML en CSS beheersen om de structuur en het uiterlijk van de pagina's te kunnen bepalen. Het is belangrijk om basiskennis van JavaScript (met name jQuery) te hebben, om interactieve effecten op de front-end te kunnen realiseren. Een beetje kennis van SQL kan je helpen om de logica van de data-opvraagmogelijkheden van WordPress te begrijpen.

Waarom wordt mijn nieuwe thema niet weergegeven in de lijst met thema's in het WordPress-administratiepaneel?

Dit gebeurt meestal vanwege...style.cssDit komt doordat de opmerkingen in de kop van het bestand niet correct zijn of dat het bestand ontbreekt. Zorg ervoor dat: 1) je themamappen op de juiste plek zijn opgeslagen./wp-content/themes/De bestanden bevinden zich onder het pad; 2) Er zijn bestanden in de map.style.cssHet bestand bevat de benodigde informatie in de header (zoals Theme Name en Author), en deze is in het juiste format opgesteld zonder grammaticale fouten. Als één van de vereiste gegevens ontbreekt, herkent WordPress het thema niet.

Hoe maak ik een aangepaste pagina-template voor mijn thema?

Om een aangepaste pagina-template te creeren, moet je in de root-map van het thema een nieuwe PHP-bestand maken en aan het begin van het bestand een commentaarblock met de specifieke namen van de template toevoegen. Als je bijvoorbeeld een template voor een “volledig breed scherm” wilt maken, moet het bestand de naam hebben:template-fullwidth.phpDe tekst moet beginnen met:<?php /* Template Name: 全宽页面 */ ?>Daarna kunnen gebruikers op de bewerkingssite in het drop-down-menu “Pagina-eigenschappen” onder “Template” de optie “Volledig breedte pagina” kiezen. In deze bestand kunt u code schrijven die geheel anders is dan de code in de originele versie.page.phpDe lay-out en logica.

Welke rol spelen hooks in themaontwikkeling?

Hooken (verdeeld in Action Hooks en Filter Hooks) vormen de basis voor de uitbreidbaarheid van de WordPress-pluginarchitectuur en -thema's. Tijdens het ontwikkelen van thema's worden voornamelijk Action Hooks gebruikt. add_action()Op bepaalde momenten in de tijd (bijvoorbeeld bij het initialiseren, laden van scripts of het weergeven van de voetnoot) kun je je eigen functionaliteitencode invoegen. Daarnaast kun je ook filterhaken gebruiken (via)... add_filter()Je kunt de inhoud die wordt weergegeven door WordPress of andere plugins aanpassen (bijvoorbeeld door de lengte van de artikel samenvattingen te veranderen of door artikelklassen te personaliseren). Het verstandig gebruiken van hooks maakt je themacode modulair, waardoor het gemakkelijker te onderhouden en uit te breiden is.

Als de ontwikkeling van het thema is voltooid, hoe wordt het vervolgens ingediend bij de officiële thema-directory van WordPress?

Het indienen van een thema in de officiële catalogus van WordPress.org is een strenge procedure. Allereerst moet je een SVN-account aanvragen op WordPress.org. Daarnaast moet je thema voldoen aan de licentievereisten van GPL versie 2 of een hogere versie, en moet het thema worden goedgekeurd door het officiële thema-beoordelingsteam. De beoordelingscriteriumen omvatten de kwaliteit van het code, de veiligheid, het ontbreken van fouten, het naleven van codingstandaarden en het bieden van voldoende ondersteuning voor toegankelijkheid. Voor het indienen wordt sterk aanbevolen om de officiële thema-ontwikkelingshandleiding en de indiervoorwaarden aandachtig te lezen, en om het Theme Check-plugin te gebruiken voor een zelfbeoordeling, om zeker te stellen dat alle vereisten worden vervuld.

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: