Share
In de laatste aflevering van deze serie hebben we ons themakader gemaakt, wat neerkomt op een vrij eenvoudige boilerplate, waarin we functionaliteit hebben toegevoegd die we vaak gebruiken. Er zijn 2 manieren waarop we ons framework nu kunnen gebruiken: als een kindthema en als een echte boilerplate die we gewoon kopiëren en bewerken. Vandaag gaan we ons framework gebruiken als een kindthema.
Ik heb een zelfstudie gedaan over het maken van een eenvoudig kindthema, maar deze keer een beetje anders omdat we geen volledig thema hebben om mee te werken. We hebben zowat het absolute minimum wat stijlen en functionaliteit betreft. Dus met dat in gedachten, laten we verder gaan.
Notitie: Dus deze tutorial duurt niet te lang, ik mag ervan uitgaan dat je bekend bent met het bouwen van kindthema's voor WordPress.
Het eerste wat we moeten doen is de map aanmaken in onze / themes / directory. Ik heb de mijne wp-boilerplate-child genoemd (erg creatief, ik weet het); je kunt alles van jou noemen. Zoals altijd gaan we beginnen met ons style.css-bestand en de themadefinitie:
/ * Themanaam: Framework Child Theme URI: http: //example.com/ Beschrijving: thema voor kinderen voor uw kaderthema Auteur: Uw naam Author URI: http: //uw-site.com/ Sjabloon: wp-boilerplate Versie: 1,0 * /
Onthoud dat we met kind-thema's die extra regel nodig hebben om te definiëren in welke directory het bovenliggende thema wordt gehost. Als dat eenmaal is vastgesteld, weet WordPress waar de parent-themabestanden vandaan moeten komen. Het volgende dat we moeten doen is de CSS importeren vanuit ons framework:
Accentsconagua
@import url ("... /wp-boilerplate/style.css"); Dit is een noodzakelijke stap als u niet helemaal opnieuw wilt beginnen, omdat hierdoor de CSS van het bovenliggende thema wordt overschreven. Houd er ook rekening mee dat dit wordt geladen nadat alle CSS uit ons thema is geladen, inclusief ie.css.
Als u het zich nog herinnert, ziet ons framework zonder enige wijziging er als volgt uit:
Iets om in gedachten te houden is dat, aangezien dit ons raamwerk is, we er veel meer vertrouwd mee zijn dan met andere raamwerken; we hebben het gebouwd naar onze eigen persoonlijke codeerstijlen. Hoewel dit misschien vergelijkbaar lijkt met de tutorial over het andere kindthema, is een groot verschil dat het hoofdthema ons eigen raamwerk is, gebouwd volgens onze eigen behoeften.
We gaan er wat stijl aan toevoegen, te beginnen met de basis CSS. Voeg deze regels code toe aan de CSS van uw kindthema:
body background: # 000000; a, a: visited color: # a2a085; text-decoration: none; #container background: #FFFFFF;
Dit legt enige basis voor de transformatie van ons thema, dat voornamelijk in de CSS zal plaatsvinden. We hebben enkele standaardwaarden in de body-, link- en containerkleuren gewijzigd. Nu gaan we onze header een beetje aantrekkelijker maken.
header font-size: 1.4em; achtergrond: # D1CFB5; header h1 padding: 10px; header h1 a, header a: visited color: # 69652B; nav background: # ABA0B6; font-size: 1.5em; opvulling: 3px; border-bottom: 1px solid # 221F49; border-top: 1px solid # 221F49; nav a, nav a: visited color: # 221F49; nav a: hover color: # 4C4B55;
Net als bij onze basisstijlen hebben we de header- en nav-stijlen van het framework eenvoudig overschreven. Ik heb ook een aantal andere stijlen voor ons kindthema toegevoegd, die deel uitmaken van deze tutorial als je een kijken. Wat we eindigden was dit:
Laten we nu eens kijken naar het maken van een nieuwe lay-outsjabloon, die we strikt zullen gebruiken in ons kindthema.
Het grootste deel van ons thema is al geregeld dankzij ons framework, maar dat betekent niet dat we het niet kunnen toevoegen. In dit volgende gedeelte maken we een aangepaste startpagina met paginasjablonen en een beetje functiemagie. Laten we een nieuwe pagina maken met de naam page-home.php en voeg dit toe:
Lees de rest van deze pagina "'); ?>
We hebben hier een vrij standaardpagina met sjabloonnaam, loop en dezelfde sjabloontags die we op onze kaderpagina hebben gebruikt. Ik heb echter ook een widgetgebied direct onder de inhoud toegevoegd, zodat we kunnen toevoegen wat we willen op de startpagina. Nu moeten we dat widgetgebied in ons thema definiëren via ons functiesbestand.
Vergeet niet dat het functiedossier van het kind is geladen voor het functiesbestand van de ouder.
Maak een functions.php bestand in ons kindthema en voeg dit toe:
__ ('Homepage Widgets', 'home-widgets'), 'id' => 'home-widget-area', 'description' => __ ('Het home widget-gebied', 'wpbp'), 'before_widget' = > '',' after_widget '=> "", 'before_title' => '',' after_title '=>'
',)); ?> Hiermee kunnen we nu widgets toevoegen aan onze startpagina! Ik heb een RSS-feed toegevoegd. Voordat u CSS toepast, ziet het er als volgt uit:
U kunt deze feed natuurlijk wel stylen zoals u dat wilt.
Er is absoluut veel meer dat we hier kunnen doen met de uitgebreide API van WordPress. We kunnen functies gebruiken om de reactiesjabloon te wijzigen, een leeg zijbalkbestand maken om in wezen de zijbalk te verwijderen of de voettekst volledig te vervangen. De mogelijkheden zijn eindeloos omdat ons framework zo lichtgewicht / eenvoudig is.
Een van de echt leuke dingen over het gebruik van ons eigen inlandse raamwerk is dat we het constant kunnen verbeteren. Ik gebruik dit eigenlijk meer als een standaardplaatje dat ik kopieer en wijzig (zelfstudie komt binnenkort) dus als ik het schakel en gebruik als een kindthema, heb ik een paar verbeteringen kunnen zien die ik kon aanbrengen in het kader.
get_sidebar (verschillende zijbalk)).functions.php bestand omdat ik ze toch regelmatig gebruik. Een van de klassen is een formulierenprocessor, dus ik heb geen plug-in nodig om eenvoudige e-mailformulieren te doen.Vergeet niet dat je veel ruimte hebt voor persoonlijk maatwerk, tenzij je van plan bent om je raamwerk openbaar te maken.
Hier hebben we wat basisaanpassingen gedaan aan ons raamwerk via ons kindthema. Deze techniek is vooral handig als u een vergelijkbare structuur als uw site behoudt en u alleen aanpassingen wilt maken via CSS (denk aan CSS Zen Garden). Het is ook handig om nieuwe paginasjablonen en aangepaste functies toe te voegen bovenop wat er al is. Omdat we echter een basisraamwerk / boilerplate gebruiken, Als we de structuur van het thema volledig veranderen, kunnen we net zo goed een geheel nieuw thema maken als we een kindthema gebruiken, aangezien we waarschijnlijk het grootste deel van het thema zullen vervangen. sjabloonbestanden. De volgende keer ga ik door met het kopiëren en plakken van onze standaard en het aanpassen van het thema zelf om het meeste uit de code te halen die we al hebben uitgelegd.
