Homepage/Kennis/WordPress/De details van de inhoud

WordPress-themaontwikkeling: een volledig handboek van beginner tot expert

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

WordPress-themes vormen de kern van het uiterlijk en de functionaliteiten van een website. Door je eigen thema te ontwikkelen, kun je niet alleen een volledig aangepaste design realiseren, maar ook dieper in de werking van WordPress duiken en je ontwikkelingsvaardigheden verbeteren. In deze gids leid ik je stap voor stap door het proces van het bouwen van een basis-thema dat voldoet aan de standaarden van WordPress.

Ontwikkelingsomgeving en infrastructuur opzetten

Voordat je begint met schrijven van code, heb je een geschikte lokale ontwikkelingsomgeving nodig. Je kunt gebruikmaken van XAMPP, MAMP of desktop-apps zoals Local by Flywheel. Zorg ervoor dat PHP, MySQL en Apache/Nginx zijn geïnstalleerd in deze omgeving.

Een themakatalog en belangrijke bestanden maken

Een basis-Thema voor WordPress bestaat uit maar twee bestanden. Allereerst vind je deze bestanden in de map waar je WordPress hebt geïnstalleerd.wp-content/themesIn de map maak je een nieuwe map, bijvoorbeeld...my-first-theme。

Aanbevolen leesmateriaal WordPress-themaontwikkelingsgids: van nul een persoonlijke website bouwen。

In deze map moet je het eerste kernbestand (core file) maken.style.cssDeze bestand is niet alleen een stylesheet, maar bevat ook meta-informatie over het thema. In het begin van de bestand moet een commentaar staan met de juiste formatie.

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 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Het tweede belangrijke bestand is…index.phpDit is het standaardtemplate-fail voor het thema. Als WordPress geen meer specifiek template kan vinden, wordt dit template gebruikt. In eerste instantie kan dit template erg simpel zijn.

<!DOCTYPE html>
<html no numeric noise key 1010>
<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 1007>
    <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>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Nu kan je thema worden weergegeven in de lijst met thema's in het WordPress-beheerpaneel (“Uiterlijk” -> “Themata”) en is het actief.

Core template files en template-hiërarchie

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 thema's.

Artikelen en paginaontwerpen (templates)

Wanneer je een specifiek artikel bezoekt, zal WordPress eerst proberen het artikel te vinden in de bestaande database.single.phpAls het niet bestaat, ga dan terug naar…index.phpJe kunt het creeren.single.phpOm de weergave van een artikel op één pagina aan te passen.

Aanbevolen leesmateriaal Handboek voor het ontwikkelen van WordPress-themes: van nul beginnen met het maken van je eigen website-thema。

<?php get_header(); ?>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        <h1 class="entry-title"><p><strong>Hallo wereld!</strong></p></h1>
        <div class="entry-meta">
            发布于： | 作者：
        </div>
    </header>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
    <footer class="entry-footer">
        &lt;?php the_tags( &#039;标签：&#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
    </footer>
</article>

Voor aparte pagina's zal WordPress op zoek gaan naar…page.phpJe kunt ook templates maken voor specifieke pagina-ID's of pagina-naamwoorden (aliases).page-about.phpDit zal specifiek worden gebruikt op de “Over”-pagina.

Archiverings- en homepage-templates

Pagina met lijst van blogartikelen (bijvoorbeeld per categorie, tag of auteursarchief)archive.phpJe kunt het gebruiken.is_category()、is_tag()De conditionele tags worden intern onderscheiden.

De homepage van de website wordt standaard gemaakt door…index.phpControle… Maar je kunt wel iets creëren.front-page.phpOm een statische homepage te definiëren of te creëren…home.phpHier wordt de inhoud van de homepage van een blog gedefinieerd, waardoor de meest recente artikelen worden weergegeven.

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

Themafuncties en het hookmechanisme

De flexibiliteit en uitbreidbaarheid van WordPress is in grootte deel te danken aan het systeem met hooks, waaronder actions en filters. Themes maken gebruik van deze hooks om functionaliteiten te kunnen toevoegen of bestaande functionaliteiten aan te passen.functions.phpJe hebt een bestand nodig om dit systeem te kunnen gebruiken.

Thema-initialisatie en functionaliteitsondersteuning

functions.phpDeze bestanden worden gebruikt om functies als thema's, registratie-menuden en zijbalken te toevoegen. Meestal wordt hiervoor eerst…after_setup_themeDeze actie-hook wordt gebruikt om de basisfuncties van het thema in te stellen.

<?php
function my_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 启用HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Registratiegebied voor widgets

De widget-gebieden, zoals de sidebar of de voetnoot, moeten ook worden meegerekend.functions.phpRegistreren bij... en gebruiken.widgets_initHook.

Aanbevolen leesmateriaal Compleet handboek voor het ontwikkelen van WordPress-themes: van het begin tot de praktische toepassing。

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

Na het registreren kunt u gebruikmaken van de sjablonen (templates).sidebar.php) wordt gebruikt indynamic_sidebar( 'sidebar-1' )Het is tijd om deze regio te activeren/te gebruiken.

Template components en optimalisatie van cycli

Om de code opgeruimd en herbruikbaar te houden, wordt door WordPress aangeraden om herhaalde delen van templates (zoals de header, footer en sidebar) op te delen in aparte bestanden.

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

Split the template components

Creerenheader.php、footer.php和sidebar.phpFile.index.phpVerplaats de corresponderende codefragmenten naar de gewenste plek. Vervolgens gebruik je deze op de oorspronkelijke plek.get_header()、get_footer()和get_sidebar()Functies worden gebruikt om deze elementen te bevaten.

Verder ontwikkelen van de cyclische verwerking van artikelen

Basische toepassingen van cyclische constructieswhile ( have_posts() ) : the_post(); ... endwhile;Op de archiveringspagina moet je meestal alleen een samenvatting van het artikel weergeven, in plaats van het hele artikel. Hiervoor kun je gebruikmaken van…the_excerpt()Functie.

Om de loop beter te kunnen controleren, vooral bij zelfgemaakte queries, is het belangrijk om de volgende dingen te begrijpen:WP_QueryKlassen. Bijvoorbeeld: op de homepagina worden alleen artikelen uit een bepaalde categorie weergegeven.

<?php
$custom_query = new WP_Query( array(
    'category_name' => 'featured',
    'posts_per_page' => 3,
) );
if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) : $custom_query->the_post();
        // 显示文章内容
    endwhile;
    wp_reset_postdata(); // 重置主查询数据
endif;
?>

Vergeet niet dat je, nadat je een aangepaste zoekopdracht hebt uitgevoerd, moet gebruiken…wp_reset_postdata()Om het globale geheugen terug te brengen…$postVariabelen zijn van cruciaal belang; anders kunnen ze de juiste weergave van latere templateonderdelen (zoals de sidebar) beïnvloeden.

Samenvatting

Vanaf het moment dat het is gecreëerd…style.css和index.phpVanaf het begin, tot het begrijpen van de structuur van de template en het gebruik ervan…functions.phpDoor functies te toevoegen, templateonderdelen te splitsen en cycli te optimaliseren, hebt u een basisgestelde maar complete ontwikkelingsprocedure voor een WordPress-thema afgerond. Het belangrijkste is om de standaarden en regels van WordPress te volgen; dit zorgt ervoor dat uw thema goed compatibel is en gemakkelijk te onderhouden is. In de volgende stap kunt u proberen om meer meta-informatie toe te voegen aan artikelen, custom-artikeltypen te integreren, of stijlen te beheren met preprocesoren zoals Sass, waardoor uw thema nog professioneler en krachtiger wordt.

Veelgestelde vragen (FAQ)

Is het nodig om PHP te beheersen om een WordPress-thema te ontwikkelen?

Ja, PHP is de kernprogrammeringstaal van WordPress. De templatebestanden (bestanden met de extensie .php) van thema's gebruiken voornamelijk PHP om dynamisch HTML-content te genereren, WordPress-functies op te roepen en gegevens te verwerken. Ook wanneer je een page builder gebruikt, is het essentieel om PHP te begrijpen voor diepere aanpassingen en het oplossen van problemen.

Wat doet het function.php-bestand van het thema?

functions.phpDit is het “Function Center” van je thema. Het wordt gebruikt om themafuncties (zoals menu’s en miniaturen) te activeren, een gebied voor het registreren van plugins en een navigatiemenu aan te maken, om scripts en stijlen te laden in een bepaalde volgorde, om aangepaste functies te definiëren, en om het standaardgedrag van WordPress te bewerken met behulp van hooks (Actions en Filters). Het wordt automatisch geladen wanneer het thema wordt geïnstalleerd.

Hoe zorg ik ervoor dat mijn thema ondersteunt wordt bij meertalige vertalingen?

Je moet twee dingen doen. Allereerst moet je de WordPress-translatiefuncties gebruiken om alle strings die moeten worden vertaald te omringen.__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )En in…style.css和functions.phpEerst moet de tekstdomain (text domain) op de juiste manier worden ingesteld. Daarna moet je met een tool als Poedit een .pot-bestand maken en de corresponderende .mo-taalbestanden genereren. Plaats deze .mo-bestanden vervolgens in het thema (theme)./languagesCatalogus.

Hoe introduceer je CSS- en JavaScript-bestanden op de juiste manier tijdens het ontwikkelen van een thema?

Zorg er absoluut voor dat je geen tags of elementen rechtstreeks in de templatebestanden gebruikt of invoert. De juiste manier om dit te doen, is door ze te gebruiken via andere bestanden of mechanismen die zijn bedoeld voor het beheer en de instelling van templates.wp_enqueue_style()和wp_enqueue_script()Functies en het koppelen van deze oproepen aanwp_enqueue_scriptsDeze actie is verbonden aan een hook. Dit zorgt ervoor dat de afhankelijkheden correct worden beheerd, dat dubbele laden wordt voorkomen, en dat het systeem compatibel is met WordPress’ scriptbeheersmechanisme.

PHP
function my_theme_scripts() {
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . 'https://www.likacloud.com/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

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: