Homepage/Kennis/WordPress/De details van de inhoud

Het leren ontwikkelen van WordPress-thema's vanaf nul: een essentiële handleiding voor het maken van een gepersonaliseerde website.

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

De kernconcepten van het ontwikkelen van WordPress-themes zijn:

Voordat je diep in de code duikt, is het heel belangrijk om de basis-elementen van een WordPress-thema te begrijpen. Een thema is niet alleen een verzameling PHP- en CSS-bestanden; het is een toepassing die zich houdt aan een bepaalde structuur en nauw met het kernbestand van WordPress interactie onderhoudt. Het hart van een thema is het systeem van template-lagen (template hierarchy), waardoor WordPress bepaalt welke template-bestanden worden gebruikt afhankelijk van het type pagina die wordt bekeken (bijvoorbeeld de homepagina, een artikelpagina, een categoriearchief, etc.).

De meest fundamentele versie van het thema moet twee bestanden bevatten:style.css和index.phpDaarvan zijn erstyle.cssHet is niet alleen een stylesheet, maar ook een soort “identiteitsbewijs” van het thema. De commentaarblokken in het begin van het bestand bevatten meta-informatie over het thema, zoals de naam, de auteur, een beschrijving en de versie.index.phpDit is de standaardtemplatefile. Als er geen andere, specifiekere templatefiles zijn, gebruikt WordPress deze als alternatief.

Het thema organiseert de inhoud met behulp van een reeks standaardiseerde templatebestanden.single.phpGebruikt om één artikel te weergeven.page.phpGebruikt voor het weergeven van afzonderlijke pagina's.archive.phpDit wordt gebruikt om een lijst met artikelarchieven te weergeven. Het belangrijkste bij het ontwikkelen is om de vele ingebouwde functies van WordPress te begrijpen en te gebruiken.the_title()、the_content()、wp_head()和wp_footer()Deze functies halen gegevens uit de database en weergeven deze veilig op de pagina. Ze vormen dus een brug tussen het uiterlijk van de website en de inhoud ervan.

Aanbevolen leesmateriaal Hoe kies je een WordPress-thema uit dat bij je past en hoe pas je het aan?。

Maak je eerste thema: de basisstructuur van een bestand

Laten we een minimalistisch thema maken genaamd “MyFirstTheme”, zodat we de ontwikkelingsproces kunnen leren kennen. Eerst gaan we naar de installatiemap van WordPress…wp-content/themes/Maak een nieuwe map en noem deze...myfirsttheme。

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

Een stijlboek (stylesheet) maken

Eerst moet een headerbestand met themagegevens worden gemaakt.style.cssDeze bestand bevat de metadata van het thema.

/*
Theme Name: MyFirstTheme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个用于学习WordPress主题开发的简洁主题。
Version: 1.0
License: GPL v2 or later
Text Domain: myfirsttheme
*/

Text DomainDit is bedoeld voor internationalisering, om later de vertaalfuncties te kunnen implementeren. Daarna kun je beginnen met het schrijven van de CSS-stijl voor de website.

Create a core template file.

Volgens de opgegeven instructies zal de volgende stap zijn om een basisversie van het gewenste product of systeem te creeren.index.phpDeze bestand vormt de ingang tot het hele thema.

<!DOCTYPE html>
<html no numeric noise key 1013>
<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 1010>
    <header>
        <h1><a href="/nl/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
    </header>

<main>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <article>
                <h2><p><strong>Hallo wereld!</strong></p></h2>
                <div><?php the_content(); ?></div>
            </article>
        <?php endwhile; endif; ?>
    </main>

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

Deze code vormt de basis voor een compleet HTML5-paginaontwerp.wp_head()和wp_footer()Deze ‘hooks’ bieden plugins en thema’s de mogelijkheid om code (zoals CSS en JS) in te voegen aan de boven- en onderkant van de pagina.body_class()De functie genereert een reeks CSS-classnamen, waarmee je condicionele stijlontwerpen kunt realiseren.the_post()De functie instelt de globale waarde tijdens de loop.$postVariabelen maken het mogelijk…the_title()和the_content()De gegevens van het huidige artikel worden correct weergegeven.

Aanbevolen leesmateriaal Een professionele website bouwen: de ultimate gids voor het kiezen en aanpassen van een WordPress-thema。

Introductie van functionaliteitsbestanden

Hoewel er maar één…style.css和index.phpHet onderwerp werkt al, maar een compleet onderwerp bevat meestal nog andere elementen.functions.phpDeze file is geen template, maar een “functional plugin” voor het thema. Het wordt gebruikt om functies te koppelen aan verschillende actie-hooks en filter-hooks in WordPress.

Creerenfunctions.phpDeze bestanden worden gebruikt om functies voor themaondersteuning te toevoegen, evenals om sjablonen en scripts te ordenen en te laden.

<?php
// 添加主题支持功能
function myfirsttheme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章缩略图（特色图像）
    add_theme_support('post-thumbnails');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
    // 注册一个主导航菜单
    register_nav_menus(array('primary' => __('主导航菜单', 'myfirsttheme')));
}
add_action('after_setup_theme', 'myfirsttheme_setup');

// 排队引入样式表
function myfirsttheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('myfirsttheme-style', get_stylesheet_uri());
    // 可以引入Google Fonts或其他CSS
    // wp_enqueue_style('myfirsttheme-google-fonts', 'https://fonts.googleapis.com/css?family=...');
}
add_action('wp_enqueue_scripts', 'myfirsttheme_scripts');

passeren (een wetsvoorstel of inspectie enz.)add_theme_support()We hebben de functies geactiveerd die worden gebruikt in moderne WordPress-themes.wp_enqueue_style()Dit is de standaardmanier om stijlbestanden in te voegen, waardoor de afhankelijkheden tussen verschillende onderdelen van het project goed worden beheerd en dubbele laden van bestanden wordt voorkomen.

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

Geavanceerde ontwikkeling: Template-componenten en cyclische controle

Als de basisfuncties van het onderwerp zijn uitgewerkt, is het nodig om te leren over template-componenten en een meer geavanceerde manier van cyclische controle (loopcontrole) om de onderhoudbaarheid en herbruikbaarheid van het codepatroon te verbeteren.

De code wordt gesplitst met behulp van template-componenten.

将index.phpHet is een standaardpraktijk om de algemene onderdelen van een website, zoals de header, voetnoot en sidebar, in aparte templatebestanden op te delen.header.php、footer.php和sidebar.php。

将index.php中<body>Alles code dat zich voor de tag bevindt, moet worden verplaatst naar...header.php。 Zal</body>和</html>Alles code dat zich voor de tag bevindt (inclusief de inhoud van de voetnoot en andere elementen)…wp_footer()Verplaats naarfooter.phpEn vervolgens,index.phpGebruikt in het Chinees (vereenvoudigd)get_header()和get_footer()Functies worden gebruikt om ze te introduceren.

Aanbevolen leesmateriaal Van ontwikkeling tot implementatie: hoe je een professioneel WordPress-thema kunt bouwen en optimaliseren.。

Veranderdeindex.phpDe belangrijkste tekst staat hieronder:

<?php get_header(); ?>
<main>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <article>
            <h2><p><strong>Hallo wereld!</strong></p></h2>
            <div><?php the_content(); ?></div>
        </article>
    <?php endwhile; else : ?>
        <p><?php _e('抱歉，没有找到任何内容。', 'myfirsttheme'); ?></p>
    <?php endif; ?>
</main>

Een custom page template maken

WordPress biedt de mogelijkheid om aangepaste templates te maken voor specifieke pagina’s. Je kunt bijvoorbeeld een template maken voor een volledig breedte pagina. Maak een nieuwe PHP-bestand.template-fullwidth.phpVoeg in het begin van het bestand de volgende commentaar met de namen van de templates toe:

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 
<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板
 */
get_header(); ?>
<main class="full-width">
    <?php while (have_posts()) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h1><p><strong>Hallo wereld!</strong></p></h1>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <?php endwhile; ?>
</main>
<?php get_footer(); ?>

Tijdens het maken of bewerken van een pagina kun je in het drop-down-menu “Template” onder “Pagina-eigenschappen” de optie “Volledig breedte-pagina-template” kiezen. Dit toont de flexibiliteit van het template-systeem.

Beheer de hoofdloop en aangepaste queries

在archive.phpOp de categoriepagina of de klassenpagina moet u mogelijk het gedrag van de hoofdloop (main loop) aanpassen.WP_QueryKlassen kunnen aangepaste queries (specifieke vragen) maken.

// 示例：在模板中查询特定分类下的 sticky 文章
 'news',
    'post__in' =&gt; get_option('sticky_posts'),
    'posts_per_page' =&gt; 3
));
if ($sticky_query-&gt;have_posts()) :
    while ($sticky_query-&gt;have_posts()) : $sticky_query-&gt;the_post();
        // 输出文章内容
        the_title('<h3>', '</h3>');
        the_excerpt();
    endwhile;
    wp_reset_postdata(); // 重置全局$post数据
endif;
?&gt;

Zorg ervoor dat dit pas wordt gebruikt nadat de loop met de aangepaste query is afgerond.wp_reset_postdata()Dit is om te zorgen dat de globale variabelen terugkeren in de staat waarin ze zich bevonden in de hoofdloop, waardoor fouten in latere functies kunnen worden voorkomen.

Thema-optimalisatie en beste praktijken

Nadat de ontwikkeling is afgerond, is het de laatste stap voordat de theme wordt gepubliceerd om de robuustheid, veiligheid en prestaties van het theme te controleren.

Zorg ervoor dat de veiligheid en internationale compatibiliteit worden gewaarborgd.

Al het dynamisch genereerde content moet worden geëscapeseerd. Gebruik de door WordPress beschikbare escape-functies hiervoor.esc_html()、esc_attr()、esc_url()Voor de vertaling:__()Voor de vertaling van strings moet u een tool of methode gebruiken die speciaal is ontworpen voor tekstverwerking. Hier zijn enkele suggesties:_e()Eerder hebben we...functions.phpDe tekstvakken zijn al ingesteld in 'China'.myfirsttheme。

// 正确示例
echo '<a href="/nl/' . esc_url($user_profile_link) . '/">'`. esc_html($user_name)`.'</a>';
// 国际化示例
submit_button(__('保存更改', 'myfirsttheme'));

Voeg een gebied voor widgets toe.

Het sidebar-element (het gebied aan de zijkant van de pagina) is een klassieke functie van WordPress.functions.phpRegistreer een sidebar-toolgebied in...

function myfirsttheme_widgets_init() {
    register_sidebar(array(
        'name' =&gt; __('主侧边栏', 'myfirsttheme'),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __('在此添加小工具。', 'myfirsttheme'),
        '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', 'myfirsttheme_widgets_init');

En daarna...sidebar.phpIn, gebruikendynamic_sidebar()Een functie die deze functie kan oproepen.

<?php if (is_active_sidebar('sidebar-1')) : ?>
    <aside>
        <?php dynamic_sidebar('sidebar-1'); ?>
    </aside>
<?php endif; ?>

Overwegingen voor prestatieoptimalisatie

Het is van belang om de laadsnelheid van thema's te optimaliseren. Zorg ervoor dat CSS- en JavaScript-bestanden correct worden samengevoegd en gecompresseerd (dit gebeurt meestal al in de ontwikkelingsfase met hulp van build-tools als Webpack of Gulp).add_image_size()Voeg de juiste afmetingen van de afbeeldingen toe, zodat er geen te grote originele afbeeldingen worden geladen in de frontend. Gebruik scripts alleen wanneer dit echt nodig is.wp_dequeue_script()Verwijder de scripten en zorg ervoor dat ze worden geladen in de voetnoot (door ze te plaatsen in de footer).wp_enqueue_script()Zet de laatste parameter op...true）。

Samenvatting

Het ontwikkelen van WordPress-themes is een systeematische proces dat begint met het begrijpen van fundamentele concepten (zoals het template-systeem en hook-functies), vervolgt met het opbouwen van een basistructuur van de bestanden, het gebruik van template-componenten en aangepaste queries voor een modulaire ontwerp, en eindigt met het versterken van de beveiliging en het optimaliseren van de prestaties. Door de officiële codingstandaarden en beste praktijken van WordPress te volgen, kunnen ontwikkelaars thema's creeren die niet alleen mooi en efficiënt zijn, maar ook veilig en gemakkelijk te onderhouden. Het belangrijkste is om dit proces consequent te blijven volgen, vanaf eenvoudige stappen tot meer complexe onderdelen van het ontwikkelingsproces.index.php和style.cssEerst beginnen met eenvoudige templatebestanden, en na een tijdje proberen je ook met complexere templatebestanden.functions.phpMet de beschikbare functies kun je uiteindelijk een persoonlijke website creeren die volledig voldoet aan je behoeften.

Veelgestelde vragen (FAQ)

Is het mogelijk om WordPress-themaontwikkeling te leren zonder enige programmeerervaring?

Ja, dat is mogelijk, maar het vereist wel tijd om de basiskennis te ontwikkelen. Het is aan te raden om eerst HTML en CSS onder de knie te krijgen, omdat dit de fundamenten vormt voor het ontwerp van webpagina’s. Vervolgens kun je stap voor stap de PHP-syntax leren, aangezien het kernprogramma van WordPress is geschreven in PHP. Ten slotte kun je ontwikkelen door gebruik te maken van de unieke functies en hooks van WordPress. Het is een goede eerste stap om te beginnen met het bewerken van bestaande thema’s.

Wat is het verschil tussen `functions.php` in het thema en plugins?

functions.phpHet is een onderdeel van het thema, en de functionaliteit is sterk verbonden met het uiterlijk en de manier van weergeven van het thema. Wanneer een gebruiker het thema wijzelt...functions.phpDe functionaliteit die in het thema is ingebouwd, zal niet meer werken wanneer het thema wordt gewijzigd. De functies die worden aangeboden door plugins zijn meestal onafhankelijk van het thema en zijn bedoeld om bepaalde eigenschappen aan een website toe te voegen (bijvoorbeeld contactformulieren of SEO-optimalisatie). De plugin-functies blijven dus behouden wanneer het thema wordt vervangen. Als een bepaalde functionaliteit niets te maken heeft met het visuele ontwerp van het thema, is het beter om deze als plugin te realiseren.

Waarom wordt mijn eigen gemaakte pagina-template niet weergegeven in de drop-down-lijst?

Controleer of uw eigen templatebestand zich bevindt in de rootmap van het thema, en of de opmerkingen over de namen van de templates aan het begin van het bestand in het juiste format zijn opgesteld. De opmerkingen moeten PHP-opmerkingen zijn, en de regel “Template Name:” moet precies zo zijn opgesteld als beschreven. Zorg ook ervoor dat het bestand daadwerkelijk bestaat..phpHet suffix is toegevoegd en de cache is opgefrist via het WordPress-administratiepaneel.

Hoe maak ik mijn thema compatibel met subthema's (child themes)?

Om zodat je thema veilig kan worden aangepast via subthema's, moet er tijdens het ontwikkelen rekening worden gehouden met bepaalde regels:get_template_directory_uri()Om bronnen uit het overkoepelde onderwerp (de 'parent topic') te citeren, wordt dit in het onderliggende onderwerp (de 'subtopic') gebruikt.get_stylesheet_directory_uri()Verpak de kopieerbare functie in een...if (!function_exists(‘…’))In de conditionele statements wordt duidelijk aangegeven dat het onderwerp ondersteuning biedt voor subonderwerpen. In het document wordt ook aangegeven welke basis-subonderwerpen beschikbaar zijn.style.cssEen voorbeeld:

Welke coderingsspecificaties moet men naleven bij het ontwikkelen van thema's?

Het wordt sterk aanbevolen om deze richtlijnen te volgen.De officiële PHP-codingstandaard van WordPress和CSS编码标准Dit betekent onder andere dat je stringen definitieert met enkele quotes (tenzij je variabelen moet analyseren), dat je gebruikmaakt van ruimtes voor indeling, dat je grote en kleine letters en onderstrepen gebruikt bij de namen van functies en variabelen, en dat je regels gebruikt voor het opmaken van code (bijvoorbeeld door regels te breken wanneer je grote en kleine letters gebruikt). Het naleven van deze regels maakt je code eenvoudiger te begrijpen en accepteren voor andere ontwikkelaars, vooral wanneer je je werk wilt indienen in officiële repositories.

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: