Van beginner tot expert: een complete handleiding en praktijkgerichte tutorial voor het ontwikkelen van WordPress-thema's.

Het ontwikkelen van WordPress-themes is een essentieel onderdeel van het personaliseren van het uiterlijk en de functionaliteiten van een website. Het gaat niet alleen om het aanpassen van CSS-stijlen, maar ook om het begrijpen van de kernarchitectuur van WordPress, waaronder de hiërarchie van templates, theme-functies, hooks en loops. Als je het ontwikkelen van themes onder de knie hebt, kun je vanaf nul een website bouwen die volledig voldoet aan de behoeften van het project, optimaal presteert en gemakkelijk te onderhouden is, zonder afhankelijk te zijn van vooraf gemaakte themes. In deze gids leert u dit proces systematisch.

De basis en structuur van WordPress-thema's

Een standaard WordPress-thema is een map die bevatte specifieke bestanden, gelegen op een bepaalde locatie in het WordPress-systeem./wp-content/themes/In de map vind je twee essentiële bestanden. Zelfs voor het simpelste thema zijn deze bestanden vereist.

De kerndocumenten van het onderwerp.

Het eerste vereiste bestand is een stylesheet.style.cssDe functie van deze bestand gaat verder dan alleen het definiëren van stijlen; de commentaren in het bestandskopie vormen de “identiteitskaart” van het thema en worden gebruikt om de meta-informatie van het thema aan het WordPress-systeem door te geven.

Aanbevolen leesmateriaal Ontdek het ontwikkelen van WordPress-themes: een volledig handboek van het begin tot de volmaaktheid。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

De tweede vereiste bestand is het hoofdtemplatebestand.index.phpDit is het back-upbestand voor de hiërarchie van templates. WordPress gebruikt dit bestand wanneer geen specifiekere template wordt gevonden.index.phpOm de pagina te weergeven.

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.

toegangspagina

Het begrijpen van de hiërarchie van sjablonen.

De hiërarchie van templates vormt de basis voor het ontwikkelen van WordPress-themes. Het is een set regels die bepaalt welke templatebestand het systeem als eerste zal gebruiken voor verschillende soorten paginaverzoeken. Bijvoorbeeld, wanneer je een blogartikel bezoekt, zal WordPress op volgende manier kijken:single-post.php -> single.php -> singular.php -> index.phpAls je deze structuur onder de knie hebt, kun je door het maken van de corresponderende templatebestanden (bijvoorbeeld...)page.phpVoor gebruik op pagina's.archive.phpVoor archiveringspagina's.front-page.phpOm de weergave van verschillende inhoud op de homepagina precies te kunnen controleren.

Een themaplaatindelingssjabloon maken

De templatebestanden bestaan uit een combinatie van HTML-structuur en PHP-code, en worden gebruikt om inhoud uit de database te halen en te weergeven. Een volledig thema wordt meestal gecreëerd door meerdere templatebestanden die met elkaar samenwerken.

De kernloop die wordt gebruikt om de inhoud van het artikel te weergeven

“Een loop” is een stuk PHP-code in WordPress dat wordt gebruikt om artikelen, pagina's en andere inhoud uit de database te halen. Het vormt de kern van alle manieren waarop inhoud wordt weergegeven. Een typisch looppatroon looks als volgt:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
        <h2><a href="/nl/</?php the_permalink(); ?>"><p><strong>Hallo wereld!</strong></p></a></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </article>
<?php endwhile; else : ?>
    <p><?php _e( '抱歉，没有找到任何内容。', 'my-first-theme' ); ?></p>
<?php endif; ?>

Deze code gebruikt onder andere…the_title()、the_content()Je kunt template-taggen gebruiken om de specifieke informatie van een artikel af te drukken.

Aanbevolen leesmateriaal Praktische gids voor het ontwikkelen van WordPress-themes: een volledig onderzoek van het begin tot de volmaaktheid。

Het splitsen van een template om code te kunnen hergebruiken

Om de onderhoudbaarheid en herbruikbaarheid van het codebestand te verbeteren, is het nodig om de algemene delen op te delen in aparte bestanden. De twee belangrijkste bestanden die hierbij worden gecreëerd, zijn de header templates.header.phpEn de onderste templatefooter.phpInindex.phpIn dit proces wordt gebruik gemaakt van…get_header()和get_footer()Deze functies worden gebruikt om ze te introduceren. Op vergelijkbare manier kan de sidebar ook worden geplaatst.sidebar.phpIn, metget_sidebar()Deel van het template voor de inhoud van een artikel (bijvoorbeeld de meta-informatie van het artikel) kan verder worden onderverdeeld in…template-parts/content.phpEn gebruik…get_template_part()Functieaanroepen.

Themafuncties en geavanceerde eigenschappen

functions.phpDe bestand is het “brein” van het thema; het wordt gebruikt om functies te toevoegen, eigenschappen te registreren en het standaardgedrag van WordPress te wijzigen. Het is geen template-bestand, maar een PHP-bestand dat automatisch wordt geladen wanneer het thema wordt initialiseerd.

Het toevoegen van ondersteuning voor thema's via functiebestanden.

在functions.phpHier kun je gebruikmaken van…add_theme_support()Deze functies worden gebruikt om de verschillende mogelijkheden van een thema aan te geven. Bijvoorbeeld is het gebruiken van artikelafbeeldingen (highlight images) een basisvereiste voor moderne thema's.

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%

toegangspagina

function my_theme_setup() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持在后台自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持HTML5的语义化标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Hier,after_setup_themeDit is een belangrijke ‘hook’ die wordt gebruikt om de initialisatiecode veilig uit te voeren nadat het thema is geladen.

Registreren van navigatie-menu's en stijlscripten

Het navigatiemenu is een belangrijk onderdeel van een website. Je moet…functions.phpRegistreer de locatie van het restaurant in het systeem en gebruik deze informatie vervolgens in het template.wp_nav_menu()Weergeven.

function my_theme_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'init', 'my_theme_menus' );

Tegelijkertijd moet het ook op de juiste manier worden gebruikt.wp_enqueue_style()和wp_enqueue_script()Er zijn functies beschikbaar om de stijlbestanden en JavaScript-failen van een thema te laden. Dit is de door WordPress aanbevolen beste praktijk, omdat dit de afhankelijkheden effectief kan beheersen en conflicten voorkomt.

Aanbevolen leesmateriaal Alles over WordPress-themaontwikkeling: een complete gids, van beginner tot expert.。

Themaanpassing en praktische tips

Een uitstekend thema moet niet alleen alle vereiste functies hebben, maar ook flexibele aanpassingsmogelijkheden bieden voor gebruikers (zowel eindgebruikers als ontwikkelaars).

Integreren van een WordPress-customizer

De WordPress Customizer biedt een interface voor het bekijken van thema-opties in real time. Hierdoor kun je direct zien hoe het thema er uit zal zien wanneer je het hebt geinstalleerd.functions.phpVoeg je eigen instellingen en controlelementen toe. Bijvoorbeeld, een optie om auteursrechtaanwijzingen in de voetnoot te plaatsen:

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.

toegangspagina

function my_theme_customize_register( $wp_customize ) {
    // 添加一个设置
    $wp_customize->add_setting( 'footer_copyright', array(
        'default' => '© 2026 我的网站。保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field',
    ) );
    // 添加一个控件到现有板块
    $wp_customize->add_control( 'footer_copyright', array(
        'label' => __( '页脚版权文本', 'my-first-theme' ),
        'section' => 'title_tagline',
        'type' => 'text',
    ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );

En vervolgens,footer.phpIn, gebruikenget_theme_mod( 'footer_copyright' )Wees gerust, ik zal de opgegeven waarde voor je uitrekenen en weergeven.

Een custom page template maken

Met een aangepaste pagina-template kun je een unieke lay-out toevoegen aan een specifieke pagina. Je creëert een nieuwe template door simpelweg een speciaal commentaarblok toe te voegen aan het begin van een bestand met een template.

<?php
/**
 * Template Name: 全宽页面布局
 * Description: 一个没有侧边栏的全宽度页面模板
 */
get_header(); ?>
// ... 全宽布局的循环代码 ...
<?php get_footer(); ?>

Nadat de pagina is gecreëerd, kun je op de achtergrondbewerkingspagina in het drop-down-menu “Pagina-eigenschappen” onder “Template” de optie “Volledig breed lay-out” kiezen.

Het realiseren van een responsief ontwerp en prestatie-optimalisatie.

Modernere thema's moeten responsief zijn. Dit wordt voornamelijk gerealiseerd met CSS-mediaqueries, zodat je website goed op alle schermen en apparaten wordt weergegeven.style.cssHet kan worden aangepast aan alle schermgrootten, van mobiele telefoons tot desktops. Wat betreft de prestaties: naast het optimaliseren van afbeeldingen en het houden van de code kort, moet ook worden rekening gehouden met het gebruik van…add_image_size()Registreer de juiste afmetingen van de foto en combineer deze vervolgens met...srcsetHet implementeren van responsieve afbeeldingen op basis van attributen is van cruciaal belang voor SEO (Search Engine Optimization) en de laadsnelheid van een website.

Samenvatting

Het ontwikkelen van WordPress-themes is een geleidelijk proces dat begint met het begrijpen van de basisstructuur van de bestanden, en vervolgens verder gaat naar het begrijpen van templates, function hooks en aangepaste APIs. Het belangrijkste is om te begrijpen hoe template-bestanden inhoud kunnen weergeven met behulp van cycli, en hoe deze functies kunnen worden gebruikt.functions.phpDe functie voor het aanpassen van bestandsextensies: Door templates te splitsen, customizers te integreren, eigen templates te maken en rekening te houden met een responsieve design, kun je professionele thema's bouwen die zowel krachtig als flexibel zijn. Het is belangrijk om te oefenen; begin dus met het maken van een eenvoudig thema.style.css和index.phpHet is de beste manier om deze techniek onder de knie te krijgen om langzaam meer functies en templates te toevoegen.

Veelgestelde vragen (FAQ)

Welke voorafgaande kennis is nodig om een WordPress-thema te ontwikkelen?

Je moet basiskennis hebben van HTML en CSS, want dit vormt de basis voor het ontwerp van de look & feel van een webpagina. Daarnaast is een begrip van PHP vereist, aangezien de kern van WordPress en de templatebestanden in PHP zijn geschreven. Een eerste kennismaking met JavaScript kan handig zijn wanneer je later interactieve functies wilt toevoegen, maar dit is geen vereiste voor het beginnen.

Waarom is de stijl van mijn thema verwarrend of werkt het niet zoals het zou moeten werken nadat het is geactiveerd?

Dit gebeurt meestal vanwege een fout in de code of het ontbreken van belangrijke bestanden. Controleer eerst de console en het netwerkpaneel in de ontwikkelaarstool van uw browser om te zien of er JavaScript-fouten zijn of of de CSS-bestanden niet zijn geladen. Daarna moet u ervoor zorgen dat...functions.phpEr zijn geen PHP-syntaxisfouten te vinden, en het is ook gecontroleerd of de benodigde bibliotheken correct zijn geïntroduceerd.header.php和footer.phpTemplate-componenten, zoals deze. Het is aan te raden om WordPress tijdens het ontwikkelingsproces altijd aan te zetten (dus de functies van WordPress te activeren).WP_DEBUGPatroon.

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

Je moet voorbereiden op de internationalisering van het thema. In het codegebied moeten alle teksten die worden getoond aan de gebruiker worden omhuld door een vertaalfunctie.__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )Instyle.cssDe koppen en…functions.phpDe load-functie is correct ingesteld.Text DomainEn gebruik…load_theme_textdomain()De functie laadt de taalbestand in. Ten slotte wordt met tools als Poedit een nieuwe vertaling gemaakt..potTemplatefile..po/.moHet document.

Wat is het verschil tussen een subthema en een hoofdthema? Wanneer moet je er een gebruikmaken?

Een 'overkoepelend thema' (parent theme) is een volledig, onafhankelijk functioneel thema. Een 'onderthema' (subtheme) is afhankelijk van het overkoepelende thema en bevat alleen de bestanden die je wilt wijzigen of vervangen.style.css、functions.phpOf een specifiek template-bestand. Wanneer je een bestaand thema (bijvoorbeeld een populaire framework) wilt aanpassen, maar tegelijkertijd de mogelijkheid wilt behouden om het moedertema onafhankelijk te upgraden, moet je een subthemaa creeren. Dit zorgt ervoor dat je eigen aanpassingen niet worden overschreven wanneer het moedertema wordt bijgewerkt.