Hoe maak je een WordPress Child Theme (Video)

Bent u op zoek naar een kindthema in WordPress? Zodra u de basisprincipes van WordPress heeft geleerd, wilt u waarschijnlijk leren hoe u uw WordPress-site kunt aanpassen. Wij zijn van mening dat kindthema’s een goed startpunt zijn voor iedereen die WordPress-thema’s wil aanpassen. In dit artikel laten we u zien hoe u een kindthema maakt in WordPress.


Een eenvoudig WordPress-kinderthema gebaseerd op Twenty Thirteen

Video-instructies:

Abonneer u op WPBeginner

Voor degenen die de video niet willen bekijken, kun je het onderstaande artikel verder lezen.

Waarom u een kindthema moet maken?

Kinderthema’s worden beschouwd als de beste manier om uw WordPress-thema’s aan te passen. Een kindthema erft alle kenmerken en het uiterlijk van het ouderthema. U kunt het aanpassen zonder het ouderthema te beïnvloeden. Hiermee kunt u het bovenliggende thema eenvoudig bijwerken zonder dat u zich zorgen hoeft te maken dat u uw wijzigingen verliest.

U kunt meer leren over kindthema’s in ons artikel Wat is een WordPress Child Theme? Voors, tegens en meer.

Vereisten

Een basiskennis van CSS / HTML is vereist, zodat u uw eigen wijzigingen kunt aanbrengen. Enige kennis van PHP zou zeker helpen. Als je goed bent in het kopiëren en plakken van codefragmenten uit andere bronnen, dan zou dat ook werken.

We raden je aan om te oefenen op je lokale ontwikkelomgeving. U kunt een live WordPress-site voor testdoeleinden naar de lokale server verplaatsen of dummy-inhoud gebruiken voor thema-ontwikkeling.

Ermee beginnen

Elk goed WordPress-thema kan als ouderthema worden gebruikt. Er zijn echter veel verschillende soorten thema’s en sommige zijn misschien niet de gemakkelijkste om mee te werken. Omwille van deze tutorial gebruiken we Twenty Thirteen, een van de standaard WordPress-thema’s.

Uw eerste kindthema maken

Eerst moet je / wp-content / themes / openen in je WordPress-installatiemap en een nieuwe map voor je kind maken. U kunt deze map een willekeurige naam geven. Voor deze tutorial noemen we het wpbdemo.

Een nieuw WordPress Child Theme maken

Open een teksteditor zoals Kladblok en plak deze code:

/ *
Themanaam: WPB Child Theme
Thema-URI: https://www.wpbeginner.com/
Beschrijving: A Twenty Thirteen child theme
Auteur: WPBeginner
Auteur URI: https://www.wpbeginner.com
Sjabloon: twintig dertien
Versie: 1.0.0
* /

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

Sla dit bestand nu op als style.css in de onderliggende themamap die u zojuist hebt gemaakt.

De meeste dingen in dit bestand spreken voor zich. Waar je echt op wilt letten, is de sjabloon: twintig dertien.

Dit vertelt WordPress dat ons thema een subthema is en dat de naam van onze ouderthema-directory twintig is. De naam van de bovenliggende map is hoofdlettergevoelig. Als we WordPress voorzien van Template: TwentyThirteen, dan werkt het niet.

De laatste regel in deze code importeert de stylesheet van ons bovenliggende thema naar het onderliggende thema.

Dit is de minimumvereiste voor het maken van een kindthema. Je kunt nu naar Uiterlijk »Thema’s waar je WPB Child Theme zult zien. U moet op de knop Activeren klikken om het kindthema op uw site te gaan gebruiken.

Het activeren van uw WordPress child-thema

Aangezien u nog niets heeft gewijzigd in uw kindthema, gebruikt uw site alle functionaliteit en het uiterlijk van het bovenliggende thema.

Het thema van uw kind aanpassen

Elk WordPress-thema heeft een style.css-bestand in hun hoofddirectory. Meestal is dit het belangrijkste stylesheet van uw thema waar alle CSS naartoe gaat. Sommige thema’s bevatten echter mogelijk alleen de koptekstinformatie van het thema. Dergelijke thema’s hebben meestal CSS-bestanden in een aparte map.

Voor deze sectie heb je een beetje kennis van CSS nodig.

Google Chrome en Firefox worden geleverd met ingebouwde inspectietools. Met deze tools kunt u de HTML en CSS achter elk element van een webpagina bekijken.

Als u de CSS die voor het navigatiemenu wordt gebruikt wilt zien, ga dan met uw muis naar het navigatiemenu en klik met de rechtermuisknop om Inspect Element te selecteren.

Met behulp van Inspect Element-tool in Google Chrome

Hierdoor wordt uw browserscherm in twee delen gesplitst. Onderaan het scherm ziet u de HTML en CSS voor de pagina.

Chrome-inspecteur met gerenderde HTML- en CSS-stijlregels

Terwijl u uw muis op verschillende HTML-regels beweegt, zal Chrome-inspecteur ze in het bovenste venster markeren. Zoals je kunt zien, hebben we het navigatiemenu geselecteerd in de bovenstaande schermafbeelding.

Het toont u ook de CSS-regels met betrekking tot het gemarkeerde element in het venster aan de rechterkant.

U kunt proberen de CSS daar te bewerken om te zien hoe deze eruit zou zien. Laten we proberen de achtergrondkleur van .navbar te wijzigen in # e8e5ce.

Spelen met CSS in Chrome Inspector

Je zult zien dat de achtergrondkleur van de navigatiebalk verandert. Als je dit leuk vindt, kun je deze CSS-regel kopiëren en in het style.css-bestand van je Child Theme plakken.

.navbar {
achtergrondkleur: # e8e5ce;
}

Sla de wijzigingen die u hebt aangebracht op in het style.css-bestand en bekijk vervolgens uw site.

Herhaal het proces voor alles wat je zou willen veranderen in de stylesheet van je thema. Hier is de complete stylesheet die we hebben gemaakt voor het kindthema. Voel je vrij om te experimenteren en het aan te passen.

/ *
Themanaam: WPB Child Theme
Thema-URI: https://www.wpbeginner.com
Beschrijving: A Twenty Thirteen child theme
Auteur: WPBeginner
Auteur URI: https://www.wpbeginner.com
Sjabloon: twintig dertien
Versie: 1.0.0
* /

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

.Pagina Titel {
opvulling: 30px 0 30px;
}

.site-header .home-link {
min-height: 0px;
}

.navbar {
achtergrondkleur: # e8e5ce;
}

.widget {
achtergrondkleur: # e8e5ce;
}
.site-footer {
achtergrondkleur: # d8cdc1;
}
.site-footer .sidebar-container {
achtergrondkleur: # 533F2A
}

De sjabloonbestanden bewerken

Twintig dertien lay-out

Elk WordPress-thema heeft een andere lay-out. Laten we eens kijken naar de indeling van het Twenty Thirteen-thema. U hebt koptekst, navigatiemenu’s, inhoudslus, widgetgebied voettekst, secundair widgetgebied en voettekst.

Elk van deze secties wordt afgehandeld door verschillende bestanden in de map twintig. Deze bestanden worden sjablonen genoemd.

Deze sjablonen zijn meestal genoemd naar het gebied waarvoor ze worden gebruikt. De voettekstsectie wordt bijvoorbeeld meestal afgehandeld door het footer.php-bestand, de koptekst en de navigatiegebieden worden afgehandeld door het header.php-bestand. Sommige gebieden, zoals het inhoudsgebied, worden afgehandeld door meerdere bestanden die inhoudssjablonen worden genoemd.

Eerst moet u het themabestand selecteren dat u wilt wijzigen en het vervolgens kopiëren naar uw kindthema.

U wilt bijvoorbeeld de link ‘powered by WordPress’ verwijderen uit het voettekstgebied en daar een copyrightvermelding toevoegen. Kopieer eenvoudig het footer.php-bestand in uw kindthema en open het vervolgens in een gewone teksteditor zoals kladblok. Zoek uit welke regels u wilt verwijderen en vervang ze door uw eigen regels. Zoals dit:

<?php
/ **
* De sjabloon voor het weergeven van de voettekst
*
* Bevat footer-inhoud en het sluiten van de #main- en #page-div-elementen.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
* /
?>

<?php get_sidebar (‘main’); ?>

© Copyright <?php echo date (Y); ?> <?php bloginfo (‘naam’); ?> Alle rechten voorbehouden.



<?php wp_footer (); ?>

In deze code hebben we Twenty Thirteen credits vervangen door een copyrightvermelding.

Problemen oplossen is een stuk eenvoudiger bij het maken van onderliggende thema’s. Als u bijvoorbeeld per ongeluk iets hebt verwijderd dat uw ouderthema vereist, kunt u het bestand eenvoudig verwijderen uit uw kindthema en opnieuw beginnen.

Nieuwe functionaliteit toevoegen aan kindthema

Je zult veel WordPress-tutorials vinden waarin je wordt gevraagd om het codefragment te kopiëren en te plakken in het functions.php-bestand van je thema.

Door codefragmenten toe te voegen aan het functies.php-bestand van een ouderthema, worden uw wijzigingen overschreven wanneer er een nieuwe update voor het ouderthema is. Dit is waarom het altijd wordt aanbevolen om een ​​kindthema te gebruiken en al uw aangepaste codefragmenten toe te voegen aan het functies.php-bestand van het kindthema.

Laten we een nieuw bestand maken in de map van je kindthema en het functies.php noemen. In dit voorbeeld gaan we een klein codefragment toevoegen dat de standaardkopafbeelding verandert in onze eigen, op maat gemaakte afbeelding.

We hebben al een koptekstafbeelding en een miniatuur gemaakt door Twenty Thirteen’s standaard koptekstafbeelding te bewerken. Vervolgens hebben we het geüpload naar ons kindthema in / images / headers / folder.

Daarna moeten we WordPress vertellen om deze afbeelding te gebruiken als de standaardkopafbeelding voor ons thema. We kunnen dat doen door dit codefragment toe te voegen aan het functies.php-bestand van ons kindthema:

<?php
functie wpbdemo_custom_header_setup () {

add_theme_support (‘custom-header’, array (‘default-image’ => ‘% s / images / headers / circle-wpb.png’));

register_default_headers (array (
‘karamel’ => matrix (
‘url’ => ‘% 2 $ s / images / headers / circle-wpb.png’,
‘thumbnail_url’ => ‘% 2 $ s / images / headers / circle-wpb-thumbnail.png’,
‘description’ => __ (‘Caramel’, ‘Caramel header’, ‘twintig dertien’)
),
));

}
add_action (‘after_setup_theme’, ‘wpbdemo_custom_header_setup’);
?>

Als je nu komt Uiterlijk »Koptekst, ziet u de afbeelding die we hebben toegevoegd als standaardafbeelding.

De koptekst van het thema wijzigen in uw WordPress Child Theme

Je kunt elk aangepast codefragment toevoegen dat je nodig hebt in het functies.php-bestand van je kindthema. Bekijk deze 25+ uiterst nuttige trucs voor het bestand met WordPress-functies.

Probleemoplossen

Als beginners wordt van u verwacht dat u fouten maakt bij het werken aan uw eerste kindthema. Geef het gewoon niet te snel op. Bekijk onze lijst met meest voorkomende WordPress-fouten om een ​​oplossing te vinden.

De meest voorkomende fout die u zou zien, is waarschijnlijk de syntaxisfout die meestal optreedt wanneer u iets in de code hebt gemist. Hier is een korte handleiding waarin wordt uitgelegd hoe u de syntaxisfout in WordPress kunt vinden en oplossen.

Eindresultaat

Een eenvoudig WordPress-kinderthema gebaseerd op Twenty Thirteen

Demo-thema downloaden

U kunt het eindresultaat van onze WordPress-tutorial over kindthema’s downloaden door hier te klikken. Onthoud dat dit een heel basaal kindthema is, gebaseerd op Twenty Thirteen.

Andere kindthema’s gebaseerd op Twenty Thirteen

Hier zijn enkele andere WordPress-kindthema’s gebaseerd op Twenty Thirteen. Bekijk ze eens en zie hoe deze thema-ontwikkelaars Twenty Thirteen hebben aangepast.

Holi

Holi - Een WordPress-kinderthema gebaseerd op Twenty Thirteen

kersenbloesem

Cherry Blossom - Twenty Thirteen Child Theme

2013 Blauw

2013 Blauw

Platte portefeuille

Platte portefeuille

We hopen dat dit artikel je heeft geholpen om te leren hoe je een WordPress child-thema kunt maken. Vergeet niet dat er voldoende ondersteuning beschikbaar is voor degenen die het nodig hebben.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map