Homepage/Kennis/WordPress/De details van de inhoud

Een beginnetje van WordPress-themaontwikkeling: bouw je eerste aangepaste thema vanaf nul.

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

Fundamentale voorbereidende werkzaamheden

Voordat je met het schrijven van code begint, is een geschikte omgeving en een goede basiskennis de sleutel tot succes. Allereerst heb je een lokale ontwikkelingsomgeving nodig. Je kunt gebruikmaken van geïntegreerde pakketten zoals XAMPP, MAMP of Local by Flywheel; deze pakketten instellen PHP, MySQL en een webserver voor je. Je kunt ook een flexibele oplossing kiezen en de omgeving zelf op locatie opbouwen. Zorg ervoor dat je PHP-versie minstens 7.4 is en je MySQL-versie minstens 5.6 is.

Volgens de opgegeven instructies moet je nu een aparte map maken voor je eigen thema. Deze map moet zich bevinden in de installatiedirectory van WordPress. wp-content/themes/ Binnen de map. Bijvoorbeeld, je kunt een map maken met de naam... my-first-theme Een map met deze bestanden. Een WordPress-thema wordt door het systeem herkend als het maar twee bestanden bevat:index.php 和 style.cssDaarvan zijn erstyle.css Het bevat niet alleen de stijlbestanden, maar ook de bestandskoppen met de metadata die het thema beschrijven; deze metadata vormen zo een soort “identiteitsbewijs” van het thema.

Creëer een kernbestand voor het thema.

Schrijf een koppenblad voor het thema-stijlbestand (stylesheet).

style.css De opening van het bestand moet een geformatteerde CSS-commentaarblock zijn, waarin alle informatie staat die WordPress nodig heeft om het thema te herkennen. Dit is een onderdeel van het thema dat goed moet zijn ingesteld.

Aanbevolen leesmateriaal Van nul naar één: Een volledig handboek en praktische tutorial voor het ontwikkelen van WordPress-themes。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个入门级的自定义 WordPress 主题，用于学习开发。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Hierbij wordt “Text Domain” gebruikt voor internationalisering; we zullen later een functie hiervoor inzetten. __() 或 _e() Om de tekst in het onderwerp te ondersteunen bij meertalige vertalingen…

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 basistemplate-indeling maken

index.php Dit is het standaardtemplate voor het thema en tevens het belangrijkste back-up-template. Wanneer WordPress geen specifiekere templatefile kan vinden… single.phpAls dit nodig is, wordt het gebruikt. Een van de meest fundamentele varianten… index.php Er moet een loop in WordPress worden gebruikt; dit is de kernmechanisme voor het weergeven van de inhoud van artikelen.

<!DOCTYPE html>
<html no numeric noise key 1022>
<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 1019>
    <p><strong>Deze pagina is momenteel niet beschikbaar.</strong></p>
    <header id="site-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>
    </header>

<main id="main-content">
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
                    <h2><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
                    <div class="entry-content">
                        <?php the_content(); ?>
                    </div>
                </article>
            
            <p><?php _e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>

<?php get_sidebar(); ?>

<footer id="site-footer">
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Deze template gebruikt meerdere kernfuncties van WordPress, zoals wp_head(), the_title(), the_content()functie get_sidebar() Er wordt geprobeerd een bestand te laden met de naam sidebar.php De templatefile.

Implementeren van template-lagen en -functies

WordPress gebruikt een set regels genaamd “template hierarchy” (templatehiërarchie) om te bepalen welk templatebestand wordt gebruikt voor een bepaalde pagina. Het begrijpen van deze hiërarchie is essentieel voor het ontwikkelen van flexibele thema’s. Als je bijvoorbeeld een blogartikel bezoekt, zal WordPress op volgende manier naar het juiste template zoeken:single-post.php -> single.php -> singular.php -> index.phpJe kunt het uiterlijk van verschillende pagina's aanpassen door deze specifieke bestanden te maken.

Support voor het toevoegen van speciale afbeeldingen bij artikelen is nu beschikbaar.

Moderne thema's ondersteunen meestal de mogelijkheid om een “artikel thumbnail” (afbeelding van een artikel) te gebruiken. Om deze functie te activeren, moet je in het thema de vereiste instellingen aanpassen. functions.php Gebruikt in het bestand add_theme_support() Functies. Eerst moet je in het themakatalog een nieuwe map (of folder) aanmaken. functions.php Het document.

Aanbevolen leesmateriaal Praktijkgericht: een uitgebreide handleiding voor het ontwikkelen van WordPress-thema's, van beginner tot expert.。

<?php
/**
 * 我的第一个主题的功能函数文件
 */

if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让 WordPress 管理标题标签
        add_theme_support( 'title-tag' );

// 启用文章特色图像支持
        add_theme_support( 'post-thumbnails' );
        // 为文章和页面设置默认特色图像尺寸
        set_post_thumbnail_size( 1200, 800, true );

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

Stijl- en scriptbestanden invoeren

Het correct toevoegen van CSS- en JavaScript-bestanden aan de queue is een goede praktijk bij het ontwikkelen met WordPress. Dit voorkomt dat er conflicten tussen resources ontstaan en dat resources dubbel worden geladen. We doen dit door… wp_enqueue_style() 和 wp_enqueue_script() Deze functionaliteit wordt gerealiseerd door een function. functions.php Een nieuwe functie toevoegen in...

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 );

// 如果评论功能开启且有评论，加载评论回复脚本
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Thema-ontwikkeling op een hoger niveau en beste praktijken

Een compleet thema gaat niet alleen om het weergeven van content, maar ook om de toegankelijkheid, de prestaties en de organisatie van de inhoud. Door verschillende delen van de pagina (zoals de header, voetnoot en zijbalk) in aparte templatebestanden op te slaan, wordt de code eenvoudiger te onderhouden.

Separate the header and footer templates.

Creeren header.php 和 footer.php File. index.php 中 <body> Alles wat zich voor de tag bevindt, moet worden verplaatst… header.php, zal </body> Alles wat zich voor de tag bevindt, moet worden verplaatst… footer.phpVervolgens wordt het originele… index.php Verkort tot:

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="main-content">
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
                    <?php if ( has_post_thumbnail() ) : ?>
                        <div class="post-thumbnail">
                            <?php the_post_thumbnail(); ?>
                        </div>
                    <?php endif; ?>
                    <h2><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
                    <div class="entry-content">
                        <?php the_content(); ?>
                    </div>
                </article>
            
            <p><?php _e( '抱歉，没有找到任何文章。', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>

Een template voor een sidebar maken

In dezelfde mate: creeer ook een… sidebar.php Een bestand, en daarin worden dynamische sidebar-functies gebruikt. dynamic_sidebar()Allereerst moet je... functions.php Gebruikt in het Chinees (vereenvoudigd) register_sidebar() De functie registreert een gebied voor sidebar-tools.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hoofdzijbalk', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Voeg hier widgets toe.', 'my-first-theme' ),
        'before_widget' =&gt; '   function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( 'Hoofdzijbalk', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( 'Voeg hier widgets toe.', 'my-first-theme' ),
        'before_widget' =&gt; ' &lt;&#039;<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>'function my_first_theme_widgets_init() {  
    register_sidebars( array(  
        'name' =&gt; 'My First Theme Sidebar',  
        'id' =&gt; 'my-first-theme-sidebar',  
        'description' =&gt; 'De eerste sidebar van mijn thema',  
    ) );  
    add_action( 'widgets_init', 'my_first_theme_widgets_init' );  
};

En vervolgens, sidebar.php Je kunt het opnieuw oproepen in het midden:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

Samenvatting

Door de stappen in dit artikel te volgen, hebt u met succes een basis-Thema voor WordPress gebouwd dat, al is het simpel, wel alle essentiële functies bevat. U hebt geleerd hoe u de kernbestanden maakt, hoe u de structuur van de templates begrijpt, en hoe u deze gebruikt. functions.php Voeg de mogelijkheid toe om thema’s te gebruiken, en houd je aan de beste praktijken voor het organiseren en laden van resources. Het beschikbare thema beschikt over basisfuncties zoals het weergeven van artikelen, ondersteuning voor speciale afbeeldingen, een registratie-menu en een sidebar. Vanaf hier kun je verder ontwikkelen met complexere templatebestanden (zoals pagina-templaten en categorie-templaten), aangepaste artikeltypes, en de API’s voor thema-customisatie. Zo bouw je steeds een krachtiger en professioneler WordPress-thema op. Vergeet niet dat praktijk het sleutel is tot leren: probeer de code te bewerken en observeer de veranderingen; dit is de beste manier om je kennis te versterken.

Aanbevolen leesmateriaal WordPress-themaontwikkeling: Een gids voor beginners om van nul een custom thema te maken。

Veelgestelde vragen (FAQ)

Mijn thema wordt niet weergegeven in de backend. Wat moet ik doen?

Controleer eerst of je themapolder op de juiste plek is geplaatst. wp-content/themes/ In de map. En daarna, bevestig het. style.css Is de opmaak van de themainfo-hoofdregel (CSS-commentaar) aan het begin van het bestand correct? Vooral de regel “Theme Name:” moet aanwezig zijn en in de juiste formatie zijn opgesteld. Eventuele spelling fouten of formatproblemen kunnen ervoor zorgen dat WordPress je thema niet herkent.

Wat moet je doen als het wijzigen van de functions.php-fail tot een wit scherm op de website leidt?

“Een wit scherm en een systeemstoring” is meestal het gevolg van... functions.php Er zijn syntactische fouten in het bestand (bijvoorbeeld ontbrekende semikolons of paren), of fatale fouten. De snelste manier om dit op te lossen is om met FTP of een bestandsbeheerder toegang te krijgen tot je server en het foutieve bestand te vervangen of te bewerken. functions.php Het bestand wordt hernoemd (bijvoorbeeld in een andere naam). functions.php.bakDit zorgt ervoor dat WordPress de betreffende bestand ignoreert, waardoor de toegang tot de website weer wordt hersteld. Daarna kun je de codefouten controleren en corrigeren.

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

Hoe voeg ik een pagina-template toe aan mijn thema?

Om een aangepaste pagina-template te maken, moet je eerst een nieuw PHP-bestand maken in het mapverhaal (theme directory) van je thema. template-fullwidth.phpVlak bovenaan deze bestand, voeg de volgende specifieke template-commentaar toe:

<?php
/**
 * Template Name: 全宽页面
 */

Daarna kunt u in deze bestand uw HTML- en PHP-code schrijven. Vergeet niet om de juiste syntax en bestandsindeling te gebruiken. get_header(), get_footer() Functies als deze kunnen worden gebruikt om pagina’s te ontwerpen die het hele scherm bedekken. Na het opslaan van deze instellingen, kun je deze in het drop-down-menu “Template” onder “Pagina-eigenschappen” zien en kiezen wanneer je een nieuwe pagina bewerkt of maakt in de WordPress-beheeromgeving.

主题开发中 get_template_part() 函数有什么用？

get_template_part() Functionen zijn een handig hulpmiddel bij het modulair ontwikkelen van WordPress-themes. Ze dienen om een specifiek deel van een template in je thema te laden. Bijvoorbeeld, in een loop (loop) kun je ze gebruiken om bepaalde inhoud te weergeven. get_template_part( 'content', get_post_format() ); Laad het op. content.php Of, om het concreter te zeggen: content-video.php Deze functie voor het beheer van bestanden verbetert de herbruikbaarheid en onderhoudbaarheid van het codebestand aanzienlijk, waardoor je gemakkelijk verschillende weergaveontwerpen kunt maken voor verschillende soorten artikelinhoud.

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: