DIY WordPress Framework Deel 4 Het framework gebruiken als een ketelplaat

De vorige keer hebben we ons framework als een kindthema gebruikt, waardoor een geheel nieuw thema is ontstaan dat afhankelijk is van het framework. Vandaag gaan we ons framework gebruiken als een standaardplaatje, de map kopiëren en er bewerkingen op uitvoeren.

Nu kunnen sommige mensen de redenering hierachter in twijfel trekken, en dat is eerlijk. Waarom zouden we het kader zelf veranderen? Mijn oorspronkelijke bedoeling voor dit raamwerk was eigenlijk slechts een standaardplaatje te zijn - iets dat ik kon kopiëren, plakken en wijzigen - in de HTML5-boilerscherm. Daarom gebruik ik meestal mijn boilerplate, ik kopieer en plak het gewoon.

Er is ook enige verdienste aan deze methode. Als u bijvoorbeeld structureel een heel ander ontwerp gebruikt, zult u de meeste van de sjabloonpagina's uiteindelijk toch herschrijven. De belangrijkste redenering achter het maken van het framework was om mijn CSS en meer algemene functies opnieuw te gebruiken. Het is net gevolgd om een koptekst, voettekst, index, enzovoort te maken om het thema te laten werken. Hoewel ik het zo generiek mogelijk probeerde te maken, wilde ik het ook licht houden. Daarom is er geen engine om code in verschillende delen van het thema te injecteren, zoals in Themaic of andere grotere kaders, waaraan ik de voorkeur geef. Zoals ik al zei in deel 1, wilde ik geen hele nieuwe API maken die mensen kunnen leren wanneer er al de WordPress API is.

Ermee beginnen

Voordat we aan de slag gaan, moeten we enkele doelen schetsen voor het gebruik van raamwerk als standaardplaatje. De eerste is dat we alleen bestanden moeten wijzigen die moeten worden gewijzigd. Vergeet niet dat we buiten onze kop- en voettekst hebben geprobeerd de andere pagina's zo generiek mogelijk te maken. Dat betekent dat als CSS kan worden gebruikt om te regelen wat er al is, we dat net zo goed kunnen gebruiken omdat het voor ons minder werk (bewerkingen) is. We moeten ook rekening houden met wat er in onze themabestanden staat. We hebben 2 widget-gebieden (een in de voettekst) en een paar functies die zijn ontworpen voor hergebruik. We zouden die moeten gebruiken als we kunnen. Dat gezegd hebbende, hier is een kleine herinnering met wat we beginnen:

Ons kader

Het eerste is het eerste: laten we ons framework kopiëren en opmaken en voorbereiden voor gebruik. Ik heb zojuist mijn / wp-boilerplate / map gekopieerd en het hernoemd / wp-boilerplate-copy / (daar ga ik weer met de creatieve namen). Zoals altijd wijzigen we ons style.css-bestand:

 / * Theme Name: Framework Copy Theme URI: http: //example.com/ Beschrijving: Copy of Your Framework Theme Auteur: Your Name Author URI: http: //your-site.com/ Versie: 1.0 * /

Denk eraan, we hebben het niet nodig sjabloon regel deze keer omdat dit een directe kopie van het framework is.

Structurele veranderingen

Voordat we in de CSS duiken, laten we bekijken welke structurele wijzigingen we willen aanbrengen. Ik zou graag een paar dingen willen doen aan het algemene ontwerp van de site. De eerste is plaats de navigatie boven de naam van de site en de zoekbalk (die we ook zullen toevoegen). Ik wil het ook zo maken dat de kop- en voettekststaven de breedte van het scherm van de gebruiker vergroten, terwijl de inhoud op een ingestelde breedte van 960 px wordt gehouden. Dit is het eindproduct waar we naartoe zullen werken:

Ons eindproduct

Wat we hierna zullen doen is de header aanpassen. Hier is alles in header.php na de label:

       'Hoofd' )); ?> 
 ">

Je zou een paar dingen moeten opmerken. Ik heb de ID van de hoofdcontainer gewijzigd in 'wrapper' en een klasse 'bevatten' toegevoegd. Dit is zo dat we de twee niet zouden verwarren. De #wrapper wordt nog steeds toegepast op de hele pagina, maar omdat we willen dat de kop- en voettekst de volledige breedte van het gebruikersscherm uitbreiden, moeten we de breedtedefinitie verwijderen. Aangezien we echter nog steeds de inhoud willen behouden die overeenkomt met onze oorspronkelijke breedte van 960 pixels, moeten we een afzonderlijke klasse maken die we gebruiken voor verschillende inhoudssecties. Hier is hoe de CSS eruit ziet voor #wrapper en .contain:

 #wrapper text-align: left; achtergrond: #FFFFFF; kleur: # 333333;  .contain width: 960px; marge: 0 auto;

Zoals u kunt zien, hebben we de informatie met betrekking tot breedte en uitlijning verplaatst naar .contain. We zullen nu footer.php aanpassen aan header.php:

Je kunt zien dat naast het afstemmen van onze div's van header.php, ik ook een .contain-div heb toegevoegd rond onze footer-inhoud. Ik heb ook de zijbalk verplaatst naar het voettekstje. Zoals sommige van onze lezers in Deel 2 opmerkten, is dit een beetje meer SEO-vriendelijk.

Nu we de hoofdstructuur van de site hebben aangepast, laten we eens kijken naar het aanpassen van een van onze sjabloonpagina's.

Sjabloonpagina's aanpassen

We gaan hier echt niet te veel doen. Ik wil gewoon een kleine verandering (in code) doen in index.php. In de loop waarin we onze titel en datum plaatsen:

  j ')?> 
  "rel =" bookmark "title =" Permanente link naar ">
  '); ?> Geplaatst in  |

Hier heb ik de titel en datumregels omgekeerd en de klasse .date aan de alinea toegewezen met daarin de datuminformatie. Ik heb ook alle postinfo in de klasse .entry gezet. Dat is de reden dat ik een klein datumvakje voor elke post links van de post kan maken.

Notitie: Zoals ik eerder heb vermeld, is dit een levend project dat voortdurend verandert. In toekomstige builds zal ik de datumnive waarschijnlijk behouden, zodat ik die sectie gemakkelijker kan stijlen.

Ons dataplein

De rest van mijn geplande wijzigingen die we met CSS kunnen aanbrengen vanwege de manier waarop de pagina's zijn gecodeerd (waarover ik in de volgende sectie zal praten). Als we het framework echter als een standaard gebruiken, kunnen we gemakkelijker ons thema wijzigen dan een kindthema als het gaat om het herschikken of recreëren van bepaalde sjablonen..

Het nieuwe thema stylen

Nu we onze structurele wijzigingen hebben aangebracht, laten we eens kijken naar een deel van de CSS. Ik zal hier de belangrijke delen benadrukken. Alle CSS is opgenomen in de themabestanden die bij dit bericht horen. Laten we eerst de CSS voor onze header bekijken, die de grootste transformatie doormaakte.

 header background: #fafaed; text-align: right; border-bottom: 1px solid # 999999; margin-bottom: 15px;  header nav ul, header h1, header form margin-top: 0;  header h1 float: left; kleur: # 08034d; lettertypegrootte: 2,8em;  header h1 a, header h1 a: visited color: # 333333; tekstdecoratie: geen;  koptekstvorm text-align: right;  header-formulierinvoer opvulling: 5px; lettergrootte: 1,4em;  nav text-align: center; achtergrond: # 333333; breedte: 800 px; marge: 0 auto;  nav ul padding: 10px; nav ul li display: inline; opvulling: 0 15px;  nav ul li a, nav ul li a: bezocht font-size: 1.4em; kleur: #FFFFFF; lettertype: vet; tekstdecoratie: geen;  nav ul li a: hover color: #CFCFCF;

Hier kunt u zien dat we achtergrondkleuren en lettertypestijlen hebben toegepast op onze header-elementen, evenals enkele strategische plaatsingen. Ons resultaat is een heel andere kop dan die uit onze originele frameworks.

Onze nieuwe header

Het andere deel van onze CSS dat ik hier wilde benadrukken, was hoe ik de zijbalk 'fixeerde':

 #wrapper aside margin-left: 675px;  #content width: 660px; zweven: links; lettergrootte: 1.25em;

Zoals je weet, was onze CSS min of meer hier voor deze sectie - we moesten gewoon het tegenovergestelde nemen van wat we hadden sinds we de volgorde van onze code veranderden. Schoon en vrij eenvoudig!

De rest van de CSS is vrij eenvoudig, en zoals ik al zei, opgenomen in de bron voor dit bericht. Ik heb de bericht-CSS gewijzigd en een aantal standaardstijlen op onze HTML-tags toegepast met betrekking tot kleur, afmetingen en opvulling / marge

Conclusie

Ik wilde deze serie afsluiten met een afweging van de verdiensten van deze methode versus het maken van een kindthema, omdat deze post meer een proof of concept-bericht was (het hele thema doen zou erg lang duren, maar ik zou een diepgaander onderzoek kunnen doen) één als het wordt gevraagd). Ik zou zeggen dat de methode kopiëren en plakken het beste zou zijn als je grote veranderingen aanbrengt aan het raamwerk. Je krijgt nog steeds de code die we hebben aangelegd, maar je zult minder tijd besteden aan het opnieuw opbouwen van wat we al hebben gebouwd in een kindthema. Hoewel we hier kleine wijzigingen hebben aangebracht, kunnen we een ontwerp tegenkomen dat van ons vraagt dat we meerdere pagina's moeten wijzigen en dat het al een grote hulp is voor zowel referentie als hergebruik. Ik volg meestal de copy-and-paste-route, omdat ik probeer niet al mijn ontwerpen hetzelfde te laten lijken.

En jij dan? Wat zie je zelf meer doen??

Code