Of u nu gewoon een enigszins aangepast thema of iets compleet unieks wilt maken, het maken van een WordPress-thema voor kinderen kan het ontwikkelingsproces enorm versnellen.
Met kinderthema's kun je beginnen met de basis van een bestaand thema, dus je hoeft niet opnieuw het wiel uit te vinden. Je kunt een thema uitkiezen met de functionaliteit en basislay-out die je nodig hebt, maar pas dan alles aan, net zoals je een geheel nieuw thema zou ontwerpen.
Voor deze zelfstudie maken we een kindthema gebaseerd op het nieuwste WordPress standaardthema, Twenty Eleven. We zullen ook enkele handige plug-ins en andere trucs gebruiken om het nog eenvoudiger te maken om een kindthema te maken.
Je hebt heel eenvoudige HTML- en CSS-kennis nodig, maar het goede nieuws is dat je voor een eenvoudig kindthema geen PHP hoeft te weten! Het gecreëerde thema is erg eenvoudig, maar het geeft je de bouwstenen die je nodig hebt om aan de slag te gaan met het maken van je eigen thema's, zelfs als je nog nooit eerder een WordPress-thema hebt gemaakt!
Hier is een korte blik op het laatste thema dat we gaan maken:
Waarschijnlijk de belangrijkste stap bij het maken van een kindthema is het kiezen van je ouderthema. Voor deze zelfstudie gebruiken we, zoals eerder vermeld, Twenty Eleven. De redenen hiervoor zijn onder andere het feit dat het gemakkelijk toegankelijk is, gratis is, waarschijnlijk al op een bijgewerkte WP-installatie is geïnstalleerd en goed gecodeerd is.
Die laatste is het belangrijkste om rekening mee te houden bij het kiezen van je ouderthema: zorg dat het goed gecodeerd is. De belangrijkste reden hiervoor is dat als je ouderthema goed gecodeerd is, het oneindig veel gemakkelijker zal zijn om een kindthema te maken dat goed gecodeerd is, omdat je geen hacks hoeft te gebruiken om dingen te laten werken.
Telkens wanneer u aanpassingen aan een thema wilt aanbrengen, kunt u beter een kindthema gebruiken in plaats van het bovenliggende thema rechtstreeks te bewerken. Op deze manier zal uw thema niet breken als een update voor het oorspronkelijke thema wordt uitgegeven. En als zowel het hoofdthema als uw thema goed zijn gecodeerd, ziet u waarschijnlijk geen verschillen in het bijgewerkte thema op de voorkant van uw site.
De snelste en gemakkelijkste manier om aan de slag te gaan met een kindthema is om het Kindenthema met één klik inpluggen. Installeer het gewoon, activeer het ouderthema waarop u uw kindthema wilt baseren (als het nog niet actief is) en klik op 'Kindthema' onder Uiterlijk in het WP-dashboard.
Hier voert u een naam in voor uw nieuwe kindthema, een korte beschrijving en uw naam en klikt u op 'Kind maken'. Dat is alles wat er is. Eén woord of waarschuwing: ik kreeg een foutmelding nadat ik op 'Kind maken' had geklikt, maar het onderliggende thema is probleemloos gemaakt.
Je kunt ook een kindthema helemaal zelf maken. Open hiervoor uw gewenste tekst- of code-editor en voer de volgende informatie in (hierbij wordt er rekening mee gehouden dat u het Twenty Eleven-ouderthema gebruikt):
/*Theme Name: Your Child Theme's NameDescription: Your theme's description.Author: Your Name HereTemplate: twentyeleven(optional values you can add: Theme URI, Author URI, Version)*/@import url("../twentyeleven/style.css");
Het gedeelte 'Sjabloon' is wat dit een kindthema maakt in plaats van een regulier thema. Zorg er dus voor dat u de hoofdtekst van het thema goed identificeert.
Voordat je begint met het aanpassen van de CSS van je nieuwe kindthema, moet je eerst de thema-opties bekijken en daar een aantal aanpassingen doen. Het is beter om binnen het bestaande kader van het thema wijzigingen aan te brengen als dat een optie is, omdat het het eenvoudiger maakt om de code van uw thema te beheren.
Voor deze aanpassing heb ik een content-on-left lay-out geselecteerd met een enkele zijbalk en het kleurschema en de standaardlinkkleur (voorlopig) verlaten. Ik heb ook de witte achtergrond, de koptekst met een van de standaardafbeeldingen en de koptekstkleur zwart achtergelaten.
Opmerking: als u de kleurselectie in themakeuzes wilt uitschakelen, voegt u toe !important
naar de kleurspecificaties in uw CSS.
Als u naar de WordPress-themabewerker gaat, ziet u een grotendeels lege stylesheet voor uw nieuwe kindthema. De eerste regel van uw nieuwe CSS-bestand (na de onderliggende thema-informatie) importeert de stijlpagina van het bovenliggende thema. Dit is van vitaal belang en moet bovenaan uw blad blijven staan, anders wordt de bovenliggende stylesheet ongeldig en niet geïmporteerd.
Een ding dat je op dit moment misschien wilt doen, is een betere code-editor-plug-in installeren voor het bewerken van thema's. Kleurgecodeerde syntax maakt het aanzienlijk eenvoudiger om rechtstreeks in WP te coderen, en zal vooral handig zijn voor degenen die gewend zijn om syntaxis te kleuren met externe editors. Mijn persoonlijke keuze is Geavanceerde codebewerker .
U wilt ook een soort teksteditor voor het instellen van ons functions.php-bestand, bij voorkeur een met syntax highlighting.
Dit kan een van de meest frustrerende aspecten zijn van de ontwikkeling van het kindthema: het vinden van welke delen van de code moeten worden bewerkt en die met rust kunnen worden gelaten. Het hele thema van een kindthema is om het maken en onderhouden van thema's eenvoudiger te maken. Daartoe willen we zo min mogelijk nieuwe code maken.
Om dit een stuk eenvoudiger te maken, moet je een plug-in installeren zoals Firebug . Hiermee kunt u op een deel van uw paginaontwerp klikken en de bijbehorende bekijken div
en CSS-klassen. Je kunt ook code uitproberen om te zien wat werkt en vervolgens kopiëren en plakken in de CSS van je thema. Ik heb geconstateerd dat het houden van uw front-endthema geopend in één tabblad naast een ander tabblad met het WP-dashboard waar u bestanden bewerkt, de meest efficiënte manier is om uw code te bewerken.
Laten we beginnen met het definiëren van zaken als de achtergrondkleur van het lichaam, de typografie en andere basisprincipes die ons de basis zullen geven voor ons kindthema. Met deze code wordt alles in de header ingesteld, met uitzondering van het verplaatsen van ons navigatiemenu. Laten we het opsplitsen in een paar verschillende stappen.
Dit eerste codeblok geeft ons al onze basistypografie (we halen "Droid Sans" en "Dancing Script" uit Google Web Fonts, meer hierover in het gedeelte over functions.php
):
body, input, textarea, p {color: #000000;font-family: 'Droid Sans', sans-serif;}p {font-size: 14px;line-height: 24px;}h1, h2, h3, h4, h5, h6 {font-family: 'Dancing Script', cursive;}
In dit volgende gedeelte worden de achtergrond en de hoofdinhoud van de inhoud ingesteld slagschaduw .
#page {background: #f5f5dc;-moz-box-shadow: 0 0 10px #67949c;-webkit-box-shadow: 0 0 10px #67949c;box-shadow: 0 0 10px #67949c;}
Vervolgens maken we een aantal aanpassingen aan onze blogtitel en -beschrijving, evenals het wijzigen van de bovenrand van de header en het verwijderen van het zoekformulier (dat in de volgende stap zal worden vervangen door ons navigatiemenu).
#site-title a {font-size: 48px;font-weight: 700;line-height: 60px;}#branding {border-top: 2px solid #67949c;}#branding #searchform {display: none;}#site-description {font-size: 18px;margin: 0 270px 3em 0;}
Dit geeft ons een koptekst die er als volgt uitziet:
De volgende wijziging die we willen aanbrengen, is het navigatiemenu van de standaardpositie onder de afbeelding van de kop naar de rechterbovenhoek te verplaatsen, tegenover de titel of het logo van de blog.
Deze indeling werkt het beste voor sites met slechts een klein aantal pagina's. Grotere sites of sites met subpagina's hebben extra aandacht nodig en zullen waarschijnlijk niet goed werken met dit soort lay-out.
Dit is de code die je nodig hebt:
#access {clear: both;display: block;float: right;margin: 0 auto 6px;position: relative;top: -410px;width: 500px;background: none;box-shadow: none;}
Je navigatiemenu moet nu boven de headerafbeelding naast je logo staan. Vervolgens voegen we enkele stijlen toe aan onze navigatie en veranderen deze in knoppen in plaats van een effen balk. Hier is de code voor de basislettertypetijling:
#access a {font-family: 'Dancing Script', 'Helvetica Neue',Helvetica,Arial,sans-serif;font-size: 1.4em;font-weight: 700;padding: 0 1em;line-height: 2.666em;}
Hier is de basisopmaak voor de knop achter de tekst, inclusief een mooie innerlijke schaduw:
#access li {background: #84bbc5;margin-right: 15px;-moz-box-shadow: inset 0 0 3px 3px #739ca3;-webkit-box-shadow: inset 0 0 3px 3px #739ca3;box-shadow: inset 0 0 3px 3px #739ca3;}
En hier is de code voor het toevoegen van een slagschaduw achter de knoppen wanneer ze over zweven (wat in feite de indruk geeft van een animatie-effect):
#access li:hover > a, #access a:focus {background: #84bbc5;color: #EEEEEE;-moz-box-shadow: 0 0 3px 3px #739ca3;-webkit-box-shadow: 0 0 3px 3px #739ca3;box-shadow: 0 0 3px 3px #739ca3;}
Nu ziet je header er zo uit:
Laten we enkele basisstijlen voor uw zijbalk toevoegen. De wijzigingen die we hier aanbrengen, zijn voornamelijk om de zijbalken te laten overeenkomen met het ontwerp van de rest van de site. Hier is de code:
.widget a {font-weight: 400;font-family: 'Droid Sans', sans-serif !important;}.widget-title {color: #282828;letter-spacing: 0.1em;line-height: 1.5em;text-transform: none;}
De .widget-title
bevindt zich al in een H3-tag, dus het neemt het lettertype aan dat daar al is opgegeven.
En zo ziet het eruit:
Eerst willen we de opvulling voor de bovenkant van de berichten wijzigen, dus de eerste post komt overeen met de bovenkant van de zijbalk.
.entry-title {padding-top: 0px;}
Vervolgens wijzigen we het reactiepictogram dat naast de berichttitel op de startpagina wordt weergegeven. Deze is eenvoudig: maak gewoon je nieuwe pictogram aan (ik heb versies gemaakt voor actieve en inactieve versies) en upload ze vervolgens met de media-uploader van WP. Neem de URL voor elk en voeg ze als volgt in:
.entry-header .comments-link a {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-link.png") no-repeat scroll 0 0;top: 0;}.entry-header .comments-link a:hover, .entry-header .comments-link a:focus, .entry-header .comments-link a:active {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-active.png") no-repeat scroll 0 0;background-color: #f5f5dc !important;}
U moet het toevoegen !important
naar de background-color
attribuut voor de zweeftoestand om de vormgeving op te heffen die is aangebracht aan koppelingen elders in het thema. De zweefafbeelding is een ingevulde tekstballon, terwijl de normale status slechts een contour is. Dit is het resultaat:
Vervolgens werken we aan de opmerkingenstyling. Dit is eenvoudig, want het enige wat we doen is het kleurenschema wijzigen. Hier is de code:
#respond {background: none repeat scroll 0 0 #dadabe;border: 1px solid #67949c;}#respond input[type="text"], #respond textarea {background: none repeat scroll 0 0 #FFFFFF;border: 4px solid #b3b398;}#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label {background: none repeat scroll 0 0 #b3b398;box-shadow: 1px 2px 2px rgba(204, 204, 204, 0.8);color: #555555;}#respond input#submit {background: none repeat scroll 0 0 #67949c;}
En hier is het eindresultaat:
Dit is waarschijnlijk het meest technische deel van het maken van een kindthema en is alleen nodig als u iets zou willen doen zoals het toevoegen van Google Web Fonts aan uw site. Dat is precies wat we hier gaan doen. Dit is de enige keer in het maken van uw kindthema dat u nodig hebt om met PHP te werken, en als u niets in de kop van uw thema of elders hoeft in te voegen, hoeft u helemaal niet met PHP te werken.
Maak eerst een functions.php-bestand in uw tekst- of code-editor naar keuze. De basiscode die u gebruikt, ziet er ongeveer zo uit:
Voor het onderliggende thema hierboven moesten we code in onze kop invoegen om de juiste Google-weblettertypen te koppelen, zodat we ze in onze CSS konden gebruiken. Hier is hoe wij dat doen (u kunt de link
rechtstreeks van Google met de lettertypen die u wilt gebruiken):
Nu zouden je lettertypen allemaal goed moeten werken! En alle functies die in het oorspronkelijke bovenliggende thema waren opgenomen, zullen ook nog steeds werken.
Als u alle code voor zowel het CSS- als het functions.php-bestand wilt zien, kunt u deze downloaden hier . Ook inbegrepen zijn de commentaarballonpictogrammen.
Een kindthema maken is ongelooflijk eenvoudig in vergelijking met het ontwerpen en coderen van een thema vanaf het begin. Met wat basiskennis CSS en slechts een klein beetje van PHP, kunt u in principe elk gewenst thema maken. Kinderthema's kunnen in veel gevallen ook commercieel worden gebruikt (zolang het ouderthema dit toelaat) of worden verkocht als bestandsthema's (onthoud dat u uw kopers laat weten dat het thema een bovenliggend thema vereist).
Zorg ervoor dat uw code goed geschreven, becommentarieerd en georganiseerd is. Op deze manier is het onwaarschijnlijk dat uw onderliggende thema wordt verbroken als uw bovenliggende thema is bijgewerkt.
Het kindthema dat we in deze tutorial hebben gemaakt, is erg, erg basic. Maar het geeft je de informatie die je nodig hebt om te beginnen met het ontwerpen van je eigen thema's. Begin met eenvoudige restyling om je voeten nat te maken en begin dan met het verkennen van de dingen die je kunt doen met PHP in je functions.php-bestand. Kindthema's, wanneer gebouwd op een geweldig ouderthema, kunnen net zo krachtig zijn als elk ander beschikbaar thema. Voor meer informatie over kindthema's, bekijk de WordPress Codex .
Heeft u meer tips voor het maken van geweldige kindthema's? Laat het ons weten in de reacties!