WordPress.org

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

nl:Subthema's

Een WordPress-subthema is een thema dat functionaliteit overneemt van een ander thema, het hoofdthema genaamd. Subthema's stellen je in staat de functionaliteit te bewerken of toe te voegen aan het hoofdthema. Een subthema is de veiligste en makkelijkste manier om een bestaand thema te wijzigen, of je nu kleine of hele grote veranderingen aanbrengt. In plaats van de themabestanden direct te wijzigen, kun je een subthema maken en daarme functionaliteit overschrijven.

Waarom een subthema gebruiken?

Hier zijn een paar redenen:

  • Als je een bestaand thema aanpast en het wordt bijgewerkt, zullen de wijzigingen overschreven worden. Met een subthema kun je het hoofdthema updaten (wat belangrijk kan zijn voor beveiliging of voor nieuwe functionaliteit) en toch de aangebrachte wijzigingen behouden.
  • Het kan de ontwikkeltijd verkorten.
  • Het is een mooie start als je net begonnen bent met het ontwikkelen van WordPress-thema’s.

Hoe maak je een subthema?

  • Mappenstructuur van Subthema
    Maak een map aan voor het subthema in de themamap. De themamap is wp-content/themes. De naam van de map mag geen spaties bevatten en het is gebruikelijk om de naam van de map van het hoofdthema te gebruiken met '-child' eraan toegevoegd. Bijvoorbeeld: als je een subthema maakt van het thema 'twentyfourteen', dan zou de naam van de map 'twentyfourteen-child' zijn.
  • Maak een bestand aan, genaamd style.css in de map van het subthema. Dit is het enige bestand dat vereist is om een subthema aan te maken. Deze stylesheet moet beginnen met de volgende regels:
/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/

@import url("../twentyfourteen/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

Je kunt deze regels aanpassen voor het subthema. De enige vereiste regels zijn 'Theme Name', 'Template' en (als het stylesheet van het subthema wijzigingen bevat ten opzichte van het hoofdthema) de regel '@import url'.

'Template' is de naam van de map van het hoofdthema. In dit geval is het hoofdthema: TwentyFourteen, dus het Template is twentyfourteen; dat is de naam van de map waarin het thema TwentyFourteen zich bevindt. Als je een subthema wilt maken van een thema met de mapnaam voorbeeld-thema-naam, dan zou je Template: voorbeeld-thema-naam gebruiken.

Tevens zou 'twentyfourteen' op de regel met '@import url' vervangen moeten worden door de naam van de map van het hoofdthema als je de stylesheet van het hoofdthema wilt importeren.

Opmerking: De stylesheet van het subthema wordt geladen na het hoofdthema en de opmaakstijlen overschrijven die van het hoofdthema.

  • Activeer het subthema. Meld je aan op het Dashboard van je site en ga naar Administration Panels > Appearance > Themes ('Weergave' => 'Thema's'). Hier zul je het subthema zien staan. Klik op 'Activeren'.

(Als WordPress draait als multi-site, zul je naar het netwerkbeheer-dashboard moeten gaan, => thema's, => klik op 'Netwerk activeren'. Daarna ga je naar het reguliere Dashboard en gebruik je bovenstaande stap om het subthema te activeren)

Template-bestanden

Als je meer dan alleen de stylesheet wilt wijzigen, kun je bestanden van het hoofdthema overschrijven met die van het subthema: gebruik een bestand met dezelfde naam in de map van het subthema en dit zal hetzelfde bestand van het hoofdthema overschrijven als de site wordt geladen. Bijvoorbeeld: als je de PHP-code voor de header wilt wijzigen, gebruik je een bestand header.php in de map van het subthema. Dit bestand wordt dan gebruikt in plaats van header.php van het hoofdthema.

Je kunt ook bestanden gebruiken in het subthema die niet aanwezig zijn in het hoofdthema. Bijvoorbeeld: je kunt een template-bestand gebruiken dat niet in het hoofdthema aanwezig is; denk aan een specifieke pagina of een categorie-archief. Zie ook de Template Hierarchy voor meer informatie over hoe WordPress besluit welk template er gebruikt wordt.

Gebruik functions.php

Anders dan style.css zal de functions.php van het subthema niet de versie van het hoofdthema overschrijven. In plaats daarvan wordt het geladen als uitbreiding voor de functions.php van het hoofdthema. (Meer specifiek: het wordt geladen voordat het hoofdthema-bestand wordt geladen.)

Op die manier zal functions.php van een subthema een slimme, probleemloze methode zijn om de functionaliteit van het hoofdthema aan te passen. Stel, je wilt een PHP-functie toevoegen aan het thema. De snelste manier is het bestand functions.php te openen en de functie hierin te plaatsen. Dat is echter niet slim: De volgende keer dat het hoofdthema wordt bijgewerkt, zal de toegevoegde functie verdwenen zijn. Maar er is een alternatief dat de slimme manier is: je kunt een subthema maken, het bestand functions.php toevoegen en de gewenste functie aan dat bestand toevoegen. De functie zal exact hetzelfde werken, met het voordeel dat het niet wordt aangetast bij toekomstige updates van het hoofdthema. Kopieer niet de hele inhoud van de functions.php van het hoofdthema naar de functions.php van het subthema.

De structuur van functions.php is simpel: Een open-tag bovenin, een sluit-tag onderaan en daartussen de PHP-code. Daarin kun je zoveel of zo weinig functies gebruiken als je wilt. Het voorbeeld hieronder toont een elementair bestand functions.php dat één simpel ding doet: Voeg een favicon-link toe aan het head-element van HTML-pagina's.

<?php //Open-tag

// In te sluiten aangepaste functie
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'favicon_link' );

?> //Sluit-tag

TIP VOOR THEMA-ONTWIKKELAARS. Het feit dat een functions.php van een subthema eerst geladen wordt, betekent dat je de functies van het thema 'pluggable' (vervangbaar door een subthema) kunt maken door deze conditioneel te declareren. Bijv.:

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Doe iets.
    }
}

Op die manier kan een subthema een PHP-functie van het hoofdthema vervangen door het simpelweg eerder te declareren.

Toevoegen van bestanden aan het subthema

Als je bestanden moet toevoegen die zich in de mappenstructuur van het subthema bevinden, moet je get_stylesheet_directory() gebruiken. Omdat style.css van het hoofdthema is vervangen door dat van het subthema en het style.css zich in de root van de submap van het subthema bevindt, verwijst get_stylesheet_directory() naar de map van het subthema (niet naar die van het hoofdthema).

Hier is een voorbeeld, gebruikmakend van require_once, dat toont hoe je get_stylesheet_directory kunt gebruiken om een bestand in de mapstructuur van het subthema toe te voegen.

require_once( get_stylesheet_directory() . '/mijn_toegevoegde_bestand.php' );

Andere nuttige informatie

Gebruik Post Formats

Een subthema overerft post formats, zoals gedefinieerd door het hoofdthema. Als je een subthema aanmaakt, let er dan op dat het gebruik van add_theme_support('post-formats') de opmaakcodes van het hoofdthema zal overschrijven, in plaats van ze toe te voegen aan het hoofdthema.

RTL-ondersteuning

Om RTL-talen te ondersteunen, voeg je een rtl.css-bestand toe aan het subthema, dat het volgende bevat:

/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
*/

@import url("../twentyfourteen/rtl.css");

rtl.css wordt alleen geladen door WordPress als is_rtl() waar is.

Het is aan te raden het rtl.css-bestand toe te voegen aan het subthema, zelfs als het hoofdthema geen rtl.css-bestand bevat.

Internationalisering

Subthema's zullen, net als andere extensies, vertaald worden in andere talen door het gebruik van de gettext-functie. Voor een overzicht, zie Translating WordPress & I18n for WordPress Developers.

Volg de volgende stappen om een subthema te internationaliseren:

  • Voeg een directory 'languages' toe.
    • Iets als my-theme/languages/.
  • Voeg taalbestanden toe.
    • De bestandsnamen moeten luiden: he_IL.po & he_IL.mo (afhankelijk van je taal), in tegenstelling tot plugin-files die luiden: domain-he_IL.xx.
  • Laad een tekstdomein.
    • Gebruik load_child_theme_textdomain() in functions.php gedurende de 'after_setup_theme'-actie.
    • Het tekstdomein, gedefinieerd in load_child_theme_textdomain(), moet gebruikt worden om alle strings in het subthema te vertalen.
  • Gebruik GetText-functies om i18n-support toe te voegen voor de strings.

Voorbeeld: tekstdomein

<?php
/**
 * Tekstdomein van mijn subthema opzetten.
 *
 * Roep tekstdomein aan voor dit subthema.
 * Vertalingen dienen opgeslagen te worden in de 'languages'-directory.
 */
function my_child_theme_setup() {
	load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>

Voorbeel: gettext-functies

<?php
_e( 'Code is Poetry', 'my-child-theme' );
?>


Samengevat, alle strings in het tekstdomein van 'my-child-theme' zullen vertaalbaar zijn. De vertaalbestanden moeten zich in de 'languages'-directory bevinden.

Resources

Terug naar de Startpagina