Share
Letztes Mal haben wir unser Framework als Kindenthema verwendet und ein völlig neues Thema erstellt, das vom Framework abhängt. Heute werden wir unser Framework als Boilerplate verwenden, den Ordner kopieren und direkt bearbeiten.
Nun mögen einige Leute die Gründe hinterfragen, und das ist fair. Warum sollten wir den Rahmen selbst ändern? Meine ursprüngliche Absicht für dieses Framework war eigentlich nur eine Boilerplate - etwas, das ich kopieren, einfügen und modifizieren konnte - die HTML5-Boilerplate. Aus diesem Grund verwende ich meistens meine Heizplatte und kopiere und füge sie einfach ein.
Diese Methode hat auch einige Vorteile. Wenn Sie z. B. strukturell ein sehr anderes Design verwenden, müssen Sie die meisten Vorlagenseiten sowieso neu schreiben. Der Hauptgrund bei der Erstellung des Frameworks bestand darin, meine CSS und häufigere Funktionen erneut zu verwenden. Es folgte einfach eine Kopfzeile, eine Fußzeile, ein Index usw., damit das Thema funktioniert. Ich habe zwar versucht, es so generisch wie möglich zu machen, aber ich wollte es auch leicht halten. Aus diesem Grund gibt es keine Engine zum Einfügen von Code in verschiedene Teile des Themas, wie in Themaic oder anderen größeren Frameworks, die ich bevorzugen. Wie ich bereits in Teil 1 gesagt habe, wollte ich keine völlig neue API erstellen, um zu lernen, wann die WordPress-API bereits vorhanden ist.
Bevor wir anfangen, sollten wir einige Ziele für die Verwendung eines Frameworks als Boilerplate beschreiben. Erstens sollten wir nur Dateien ändern, die geändert werden müssen. Denken Sie daran, außerhalb der Kopf- und Fußzeile haben wir versucht, die anderen Seiten so generisch wie möglich zu gestalten. Das heißt, wenn CSS verwendet werden kann, um das, was bereits vorhanden ist, zu ordnen, könnten wir das genauso gut verwenden, da es weniger Arbeit (bearbeitungsmäßig) für uns ist. Wir sollten auch bedenken, was sich in unseren Theme-Dateien befindet. Wir haben 2 Widget-Bereiche (einen in der Fußzeile) und einige Funktionen, die für die Wiederverwendung vorgesehen sind. Wir sollten diese nutzen, wenn wir können. Davon abgesehen, möchten wir Sie daran erinnern, womit wir anfangen:
Das allererste zuerst: Lassen Sie uns unser Framework kopieren und durchblättern und für die Verwendung vorbereiten. Ich habe gerade meinen Ordner / wp-boilerplate / kopiert und ihn in / wp-boilerplate-copy / umbenannt (da gehe ich wieder mit den Creative-Namen). Wie immer ändern wir unsere style.css-Datei:
/ * Themenname: Framework Copy Theme-URI: http: //example.com/ Beschreibung: Kopie des Framework-Theme-Autors: Ihr Name Autor-URI: http: //your-site.com/ Version: 1.0 * /
Denken Sie daran, wir brauchen das nicht Vorlage Linie diesmal, weil dies eine direkte Kopie des Frameworks ist.
Bevor wir in das CSS eintauchen, sollten wir uns überlegen, welche strukturellen Änderungen wir vornehmen möchten. Ich möchte ein paar Dinge zum Gesamtdesign der Site tun. Der erste ist die Platzierung der Navigation über dem Site-Namen und der Suchleiste (die wir ebenfalls hinzufügen werden). Ich möchte es auch so machen, dass die Kopf- und Fußzeilen die Breite des Bildschirms des Benutzers erweitern, während der Inhalt auf einer festgelegten Breite von 960 Pixeln gehalten wird. Dies ist das Endprodukt, an dem wir arbeiten werden:
Als nächstes ändern wir den Header. Hier ist alles in der header.php nach der Etikett:
">
Sie sollten ein paar Dinge beachten. Ich habe die Hauptcontainer-ID in "Wrapper" geändert und eine "Contain" -Klasse hinzugefügt. Dies ist so, dass wir die beiden nicht verwechseln würden. Der # Wrapper wird weiterhin auf die gesamte Seite angewendet. Da Kopf- und Fußzeile jedoch die gesamte Breite des Bildschirms des Benutzers vergrößern sollen, müssen Sie die Breitendefinition entfernen. Da wir jedoch weiterhin möchten, dass der tatsächliche Inhalt auf der ursprünglichen Breite von 960 Pixel gehalten wird, müssen wir eine separate Klasse erstellen, die wir für mehrere Inhaltsbereiche verwenden werden. So sieht das CSS für #wrapper und .contain aus:
#wrapper text-align: left; Hintergrund: #FFFFFF; Farbe: # 333333; .contain width: 960px; Marge: 0 auto;Wie Sie sehen, haben wir die Informationen zu Breite und Ausrichtung nach .contain verschoben. Wir werden jetzt footer.php so anpassen, dass sie mit header.php übereinstimmt:
Accentsconagua