Homepage/Kennis/WordPress/De details van de inhoud

WordPress-themaontwikkeling: Een volledig handboek voor het maken van aangepaste thema's vanaf nul

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

De basisstructuur van een WordPress-thema

Een WordPress-thema is in feite een verzameling bestanden die op een specifieke locatie op een webserver worden opgeslagen.wp-content/themes/De mappen in de map bevatten een reeks bestanden die worden gebruikt om het uiterlijk en de functionaliteiten van de website te bepalen. Het begrijpen van de rol van deze belangrijke bestanden is essentieel voor het ontwikkelen van de website.

Het thema vereist een templatebestand.

Elk thema moet twee basisbestanden bevatten:style.css和index.phpDaarvan zijn erstyle.cssDeze bestanden worden niet alleen gebruikt om CSS-stijlen op te slaan, maar de commentaren in het begin van de bestanden bevatten ook meta-informatie over het thema. WordPress gebruikt deze informatie om het thema te herkennen.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.phpDit is het standaardtemplatebestand voor het thema. Wanneer WordPress geen specifiekere template kan vinden, wordt dit bestand gebruikt om de pagina te weergeven. Het vormt dus een soort “net van veiligheid” voor het correcte aflopen van de weergave op alle pagina’s.

Aanbevolen leesmateriaal Creëren van een kwalitatief goede website: een gedetailleerde gids voor het personaliseren en optimaliseren van WordPress-themes。

Andere veelgebruikte templatebestanden

Om de weergave van verschillende pagina's nog preciezer te kunnen controleren, moet je meer templatebestanden maken.header.phpMeestal bevat het een verklaring van de documenttyp.<head>De header-sectionen van regio's en websites;footer.phpDan bevat het de voetnoten en de sluitende tags.sidebar.phpVoor gebruik in de sidebar. Met behulp van ingebouwde WordPress-functies, zoals…get_header()、get_footer()和get_sidebar()Je kunt deze onderdelen eenvoudig invoegen in andere templates.

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

Daarnaast kun je ook andere dingen creëren.single.phpGeeft gebruik voor één artikel.page.phpGeschikt voor aparte pagina's.archive.phpVoor het archiveren van lijsten, en ook…functions.phpDeze speciale bestand bevat functies en eigenschappen voor het toevoegen van thema's.

Creëer een template voor de homepage van een thema.

De homepage is het visitekaartje van een website en vereist meestal een unieke design. We beginnen met het opbouwen van…index.phpWe beginnen met een uitleg over hoe je cyclische structuren (lopen) kunt gebruiken om inhoud te weergeven.

Header en footer integreren

Een goede praktijk is om de gemeenschappelijke delen te modulariseren. Beginnen met het maken van een map in je themapagina.header.php和footer.phpInheader.phpIn dit document moet je de volgende elementen opnemen:<!DOCTYPE html>Verklaringen<html>Het begin van een tag…<head>Regio (gebruik)wp_head()De ‘hooks’ zorgen ervoor dat plugins en thema’s hier code kunnen toevoegen, evenals de website-logos en de hoofdnavigatie en andere elementen die aan het begin van de pagina staan.

En vervolgens,index.phpVoor de opening van... wordt gebruikt:<?php get_header(); ?>Om deze header te introduceren…index.phpOp het eind van... wordt 'gebruikt'.<?php get_footer(); ?>Om dit in te voeren…footer.phpHierin moet worden opgenomen:wp_footer()Hook-based calls and closures</body></html>Taggen.

Aanbevolen leesmateriaal Volledig handboek voor het ontwikkelen van WordPress-themes: van nul tot een high-performance, aangepast thema。

Artikelen uitvoeren met een loop

De kern van WordPress is de “The Loop”, een stuk PHP-code dat controleert of er artikelen zijn, en deze vervolgens opvolgens hun volgorde weergeeft als ze beschikbaar zijn.index.php的get_header()Daarna kun je de volgende basiscykelframecode invoegen:

<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">
                <p><strong>Het volledige artikel is hier te lezen.</strong></p>
            </div>
        </article>
    endwhile; ?
    <p>Het spijt, maar er is geen enkele artikel gevonden.</p>
<?php endif; ?>

In deze code:have_posts()和the_post()Function-driven loop.the_title()、the_permalink()和the_excerpt()De template-taggen worden gebruikt om de specifieke inhoud van een artikel weer te geven. Hiermee is een basispagina met een lijst van artikelen klaar.

Stijl en scripts toevoegen aan het thema

Een thema zonder stijl is onaantrekkelijk. Je moet de CSS- en JavaScript-bestanden op de juiste manier toevoegen aan de queue; dit is de aanbevolen methode van WordPress. Hierdoor worden de afhankelijkheden goed geregeld en kunnen conflicten worden vermeden.

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

De stijlblaad moet op de juiste manier worden ingevoerd.

Hoewelstyle.cssHet is nodig, maar je moet het niet rechtstreeks in het HTML-linken. De juiste manier is om…functions.phpGebruikt in het bestandwp_enqueue_style()Eerst moet je een functie maken. Daarvoor ga je naar de rootmap van het thema (de topmap).functions.phpVoeg de volgende code toe aan het bestand:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Deze code definieert een functie die WordPress vertelt om het hoofdstyleboek (main stylesheet) van het thema te gebruiken.get_stylesheet_uri()De opgehaalde path wordt met “my-theme-style” als handle toegevoegd aan de queue.add_action()De hook maakt deze functie beschikbaar voor andere delen van het programma.wp_enqueue_scriptsZorg ervoor dat deze actie wordt uitgevoerd wanneer de pagina wordt geladen.

Een eigen JavaScript-code invoeren

De methode om een JavaScript-bestand in te voeren is vergelijkbaar, maar er worden andere tools of technieken gebruikt.wp_enqueue_script()Function. Stel dat je een functie hebt die zich bevindt op...js/script.jsVoor een bestand, kun je dit op de volgende manier toevoegen:

Aanbevolen leesmateriaal Van het begin tot de volle meesterheid: Een compleet handboek en praktische handleiding voor het ontwikkelen van WordPress-themes。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

De parameters hier betekenen respectievelijk: de handle van het script, de URL van het script, en een array met afhankelijkheden (zoals...)array('jquery'))、versienummer, en of de inhoud wordt geladen in de voetnoot.trueDat betekent 'aangegeven dat' of 'verwijst naar'.</body>(Pre-loading).

Het uitbreiden van de themafunctie

functions.phpDit is de “toolkit” van het thema. Hier kun je verschillende functies toevoegen om het thema te versterken, zonder de kerntemplatebestanden te hoeven aanpassen.

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

Voeg de mogelijkheid toe om thema's te ondersteunen.

WordPress biedt veel ingebouwde functies aan, maar deze kunnen alleen worden gebruikt als het thema expliciet aangeeft dat het deze functies ondersteunt. Dit gebeurt door…add_theme_support()Function implementatie. Bijvoorbeeld, om afbeeldingen van artikelen (promotieafbeeldingen), aangepaste logos en HTML5-markups te ondersteunen, kan dit worden gerealiseerd door...functions.phpToevoegen aan de Chinese (vereenvoudigde) taal:

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )Zorg ervoor dat deze instellingen zo snel mogelijk worden uitgevoerd wanneer het thema wordt initialiseerd.

Registreren in het navigatiemenu

Om gebruikers de mogelijkheid te geven om de navigatie in het menu in het backend in te stellen, moet je de posities van de menu-items van tevoren registreren.register_nav_menus()Function:

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

Na het registreren kunt u gebruikmaken van de sjablonen (templates).header.php) wordt gebruikt inwp_nav_menu( array( 'theme_location' => 'primary' ) )De menu wordt nu weergegeven.

Samenvatting

Vanaf het moment dat de inhoud is gecreëerd...style.css和index.phpJe begon met de basismap van het thema en bouwde steeds verder aan tot een compleet WordPress-thema. Door het begrijpen van de hiërarchie van de templates leerde je hoe je speciale templatebestanden kunt maken om verschillende soorten pagina's precies te kunnen bepalen.wp_enqueue_style()和wp_enqueue_script()Het beheersen van resources is de beste praktijk om de compatibiliteit en prestaties van een systeem te garanderen. Ten slotte: gebruik dit beheerproces optimaal.functions.phpJe kunt de bestanden bereiken via…add_theme_support()和register_nav_menus()Functies zoals deze zorgen ervoor dat je veilig en effectief sterke functies kunt toevoegen aan je WordPress-thema. Door deze essentiële stappen te beheersen, bouw je een solide basis voor het onafhankelijk ontwikkelen van persoonlijke WordPress-thema's.

Veelgestelde vragen (FAQ)

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

Je moet een solide basis in HTML en CSS hebben, zodat je de structuur en het uiterlijk van webpagina's kunt bepalen. Daarnaast is het belangrijk om de basis van PHP te begrijpen, aangezien WordPress-thematemplates voornamelijk worden gemaakt met PHP. Een algemene kennis van JavaScript is handig om interactieve functies te kunnen toevoegen. Verder is het heel nuttig om de basisconcepten van WordPress te beheersen, zoals artikelen, pagina's, categorieën en tags, zodat je je werkzaamheden nog efficiënter kunt uitvoeren.

Waarom moet je gebruikmaken van `wp_enqueue_style` om stijlbestanden te laden, in plaats van ze direct met `link` te refereren?

Gebruik het direct.<link>Er zijn meerdere problemen met het hardcoderen van de paden naar de stijlbestanden in labels. Ten eerste kan dit niet goed omgaan met afhankelijkheden; bijvoorbeeld kunnen je stijlen afhankelijk zijn van de stijlen van een bepaald framework. Ten tweede...wp_enqueue_styleHet is toegestaan dat plugins of andere thema’s veilig je eigen stijl overschrijven of aanpassen. Het belangrijkste is dat dit beter samenwerkt met plugins voor het beheer van de cache en het verbeteren van de prestaties, waardoor de volgorde en efficiëntie van het laden van resources wordt gewaarborgd. Dit is een standaardpraktijk in de WordPress-ecosysteem.

Wat is het verschil tussen functions.php en plugins?

functions.phpDe code die in het thema is gedefinieerd, is sterk verbonden met dat thema. Als de gebruiker het thema wijzelt, zijn deze functies niet meer beschikbaar. Deze code is bedoeld om functies op te slaan die rechtstreeks te maken hebben met de visuele weergave en lay-out van het thema, zoals het registratiemenu, het ondersteunen van speciale afbeeldingen en het definiëren van een sidebar. De functies die worden geboden door plugins zijn meestal onafhankelijk van het thema en zijn bedoeld om bepaalde algemene eigenschappen toe te voegen aan de website (bijvoorbeeld contactformulieren of SEO-optimalisatie). Deze functies blijven beschikbaar, zelfs als de gebruiker het thema vervangt. Als een functie geen relatie heeft met het uiterlijk van het thema, is het meest flexibele optie om deze als plugin te gebruiken.

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

Het is belangrijk om je thema's internationaal te ondersteunen om de wereldwijde markt te bereiken. Allereerst moet je op alle plaatsen waar tekst uit je thema wordt weergegeven de vertaalfuncties van WordPress gebruiken, bijvoorbeeld…__('文本', 'my-custom-theme')或_e('文本', 'my-custom-theme')Daarvanmy-custom-themeHet is instyle.cssDe tekstvakken die zijn gedefinieerd in… Daarna wordt met een tool als Poedit de themafail gescannd om de gewenste inhoud te genereren..potTemplatebestanden: vertalers kunnen er mee verschillende talenversies van een tekst van maken..po和.moBestanden. Ten slotte…functions.phpDoor middel vanload_theme_textdomain()De functie laadt de vertaalfailen op.

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: