Een gids voor WordPress Ontwikkeling van kinderenthema's

Er zijn een aantal redenen waarom WordPress-ontwikkelaars beginnen met het gebruik van kindthema's. Ze geven u de mogelijkheid om een ​​unieke lay-out aan te passen bovenop een ander bestaand thema. Dit is perfect voor beginners die willen spelen met het bouwen van hun eigen thema's.

Bovendien zullen veel premiumontwerpen na verloop van tijd nieuwe updates opleveren. Als u wijzigingen aanbrengt in kernthema-bestanden, worden deze overschreven bij het uitvoeren van een update, maar de onderliggende thema's zijn gescheiden en netjes weggestopt. Dit betekent dat u bestaande premium-thema's kunt opbouwen en veel tijd kunt besparen in het proces.

In deze gids wil ik de basisbegrippen van het bouwen van een WordPress-kindthema introduceren en waarom het zo'n goed idee is.

Ermee beginnen

Kindenthema's zijn niet zo moeilijk als ze kunnen lijken. De voordelen van het werken met een bovenliggend thema betekent dat u niet alle HTML / CSS helemaal opnieuw hoeft te schrijven. Een kindthema gebruikt automatisch alle sjabloonbestanden die u opneemt, zoals sidebar.php of footer.php. Maar als ze ontbreken, zal het thema van uw kind dezelfde bestanden ophalen van het bovenliggende bestand.

Deze functionaliteit biedt een enorme hoeveelheid vrijheid om bestaande sjablonen aan te passen. Het is ook geweldig voor het bijwerken van gebieden rond uw website voor speciale evenementen, zoals het toevoegen van ontwerppatronen voor Kerstmis of Oud en Nieuw.

Uw vereiste bestanden

U hebt slechts één .css-stylesheet nodig om een ​​kindthema in WordPress in te stellen. U moet ook een nieuwe map maken in de / Wp-content / themes map die het thema van uw kind zal huisvesten. Let op dat je zijn niet het creëren van deze map binnen het bovenliggende thema, maar pal naast het in dezelfde themamap.

Ontwikkelaars bevatten vaak een functions.php en screenshot.png in dezelfde map als uw nieuwe CSS-bestand. Het screenshot wordt weergegeven in uw WordPress-beheerdersdashboard en het functiethema-bestand kan worden gebruikt voor tonnen achterwaartse wijzigingen.

Maar voor nu zouden we ons moeten focussen op de belangrijkste stylesheet. Dit wordt gewoonlijk genoemd style.css en bevat een commentaarkop met belangrijke meta-informatie. Dit is belangrijk omdat uw thema alleen als een kind wordt weergegeven als u de mapnaam van de bovenliggende map opneemt. Hieronder ziet u een voorbeeld van een koptekstcommentaar:

 / * Theme Name: Twenty Eleven Child Theme URI: http: //example.com/ Beschrijving: Kindthema voor het ontwerp Twenty Eleven Auteur: Jake Rocheleau Auteur URI: http: //www.hongkiat.com/blog/ Sjabloon: twentyeleven Versie: 0.1 * / 

De waarde voor sjabloon moet de mapnaam zijn voor het begeleidende bovenliggende thema. Verder moeten alle andere tags bekend zijn met standaard WordPress-thema's.

Hoewel alle bovenliggende PHP-sjablonen zullen worden gebruikt, zal de style.css van de oorspronkelijke ouder dit wel doen niet automatisch worden geïmporteerd. Als u de originele stijlen wilt uitwerken, moet u dit opnemen bovenaan het styles.css-document van uw kind. Hieronder een voorbeeld met het WP Twenty Eleven-thema.

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

Nieuwe stijlen instellen

Het toepassen van CSS-regels op uw thema is net zo eenvoudig als het bewerken van het origineel. Als u weet welke elementen u moet targeten, gebruikt u dezelfde selectors in uw eigen kindthema.

We konden demo's maken met een aantal zeer eenvoudige wijzigingen in links en alinea's. Ik heb code uit het oorspronkelijke Twenty Eleven-thema gebruikt om de verschillende elementen te targeten. Soms is het nodig om een ​​specifiekere selector te gebruiken om het oudere ontwerp op te heffen.

 lichaam opvulling: 0 1,4em;  #page margin: 1.667em auto; maximale breedte: 900 px;  a color: # 5281df; tekstdecoratie: geen; font-family: Calibri, Tahoma, Arial, sans-serif;  a: focus, a: active, a: hover text-decoration: onderstrepen;  

Bij deze wijzigingen heb ik de totale lichaamslengte verminderd en ook wat opvulling van de randen verwijderd. Al deze selectors zijn te vinden in het originele .css-document. Het is opmerkelijk dat ik ook een aantal eigenschappen wijzig voor alle ankerlinks die een andere lettertypestapel en kleurkeuze bevatten.

De! Belangrijke dingen

CSS heeft een speciale verklaring om de prioriteit boven andere stijlen te markeren. De syntaxis wordt weergegeven als !belangrijk beginnend met het uitroepteken en eindigend aan het einde van uw CSS-eigenschap. Dit is nodig als je overlopende stijlen van een bovenliggend thema hebt die je eigen aangepaste regels overschrijven.

 een color: # 5281df! belangrijk; tekstdecoratie: geen; font-family: Calibri, Tahoma, Arial, sans-serif;  

Hierboven heb ik mijn originele wijzigingen gekopieerd en de ankertekstkleur bewerkt met een belangrijke clausule. Dit heeft voorrang op alle andere stijlen van dezelfde selectordiepte. Meer gedefinieerde elementen (zoals #access li: hover> a) zullen gewoonlijk hun eigen stijlen behouden tenzij de kleur was nog steeds overgenomen van onze oorspronkelijke selector. In dit geval stelt ons bovenliggende thema geen font-family-property in op anchor-links, dus we komen dus geen overervingsproblemen tegen.

Als u problemen ondervindt bij het maken van uw wijzigingen, kunt u een van deze belangrijke markeringen aan het einde van uw eigenschapsinstructie laten verschijnen. Dit is geen perfecte oplossing voor elk overervingsprobleem, maar het komt veel vaker van pas dan je zou denken.

Functies klonen.php

In tegenstelling tot het hoofd stylesheet, zal uw kindthema de functies van zijn ouder automatisch importeren. Dit betekent dat je niet hoeft te kopiëren over een van de PHP-code om deze nog steeds actief te hebben in je nieuwe thema. Maar als je een aantal van de functies opnieuw wilt definiëren, kun je nog een andere functie.php maken en in je nieuwe code schrijven met eventuele wijzigingen.

Als voorbeeld heb ik een functie gebouwd die een paar JavaScript-bestanden parseert wanneer de sjabloon begint. Hiermee worden alle oudere versies van jQuery- en SWFObject-scripts verwijderd, terwijl tegelijkertijd de nieuwste versies aan de. Worden toegevoegd wp_head Gebied.

 // wachtrij js-bestanden voor laadfunctie mytheme_js () if (is_admin ()) retour; wp_deregister_script ( 'jquery'); wp_register_script ('jQuery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ( 'jquery'); wp_deregister_script (SWFObject); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script (SWFObject);  add_action ('init', mytheme_js); 

Ik zou erop willen wijzen dat als u code van de parent functions.php importeert, u dan een andere functienaam moet gebruiken. Anders geeft PHP een fatale fout en moet je FTP naar de server FTP om de fout te herstellen.

Werken met themabestanden

De meest brede categorie van thema's is het maken van aangepaste lay-outs en paginatypen. Uw child-thema zal standaard alle themabestanden van de ouder overnemen. Maar u hebt de mogelijkheid om nieuwe onderliggende themabestanden te maken en WP registreert deze als de 'primaire' sjabloon.

Bijvoorbeeld archive.php en index.php worden gebruikt om respectievelijk het postarchief en het homepage-scherm weer te geven. Als er wijzigingen zijn die u wilt aanbrengen en die wijzigingen in de HTML vereisen, kunt u veiliger de parent-bestanden klonen en deze bewerken in de themadirectory van het kind.

Aangepaste paginasjablonen

Hoewel we het hebben over sjabloonbestanden, wil ik ook een stukje WordPress-functionaliteit introduceren waar velen niet bekend mee zijn. U kunt pagina- en berichtsjablonen maken die u kunt selecteren in het beheerdersdashboard wanneer u nieuwe inhoud maakt. Zelfs als het bovenliggende thema niet het nieuwe aangepaste sjabloonbestand bevat, zal WordPress het kind nog steeds gebruiken in plaats van een page.php of single.php.

Maak eerst een nieuw bestand met de naam page-offer.php. Dit zal een zijn “speciale aanbieding” promotiepagina met een ander thema dan alle andere. Hier kun je de originele paginacode kopiëren of zelfs helemaal vanaf het begin het thema opbouwen. De enige code die we nodig hebben om WordPress op de hoogte te stellen van deze nieuwe sjabloon is een commentaarsetup in PHP.

Een ander alternatief voor deze methode is het maken van aangepaste pagina's genoemd naar het unieke ID-nummer. Dus in plaats van de standaard te laden archive.php voor auteurspagina's kunt u een bestand maken zoals auteur-ID.php waarbij ID het unieke WordPress ID-nummer van de gebruiker is. Hoewel dit systeem meer belastend is, moet u een nieuw sjabloonbestand maken voor elk van de auteurs op uw site.

Het wordt nuttiger als u deze twee technieken kunt combineren met andere sjabloonbestanden. Met name categorieën en tags werken goed met hun eigen themabestanden. Ook als u naar bijlagen in uw inhoud linkt, moet u de verschillende mogelijke sjabloonlay-outs voor elk mime-type overwegen. Ik heb de sjabloonhiërarchie hieronder opgenomen voor een eenvoudige JPEG-afbeeldingbijlage:

• image.php
• jpeg.php
• image_jpeg.php
• attachment.php

Nuttige WordPress-hulpmiddelen

WordPress zelf heeft een veelzijdig plug-insysteem dat een groot aantal aanpassingen kan beheren. Omdat kindthema's zo nieuw zijn, is er (nog) geen sprake van een hele reeks releases van derden. Er zijn echter een aantal hulpmiddelen die u kunt gebruiken om uw ontwikkelingstijd iets korter te maken.

Een voor de hand liggende vermelding is de One-Click Child Theme-plug-in, gebouwd en getest voor de nieuwste WordPress 3.x-versie. Het voegt een menulink toe aan uw Admin “Thema's” sectie om automatisch een kind te maken met behulp van uw huidige actieve thema. Dit is fantastisch als je niet wilt rotzooien met FTP en op zoek bent naar wat nieuwe ideeën.

Als u van plan bent om deze bestanden te bewerken in het admin-paneel, zult u ook genieten van duidelijker accentuering van de syntaxis. Dit wordt standaard niet aangeboden in WordPress, maar u kunt de Advanced Code Editor wel installeren voor een aantal sterk verbeterde functies. Dit maakt het waden door PHP-codeblokken en HTML / CSS een stuk handiger.

Aanvullende bronnen

Samen met alle tips in deze handleiding wil ik een aantal belangrijke links delen voor thema-ontwikkelaars. Er zijn al zoveel geweldige artikelen en gratis kinderthema's die je kunt bekijken om dieper op dit onderwerp in te gaan. Ik heb hieronder een prachtige verzameling van deze bronnen toegevoegd:

• 8 gratis Twenty Eleven Childthema's
• WordPress Online Codex »Kindenthema's
• Hoe een WordPress Child Theme te bouwen met behulp van Hooks en Filters
• Een paar woorden over kindenthema's
• Child-thema's maken, wijzigen en gebruiken in WordPress

Conclusie

Ik hoop dat het proces voor het bouwen van WordPress-thema's voor kinderen na het lezen van dit artikel duidelijker voor je is. Ik heb geprobeerd uit te leggen hoe onderliggende thema's zowel CSS- als PHP-sjablonen van een ouder kunnen erven. Bovendien is het heel eenvoudig om specifieke bestanden te manipuleren en je eigen unieke thema's te maken.

.