Share
Toen ik je voor het laatst verliet, hadden we een aantal ontwerpprincipes bekeken, andere raamwerken onderzocht en tot de onvermijdelijke conclusie gekomen dat we onze eigen kaders zouden bouwen. In deze zelfstudie bespreken we de stappen die ik heb genomen om mijn WordPress-boilerscherm te maken, waarbij ik de CSS, functions.php en selectie van sjabloonpagina's van dichtbij bekijk.
Het belangrijkste om bij de ontwikkeling in gedachten te houden, is dat we dit algemeen genoeg willen houden zodat we het eenvoudig kunnen gebruiken / erop kunnen bouwen in toekomstige thema's; Ik heb het ook tot een persoonlijk doel van mij gemaakt om dit goed genoeg te maken om mee te doen als barebones-thema. Laten we onthouden dat we vooruit gaan.
Het eerste dat we moeten doen is de CSS regelen. Er zijn 2 hoofdcomponenten voor de CSS in mijn WordPress Boilerplate: style.css, die vereist is, en de / css / folder, die alle CSS voor het framework bevat. In style.css vindt u twee secties: de themadefinitie en de aanroepen naar mijn werkelijke CSS. Het volledige style.css-bestand ziet er als volgt uit:
Accentsconagua
/ * Theme Name: WordPress 3.0 Boiler Plate Theme URI: http://casabona.org/ Beschrijving: A Boiler Plate Theme for WP 3.0. Nu met meer HTML5! Versie: 1.5 Auteur: Joe Casabona Auteur URI: http://www.casabona.org * / @import url ("css / reset.css"); @import url ("css / master.css"); @import url ("css / ie.css"); Na de themadefinitie zie je er drie @importeren lijnen. Dit is waar al het zware werk voor de CSS gaat. reset.css is natuurlijk de CSS-reset. Ik heb dit recentelijk veranderd om normalize.css om een paar redenen te gebruiken. De eerste reden is dat in plaats van alles opnieuw in te stellen naar een standaard, niet-geformatteerde stijl, het stijlen maakt die u van een standaardbrowser zou verwachten. Bijvoorbeeld in een standaardreset, is niet langer vetgedrukt. In normalize.css is dat zo. De tweede reden is dat het standaardstijlen voor HTML5-elementen heeft, die nodig zijn voor oudere browsers die de nieuwe niet ondersteunen.
Notitie: Ik gebruik HTML5 in dit thema. Het werkt in Firefox, Chrome, Safari en IE7-9.
Nadat reset.css is aangeroepen, bel ik mijn hoofd stylesheet, master.css (naamgevingsconventies dankzij Dan Cederholm van SimpleBits). Dit is de kern van de zaak! Al mijn standaardstijlen na reset staan hier. Ik zal hier niet alle CSS plakken, maar ik heb de bestanden opgenomen die u wilt bekijken. Bij het maken van de CSS heb ik stijlen in gedachten gehouden die meestal van site tot site voor mij hetzelfde blijven; dingen zoals de breedte van de algehele container, mijn navigatiestijlen, hoe ik mijn zijbalk orden, enz. Ik gebruik over het algemeen ook opvulling / marges in veelvouden van 15 voor mijn alinea- en lijstelementen, dus ik heb wat basisdefinities voor die ook.
Ik neem ook standaardstijlen op voor een aantal veelvoorkomende WordPress-klassen, waaronder de stijlen die door de WordPress-editor zijn gegenereerd. Zij zijn: .navigatie, .post, .postmetadata, ol.commentlist, ol.commentlist li, ol.commentlist li .vcard, ol.commentlist li .vcard img, formulier # commentform, form # commentform p label, formulier # commentform input, form # commentform textarea, form # commentform textarea, form # commentform input [type = "submit"], img.centered, .alignright, .alignleft, .aligncenter, div.aligncenter, .wp-caption, .wp-caption img, .wp- onderschrift p.wp-bijschrift-tekst.
Het laatste dat ik in master.css opneem is een klasse die div's "self-clearing" maakt. Dat wil zeggen, het zal de behoefte aan een elimineren .Clearfix div (nogmaals, dank aan Dan Cederholm hiervoor).
/ * self-clear floats * / .group: after content: "."; weergave: blok; hoogte: 0; beiden opschonen; zichtbaarheid: verborgen;
Nadat master.css is aangeroepen, roep ik het laatste stukje van onze puzzel, ie.css. Dit is waar alle en alle IE-fixes zullen verdwijnen. Op dit moment is het slechts een oplossing voor .group en een PNG-fix. Houd er rekening mee dat de importbestelling is heel hier belangrijk, omdat sommige dingen mogelijk worden genegeerd en het wijzigen van de volgorde kan rotzooien met de stijlen die we hebben gedefinieerd.
Net zo belangrijk als de CSS-dingen is het bestand functions.php. Hier zullen we algemene functies toevoegen die we tijdens het hele thema willen gebruiken, evenals eventuele definities voor zijbalken, menu's en meer. Ik begin dit met twee regels:
define ('TEMPPATH', get_bloginfo ('stylesheet_directory')); define ('IMAGES', TEMPPATH. "/ images"); Dit zijn twee constanten die ik vrij vaak gebruik in het hele thema. De eerste is het pad van de sjabloon; dit is goed voor het verwijzen naar themaspecifieke bestanden. Ik heb 'stylesheet_directory' gebruikt in plaats van 'template_directory' omdat, als we dit als bovenliggend thema gebruiken (tutorial coming soon), 'template_directory' het verkeerde pad zou pakken (namelijk deze in plaats van het pad van het kind). De tweede regel gebruikt TEMPPATH eigenlijk om een pad naar de map / images / te maken, die we ook heel vaak gebruiken, of dit nu in dit thema is of in kindthema's.
Na deze twee regels, voeg ik ondersteuning toe voor dynamische menu's en 2 zijbalken met widgets; de ene is de primaire zijbalk en de andere is een tweede zijbalk van 'voor het geval dat'. Over het algemeen zal ik het gebruiken in het voettekst van mijn thema. Ten slotte heb ik twee andere functies gemaakt die ik regelmatig gebruikte:
functie print_post_nav () ?>Geen berichten gevonden. Probeer een andere zoekopdracht?
De eerste print de navigatie van het bericht en moet buiten de Loop worden gebruikt. Dat betekent dat we het kunnen gebruiken op elke pagina met berichten (index, zoeken en elk aangepast berichttypesjabloon). De tweede functie maakt het gebied 'Berichten niet gevonden', dat ik op bijna elke sjabloonpagina gebruikte.
Er is natuurlijk geen limiet aan het aantal functies dat je hier maakt. Dit waren alleen degenen die ik veel gebruikte.
Sjabloonpagina's
De volgende zijn de sjabloonpagina's. We zullen kijken naar 4 specifieke pagina's: header.php, footer.php, single.php en page.php. De andere zijn in feite afgeleiden van de pagina of enkele sjablonen.
Koptekst & voettekst
Hieronder staat ons volledige header.php-bestand:
<?php bloginfo('name'); ?> | <?php wp_title(); ?> ">
Dat zie je naast onze reguliere verklaringen, er is niet teveel. Ik neem aan
om ervoor te zorgen dat ons thema klaar is voor HTML5, maak dan in de body een basiskopregel met de naam en navigatie van de site, roep de zijbalk op en start het gedeelte "content", allemaal ingepakt in de voorgedefinieerde #container div. Je kunt zien dat de manier waarop ik dingen vastlegt consistent is met hoe mijn CSS is gedefinieerd (de zijbalk, die ik goed drijf, bevindt zich bijvoorbeeld boven het hoofdinhoudsgebied).Notitie: Ik heb het niet over de sidebar.php-template omdat deze hetzelfde is als elke standaardzijbalk: controleer om te zien of een widget-gebied is gedefinieerd; zo niet, druk dan een aantal standaard widgets af.
Hetzelfde geldt voor onze voettekst:
Ik print twee regeleinden, meestal om de code er mooi uit te laten zien, de inhoud te beëindigen en vervolgens te beginnen met de voettekst. Ik neem de secundaire zijbalk op in de voettekst, omdat dit iets is wat ik vaak doe, dan heb ik wat algemene auteursrechtinformatie en rond het thema af door alle open tags te sluiten. Nogmaals, ik probeer niet te veel met de voettekst te doen, omdat dit een kader is, maar ik geef wel een aantal opties om informatie aan het voettekstbericht toe te voegen als ik moet.
Enkele pagina
Deze bestanden zijn ook vrij eenvoudig. Ik heb geprobeerd de meeste dingen weg te halen die niet nodig zijn terwijl ik wegga in de informatie die je op elk van hen zou verwachten. single.php moet bekend voorkomen:
>Lees de rest van dit item "'); ?>geplaatst op op | Categorie | Commentaar | Reacties zijn momenteel gesloten | Commentaar | Zowel opmerkingen als pings zijn momenteel gesloten. |
We hebben de kop- en voettekst en onze lus. Ik heb de klassen bewaard die in de meeste WordPress-thema's voorkomen, zodat mensen die dit gebruiken, die klassen in de CSS kunnen definiëren zonder de single.php-sjabloon te hoeven wijzigen. Ik neem ook de standaard post-metadata en een opmerkingengebied op. Merk op dat ik de postnavigatiefunctie die ik schrijf in functions.php niet gebruik. Dat komt omdat dit in de Loop zit en die functie zich onvoorspelbaar zou gedragen.
De template page.php is iets korter:
Lees de rest van deze pagina "'); ?> 'pagina's: ',' na '=>'
',' next_or_number '=>' nummer ')); ?>Nogmaals, ik neem alleen op wat nodig is. Er zijn geen extra lessen of informatie. De pagina's op websites zijn gericht op inhoud en daarom heb ik geprobeerd dit sjabloon zo veel mogelijk te stroomlijnen.
Andere sjablonen
Uiteraard kan ik hier niet elke sjabloonpagina bedekken; Ik stel voor dat je de meegeleverde bron raadpleegt. Voor elke sjabloon probeerde ik weg te knippen wat ik niet gebruikte, en in sommige gevallen liet ik de sjablonen achter (als standaardinformatie van WordPress). Omdat we allemaal anders coderen, zou de manier waarop ik dingen toevoeg misschien niet het beste bij je passen, maar ik heb geprobeerd dit zo algemeen mogelijk te maken.
Dit is hoe het thema er uit de doos uitziet:
Het WordPress Boilerplate-thema
Conclusie
Hier volgt een overzicht met enkele voorbeelden van het maken van een themakader. Als ik naar mijn voorbeeldcode kijk, zie je dat ik niet te veel heb geprobeerd met een afzonderlijk sjabloonbestand. Als ik iets toevoeg aan dit thema, komt dit in het bestand functions.php omdat de sjabloonbestanden standaard moeten blijven, vooral als we ze gewoon gaan overschrijven bij het maken van een kindthema. Over gesproken, dat is wat we de volgende keer gaan doen, dus houd het in de gaten!
