WordPress.org

Ready to get started?Download WordPress

Codex

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

nl:Child Thema's

Een WordPress child thema is een thema wat functionaliteiten overneemt van een ander thema, genaamd een hoofd thema. Child thema's stellen je in staat om functionaliteiten te bewerken of toe te voegen aan het hoofd thema. Een child thema is de veiligste en makkelijkste manier om een bestaand thema te wijzigen, of je nou kleine of hele grote veranderingen maakt. In plaats van de thema bestanden direct te wijzigen, kan je een child thema maken en functionaliteiten overschrijven.

Waarom een child thema gebruiken?

Hier zijn een paar redenen:

  • Als je een bestaand thema aanpast en het wordt bijgewerkt, zullen je wijzigingen weg zijn. Met een child thema kan je het hoofd thema updaten (wat belangrijk kan zijn voor beveiliging of functionaliteiten) en toch je wijzigingen behouden.
  • Het kan je ontwikkeltijd versnellen.
  • Het is een mooie manier om te beginnen als je net begonnen bent met WordPress thema ontwikkeling.

Hoe maak je een child thema?

  • Child Theme directory structure
    Maak een map in je themes map voor je child thema. De thema map 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 hoofd thema te gebruiken met “-child” er aan toegevoegd. Bijvoorbeeld: als je een child thema maakt van het twentyfourteen thema, de naam van de map zou zijn twentyfourteen-child.
  • Maak een bestand genaamd style.css in de map van het child thema. Dit is het enige bestand wat vereist is om een child thema te maken. De 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 kan deze regels aanpassen voor je child thema. De enige vereiste regels zijn de Theme Name, het Template en (als de stylesheet van je child thema wijzigingen bevat ten opzichte van het hoofd thema) de regel '@import url'.

De Template is de naam van de map van het hoofd thema. In dit geval is het hoofd thema het TwentyFourteen thema, dus de Template is twentyfourteen, wat de naam van de map is waar het TwentyFourteen thema zich bevindt. Als je een child thema wilt maken van een thema met de mapnaam example-theme-name, dan zou je Template: example-theme-name gebruiken.

Tevens zou 'twentyfourteen' op de regel met '@import url' vervangen worden met de naam van de map van het hoofd thema als je de stylesheet van het hoofd thema wil importeren.

Opmerking: De stylesheet van het child thema wordt geladen na het hoofd thema en de stijlen overschrijven die van het hoofd thema's stylesheet.

(Als je WordPress draait als multi-site, zal je naar het network admin dashboard moeten gaan, dan thema's, dan klik Netwerk activeren. Daarna ga je naar je reguliere admin dashboard en gebruik bovenstaande stap om je child thema te activeren)

Template bestanden

Als je meer dan alleen de stylesheet wilt wijzigen, kan je child thema bestanden overschrijven van het hoofd thema: gebruik een bestand met dezelfde naam in de map van je child thema en het zal hetzelfde bestand in de map van het hoofd thema overschrijven als je site geladen wordt. Bijvoorbeeld als je de PHP code voor de header wilt wijzigen, gebruik je een bestand header.php in de map van je child thema. Dit bestand wordt dan gebruikt in plaats van header.php uit de map van je hoofd thema.

Je kan ook bestanden gebruiken in je child thema die niet aanwezig zijn in je hoofd thema. Bijvoorbeeld kan je een meer specifiek template bestand gebruiken dan in je hoofd thema 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 child thema niet de versie van het hoofd thema overschrijven. In plaats daarvan is het geladen als uitbreiding voor de functions.php van het hoofd thema. (Om specifiek te zijn wordt het geladen voordat het hoofd thema bestand wordt geladen.)

Op die manier zal functions.php van een child thema een slimme, probleemloze methode zijn om de functionaliteit van het hoofd thema aan te passen. Stel je wil een PHP functie toevoegen aan je thema. De snelste manier is om het bestand functions.php te openen en de functie hier te plaatsen. Dat is niet slim: De volgende keer als het hoofd thema word bijgewerkt zal je functie verdwenen zijn. Maar er is een alternatieve manier wat de slimme manier is: je kan een child thema maken een bestand functions.php toevoegen en je functie aan dat bestand toevoegen. De functie zal exact hetzelfde werken met het voordeel dat het niet wordt aangetast bij toekomstige updates van het hoofd thema. Kopieer niet de hele inhoud van de functions.php van het hoofd thema in de functions.php van je child thema.

De structuur van functions.php is simpel: Een openende PHP tag bovenin, een sluitende PHP tag onderaan en daar tussen je PHP code. Daarin kan 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 de head element van HTML pagina's.

<?php //Openende PHP tag

// Custom Function to Include
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'favicon_link' );

?> //Sluitende PHP tag

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

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

Op die manier kan een child thema een PHP functie van het hoofd thema vervangen door het simpel eerder te declareren.

Toevoegen van bestanden in je child thema

Als je bestanden moet toevoegen welke zich in de mappenstructuur van je child thema bevinden, moet je get_stylesheet_directory() gebruiken. Omdat de style.css van het hoofd thema is vervangen door de style.css van je child thema en je style.css bevindt zich in de bron van je child thema's submap, get_stylesheet_directory() verwijst naar de map van je child thema (niet de map van het hoofd thema).

Hier is een voorbeeld gebruikmakend van require_once dat toont hoe je get_stylesheet_directory kan gebruiken om een bestand in de mappenstructuur van je child thema toe te voegen.

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

Andere nuttige informatie

Gebruik Post Formats

Een child thema overerft post formats zoals gedefinieerd door het hoofd thema. Als je een child thema maakt, let dan op dat add_theme_support('post-formats') gebruiken de formaten van het hoofd thema zal overschrijven in plaats van het toe te voegen aan het hoofd thema.

RTL ondersteuning

Om RTL talen te ondersteunen, voeg een rtl.css bestand toe aan je child thema 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 om het rtl.css bestand toe te voegen aan je child thema, zelfs als het hoofd them geen rtl.css bestand heeft.

Internationalization

Child themes, much like other extensions, may be translated into other languages by using gettext functions. For an overview, please see Translating WordPress & I18n for WordPress Developers.

To internationalize a child theme follow these steps:

  • Add a languages directory.
    • Something like my-theme/languages/.
  • Add language files.
    • Your filenames have to be he_IL.po & he_IL.mo (depending on your language), unlike plugin files which are domain-he_IL.xx.
  • Load a textdomain.
    • Use load_child_theme_textdomain() in functions.php during the after_setup_theme action.
    • The text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme.
  • Use GetText functions to add i18n support for your strings.

Example: textdomain

<?php
/**
 * Setup My Child Theme's textdomain.
 *
 * Declare textdomain for this child theme.
 * Translations can be filed in the /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' );
?>

Example: gettext functions

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


To sum up, all strings that use "my-child-theme" textdomain will be translatable. The translation files must reside in "/languages/" directory.

Resources