WordPress-themaontwikkeling voor beginners: creëer je eerste eigen thema vanaf nul

Als je begint met WordPress-ontwikkeling, is het creëren van je eigen thema een spannend mijlpaal. Het geeft je niet alleen de volledige controle over het uiterlijk en de functionaliteit van je website, maar is ook de beste manier om de kernarchitectuur van WordPress beter te begrijpen. In dit artikel worden je stap voor stap geholpen met het proces van het opzetten van een omgeving tot het maken van een basisthema, zodat je je eerste stappen als WordPress-ontwikkelaar kunt zetten.

Forbereidende werkzaamheden voordat de ontwikkeling begint

Voordat je met het schrijven van code begint, is het van belang een efficiënte lokale ontwikkelingsomgeving op te zetten. Dit maakt het mogelijk om tests en fouten te corrigeren zonder dat de online website hierdoor wordt beïnvloed.

Het opzetten van een lokale ontwikkelomgeving.

Eerst moeten we de lokale serversoftware installeren. Je kunt bijvoorbeeld kiezen voor XAMPP, MAMP of Local by Flywheel. Deze softwarepakketten bevatten een Apache-server, een MySQL-database en PHP en zijn essentieel voor het draaien van WordPress. Neem XAMPP als voorbeeld: na de installatie moet je de Apache- en MySQL-diensten starten. Je computer wordt dan een lokale server.

Aanbevolen leesmateriaal WordPress-themaontwikkeling voor beginners: bouw je eerste custom-thema vanaf nul。

Volgens de instructies moet je eerst de meest recente versie van WordPress downloaden en deze vervolgens uitpakken in de wortelmap van je lokale server (bijvoorbeeld de map waar je je website onder XAMPP hebt geplaatst).htdocsVervolgens wordt toegang gecreëerd door het bezoeken van de map.http://localhost/your-wordpress-folderOm de beroemde “ Vijf-minuten-installatie” te kunnen voltooien, moet je tijdens het installatieproces een database maken en de gebruikersnaam en wachtwoord van de websitebeheerder instellen.

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

Maak je klaar met een code-editor en de benodigde tools.

Een goede code-editor kan de ontwikkelingsefficiëntie aanzienlijk verbeteren. Visual Studio Code, PhpStorm of Sublime Text zijn allemaal goede keuzen. Vooral VS Code beschikt over een groot aantal extensies voor WordPress en PHP, zoals PHP Intelephense, die intelligente code-completering en syntaxiscontrole bieden.

Daarnaast wordt het aanbevolen om een plugin voor de ontwikkelaarstool van de browser te installeren, bijvoorbeeld het officiële WordPress-plugin “Theme Check”, om op een latere fase van het ontwikkelingsproces te controleren of het thema voldoet aan de vereisten. Je kunt ook de functie “Elementen controleren” in de browser gebruiken om HTML en CSS in real time te debuggen.

Het begrijpen van de basisstructuur van een WordPress-thema

Een zeer vereenvoudigd WordPress-thema bestaat uit maar twee bestanden. Een functioneel en standaardvoldoend WordPress-thema bevat echter meerdere bestanden, die ieder een specifieke rol vervullen.

Het belangrijkste bestand met de stijlregels (stylesheet)

Elke WordPress-thema moet een bepaald element of functie hebben.style.cssDeze bestand is niet alleen een CSS-bestand dat de lay-out van het thema bepaalt, maar de commentaren in het begin van het bestand vormen ook de “identiteitskaart” van het thema. Hierin zitten alle meta-informatie die WordPress nodig heeft om het thema te herkennen. Een basisvoorbeeld van commentaren in het begin van een bestand is als volgt:

Aanbevolen leesmateriaal WordPress-themaontwikkeling: Een volledig handboek voor het bouwen van eigen thema's vanaf nul。

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

Hieronder valt ook:Text DomainGebruikt voor internationalisatie; dit is een voorwaartse stap voor het oproepen van de vertaalfunctie.__()或_e()De identificator die wordt gebruikt in deze omstandigheden.

Basistemplatebestanden

Een andere vereiste bestand is…index.phpDit is het standaardtemplate voor het thema. Als WordPress geen andere, meer specifieke templatebestanden kan vinden…single.php或page.phpWanneer dit nodig is, wordt het gebruikt om de pagina te renderen.

Met alleen deze twee bestanden kan je thema al in het WordPress-beheerpaneel (“Uiterlijk” -> “Thema’s”) worden geplaatst en activerd. Natuurlijk is het thema nog steeds alleen een leeg framework. Om het thema echt te laten werken, moeten we nog enkele belangrijke templatebestanden maken.

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

Eerst moet je het maken.header.phpHet bevat de koppen (headers) van de HTML-documenten.<doctype>Verklaringen<head>Regio (waar dit moet worden gebruikt)wp_head()De functie introduceert de kernscripten en -stijlen van WordPress, evenals de markeringen voor de website-hoofdtekst (header).

Vervolgens wordt het gecreëerd.footer.phpHet bevat de inhoud van de voetnoot van de website en wordt opgeroepen voordat de tekst eindigt.wp_footer()Deze functie is een essentieel hulpmiddel voor veel plugins: het wordt gebruikt om code aan te brengen aan de onderkant van de pagina.

Ten slotte: creëer het.functions.phpDeze bestand is niet verplicht, maar vormt het “brein” van het thema. Hier kun je functies voor themaondersteuning toevoegen, een registratie-menu en een sidebar, stijl- en scriptbestanden invoeren, en verschillende custom-functies definiëren.

Aanbevolen leesmateriaal Hoe ontwikkel je vanaf nul een eigen WordPress-thema?。

De kernfuncties van het bouwen van een thema zijn:

Nu we de basisbestanden hebben, kunnen we beginnen met het 'in leven roepen' van het thema, zodat het de basisfuncties van een website bevat.

Een navigatiemenu implementeren

Moderne websites hebben meestal een navigatiemenu. Allereerst moet je…functions.phpGebruikt in het Chinees (vereenvoudigd)register_nav_menus()Een functie om de positie van de keukenunit te registreren.

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_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Deze code registreert twee menuposities: “Hoofdmenu” en “Voetmenu”. Vervolgens worden deze menu's weergegeven op de plaatsen in het template waar je dit wilt zien.header.phpIn (China), wordt dit gebruikt.wp_nav_menu()De functie roept deze zelf op.

wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) );

De gebruikers kunnen nu in het WordPress-beheerpaneel, onder “Uiterlijk” → “Menü’s”, nieuwe menu’s maken en deze toewijzen aan de positie “Hoofdmenu”.

Activeren van de speciale afbeelding van het artikel en de sidebar

Veel thema's ondersteunen artikelafbeeldingen (promotiefoto's) en een sidebar met widgets. Dit geldt ook voor...functions.php的my_first_theme_setupVoeg de volgende code toe in de functie om deze functies te activeren:

add_theme_support( 'post-thumbnails' ); // 启用文章特色图像
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 启用HTML5标记支持

Om een ruimte voor sidebar-tools te registreren, moet u gebruikmaken van...register_sidebar()Function:

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

Daarna, in het templatebestand (bijvoorbeeld...)sidebar.php) wordt gebruikt indynamic_sidebar( 'sidebar-1' )Om deze regio te weergeven…

Templaten integreren en stijlen toevoegen

Nu gaan we de verschillende onderdelen van de templates met elkaar verbinden en er basistyling toevoegen, zodat de website een visueel aantrekkelijke vorm krijgt.

Een functie invoeren met behulp van een template

WordPress biedt enkele kernfuncties om andere templatebestanden in te lezen, waardoor de code modulair en onderhoudbaar is. In jouw…index.phpDe structuur zou als volgt moeten zijn:

<?php get_header(); ?>

<main id="main" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation(); // 文章导航
    else :
        get_template_part( 'template-parts/content', 'none' ); // 没有找到内容时的模板
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

get_header(), get_sidebar(), get_footer()De functies laden de corresponderende templatebestanden apart in.get_template_part()Het is een flexibeler functioneel concept dat je aanmoedigt om blokken met inhoud die vaak worden hergebruikt (bijvoorbeeld artikel samenvattingen) apart te bewaren.template-partsIn de individuele bestanden die zich binnen de map bevinden…content.php。

Basistijlen en responsief ontwerp schrijven

Nu kun je het openmaken.style.cssWe gaan nu stijl toevoegen aan je onderwerp. Eerst instellen we enkele algemene stijlregels, zoals het boxmodel, de fonten en de kleuren.

* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Om een responsief ontwerp te realiseren, worden mediabestellingen gebruikt om het lay-out aan te passen aan verschillende schermgrootten. Bijvoorbeeld kan de sidebar op een klein scherm worden verplaatst onder het hoofdinhoud.

@media (max-width: 768px) {
    .site-main {
        width: 100%;
    }
    #sidebar {
        width: 100%;
        margin-top: 2rem;
    }
}

Vergeet niet om…header.php的<head>Voeg een aantal viewport-metatags toe om ervoor te zorgen dat de afbeeldingen op mobiele apparaten goed worden geschaald:<meta name="viewport" content="width=device-width, initial-scale=1">。

Samenvatting

Begin met het maken van een bestand met destyle.css和index.phpJe begint met een lege map en bouwt steeds verder tot een volledig thema voor WordPress dat over navigatie, een sidebar en een responsief ontwerp beschikt. Dit proces omvat de kernconcepten van themaontwikkeling voor WordPress. Je hebt geleerd hoe je dit kunt doen door…functions.phpHet uitbreiden van de themafuncties: hoe je code kunt organiseren met een systeem van template-lagen, en hoe je het ontwerp kunt omzetten in HTML en CSS voor de front-end. Dit is alleen een startpunt; daarna kun je verder ontwikkelen met meer geavanceerde template-bestanden.single.php, page.php, archive.phpJe kunt ook aangepaste artikeltypes en thema’s maken met behulp van de thema-customizer-API, en zelfs complexere en modernere thema’s bouwen met Sass en JavaScript-frames. Door continu te oefenen en de officiële ontwikkelaarsdocumentatie te raadplegen, kun je je vaardigheden verder verbeteren.

Veelgestelde vragen (FAQ)

Moeten ontwikkelde thema's altijd subthema's gebruiken?

Niet per se. Het is volkomen mogelijk om vanaf nul een onafhankelijk thema te creeren; dit is zelfs de beste manier om de kernprincipes te leren. Het gebruik van subthema's is meestal de beste praktijk wanneer je een bestaand parent-thema (bijvoorbeeld een thema van een populaire framework) wilt aanpassen of modificeren, omdat dit ervoor zorgt dat je eigen aanpassingen niet worden overschreven wanneer het parent-thema wordt bijgewerkt. Voor nieuwe ontwikkelingsprojecten is het veel gebruikelijker om vanaf nul een onafhankelijk thema te bouwen.

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

Om een thema te ondersteunen voor meerdere talen (internationaal gebruik), zijn er twee belangrijke stappen te nemen. Allereerst moet je ervoor zorgen dat...style.cssDe koppen en…functions.phpAlle strings die moeten worden vertaald, zijn omgeven met de WordPress-vertaalfunctie.__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )Ten tweede moet je een tool gebruiken zoals Poedit om dit te realiseren..potVertaal de templatebestand, en generereer vervolgens voor elke taal het corresponderende resultaat..po和.moDe bestanden worden vervolgens in de map met het thema geplaatst./languagesCatalogus.

Hoe publiceer je een thema nadat het is ontwikkeld?

Voordat je je thema publiceert, moet je het grondig testen met het “Theme Check”-plugin om zeker te zijn dat het voldoet aan alle coderingsspecificaties en beveiligingseisen van het WordPress-themadirectory. Verwijder alle debug-code en commentaren. Daarna kun je je thema indienen bij het officiële WordPress.org-themadirectory (waar het wordt bekeken door een moderator), of je kunt het pakken in een ZIP-bestand om het direct aan klanten te leveren of op je eigen website te distribueren. Als je het thema zelf distribueert, moet je duidelijke installatie-instructies en documentatie beschikbaar stellen.

Waarom zijn mijn aangepaste stijlen verdwenen nadat ze zijn bijgewerkt in de backend?

Dit komt waarschijnlijk doordat je rechtstreeks de bestanden van het gebruikte parent-thema hebt gewijzigd. Als het parent-thema wordt bijgewerkt via de WordPress-beheerpanel, worden alle kernbestanden vervangen door de nieuwe versie, waardoor je aanpassingen verloren gaan. Daarom wordt het sterk aanbevolen om voor elke customisatie een sub-thema te gebruiken. De stijl en functies van het sub-thema worden onafhankelijk van het parent-thema geladen, zodat je aanpassingen in het sub-thema niet worden beschadigd, zelfs als het parent-thema wordt bijgewerkt.