Volledig handboek voor het ontwikkelen van WordPress-themes: van nul beginnen met het bouwen van aangepaste themes

Basisconcepten voor het ontwikkelen van WordPress-themes

Voordat je begint met het schrijven van code, is het van belang om de basisstructuur en de kernconcepten van een WordPress-thema te begrijpen. Een WordPress-thema is in feite een set bestanden die bepalen hoe een website er uit zal zien en hoe deze functioneert./wp-content/themes/De mappen in de map bevatten een reeks bestanden die samen bepalen het uiterlijk en de functionaliteit van de website. De bestanden worden voornamelijk in twee categorieën ingedeeld: templatebestanden en stijlbestanden.

Templatebestanden vormen het skelet van een thema en bepalen de structuur van de weergave van de inhoud op verschillende pagina's.index.phpDit is het standaardontwerp voor de startpagina.single.phpBeheer de weergave van een enkele artikel.page.phpControleer de weergave van een enkele pagina…header.php、footer.php和sidebar.phpDeze elementen worden meestal gebruikt voor het bouwen van de publieke gebieden van een website. WordPress houdt zich aan een bepaalde template-hiërarchie om het juiste templatebestand te kiezen voor verschillende verzoeken, waardoor ontwikkelaars veel flexibiliteit hebben.

De stijlbestanden zijn verantwoordelijk voor de visuele weergave van het thema, waarvan de belangrijkste onderdelen zijn…style.cssDeze bestand bevat niet alleen alle CSS-regels, maar ook een blok met commentaren in het begin van de bestand (de ‘header’) waarin de metadata van het thema staan, zoals de naam van het thema, de auteur, een beschrijving en de versienummer. Deze informatie is essentieel voor WordPress om het thema te herkennen en te activeren.

Aanbevolen leesmateriaal Hoe je een aangepast WordPress-thema maakt: een volledige handleiding van nul tot één.。

Naast deze, zijn er ook de themafunctiebestanden.functions.phpHet speelt een centrale rol. Het is geen template-bestand, maar een PHP-bestand dat automatisch wordt geladen wanneer een thema wordt geïnstalleerd. Ontwikkelaars kunnen hier custom-functionaliteiten toevoegen, menu's en sidebar's registreren, scripts en styleheets invoeren, en nog veel meer.add_action和add_filterHooken worden gebruikt om de kernfuncties van WordPress uit te breiden of te bewerken. Het begrijpen van de rol en de samenwerking tussen deze basisbestanden is de eerste stap in het bouwen van een aangepaste thema.

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

Construct een thema-architectuur en sjabloonbestanden

Het eerste stap in het maken van een custom-thema is om een projectmap en de essentiële kernbestanden aan te maken. Dit doe je in je lokale ontwikkelomgeving of op een testserver./wp-content/themes/In de gewenste map maak je een nieuwe map, bijvoorbeeld genaamd “my-custom-theme”. Binnen deze map moet je direct twee basisbestanden maken:style.css和index.php。

style.cssDe bestandskop moet bevaten informatie over een specifieke stijlboom. Hier is een eenvoudig voorbeeld:

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-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-custom-theme
*/

Deze commentaren zijn van cruciaal belang; WordPress gebruikt ze om je thema’s in de achtergrondlijst met thema’s te weergeven. Volg nu de stappen om ze te creeren.index.phpFile: Dit is het definitieve terugkeringspatroon (return template) voor alle paginaverzoeken. Het simpelste en effectiefste variant.index.phpHet kan alleen code bevatten die de kerntemplate-taggen oproept:

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 默认输出文章内容
            the_content();
        endwhile;
    else :
        echo &#039;<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

Deze code toont duidelijk hoe de themacycle (The Loop) van WordPress werkt – door…have_posts()和the_post()De functie loopt door alle artikelen heen en vertoont ze.get_header()、get_sidebar()和get_footer()De functies worden gebruikt om de corresponderende template-delen te importeren. Daarna moet je de gecreëerde template-bestanden opslaan.header.php、sidebar.php和footer.php。

Aanbevolen leesmateriaal Van nul tot held: een complete gids voor het ontwikkelen van WordPress-thema's en de bijbehorende kerntechnologieën.。

Create a header template file.

在header.phpIn deze tekst moet je de header-informatie van het HTML-document plaatsen en belangrijke WordPress-functies oproepen.

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
<p><strong>Deze pagina is momenteel niet beschikbaar.</strong></p>
<header id="masthead" class="site-header">
    <nav>'primary' ) ); ?&gt;</nav>
</header>

wp_head()Deze functie biedt de mogelijkheid voor het WordPress-core, plugins en je eigen thema om nodige code (bijvoorbeeld links naar style sheets) toe te voegen aan bepaalde delen van de pagina.body_class()De functie genereert een reeks conditionele CSS-klassennamen voor de tag, waardoor een precieze stijlcontrole mogelijk is. Op vergelijkbare manier…footer.phpDe bestand moet de volgende inhoud bevatten:wp_footer()Function calls worden meestal geplaatst voor de sluitende tag.

De functionaliteit van je thema kan worden verbeterd door gebruik te maken van functions.php.

functions.phpDe bestanden vormen het “bestuurscentrum” van je thema en worden gebruikt om functies te toevoegen en WordPress-features te integreren. Een goede eerste stap is om de door het thema ondersteunde functies in te stellen, een navigatiemenu aan te maken en de benodigde resources correct te laden.

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

Het toevoegen van ondersteuning voor het thema-functie

Je kunt gebruikmaken vanadd_theme_support()Deze functies worden gebruikt om de verschillende mogelijkheden van een thema aan te geven. Het is bijvoorbeeld heel standaard om de ondersteuning voor afbeeldingen in artikelen en de HTML5-functionaliteiten voor bepaalde elementen in te schakelen.

function my_custom_theme_setup() {
    // 让主题支持特色图像
    add_theme_support( 'post-thumbnails' );

// 为评论表单、搜索表单等添加HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加标题标签支持，允许WordPress管理文档标题
    add_theme_support( 'title-tag' );

// 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Hier,after_setup_themeDit is een hook die wordt uitgevoerd nadat het thema is geïnitialiseerd, en dit is de standaardplek om themagestellingen te bewerken.add_theme_support(‘title-tag’)Dan hoef je het niet langer te doen.header.phpManueel invullen in het Chinees<title>Gemarkeerd.

De scripts en stijlen moeten op de juiste manier worden ingevoerd.

Voor het behalen van een goede prestatie, het beheersen van caches en afhankelijkheden, moet je de methoden die WordPress biedt gebruiken om CSS- en JavaScript-bestanden te laden, in plaats van deze direct in het HTML-tekenbestand op te nemen.<link>或<script>Tags. Dit wordt gerealiseerd door...wp_enqueue_style()和wp_enqueue_script()De functie is voltooid.

Aanbevolen leesmateriaal De ultieme gids voor het optimaliseren van WordPress: van beginner tot expert, een uitgebreide strategie voor het verbeteren van de prestaties.。

function my_custom_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 引入一个自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 如果需要，为脚本局部化数据（传递PHP变量到JS）
    wp_localize_script( 'my-custom-theme-navigation', 'myThemeData', array(
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'homeUrl' => home_url( '/' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

wp_enqueue_scriptsDit is de juiste methode om resources op de front-end te laden. Gebruik het.get_stylesheet_uri()Obtenen van het onderwerpstyle.cssPad, gebruikenget_template_directory_uri()De URL van het themakatalog moet worden opgehaald. Het overdragen van de versienummer als parameter helpt bij het vernieuwen van de browsercache wanneer de bestanden worden bijgewerkt.

Implementeren van een hiërarchische structuur voor templates en aangepaste stijlen

De template-hiërarchie van WordPress is een systeem van regels dat wordt gebruikt om automatisch het juiste templatebestand voor de weergave van een pagina te kiezen. Wanneer een URL wordt bezocht, zoekt WordPress naar het templatebestand in de volgende volgorde: van het meest specifieke naar het meest algemene. Bijvoorbeeld, voor een artikel met de ID 123, zal WordPress op de volgende manier kijken naar de templates:single-post-123.php -> single-post.php -> single.php -> singular.php -> Terugkeren naar de laatste staatindex.php。

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

Een custom page template maken

Naast de standaardtemplates kun je ook custom templates maken voor specifieke pagina's. Dit doe je door aan het begin van het nieuwe template-bestand een speciale commentaar met de namen van het template te toevoegen. Als je bijvoorbeeld een template wilt maken met de naam “Volledig breed scherm”, moet je dit op de eerste regel van het bestand opnemen.

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */
get_header(); ?>

<main id="primary" class="site-main full-width">
    &lt;?php
    while ( have_posts() ) :
        the_post();
        the_title( &#039;<h1 class="entry-title">', '</h1>' );
        the_content();
    endwhile;
    ?&gt;
</main>

&lt;?php
get_footer();

Maak en sla deze bestand op (bijvoorbeeld: `my_file.txt`).template-full-width.phpNadat je dit hebt gedaan, kun je in het WordPress-beheerpaneel, wanneer je de pagina bewerkt, het template “Volledig breed scherm” zien en gebruiken in het drop-down-menu “Pagina-eigenschappen” onder “Template”.

Schrijven van responsieve en modulaire CSS

In het ontwikkelen van moderne websites is responsief ontwerp een must.style.cssJe moet mediabestellingen (Media Queries) gebruiken om je website aan te passen aan verschillende schermgrootten. Een goede praktijk is het volgen van het principe ‘mobile first’: eerst schrijf je de basisstijl voor mobiele apparaten en voeg je daarna steeds meer stijlelementen toe voor grotere schermen toe.

Tegelijkertijd moet de modulariteit en onderhoudbaarheid van het CSS worden behouden. Voor de verschillende onderdelen van het thema (zoals de header, navigatie, artikelen en voetnoot) moet een duidelijke structuur van klassennamen worden gecreëerd, bijvoorbeeld door de BEM (Block Element Modifier)-methode te gebruiken.body_class()和post_class()De door de functie automatisch genereerde klassennamen kunnen je CSS-selektoren aanzienlijk vereenvoudigen, waardoor je te veel nesting en te hoge specificiteit kunt voorkomen.

/* 移动端基础样式 */
.site-header {
    padding: 1rem;
}
.entry-title {
    font-size: 1.5rem;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .site-header {
        padding: 2rem;
        display: flex;
        justify-content: space-between;
    }
    .entry-title {
        font-size: 2rem;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .site-main.full-width {
        max-width: 1200px;
        margin: 0 auto;
    }
}

Samenvatting

Het ontwikkelen van een WordPress-thema vanaf nul is een systeematische klus die vereist dat de ontwikkelaar de kernarchitectuur van WordPress begrijpt: de controlestructuur van de template-bestanden en de manier waarop de stijlbestanden de weergave bepalen.functions.phpDit zorgt voor een centraal beheer van de functies. Door de template-hiërarchie te volgen, kunnen verschillende soorten pagina's efficiënt worden gecreëerd, met behulp van de door WordPress beschikbare functies en hooks (zoals…)wp_enqueue_scripts、add_theme_supportHet is van belang om de compatibiliteit, veiligheid en prestaties van een thema te garanderen. Door modulaire templateonderdelen te bouwen, responsieve CSS te schrijven en de mogelijkheden van themafailen te gebruiken voor diepe personalisatie, kun je het uiterlijk en het gedrag van een website volledig beheersen, waardoor je een unieke gebruikerservaring kunt creëren. Hoewel dit proces tijd en learning vereist, biedt het je de absolute vrijheid om websites van alle soorten te bouwen.

Veelgestelde vragen (FAQ)

Wat is het verschil tussen een thema en een plug-in?

Het thema is verantwoordelijk voor het bepalen van het uiterlijke aspect van een website, oftewel de visuele design en lay-out die de gebruiker ziet. Het bepaalt de kleuren, fonten, typografie en de structuur van de pagina's.

Een plugin is een module dat specifieke functies of eigenschappen toevoegt aan een website. Het kan de mogelijkheden van de website uitbreiden zonder het kernontwerp van het thema te veranderen; bijvoorbeeld het toevoegen van een contactformulier, SEO-optimalisatie of het maken van een online winkel. Een website kan maar één thema actief hebben, maar er kunnen meerdere plugins worden geïnstalleerd en activerd.

Moet ik eerst een lokale omgeving installeren voordat ik een thema ontwikkel?

Ja, het is sterk aan te raden om WordPress-themes te ontwikkelen in een lokale ontwikkelomgeving, zoals Local, XAMPP, MAMP of Docker.

Door dit te doen kun je je code op een veilige, geisoleerde omgeving schrijven en testen, zonder je zorgen te maken dat je de online website beïnvloedt. De lokale omgeving laadt snel op, is gemakkelijk te debuggen en biedt ook meer mogelijkheden voor het gebruiken van versiebeheerstools (zoals Git) om je code te beheren. Nadat de ontwikkeling en testen van het onderwerp zijn voltooid, kun je de code vervolgens op de productie-server deployen.

Hoe maak ik mijn thema multilingual (meerdere talen ondersteunend)?

Om een thema te ondersteunen voor meerdere talen (internationalisering en lokalisatie) zijn er twee belangrijke stappen te ondernemen. Allereerst moet op alle plaatsen waar tekst wordt weergegeven in het thema, de tekst worden omgevat met de vertaalfuncties van WordPress. Hierdoor kunnen de teksten in verschillende talen worden weergegeven.esc_html_e(‘Hello World’, ‘my-custom-theme’)或__('Hello World', 'my-custom-theme')De tweede parameter “my-custom-theme” in deze functies is degene die jij hebt...style.cssDe tekstgebieden (Text Domains) die zijn gedefinieerd, moeten consequent zijn.

Ten tweede moet je gebruikmaken van een tool als Poedit om alle te vertalen tekststrings in het thema te scannen en deze te converteren in een bruikbare vorm..potMaak eerst een sjabloonbestand en maak vervolgens voor elke taal een bijbehorende versie..poEn de gecompileerde versie.moDe bestanden worden vervolgens in het thema geplaatst./languages/In de map… Ten slotte,functions.phpGebruikt in het Chinees (vereenvoudigd)load_theme_textdomain()Een functie om vertaalfailen te laden.

Waarom verandert de website niet nadat ik style.css heb gewijzigd?

Dit komt meestal door de browsercache. De browser slaat CSS-bestanden op in de cache om de laadtijd te verbeteren, waardoor je niet de meest recente versie van de stijlkenmerken (styles) ziet.

Je kunt de volgende methoden proberen om het probleem op te lossen: In eerste plaats…wp_enqueue_style()In de functie wordt een dynamische versienummerparameter toegevoegd voor het stijlbestand. Zo verandert de URL elke keer dat het bestand wordt bijgewerkt, waardoor de browser het bestand opnieuw moet downloaden. Daarnaast kun je in de browser een harde refresh uitvoeren met Ctrl+F5 (of Cmd+Shift+R). Controleer ook of je thema correct is geactiveerd, en zorg ervoor dat je de juiste instellingen aanpast voor het huidige actieve thema.style.cssBestanden. Ten slotte moet je controleren of je CSS-selektoren voldoende specifiek zijn, zodat ze alle andere mogelijke stijlen kunnen overraken.