Share
In der letzten Ausgabe dieser Serie haben wir unser Theme-Framework entwickelt, das sich aus einer ziemlich einfachen Boilerplate zusammensetzt, in der wir einige Funktionen hinzugefügt haben, die wir häufig verwenden. Es gibt zwei Möglichkeiten, unser Framework jetzt zu verwenden: als untergeordnetes Thema und als echte Vorlage, die wir nur kopieren und bearbeiten. Heute verwenden wir unser Framework als Kindermotiv.
Ich habe ein Tutorial über das Erstellen eines einfachen untergeordneten Themas erstellt, aber dieses Mal ist es etwas anders, da wir kein voll entwickeltes Theme haben, mit dem wir arbeiten können. Was Stil und Funktionalität angeht, haben wir fast das Nötigste. Lasst uns also vorwärts gehen.
Hinweis: Daher wird dieses Tutorial nicht zu lang. Ich kann an bestimmten Stellen davon ausgehen, dass Sie mit dem Erstellen von untergeordneten Themen für WordPress vertraut sind.
Als erstes müssen wir den Ordner in unserem Verzeichnis / themes / erstellen. Ich habe mein wp-boilerplate-child (sehr kreativ, ich weiß) angerufen; Sie können Ihren Namen nennen. Wir beginnen wie immer mit unserer style.css-Datei und der Designdefinition:
/ * Name des Themas: Framework Child Theme URI: http: //example.com/ Beschreibung: Untergeordnetes Design für Ihr Framework Theme Autor: Ihr Name Author URI: http: //your-site.com/ Vorlage: wp-boilerplate Version: 1,0 * /
Denken Sie daran, dass wir bei untergeordneten Designs diese zusätzliche Zeile benötigen, um festzulegen, in welchem Verzeichnis das übergeordnete Design untergebracht ist. Sobald dies festgelegt ist, weiß WordPress, woher die übergeordneten Designdateien abgerufen werden können. Als nächstes müssen wir das CSS aus unserem Framework importieren:
Accentsconagua
@import url ("… /wp-boilerplate/style.css"); Dies ist ein notwendiger Schritt, wenn Sie nicht bei Null anfangen möchten, da dies das CSS des übergeordneten Designs überschreibt. Denken Sie auch daran, dass dies geladen wird, nachdem das gesamte CSS unseres Themas geladen wurde, einschließlich ie.css.
Wenn Sie sich daran erinnern, sieht unser Rahmen ohne Änderungen so aus:
Hierbei ist Folgendes zu beachten: Da dies unser Rahmen ist, sind wir damit viel besser vertraut als andere Rahmen. Wir haben es an unsere eigenen persönlichen Codierungsstile gebaut. Dies mag dem anderen Kindenthemenprogramm ähneln, das ich gemacht habe, ein großer Unterschied ist jedoch, dass das übergeordnete Thema unser eigener Rahmen ist, der auf unsere eigenen Bedürfnisse zugeschnitten ist.
Wir werden etwas Stil hinzufügen, beginnend mit dem Basis-CSS. Fügen Sie diese Codezeilen zum CSS Ihres untergeordneten Themas hinzu:
Körper Hintergrund: # 000000; a, a: besuchte color: # a2a085; Textdekoration: keine; #container background: #FFFFFF;
Dies ist ein Grundstein für die Transformation unseres Themas, das hauptsächlich im CSS stattfinden wird. Wir haben einige Standardwerte in den Körper-, Link- und Containerfarben geändert. Jetzt machen wir unseren Header etwas ansprechender.
Header Schriftgröße: 1.4em; Hintergrund: # D1CFB5; header h1 padding: 10px; header h1 a, header a: besuchte color: # 69652B; nav background: # ABA0B6; Schriftgröße: 1.5em; Polsterung: 3px; Rahmen unten: 1px fest # 221F49; Border-Top: 1px fest # 221F49; nav a, nav a: besuchte color: # 221F49; nav a: hover color: # 4C4B55;
Wie bei unseren Basisstilen haben wir die Header- und Navistile einfach aus dem Framework überschrieben. Ich habe auch einige andere Stile für unser Kinderthema hinzugefügt, die in diesem Tutorial enthalten sind, wenn Sie einen aussehen. Was wir am Ende hatten, war folgendes:
Sehen wir uns nun das Erstellen einer neuen Layoutvorlage an, die wir strikt in unserem untergeordneten Thema verwenden werden.
Das meiste unseres Themas ist dank unseres Frameworks bereits erledigt, aber das bedeutet nicht, dass wir es nicht hinzufügen können. In diesem nächsten Abschnitt erstellen wir eine benutzerdefinierte Startseite mit Seitenvorlagen und etwas Funktionszauber. Erstellen wir eine neue Seite mit dem Namen page-home.php und füge folgendes hinzu:
Lesen Sie den Rest dieser Seite "'); ?>
Wir haben hier eine ziemlich standardisierte Seite mit Vorlagennamen, -schleife und denselben Vorlagetags, die wir auf der Seite unseres Frameworks verwendet haben. Ich habe jedoch auch einen Widget-Bereich direkt unter dem Inhalt hinzugefügt, damit wir der Startseite alles hinzufügen können, was wir möchten. Nun müssen wir diesen Widgetbereich in unserem Theme über unsere Funktionsdatei definieren.
Denken Sie daran, dass die Funktionsdatei unseres Kindes vor der Funktionsdatei des Elternteils geladen wird.
Ein ... kreieren Functions.php Datei in unserem Kindermotiv und fügen Sie folgendes hinzu:
__ ('Homepage-Widgets', 'Home-Widgets'), 'id' => 'home-widget-area', 'description' => __ ('Der Home-Widget-Bereich', 'wpbp'), 'before_widget' = > '',' after_widget '=> "", 'before_title' => '',' after_title '=>'
',)); ?> Damit können wir unserer Homepage jetzt Widgets hinzufügen! Ich habe einen RSS-Feed hinzugefügt. Bevor Sie ein CSS anwenden, sieht es so aus:
Sie können diesen Feed natürlich beliebig gestalten.
Es gibt absolut viel mehr, was wir hier mit der umfangreichen API von WordPress tun könnten. Wir können Funktionen verwenden, um die Kommentarvorlage zu ändern, eine leere Seitenleisten-Datei zu erstellen, um die Seitenleiste zu löschen oder die Fußzeile vollständig zu ersetzen. Die Möglichkeiten sind endlos, weil unser Rahmen so leicht / einfach ist.
Das wirklich Schöne an der Verwendung unseres eigenen Frameworks ist, dass wir es ständig verbessern können. Ich benutze dies eigentlich eher als Zwischenablage, die ich kopiere und modifiziere (Tutorial kommt bald), so dass das Umschalten auf ein untergeordnetes Thema mir ein paar Verbesserungen gezeigt hat, die ich an dem Framework vornehmen konnte.
get_sidebar ('different-sidebar')).Functions.php Datei, da ich sie sowieso regelmäßig verwende. Eine der Klassen ist ein Formularprozessor, daher brauche ich kein Plugin, um einfache E-Mail-Formulare zu erstellen.Denken Sie daran, dass Sie viel Raum für persönliche Anpassungen haben, sofern Sie nicht beabsichtigen, Ihr Framework für die Öffentlichkeit verfügbar zu machen.
Hier haben wir einige grundlegende Anpassungen an unser Framework vorgenommen. Diese Technik ist besonders hilfreich, wenn Sie eine ähnliche Struktur wie Ihre Website beibehalten und nur Anpassungen über CSS vornehmen möchten (z. B. CSS Zen Garden). Es ist auch nützlich, neue Seitenvorlagen und benutzerdefinierte Funktionen zu den bereits vorhandenen hinzuzufügen. Da wir jedoch ein grundlegendes Framework / Boilerplate verwenden, können wir, wenn wir die Struktur des Themas vollständig ändern, auch ein Design von Grund auf erstellen, wenn wir ein untergeordnetes Thema verwenden, da wir wahrscheinlich die meisten Elemente ersetzen werden Vorlagendateien. Beim nächsten Mal werde ich unsere Boilerplate kopieren und einfügen und das Design selbst ändern, um den Code, den wir bereits erstellt haben, optimal zu nutzen.
