Share
Een van de eerste dingen die me opviel toen ik begon te gebruiken WordPress was hoe goed het de mantra van de ontwikkelaar gebruikt, "Separation of Concerns." In de programmeerwereld wilt u dat elke component zo weinig mogelijk vertrouwt op de andere componenten; dit maakt elk onderdeel herbruikbaarder. Een perfect voorbeeld hiervan in WordPress is Thema's. Ze scheiden het ontwerp volledig van de inhoud. We kunnen het thema veranderen en de inhoud blijft ongewijzigd. WordPress doet iets soortgelijks met hoe we kunnen voortbouwen op thema's in WordPress. In plaats van een bestaand thema te wijzigen (en het risico loopt de wijzigingen bij de volgende update te verliezen), kunnen we een kindthema maken, dat onze wijzigingen van de ouder scheidt. In deze zelfstudie laat ik je zien hoe je een eenvoudig kindthema maakt.
Van de WordPress Codex:
In wezen betekent dit dat we kunnen voortbouwen op het hoofdthema zonder de bestanden aan te passen. We kunnen de CSS wijzigen, een aangepast berichttype toevoegen of een eigen set functies bouwen. Dit is ook de aanbevolen manier om een thema te maken op basis van een ander thema.
Afgezien van kindthema's, zijn er twee andere manieren waarop we een thema kunnen maken dat is gebaseerd op een ander thema. De eerste manier is om dat thema gewoon te wijzigen. Als we dat echter doen en het thema wordt bijgewerkt, verliezen we al onze wijzigingen. De tweede manier is om dat thema naar een andere map te kopiëren en van thema te gaan. We zouden het thema niet verloren hebben (op voorwaarde dat we het de juiste naam geven), maar we zouden duplicaten hebben van alle bestanden, zelfs degene die we niet hebben aangepast.
"Een WordPress-thema voor kinderen is een thema dat de functionaliteit van een ander thema overneemt, het hoofdthema genoemd, en waarmee u de functionaliteit van dat bovenliggende thema kunt wijzigen of toevoegen."
In deze tutorial zullen we het nieuwste standaardthema aanpassen (vanaf 3.2), Twenty Eleven
Het eerste wat we willen doen na het upgraden van WordPress naar 3.2 of het downloaden en installeren van Twenty Eleven is het maken van een eigen directory voor ons kindthema. In / Wp-content / themes / maak de map aan twentyeleven-kind. We kunnen nu beginnen met het toevoegen van bestanden aan ons kindthema.
Er is slechts één vereist bestand bij het maken van een kindthema: style.css. Hier zullen we ons thema verklaren en ook aan WordPress vertellen dat het het kind van een ander thema is. Maak style.css in de map twentyeleven-child en voeg de volgende regels toe:
/ * Naam van het thema: Twenty Eleven Child Theme URI: http: //example.com/ Beschrijving: thema voor kinderen voor het thema Twenty Eleven Auteur: Uw naam Author URI: http: //uw-site.com/ Sjabloon: twentyeleven Versie: 0.1.0 * /
De meeste van de bovenstaande informatie is wat je prima vindt in elk ander thema: het is naam, link, auteurskrediet en versie. Er is echter ook een regel voor Sjabloon. Hier vertelt u WordPress wat het moet gebruiken voor het bovenliggende thema. Het moet de naam van de map van het bovenliggende thema, en het is hoofdlettergevoelig.
Een ding om op te letten voordat we beginnen met het toevoegen van onze eigen aangepaste CSS: het style.css-bestand van ons kindthema zal de ouder volledig overschrijven. Daarom moet onze eerste regel na de info over de themalelding de CSS van de ouder importeren:
Accentsconagua
@import url ("? /twentyeleven/style.css"); We zijn nu klaar om de CSS van de ouder te wijzigen. Terwijl we hier een paar eenvoudige wijzigingen gaan aanbrengen, zou je, als je meer geavanceerde bewerkingen zou willen doen, voorstellen om Firefox met Firebug of Google Chrome's Developer Tools te gebruiken om je te helpen. Ze zijn best handig! Voeg voor nu de volgende regels toe aan uw style.css-bestand, onder de @importeren lijn:
een color: # 254655; body background: # 727D82; header # branding background: # 29305C; kleur: # B3BDC1; header # branding h1, header # branding h2, header # branding a color: # B3BDC1; #respond background: # E7DFD6;
Deze regels veranderen de achtergrond en de lettertypekleur van de tekstvakken body, header en comment. U kunt natuurlijk net zoveel spelen als u: -)
Als ik WordPress-themabestanden rangschik in volgorde van belangrijkheid, zou ik style.css en index.php als eerste in een gelijkspel zetten, omdat je ze nodig hebt om te draaien. Op de tweede plaats zou ik functions.php zetten. Het functions.php-bestand is de manier waarop u aangepaste functionaliteit aan uw thema toevoegt: aangepaste typen, menu- en miniatuurondersteuning, extra zijbalken en wijzigingen voor de lus, onder andere.
Hoewel functions.php niet vereist is voor een kindthema (onthoud dat style.css het enige vereiste bestand is), is dit de beste manier om in je eigen functionaliteit toe te voegen. En in tegenstelling tot style.css, dat de style.css van de ouder overschrijft, wordt de functie functions.php van ons kind geladen voor de ouders. We gaan een widgetgebied voor de header maken en een van de ingebouwde functies van Twenty Eleven opheffen.
Eerst voegen we het widgetgebied toe. Creëer je functions.php en voeg de volgende code toe:
__ ('Header Widget', 'twentyeleven-child'), 'id' => 'header-widget', 'before_widget' => '',' after_widget '=> "", 'before_title' => '',' after_title '=>'
',)); ?> Dit registreert het widgetgebied dat we in de volgende stap aan de kop toevoegen.
Nu zullen we een van de ingebouwde Twenty Eleven-functies negeren. De makers van Twenty Eleven maakten het heel gemakkelijk voor ontwikkelaars van onderliggende thema's om hun functies te negeren, omdat ze eerst controleren of er een functie met dezelfde naam bestaat. Bekijk het voorbeeld in twentyeleven / functions.php die we zullen aanpassen:
if (! function_exists ('twentyeleven_posted_on')): / ** * Drukt HTML af met meta-informatie voor de huidige datum / tijd en auteur. * Maak je eigen twentyevenevende_on om te negeren in een kindthema * * @since Twenty Eleven 1.0 * / function twentyeleven_posted_on () printf (__ ('geplaatst op door % 7 $ s',' twentyeleven '), esc_url (get_permalink ()), esc_attr (get_the_time ()), esc_attr (get_the_date (' c ')), esc_html (get_the_date ()), esc_url (get_author_posts_url (get_the_author_meta (' ID '))) , sprintf (esc_attr __ ('Bekijk alle berichten van% s', 'twentyeleven'), get_the_author ()), esc_html (get_the_author ())); stop als; Merk op hoe de eerste regel controleert of er een functie is met de naam twentyeleven_posted_on () eerste. Door een functie met die naam in de functions.php van ons kindthema te plaatsen, vervangen we de functie van het ouderthema.
Opmerking voor thema-ontwikkelaars:Als u uw thema gemakkelijker wilt maken voor ontwikkelaars van kinderthema's ('plugable'), moet u de lead van Twenty Eleven volgen en ervoor zorgen dat een functie met dezelfde naam niet bestaat voor al uw aangepaste functies!
De functie drukt een regel na de berichttitel af met de datum en de verborgen auteursinformatie. We zullen deze regel een beetje veranderen met dezelfde functieaanroep. Voeg de volgende code toe aan uw functions.php het dossier:
function twentyeleven_posted_on () $ link = esc_url (get_permalink ()); $ title = esc_attr (get_the_title ()); $ time = esc_attr (get_the_time ()); $ dateGMT = esc_attr (get_the_date ('c')); $ date = esc_html (get_the_date ()); $ authorURL = esc_url (get_author_posts_url (get_the_author_meta ('ID'))); $ author = esc_html (get_the_author ()); echo ('geplaatst op door '$ Auteur.''); Het eerste wat we deden was alle waarden die we gebruiken in variabelen. Dit is een persoonlijke voorkeur van mij, omdat ik vind dat de code wat makkelijker te lezen is. Zoals je ziet hebben we hier niet te veel veranderd. Eerst hebben we zowel de tijd als de datum geprint. Ten tweede hebben we de naamregel opgeheven, zodat mensen de link naar de andere posts van de auteur kunnen zien.
Nogmaals, hoewel we niet echt baanbrekend werk verrichtten, konden we demonstreren hoe een [correct gecodeerde] aangepaste themafunctie kon worden vervangen. Laten we nu naar de eigenlijke sjabloonbestanden gaan!
Het laatste dat ik hier wil bespreken, zijn sjabloonbestanden voor het kindthema. Misschien willen we de header van de site of de single-post-loop wijzigen of zelfs een archiefpagina toevoegen. Dat en meer is mogelijk met behulp van kindthema's. We zouden gewoon ons bestand dezelfde naam noemen als welk bestand we ook in de ouder willen vervangen. Deze bestanden, zoals style.css, overschrijven het bestand van de ouder. We zullen de koptekst aanpassen en een nieuwe paginasjabloon maken.
Eerst doen we de header. creëren header.php, kopieer de code van twentyeleven / header.php en plak het in ons header.php bestand. Zodra we dat doen, gaan we de regels 104 en 109 vervangen () met de volgende functieaanroep:
Nu voegen we de volgende code toe aan ons functions.php-bestand:
function techild_header_widget () if (! dynamic_sidebar ('header-widget')): get_search_form (); stop als; Deze code zorgt ervoor dat als er widgets in het Header Widget-gebied zijn, we ze laten zien, anders laten we de zoekbalk zien. Ten slotte hebben we een beetje CSS nodig om onze koptekst widget-vriendelijk te maken. Voeg dit toe aan je style.css-bestand:
header # branding .widget position: absolute; top: 2em; rechts: 7,6%;
Hiermee wordt de widget op dezelfde manier gestileerd als het zoekvak, maar wees voorzichtig. Deze methode is niet precies kogelvrij. Het is alleen om modificerende sjabloonbestanden in kindthema's te demonstreren. Dit is ons resultaat:
Vervolgens maken we een nieuwe paginasjabloon. Maak het bestand aan twentyeleven-kind / page-welkom.php en kopieer de code van Twenty Eleven's page.php (twentyeleven / page.php). Het eerste wat we moeten doen is de opmerkingen bovenaan aanpassen zodat WordPress weet dat dit een paginasjabloon is. Vervang de opmerkingen bovenaan door dit:
/ ** * Sjabloonnaam: Welkom * /
Wanneer we een nieuwe pagina maken, kunnen we de sjabloon 'Welkom' gebruiken. Wat we nu gaan doen, is een aangepast bericht toevoegen aan de bovenkant van de pagina. Je hele bestand zou er als volgt uit moeten zien:
Welkom op mijn website! Ik voer een aanpassing uit van het Twenty Eleven-thema van WordPress. Voel je vrij om een beetje rond te snuffelen!
Merk op dat tussen de #primary en #content divs, we een div hebben toegevoegd met de klas welkom. Laten we naar ons style.css-bestand gaan en er CSS voor toevoegen:
.welkom margin: 15px 60px; achtergrond: # fbffd8; rand: 1px vast # f6ff96; opvulling: 15px; text-align: center;
Ons eindresultaat zou er als volgt uit moeten zien:
Ik wil vermelden dat de betere manier om dit te doen zou zijn om een aangepast veld aan die sjabloon toe te voegen, maar zoals ik al eerder zei, ik wilde dingen simpel houden, zodat we ons konden concentreren op het creëren van het kindthema.
Hoewel het bericht er iets langer over zou doen om de code in elk van de bestanden opnieuw te vermelden, heb ik het kindthema toegevoegd dat je kunt downloaden. Het is duidelijk dat we net het oppervlak van het maken van kind-thema's hebben bekrast; mijn doel was om u een goed idee te geven hoe u er een kunt maken op basis van hoe WordPress elk type bestand afhandelt. Een ding om op te merken is dat wanneer u verwijst naar afbeeldingen of andere bestanden van uw kindthema, u deze moet gebruiken get_stylesheet_directory_uri () in tegenstelling tot get_template_directory_uri () zoals de laatste zal linken naar het hoofdthema.
Vergeet niet dat je een kindthema kunt maken vanuit elk WordPress-thema. Er zijn echter ook een heleboel themakaders waar we vrij diepgaande kindthema's van kunnen maken. Enkele van de meer populaire zijn Carrington, Thematic en Thesis. Ze hebben allemaal een leercurve, maar ze zijn allemaal erg krachtig!
