Van nul af: Een stap voor stap-gids om een professioneel WordPress-childthema te bouwen

In de WordPress-ecosysteem vormen subthema's de veilige basis voor het aanpassen en upgraden van websites. Ze bieden de mogelijkheid om alle functies, stijlen en templatebestanden van het parent-thema over te nemen, terwijl je deze tegelijkertijd in een aparte map kunt bewerken. Dit betekent dat wanneer het parent-thema veiligheidsupdates of functieverbeteringen krijgt, je deze met één klik kunt installeren, zonder bang te hoeven zijn dat je zelf gemaakte aanpassingen worden overschreven. Of je nu de kleuren wilt aanpassen, het lay-out wilt veranderen of complexe functies wilt toevoegen: het gebruik van subthema's is de beste praktijk.

Waarom moet je per se gebruikmaken van subthema's?

Het rechtstreeks bewerken van de bestand van het overkoepelde thema (parent theme) is een risicovolle actie. Zodra het overkoepelde thema wordt bijgewerkt, gaan alle door jou gemaakte veranderingen verloren en moet je deze opnieuw handmatig toevoegen. Dit proces is zeer foutgevoelig en kost veel tijd en moeite. Wat nog belangrijker is: bij samenwerking in een team of bij een toekomstige migratie van de website, zorgen gebrek aan duidelijke veranderingen voor grote problemen.

Het probleem wordt opgelost door het “overschrijven” (overwriting) van bestanden in subthema’s. Wanneer WordPress een pagina weergeeft, zoekt het eerst in de map met de subthema’s naar het corresponderende template-bestand. Als dit bestand wordt gevonden, wordt de versie van het subthema gebruikt. Als het niet wordt gevonden, wordt automatisch teruggegrepen naar de versie van het parentthema. Dit systeem maakt het mogelijk om alleen de delen van het ontwerp te bewerken die nodig zijn, terwijl de overige delen nog steeds worden bijgehouden en upgegraden door het parentthema.

Aanbevolen leesmateriaal Handboek voor het ontwikkelen van WordPress-themes: bouw je eerste thema van scratch op。

Daarnaast is het gebruik van subthema's een door WordPress officieel aanbevolen praktijk. Dit zorgt voor een opgeruimde en onderhoudsgemakkelijke code, en is een teken van professionele ontwikkeling.

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

De basisstructuur voor het creeren van een subthema:

Het is heel simpel om een subtopic te creeren; er zijn maar twee basisbestanden nodig: een stylesheet en een bestand met functies. Eerst moet je… /wp-content/themes/ In de map wordt een nieuwe map gemaakt, die meestal de naam “Overkoepelend thema-naam-kind” krijgt, bijvoorbeeld: twentytwentyfour-child。

Een kernstyle sheet (CSS) maken

Het kernpunt van een subthema is zijn stylesheet-bestand. style.cssDeze bestand bevat niet alleen CSS-regels, maar nog belangrijker zijn de commentaren in het bestandskopie. Hierin wordt aan WordPress gemeld dat dit een subthema is, en welk parentthema het heeft.

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    https://example.com/twentytwentyfour-child/
 Description:  Twenty Twenty-Four Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentyfour
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentyfour-child
*/

Hieronder valt ook:Template: Deze regel is van cruciaal belang: de waarde moet exact overeenkomen met de naam van de map van het overkoepelde thema (het ‘parent theme’), en dit moet op hoofdlettern en kleine lettern worden vergeleken. Op deze manier herkent WordPress de relatie tussen het overkoepelde thema en de onderliggende thema’s.

De stijlvolg van het overkoepelde thema wordt ingevoerd.

Er zijn alleen de genoemde bestanden beschikbaar; de subthema kan de stijl van het parentthema nog niet laden. Je moet dit oplossen in de functionele bestand van het subthema. functions.php Gebruikt in het Chinees (vereenvoudigd) wp_enqueue_scripts De hook wordt gebruikt om de style sheets van het parent-thema in de juiste volgorde te laden.

Aanbevolen leesmateriaal Essentieel voor het bouwen van een professionele website: een volledig handboek over het ontwikkelen en aanpassen van WordPress-themes。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get('Version')
    );
}
?>

get_template_directory_uri() De functie haalt de URL van het parent-thema-verwijfingspad op. get_stylesheet_directory_uri() De URL van het huidige actieve thema (subthema)katalogus verkrijgen met behulp van een afhankelijkheidsarray. array( 'parent-style' ) Zorg ervoor dat de stijl van de subthema's na de stijl van het parentthema wordt geladen, zodat je eigen CSS-regels de stijl van het parentthema kunnen overraken.

De mogelijkheden van uitgebreide subthema's (extended subtopics):

Nadat je de basisstructuur hebt gecreëerd, kun je verdergaan met... functions.php De code in deze bestand zorgt voor een onbeperkte uitbreiding van de mogelijkheden van de website. De code wordt eerst uitgevoerd dan de code uit het hoofdthema (parent theme). functions.php Het uitvoeren van de file biedt je een uitstekende mogelijkheid om de kernfuncties te bewerken.

Maak zelf functies voor je website

Als je bijvoorbeeld een nieuwe, aangepaste artikeltyp “Project” wilt toevoegen aan je website, kun je dit doen in de subthema’s (subtopics). functions.php Registreer het in het bestand.

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

add_action( 'init', 'register_project_post_type' );
function register_project_post_type() {
    $args = array(
        'public'      => true,
        'label'       => '项目',
        'has_archive' => true,
        'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'menu_icon'   => 'dashicons-portfolio',
    );
    register_post_type( 'project', $args );
}

Ook kun je bepaalde onnodige functies van het overkoepelde thema (het ‘parent theme’) verwijderen. Als het overkoepelde thema bijvoorbeeld een voetnotetool toevoegt die je niet wilt hebben, kun je deze tool gemakkelijk uit het thema halen. remove_action() Om dit te ontkrachten: stel dat het overkoepelde onderwerp (de ‘parent topic’) zich bevindt in… init Op de haak parent_theme_footer_widgets De functie bevat een klein hulpmiddel (tool), en je kunt dit op de volgende manier verwijderen:

add_action( 'after_setup_theme', 'remove_parent_theme_features', 15 );
function remove_parent_theme_features() {
    remove_action( 'init', 'parent_theme_footer_widgets' );
}

Let op: hier wordt gebruik gemaakt van... after_setup_theme De hook wordt gebruikt en er wordt een iets hogere prioriteit (bijvoorbeeld 15) ingesteld, om zeker te stellen dat de code van het overkoepelende onderwerp (het parent topic) al is uitgevoerd. add_actionOp deze manier kunnen we… remove_action Het kan alleen effect hebben als...

De bestaande themaplaat van het oudere thema overschrijven

Een van de krachtigste functies van een subthema is dat je de templatebestanden van het parentthema kunt overschrijven. Als je de weergave van een artikel wilt veranderen, hoef je alleen maar de betreffende delen in het parentthema aan te passen. single.php Kopieer het naar de map met je subthema’s en bewerk het daarna. WordPress gebruikt automatisch je versie.

Aanbevolen leesmateriaal Je potentieel ontsluiten: ontdek de kerntechnologieën en beste praktijken voor het bouwen van geavanceerde WordPress-themes。

Voor meer gedetailleerde controle kun je zelfs de onderdelen van het template of specifieke templateblokken overschrijven. Als je bijvoorbeeld de weergave van de metagegevens van een artikel wilt veranderen, kun je de betreffende onderdelen uit het parent-thema kopiëren en bewerken. template-parts/content-post-meta.php De bestanden worden opgeslagen in dezelfde map als de subthema.

Advanced techniques for subtopic development

Als het ontwikkelen van subthema's een steeds professionelere fase bereikt, kom je te maken met geavanceerde onderwerpen als lokalisatie, het overdragen van thema-opties en het updaten van de subthema's zelf.

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

Tekst lokaliseren en vertalen

Om je subthema te ondersteunen voor meerdere talen, moet je de tekstdomen (Text Domains) goed instellen en gebruikmaken van vertaalfuncties. style.css De koppen en… functions.php Het opladen van de tekstvakken is de eerste stap.

在 functions.php In, gebruiken load_child_theme_textdomain Function:

add_action( 'after_setup_theme', 'child_theme_localization_setup' );
function child_theme_localization_setup() {
    load_child_theme_textdomain( 'twentytwentyfour-child', get_stylesheet_directory() . '/languages' );
}

Daarna kun je, op de plaatsen waar de tekst moet worden vertaald, zinnen gebruiken als: esc_html__( 'Your Text', 'twentytwentyfour-child' ) Zo een function wrapper. Daarna kun je tools als Poedit gebruiken om de code te genereren. .po 和 .mo Vertaal het document en sla het op in een subonderwerp. /languages/ In de catalogus.

De kernfuncties veilig bewerken

Soms moet je een complexe functie in het parent-thema aanpassen, maar deze functie biedt niet genoeg flexibiliteit via hooks. Als de functie wel “pluggable” is, kun je deze dus gemakkelijk vervangen of aanpassen. if ( ! function_exists( ... ) ) Als het om pakketten gaat, kun je dit dan behandelen in de subthema’s. functions.php Deze functie kan rechtstreeks opnieuw worden declaréerd, waardoor de oude versie volledig wordt overschreven.

Voordat je deze actie uitvoert, moet je eerst controleren hoe de functies in het parent-thema zijn gedefinieerd. Als deze functies niet plug-and-play zijn, kan het opdringen om ze opnieuw te declareren tot fatale fouten leidden. In dit geval is het veiliger om contact op te nemen met de ontwikkelaar van het thema of andere filterhaken te zoeken om je behoeften te kunnen vervullen.

Samenvatting

Het maken van een WordPress subsyteem is een essentieel vereiste voor professionals. Het biedt een veilige en duurzame manier van personalisatie, waarbij je eigen code duidelijk wordt gescheiden van de kerncode van het thema. Beginnen met het maken van een subsyteem betekent eerst een bestand opmaken dat de juiste header-informatie bevat… style.css En het laden van de stijl (loading of the style)… functions.php Vanaf het begin, tot het overschrijven van de templatebestanden en het toevoegen van extra functies, en vervolgens het bewerken van lokale instellingen en geavanceerde aanpassingen: ieder stap volgt de beste praktijken van WordPress. Het consequent gebruiken van subthemes vormt de solide basis om zodat je website de komende jaren up-to-date blijft en toch zijn unieke uiterlijk en functionaliteiten behoudt.

Veelgestelde vragen (FAQ)

Welke vereisten gelden voor de namen van de mappen met subthema's?

Er zijn geen strenge regels voor de namen van mappen met subthema's, maar voor meer duidelijkheid wordt het meestal aanbevolen om het format “naam van het overkoepelende thema-kind” te gebruiken. Voorbeeld: astra-childHet belangrijkste is… style.css In de bestandskop Template: Het veld moet een waarde hebben die exact overeenkomt met de naam van de map van het parent-thema, inclusief de groot- en kleine letter. Anders kan WordPress de relatie tussen het parent- en child-thema niet correct opzetten.

Steunen alle overkoepelende onderwerpen (parent topics) het maken van onderwerpen (subtopics)?

De meeste moderne thema's die voldoen aan de WordPress-编码standaarden ondersteunen subthemata volledig. Theoretisch kan ieder thema worden gebruikt als moedertema. Sommige slecht ontworpen of zeer oude thema's kunnen echter problemen veroorzaken wanneer subthemata worden gebruikt, bijvoorbeeld vanwege het gebruik van absolute paden voor het opzoeken van bronnen of het ontbreken van essentiële templatebestanden. Het is verstandig om de documentatie of beoordelingen van gebruikers te controleren wanneer je een moedertema kiest.

Hoe verhoog je een rechtstreeks gewijzigd oudere thema naar een onderthema?

Allereerst moet je in je lokale of testomgeving een nieuwe subthema creeren, gebaseerd op het ongemodificeerde originele parentthema. Vervolgens moet je voor elk bestand van het parentthema dat je eerder hebt gewijzigd de verschillen met het originele bestand vergeleken. De gewijzigde code (CSS, PHP of HTML) moet vervolgens op een georganiseerde manier worden overgebracht naar het corresponderende bestand van het subthema. De CSS-code moet bijvoorbeeld worden geplaatst in het subthema. style.cssDe functionaliteitscode wordt vervolgens ingevoerd. functions.phpDe gewijzigde templatebestanden worden vervolgens gekopieerd naar de subthema-map en daar verder aangepast. Het is een nauwkeurig proces, maar het resultaat is van langdurige duur.

Zullen subthema's de snelheid van een website beïnvloeden?

De invloed van correct opgezette subthema's op de snelheid van een website is minimaal. Extra CSS- en JS-bestanden zijn meestal van geringe omvang, en wanneer ze op de juiste manier worden geladen, kunnen ze efficiënt worden samengevoegd en in de cache worden opgeslagen. De grootste kosten van subthema's kunnen voortkomen uit… functions.php Er wordt complexe PHP-logica toegevoegd in de code. Het is dus belangrijk om de code van de subthema’s te houden bij een minimum en zo efficiënt mogelijk te maken, net zoals de principes die worden gevolgd bij het ontwikkelen van het parentthema. Het verstandig gebruiken van caching-technieken kan eventuele negatieve effecten op de prestaties verder verlichten.