Share
Een WordPress-thema is een verzameling sjabloonbestanden waarmee u de gebruikersinterface, het ontwerp, het uiterlijk en het gevoel van de site kunt wijzigen. Een WordPress-thema kan of slechts enkele minimale ontwerpwijzigingen hebben geïmplementeerd of kan zelfs enige geavanceerde logica hebben die het meest recente bericht anders toont dan de anderen of de berichten van een bepaalde categorie in een ander gedeelte op de homepage, etc., etc. WordPress-thema's kunnen variëren van een eenvoudige set bestanden tot een compleet complex raamwerk, zodat daar nog andere thema's bovenop kunnen worden gebouwd. In dit artikel gaan we bekijken hoe je kindthema's voor andere thema's kunt maken om gebruik te maken van de code die wordt geboden door het bovenliggende thema.
Om een kindthema te maken, moeten we eerst een map maken in de wp-content / themes map voor ons kindthema. Dan creëren we een style.css bestand in onze onderliggende themamap zoals hieronder getoond:
/ * Theme Name: My Twenty Eleven Child Theme URI: Description: My Child theme Auteur: Abbas Suterwala Auteur URI: Sjabloon: twentyeleven Versie: 1 * /
Zodra we dit gedaan hebben, zouden we ons thema in de wp-admin kunnen zien zoals hieronder te zien is.
Nu kunnen we ons kindthema activeren. Zodra we ons kindthema activeren en onze blog bekijken, zullen we het allemaal vervormd zien omdat we geen CSS in onze stylesheet hebben verstrekt. Hier gaan we de stijl van het ouderthema gebruiken en hergebruiken en we zullen het gewoon opnemen in ons kindthema. Wijzig vervolgens de onderdelen die we willen wijzigen. In dit geval willen we de achtergrond grijs maken. We zouden de volgende regels moeten toevoegen aan de style.css:
Accentsconagua
// Deze @import-regel laadt de stylesheet van het hoofdthema @import url ("... /twentyeleven/style.css"); // Nu kunnen we stijlen overschrijven van het hoofdthema ... body background: #eeeeee; Als we nu onze blog bekijken, zien we deze zoals hieronder te zien is
Het kindthema moet een bevatten style.css het dossier. Vervolgens kan het onderliggende thema optioneel andere sjabloonbestanden overschrijven zoals author.php, category.php etc. Het WordPress-framework zoekt eerst naar een sjabloonbestand in de onderliggende themadirectory en haalt het vervolgens als het niet wordt gevonden het op uit de bovenliggende map. Het kindthema kan ook zijn eigen thema toevoegen functions.php om zijn eigen functies en functionaliteit toe te voegen naast die van het ouderthema.
Het gebruik van een kindthema heeft vele voordelen, waarvan sommige als volgt zijn:
Een aantal nadelen van kindthema's zijn:
Er zijn veel gratis en commerciële themakaders voor WordPress dan als ouderthema kunnen worden gebruikt. Sommigen van hen zijn generiek en voegen een breed scala aan functionaliteit toe. Er zijn ook themakaders beschikbaar voor specifieke soorten behoeften, zoals het maken van een vastgoedsite of het maken van een productcatalogussite, enz.
Enkele van de gratis populaire themakaders zijn:
Voor een uitgebreidere lijst van WordPress-frameworks kunt u een interessant artikel bezoeken De Starter Guide van Wordpress Theme Frameworks
Nu zullen we het ontwerp van het TwentyEleven-ouderthema veranderen in ons kindthema. Stel dat we nu een lay-out met 2 kolommen willen met de zijbalk aan de rechterkant. In dat geval is de lay-out die we nodig hebben dezelfde als die van het bovenliggende thema. Dus we zullen dat rechtstreeks uit het ouderthema halen en we zullen geen wijzigingen in het kindthema aanbrengen.
Voor mijn kindthema wil ik geen headerafbeelding. In TwentyEleven kan ik de headerafbeelding van de thema-opties wijzigen of verwijderen, zoals hieronder wordt getoond.
Hieronder volgen de wijzigingen in de style.css van het kindthema:
/ * Theme Name: My Twenty Eleven Child Theme URI: Beschrijving: My Child theme Auteur: Abbas Suterwala Auteur URI: Template: twentyeleven Versie: 1 * / @import url ("... /twentyeleven/style.css"); body, invoer line-height: 1.75em; achtergrond: # A9D0D6; lettergrootte: 11.5pt; kleur: # 5A6466; font-family: Kreon, serif; a color: # 2A3436; # sitetitel a font-family: "Open Sans", sans-serif; lettergrootte: 3em; #access background: #FFFFFF; #access a text-transform: hoofdletters; tekstdecoratie: geen; kleur: # 1C1C1C; lettergrootte: 1.2em; #access. current-menu-item> a, #access. current-menu-ancestor> a, #access .current_page_item> a, #access .current_page_ancestor> a background: # F2EBDE; rand: vast 1px # BFB5A4; box-shadow: inzet 0px 0px 0px 1px #fff; tekstschaduw: 1px 1px 0px rgba (255,255,255,0,9); #secondary background: # EEF5F6; opvulling: 20px; rand: vast 1px # D6E0E2; marge: 0 10px 0 0; tekstschaduw: 1px 1px 0px rgba (255,255,255,1); box-shadow: inzet 0px 0px 0px 1px #fff; .widget a text-decoration: onderstrepen; kleur: # 2A3436; .widget a: hover, .widget a: focus, .widget a: active text-decoration: none; # site-generator opvulling: 40px 40px 0 40px; kleur: # 302F2C; achtergrond: # F2EBDE; font-family: Kreon, serif; border-top: vast 1px # BFB5A4; box-shadow: inzet 0px 0px 0px 1px #fff; tekstschaduw: 1px 1px 0px rgba (255,255,255,0,9); .entry-title, .entry-title a font-family: "Open Sans", sans-serif; kleur: # 2A3436; margin-bottom: 1em; font-size: 1.5em; text-transform: hoofdletters; font-gewicht: normaal; .left-sidebar #secondary margin-left: 3%; In de bovenstaande code heb ik de achtergrond gewijzigd met behulp van de body-tag, het ontwerp van de menu-items met behulp van de toegang en de zijbalk met behulp van de secundaire tag. Op vergelijkbare manieren kunt u het ontwerp van elk onderdeel van de ouder aanpassen aan uw behoeften. Het thema ziet er nu zo uit als hieronder:
Voor meer informatie over het maken van een kindthema met TwentyEleven kun je het artikel Creating a Simple Child Theme Using Twenty Eleven raadplegen.
Nu zullen we een kindthema voor Thematisch maken. Zodra we het Thematische thema hebben gedownload en toegevoegd in onze wp-content / themes map zullen we een nieuwe map toevoegen voor ons kindthema genaamd mythematicchildtheme. Binnen de thematische map is er een map thematicsamplechildtheme waarin er voorbeeldbestanden zijn om een kindthema van Thematisch te maken. We kunnen deze bestanden als beginpunt gebruiken en in onze onderliggende themamap plakken.
Thematisch heeft verschillende lay-outs al gedefinieerd die we kunnen gebruiken in ons kind-thema. Voor ons kindthema gebruiken we een 3-colour lay-out. We zullen enkele wijzigingen in het ontwerp van de site aanbrengen die als volgt zijn:
/ * Theme Name: My Thematic Child Theme Theme URI: Description: Dit is een kindthema van thematic created by me Auteur: Abbas Suterwala Auteur URI: Template: thematisch Versie: 1.0 * / / * Reset mijn browser standaardwaarden * / @import url ( '... /thematic/library/styles/reset.css'); / * Pas de basis typografiestijlen * / @import url toe ('... /thematic/library/styles/typography.css'); / * Pas een basis lay-out toe * / @import url ('... /thematic/library/layouts/3c-fixed.css'); / * Pas de basisafbeeldingsstijlen * / @import url toe ('... /thematic/library/styles/images.css'); / * Pas standaard themastijlen en -kleuren toe * / / * Het is beter om default.css naar dit bestand te kopiëren (of een koppeling te maken naar een kopie in uw kindthema) als u iets waanzinnigs gaat doen * / @import url ( '... /thematic/library/styles/default.css'); / * Thema voorbereiden voor plug-ins * / @import url ('... /thematic/library/styles/plugins.css'); lichaam kleur: # 787878; #header background: # 339900; #footer background: # 339900; #siteinfo a: active, #siteinfo a: hover color: # 000000; #siteinfo a color: # 000000; #siteinfo color: # 000000; # blog-title a color: # 000000; # blog-beschrijving color: # 000000; .aside a colour: # 006600; a, a: active, a: hover color: # 006600; .binnen h3 color: # 006600; .entry-title color: # 006600; .entry-title a color: # 006600; .entry-title a: active, .entry-title a: hover color: # 006600; Het thema ziet er als volgt uit:
Thematisch heeft ook veel haken in het themakader waarin het kindthema kan inhaken. Laten we de. Nemen thematic_belowheader hook als voorbeeld en toon de Hello Dolly-songtekst die wordt geleverd met de beroemde plug-in Hello Dolly van Matt Mullenweg die standaard in de WordPress-installatie staat. Laten we eerst de Hello Dolly-plug-in van de beheerder activeren.
Dan in de functions.php Voeg in het onderliggende thema de volgende code toe:
Nu zullen we willekeurig één regel uit de Hello dolly-songtekst op de startpagina weergeven zoals hieronder te zien is:
Thematisch geeft veel haken, waardoor het thema van het kind eenvoudig functies kan toevoegen met behulp van deze haken. Je kunt een lijst met alle haken krijgen van Thematisch op de Themehaken-pagina.
WordPress is een geweldig platform om blogs en sites te bouwen. Het biedt ook de infrastructuur om er plug-in frameworks of themakaders bovenop te maken. De themakaders die bovenop WordPress zijn gebouwd kunnen iemand helpen bij het snel ontwikkelen van een stabiel thema van goede kwaliteit en zullen ook het unieke karakter van uw site intact laten. Dit helpt bij snellere ontwikkelingstijd en lagere kosten. Veel plezier bij het maken van uw WordPress-thema voor kinderen.
