Homepage/Kennis/WordPress/De details van de inhoud

WordPress-themaontwikkeling: Een gids om van nul af je eerste thema te bouwen

4 minuten leestijd
2026-03-16
2026-06-04
2,785
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 begint met schrijven van code, heb je een geschikte ontwikkelomgeving nodig. Dit omvat een lokale serveromgeving (bijvoorbeeld XAMPP, MAMP of Local by Flywheel), een code-editor (bijvoorbeeld VS Code of PhpStorm), en een nieuw geïnstalleerd exemplaar van WordPress. Zorg ervoor dat je WordPress op de meest recente versie is, zodat je de nieuwste functies en API's kunt gebruiken.

Volgens de opgegeven instructies moet je nu in WordPress…wp-content/themesMaak een nieuwe map in de map met de inhoud. De naam van deze map moet dezelfde zijn als de “slug” van je thema. Bijvoorbeeld:my-first-themeDeze map zal de plek worden waar al je themafailen worden opgeslagen. Er zijn maar twee basisfailen voor een WordPress-thema:index.php和style.cssDaarvan zijn erstyle.cssHet is niet alleen een stylesheet, maar ook een “headerfile” dat themameta-data bevat. De commentaren in deze file zijn van cruciaal belang voor WordPress om je thema te herkennen.

Een basisversie van... (What exactly do you want to create as a 'basisversie'? Please provide more details.)style.cssDe bestand moet in zijn header-commentaren de volgende informatie bevatten:

Aanbevolen leesmateriaal Een perfect WordPress-thema maken: een volledig ontwikkelingsgids van nul tot expertniveau。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.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
*/

Text DomainVoor internationaal gebruik moet de naam overeenkomen met de naam van je themapagina. Daarnaast moet je een zo simpel mogelijk exemplaar van het object maken.index.phpHet bestand moet maar één zin bevatten.<?php get_header(); ?>En een<h1>Hallo wereld!</h1>Op dit moment moet je in het WordPress-beheerpaneel, onder “Uiterlijk” → “Thema’s”, je thema kunnen zien en het kunnen activeren. Hoewel het thema voorlopig nog niets weergeeft (want we het nog niet hebben gecreëerd),…header.php), maar dit betekent dat je al met het eerste stapje succesvol bent begonnen.

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

Het begrijpen van de kerntemplatebestanden en de hiërarchie van templates

WordPress gebruikt een intelligente systeem genaamd “template hierarchy” om te bepalen welk templatebestand gebruikt moet worden om de inhoud te weergeven voor een specifieke paginaverzoek. Het begrijpen van deze hiërarchie is essentieel voor het ontwikkelen van thema’s. Het systeem begint met het zo specifieke mogelijk templatebestand en zoekt, en als dit niet bestaat, gaat het verder naar een algemener templatebestand.

De meest fundamentele templatebestanden omvatten:
* index.phpDit is het uiteindelijke template voor alle gevallen waarin geen meer specifiek template wordt gevonden voor een bepaalde vraag.
* header.phpBevat de documenten<head>Deel van de website en de header-regio. Doorget_header()Function introducitie.
* footer.phpBevat de voetnootgebied van de website.get_footer()Function introducitie.
* sidebar.phpBevat een sidebar-component.get_sidebar()Function introducitie.
* functions.phpDit is geen template-bestand, maar de “functiesbibliotheek” van je thema. Hier kun je functies toevoegen, menu’s registreren en andere elementen instellen.

Er bestaan specifiekere templates voor verschillende soorten pagina's:
* 单篇文章：查找顺序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php(Custom template) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（博客首页、分类页等）：查找顺序是home.php(Gebruikt op de pagina met een lijst van blogartikelen) -> front-page.php(Gebruikt om een statische pagina in te stellen als startpagina) -> index.php。

Maak templates voor de header en footer van de pagina.

Eerst moet je het maken.header.phpHet moet met… beginnen.<!DOCTYPE html>Begin met de opzet en bevat belangrijke WordPress-functieoproepen, zoals…wp_head()。

Aanbevolen leesmateriaal Maak je eigen geavanceerde WordPress-thema: een complete handleiding voor ontwerp, ontwikkeling en optimalisatie。

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

In dezelfde mate: creëer ook.footer.phpEn zorg ervoor dat de oproep (call) plaatsvindt.wp_footer()Functie.

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Nu kun je je updaten.index.phpGebruik deze templateonderdelen.

<?php get_header(); ?>

<main>
    <h1>Hallo World vanuit Main!</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

De functionaliteit van het thema wordt versterkt door het gebruik van functions.php.

functions.phpDe bestanden vormen het “brein” van je thema. Hier voeg je functies toe, registreer je kerncomponenten van WordPress (zoals menu’s en widgetgebieden), en plaats je stijlbestanden en scriptbestanden.

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

Toepassen van themaondersteuning en een registratie-navigatiemenu

Allereerst gaan we enkele basisfuncties van het thema activeren.add_theme_support()Deze functie wordt gebruikt om de ondersteunde functies van een thema aan te geven.

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

Volgens de instructies moet je eerst een navigatie-item registreren. Dit maakt het mogelijk voor gebruikers om het menu in de backend te configureren onder “Uiterlijk” -> “Menü”, zodat het kan worden gebruikt in de templates.wp_nav_menu()De functie roept deze zelf op.

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

Inclusie in de stijlboom en scripts

De juiste manier om stijlen en scripts te laden, is door…wp_enqueue_style()和wp_enqueue_script()Functionen die worden gemonteerd…wp_enqueue_scriptsAan de haak.

Aanbevolen leesmateriaal Volledige uitleg van het ontwikkelen van WordPress-themes: een praktische gids van het begin tot de volle vertrouwdheid。

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-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Creëer een loop en een contenttemplate.

“Cyclo” is een PHP-codestructuur in WordPress die wordt gebruikt om artikelen uit de database te halen en te weergeven. Het vormt het hart van bijna alle templatebestanden.

Het begrijpen van de structuur van de hoofdloop (main loop)

Boveninindex.phpIn het voorbeeld hebben we al een basisloop gezien. Laten we deze eens uitbreken in zijn onderdelen:

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 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                <p><strong>Het volledige artikel is hier te lezen.</strong></p>
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>
<?php endif; ?>

Een template voor een enkele artikkel bouwen

Nu gaan we een template maken dat speciaal is ontworpen voor het weergeven van één artikel.single.phpDit is uitgebreider dan de cyclische weergave op de lijstpagina.

<?php get_header(); ?>

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1><p><strong>Hallo wereld!</strong></p></h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

Samenvatting

Met deze gids hebt u de belangrijkste stappen gezet om vanuit nul een basis-WooCommerce-thema te bouwen. We begonnen met het opzetten van een ontwikkelingsomgeving en het maken van basisbestanden, en zijn daarna verder gegaan met het begrijpen van het template-systeem van WordPress, wat de basis vormt voor het maken van flexibele thema's. U hebt geleerd hoe u herbruikbare onderdelen van het thema kunt maken.header.php和footer.phpTemplate-componenten, en dankzij de krachtige…functions.phpDe bestanden bieden ondersteuning voor belangrijke functies van je thema, zoals een navigatiemenu en het laden van styles. Ten slotte hebben we de “loop”-mogelijkheden van WordPress onderzocht en hebben we templates gemaakt voor het weergeven van een lijst met artikelen en van individuele artikelen.

Dit is maar een startpunt. Daarna kun je verder ontwikkelen en meer specifieke templates maken (bijvoorbeeld)...page.php, archive.phpIn het gedeelte voor het registreren van kleine hulpmiddelen (widgets) kun je zelfgemaakte artikeltypes en categorieën toevoegen, evenals een geavanceerder responsief ontwerp en JavaScript-interacties realiseren. Vergeet niet dat het beste manier om je vaardigheden te verbeteren is door de officiële ontwikkelaarsdocumentatie te raadplegen en veel te oefenen.

Veelgestelde vragen (FAQ)

Wat moet ik doen als de website een leeg scherm (wit scherm) toont nadat mijn thema is geactiveerd?

Dit wordt meestal veroorzaakt door een fatale fout in PHP. Controleer eerst je code om deze fout te vinden en te verhelpen.functions.phpZit er een syntactische fout in het bestand, bijvoorbeeld een gebrek aan een semicolon of een slecht gesloten haakje? Open WordPress…WP_DEBUGDe modus kan je helpen om de specifieke foutmeldingen te zien.wp-config.phpIn het bestand wordt…define('WP_DEBUG', false);Wijzig het in:define('WP_DEBUG', true);。

Hoe kan ik een functie voor een custom logo toevoegen aan mijn thema?

In jouw...functions.phpDe documenten vanadd_theme_supportDeel daarvan: voeg een nieuwe regel toe.add_theme_support('custom-logo');Je kunt ook een array-parameter overdragen om de grootte van het logo en de mogelijkheid van een flexibele hoogte te specificeren. Daarna kunnen gebruikers het logo uploaden in “Uiterlijk” -> “Maak zelf” -> “Siteidentiteit”, en het vervolgens gebruiken in het template.the_custom_logo();De functie roept deze zelf op.

Waarom wordt het navigatiemenu dat ik heb geregistreerd niet weergegeven in de backend?

Controleer de volgende punten: In de eerste plaats, moet je zorgen dat je registratiecode nog geldig is.functions.phpEn het is al correct gemount.initHook of orafter_setup_themeOp de haak. Ten tweede: zorg ervoor dat je het goed hebt gedefinieerd.theme_location(Bijvoorbeeld)'primary'Tijdens het oproepen…wp_nav_menu()Het moet volledig overeenkomen met de tijd. Ten derde: nadat het menu is gemaakt, moet je in de backend, onder het tabblad “Uiterlijk” -> “Menues” -> “Beheer posities”, een menu toewijzen aan de door jou geregistreerde positie.

Hoe maak je een klein gereedschapsgebied (sidesbar)?

Allereerst:functions.phpGebruikt in het Chinees (vereenvoudigd)register_sidebar()De functie registreert een klein toolgebied. Je moet een array van parameters aanleveren om de ID, naam, beschrijving en andere eigenschappen van het tool te definiëren. Vervolgens wordt dit toolgebied weergegeven in het templatebestand waarin je de sidebar wilt laten verschijnen.sidebar.phpIn dit voorbeeld wordt gebruikgemaakt vandynamic_sidebar()De functie wordt opgeroepen door de ID van het hulpmiddel te overdragen. Ten slotte…index.php或single.phpIn deze templates wordt gebruik gemaakt van…<?php get_sidebar(); ?>Introduce een sidebar-template.

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: