Homepage/Kennis/WordPress/De details van de inhoud

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

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

Basics van WordPress-themaontwikkeling en het opzetten van een omgeving

Om met het ontwikkelen van WordPress-themes te beginnen, is het eerst nodig om de basisstructuur van een thema te begrijpen. Een simpel thema bestaat uit ten minste twee bestanden:style.css 和 index.phpDaarvan zijn erstyle.cssHet bevat niet alleen style sheets, maar ook meta-informatie over het thema, zoals de naam van het thema, de ontwikkelaar en een beschrijving. Deze gegevens worden gedefinieerd in CSS-commentaarblokken en zijn essentieel voor WordPress om het thema te herkennen.

Een lokale ontwikkelomgeving opzetten

Voordat je met het schrijven van code begint, is het van belang een efficiënte lokale ontwikkelingsomgeving op te zetten. Het wordt aanbevolen om een pakket te gebruiken dat Apache/Nginx, PHP en MySQL integreert, zoals Local by Flywheel, XAMPP of MAMP. Met deze tools kun je in één stap een lokale serveromgeving opzetten die de omstandigheden van het online gebruik simuleert. Installeer ook een code-editor op je lokale computer, zoals Visual Studio Code of PhpStorm; deze bieden ondersteuning voor PHP, HTML, CSS en JavaScript, met onder andere sterke functies voor syntaxis-highlighting en code提示en.

Nadat de ontwikkelomgeving is klaar, moet je in de installatie-map van WordPress…wp-content/themesMaak een map met je thema onder de map. Bijvoorbeeld, maak een map met de naammy-first-themeDe inhoud van de map, en vervolgens worden de benodigde bestanden gecreëerd in die map.style.cssHet document.

Aanbevolen leesmateriaal Volledig handboek voor het ontwikkelen van WordPress-themes: van nul een persoonlijke website bouwen。

Schrijf de inhoud van de koppen voor het thema.

style.cssDe commentaren in het begin van een bestand vormen de “identiteitskaart” van het onderwerp. Hier is een voorbeeld van basistekst voor de headerinformatie:

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.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Hieronder valt ook:Text DomainGebruikt voor internationalisering (i18n) en is bedoeld om later te worden gebruikt met vertaalfuncties.__()或_e()Het is een identificator die nodig is om het thema te kunnen gebruiken. Nadat je deze bestand hebt gemaakt, zal je thema verschijnen in de lijst met thema's in het WordPress-beheerpaneel (“Uiterlijk” -> “Themata”), al heeft het thema voorlopig nog geen functies.

Core template files en template-hiërarchie

WordPress gebruikt een systeem met verschillende niveaus van templates om te bepalen hoe verschillende soorten content worden weergegeven. Het begrijpen van deze structuur is essentieel voor het ontwikkelen van flexibele thema's. Wanneer een gebruiker een pagina bezoekt, zoekt WordPress naar het corresponderende templatebestand volgens een bepaalde prioriteitsvolgorde.

Het begrijpen van de hiërarchische structuur van een template

Als je bijvoorbeeld een blogartikel (een enkele post) bezoekt, zal WordPress op de volgende manier kijken:single-post-{post-id}.php -> single-post-{post-type}.php -> single.php -> singular.php -> index.phpDe ontwikkelaar hoeft alleen maar de gewenste templatebestanden te maken; WordPress zal automatisch de meest geschikte template selecteren en gebruiken.

Een basistemplatebestand maken

Naast...index.phpEen volledig functionerend thema bevat meestal de volgende kerntemplatebestanden:
* header.phpDe websitekoppen (header) bevatten:<head>Regionaal en site-titels, navigatiemenu.
* footer.phpDe voetnoot van de website bevat informatie over de auteursrechten en andere belangrijke details.
* sidebar.phpHet gebied met sidebarmogelijkheden en tools.
* functions.phpDe functionaliteitsbestanden van het thema dienen om functies toe te voegen, menu's te registreren, widgets te implementeren, en meer.
* style.cssHoofdstijlbestand.
* page.phpWordt gebruikt om statische pagina's te weergeven.
* single.phpWordt gebruikt om een enkele blogartikel te weergeven.
* archive.phpWordt gebruikt om een lijst met artikelenarchieven te weergeven (bijvoorbeeld per categorie, tag of auteurspagina).

Aanbevolen leesmateriaal Volledig handboek voor het ontwikkelen van WordPress-themes: een praktische handleiding voor het bouwen van custom-themes vanuit het niets。

Met behulp van sjabloontags kun je andere onderdelen in verschillende sjabloonbestanden invoegen. In het voorbeeld hieronder wordt bijvoorbeeld een andere sjabloon in een bestaande sjabloon geïntroduceerd.index.phpDe koppen worden aan het begin van de pagina geplaatst:<?php get_header(); ?>Deze functie laadt zich automatisch op.header.phpHet document.

De themafuncties zijn geïntegreerd met het kernbestanddeel van WordPress.

functions.phpDe bestand vormt het “brein” van het thema; het biedt de mogelijkheid om de functionaliteiten van het thema uit te breiden en die diep te integreren met het kernprogramma van WordPress, zonder dat de kernbestanden hoeven te worden gewijzigd. Dit bestand wordt automatisch geladen wanneer het thema wordt activeerd.

De functies die worden ondersteund bij het registreren van een topic:

Gebruikadd_theme_support()Met een functie kun je aangeven welke WordPress-functionaliteiten je thema ondersteunt. Dit moet worden opgenomen in de beschrijving van het thema.after_setup_themeDe acties worden uitgevoerd in de action-hooks. Hieronder staat bijvoorbeeld de code om de unieke afbeelding van een artikel en een aangepast logo te activeren:

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 
function mytheme_setup() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 支持HTML5标记（用于评论列表、搜索表单等）
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Registreren voor het navigatiemenu en het gedeelte met widgets

Het navigatiemenu en de widgets zijn belangrijke onderdelen van het thema en van de interactie met de gebruiker. Je moet dit eerst...functions.phpJe moet ze eerst registreren, voordat je ze kunt gebruiken in een template.

Gebruikregister_nav_menus()Plaats voor het registreren van functies:

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

Na registratie kunnen gebruikers de menu's voor deze posities beheren in het backend, onder “Uiterlijk” -> “Menü”. In het template (bijvoorbeeld)...header.php(Niet vertaald)， gebruikwp_nav_menu()Een functie om het menu weer te geven.

Aanbevolen leesmateriaal WordPress-themaontwikkeling vanaf nul: maak je eigen, persoonlijke website。

Gebruikregister_sidebar()Functieregistratie-hulpmiddelgebied:

function mytheme_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>',
    ) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

In het template (bijvoorbeeld...)sidebar.php(Niet vertaald)， gebruikdynamic_sidebar( 'sidebar-1' )Om deze kleine hulpmiddelenweergave te tonen...

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

Stijlbeheer, scriptbeheer en themaanpassing

Voor het ontwikkelen van moderne WordPress-themes is het vereist dat de stijlbestanden (CSS) en scripts (JavaScript) op een georganiseerde en gestandaardiseerde manier worden beheerd. Daarnaast moet de API van WordPress' Customizer optimaal worden gebruikt, zodat gebruikers real-time voorbeelden van de configuraties kunnen zien.

CSS en JavaScript moeten op de juiste manier worden ingevoerd. Hier zijn enkele belangrijke tips:

Vergeet nooit om rechtstreeks in de templatebestanden geen code te gebruiken.<link>或<script>Tags zijn hardgecodeerde bronnen. Hier zou gebruik van moeten worden gemaakt…wp_enqueue_style()和wp_enqueue_script()De functie werkt door…wp_enqueue_scriptsDe hook wordt gebruikt om de vereiste onderdelen te laden. Dit zorgt ervoor dat de afhankelijkheden correct worden gemeten en dat dubbele laden wordt voorkomen.

function mytheme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 引入Google Fonts
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
    // 引入主JavaScript文件，依赖jQuery，并在页脚加载
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Integreren van een WordPress-customizer

De customizer biedt gebruikers de mogelijkheid om thema-opties in real time aan te passen, zoals kleuren, het logo en de tekst in de header. Je kunt dit dus gebruiken om het uiterlijk van het website-thema te bewerken.WP_Customize_ManagerJe kunt objecten gebruiken om instellingen, controlelementen en andere elementen toe te voegen.

Hier is een simpel voorbeeld van een optie om de tekst in de voetnoot te personaliseren:

function mytheme_customize_register( $wp_customize ) {
    // 添加一个“页脚设置”区域
    $wp_customize->add_section( 'mytheme_footer_options', array(
        'title'    => __( '页脚设置', 'my-first-theme' ),
        'priority' => 160,
    ) );

// 添加一个“页脚版权文本”设置
    $wp_customize->add_setting( 'mytheme_footer_copyright', array(
        'default'           => __( '© 2026 我的网站。保留所有权利。', 'my-first-theme' ),
        'sanitize_callback' => 'sanitize_text_field', // 数据清理回调函数
        'transport'         => 'refresh', // 或 ‘postMessage’ 用于无需刷新的实时预览
    ) );

// 为这个设置添加一个文本输入控件
    $wp_customize->add_control( 'mytheme_footer_copyright', array(
        'label'    => __( '页脚版权文本', 'my-first-theme' ),
        'section'  => 'mytheme_footer_options',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

在footer.phpIn het template kun je gebruikmaken van…get_theme_mod()Een functie om deze waarde te halen en uit te geven:<?php echo get_theme_mod( 'mytheme_footer_copyright' ); ?>。

Samenvatting

Het ontwikkelen van WordPress-themes is een systeematische procedure die begint met het begrijpen van de basis van template-bestanden en de hiërarchische structuur, en eindigt met het...functions.phpDoor de kernfuncties te integreren, de broncodes van resources te beheersen en een gebruikersvriendelijke configuratieomgeving te bieden met behulp van customizers, worden de WordPress-themes stabiler en veiliger. Dit maakt ze ook eenvoudiger te onderhouden en compatibel met andere plugins. Door deze essentiële technieken te beheersen, beschikt u over de mogelijkheid om op basis van nul een professioneel, aanpasbaar WordPress-thema te bouwen dat voldoet aan moderne webstandaarden.

Veelgestelde vragen (FAQ)

Welke programmeeringsvaardigheden zijn vereist om een WordPress-thema te ontwikkelen?

Om een WordPress-thema te ontwikkelen, zijn vier belangrijke technieken vereist: PHP, HTML, CSS en JavaScript. PHP vormt de kern en wordt gebruikt voor het verwerken van dynamische gegevens en logica. HTML wordt gebruikt om de structuur van de pagina op te bouwen. CSS is verantwoordelijk voor de stijl en lay-out van de pagina. JavaScript zorgt voor interactieve effecten op de front-end. Daarnaast is een basiskennis van SQL handig om gegevens te kunnen oproepen.

Hoe zorg ik ervoor dat mijn thema voldoet aan de officiële reviewcriteria van WordPress?

Om aan de beoordelingscriteria van de WordPress.org-themacatalogus te voldoen, moet u zich strikt houden aan de handleiding voor themaontwikkeling. De belangrijkste punten zijn: de code moet veilig zijn (alle dynamische uitvoer moet worden geëscape of opgeschoond), de templatehiërarchie moet worden nageleefd, hooks moeten correct worden gebruikt, er moet ondersteuning zijn voor toegankelijkheid (WCAG), het ontwerp moet responsief zijn, het gebruik van verouderde functies wordt afgeraden en er moet volledige ondersteuning voor internationalisering worden geboden.

Wat is een subthema (child theme) en waarom zou ik er een gebruiken?

Een subthema is een onafhankelijk thema dat afhankelijk is van een ouders Thema. Het erft alle functies, stijlen en templatebestanden van het ouders Thema. Het grootste voordeel van het gebruik van subthema's is dat wanneer het ouders Thema wordt bijgewerkt, de door jou gemaakte aanpassingen in het subthema (bijvoorbeeld het overschrijven van stijlen of het vervangen van templatebestanden) niet verloren gaan. Dit is de veiligste en meest aanbevolen manier om bestaande thema's aan te passen of te upgraden.

Welke functies moet men gebruiken in een thema om de pad of URL van het thema-bestand te verkrijgen?

Je moet de padfuncties die WordPress biedt gebruiken om de juistheid te garanderen.get_template_directory_uri()De URL wordt gebruikt om de map van het overkoepelende thema te bereiken (bijvoorbeeld de adressen van CSS- en JS-bestanden).get_stylesheet_directory_uri()De URL voor het verkrijgen van de directory van het huidige actieve onderwerp (of, als het een subonderwerp is, van dat subonderwerp).get_template_directory()和get_stylesheet_directory()Wordt gebruikt om de fysieke path op de server te verkrijgen.

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: