Hacktober 2016: Das beste WordPress Theme der Welt

Mein Hacktober-Projekt wird ein WordPress Theme sein, welches sehr flexibel und leicht erweiterbar für jede WebAgentur ist. Anstelle von vielen mehreren Projekten konzentriere ich mich auf dieses eine und das macht sich in den ersten Schritten bemerkbar. Es gibt bereits coole Funktionen und ich weiß es wird das beste Theme der Welt.Read the more up to date and famous one afterwards!
Capabilities für einzelne Terms in WP 4.7
Open in new tab for later

Zumindest träumt jeder Theme-Entwickler davon. Nun, zumindest hoffe ich, dass es ein schönes neues Theme wird mit modernen Techniken. Hoffentlich wird dies auch von anderen Theme-Autoren gelesen, die mir in den Kommentaren ein paar Tipps und Ideen mitgeben möchten. Nur zu!

WordPress Theme to the rescue

Es hat eine Weile gedauert bis ich wusste, was mein Projekt für Oktober werden wird. Das Zauberwort „Hacktober“ etabliert sich und ich dachte sofort an viele verschiedene coole Sachen. Zum Glück kam dann die Ernüchterung.

Anstelle viele verschiedene Projekte zu starten und Gefahr zu laufen diese vielleicht nicht zu beenden, soll es lieber ein vernünftig umgesetztes Projekt sein. Das fühlt sich viel besser an und wird dem Anspruch an hoher Qualität gerecht. Und als Backend-Entwickler kann ich bei diesem Frontend-Projekt bestimmt noch einiges lernen.

Keep it stupid simple

IDE auf und wo starte ich nun? Zunächst einmal ist mir das underscore theme bekannt, welches immer gut für einen schnellen Start war. Es ist zum Großteil von Automattic gemacht und bringt alles mit, was ein WordPress Theme benötigt. Bereits nach wenigen Sekunden stand die Grundlage.

Es gibt sogar Zeilen im Code, die durch bloßes auskommentieren das Aussehen komplett ändern – eine tolle Sache!

// @import "../layout/content-sidebar";
// @import "../layout/sidebar-content";

Sehr einfach und toll für Rapid Prototyping, um zum Beispiel dem Kunden in kürzester Zeit bereits eine grobe Richtung zu zeigen.

Dann stieß ich an meine Grenzen, nämlich das Designen von Webseiten. Das Vokabular von CSS kann ich echt gut, aber für die Ästhetik brauche ich eine ausgedruckte Layout-Vorgabe von einem Designer. Doch die gibt es nicht für ein Basis-Theme, was möglichst flexibel sein soll.

Also brauche ich eine Hilfestellung für das Design. Da ich bereits mit den CSS-Klassen von Bootstrap 3 vertraut bin lag es nahe das bald erscheinende Bootstrap 4 mit in das Theme einzubringen. Das Underscores-Theme und Bootstrap miteinander zu kombinieren erwies sich schnell als grandiose Idee.

_s und Bootstrap 4 verheiraten

Zwar ist Bootstrap 4 noch nicht veröffentlicht, trotzdem können schon einige Funktionen davon genutzt werden. Mehr als ein Grid-System braucht es eh nicht am Anfang.

Also nahm ich die Mixins von Bootstrap 4 und reicherte die bestehenden CSS-Klassen vom Underscores-Theme damit an:

.content-area {
  @extend .col-lg-3-4;
  @extend .col-xs-4-4;
}

.site-content .widget-area {
  @extend .col-lg-1-4;
  @extend .col-xs-4-4;
}

Das ist überraschend einfach, gut lesbar und direkt responsive. Ein paar Zeilen und Minuten später sah es bereits nach einem brauchbaren Ergebnis aus (zumindest für mich als Entwickler).

WordPress Theme with _s and Bootstrap 4
WordPress Theme mit _s und Bootstrap 4 sieht nach ein paar Minuten schon super aus.

Der Textbereich nimmt 3/4 von der gesamten Breite ein (CSS-Klasse col-lg-3-4) und die Sidebar nur 1/4 (class col-lg-1-4). Auf kleineren Endgeräten stehen beide untereinander und nehmen die komplette Breite ein (CSS-Klasse col-xs-4-4). Es handelt sich dabei um die aus Bootstrap 4 bekannten Klassen .col-lg-3.col-xs-4 usw. zu denen ich ein bisschen Magie hinzugefügt habe.

Mehrere Grids in einem Design

In Bootstrap 4 gibt es ein Mixin, welches Grids erzeugt. Dies sieht vor, dass es nur ein einziges Grid gibt, wie das 12er Grid oder eine andere Spaltenanzahl. Das halte ich für Quatsch und wollte mehr. Durch einen einfachen Hack ist es in meinem Theme möglich beliebig viele Grids zu haben:

//@include add-grid(2); // adds .col-**-#-2
//@include add-grid(3); // adds .col-**-#-3
@include add-grid(4); // adds .col-**-#-4
//@include add-grid(5); // adds .col-**-#-5
//@include add-grid(6); // adds .col-**-#-6
//@include add-grid(7); // adds .col-**-#-7

Und so weiter. Das add-grid Mixin ist eine Kopie vom make-grid mixin aus Bootstrap 4, welches die Anzahl der maximalen Spalten als Suffix setzt. Ein einfacher Trick um mehrere Grids gleichzeitig zu haben, welche sogar miteinander kombiniert werden können:

<div class="col-lg-1-2"> Ein Halb </div>
<div class="col-lg-1-3"> Ein Drittel </div>
<div class="col-lg-1-6"> Ein Sechstel </div>

Das klappt, solang die Summe wieder 100% ergibt. Und wenn das schon toll ist, dann gern weiterlesen, wie Header und Footer leicht per Backend gepflegt werden können.

Header und Footer mit dem Lieblingseditor erstellen

Manage the header and footer for each template.
Header und Footer je Template pflegbar.

Es ist bereits möglich den Kopf- und Fußbereich je Template per Backend zu pflegen. Das kann über den TinyMCE, den einfachen Texteditor oder einem Page Builder erfolgen (wie hier gezeigt). Das bietet die Freiheit einfach ein neues Template anzulegen und den Kunden entscheiden zu lassen wie Kopf und Fußbereich aussehen sollen. Landing Pages und andere divergente Designs lassen sich so ganz leicht über die Verwaltung erstellen und pflegen.

bildschirmfoto-2016-10-02-um-11-23-12WordPress fügt sogar noch ein nettes hilfreiches Feature mit dem Veröffentlichungsdatum hinzu. Ein passender Header für Weihnachten, Neujahr, Ostern oder andere Ereignisse können über das Veröffentlichungsdatum Terminiert werden. Das Theme beachtet dieses Datum und schaltet am Tag der Veröffentlichung um, so dass jeder Besucher eine tolle Neujahrsmeldung bekommt oder auf ein bevorstehendes Event hingewiesen wird.

Es geht weiter den ganzen Hacktober lang

Wenn Ihnen dieses Projekt gefällt, dann folgen Sie mir auf Twitter @ScreamingDev oder einfach nächsten Sonntag den Blog wieder besuchen. In den nächsten Tagen wird noch etwas Testing hinzukommen, damit es insbesondere ein qualitativ hochwertiges Theme wird. Das ist mein primärer persönlicher Anspruch an Software, welcher auch im Frontend nicht zu kurz kommen soll. Meiner Meinung nach muss ein Theme nicht nur schön anzusehen sein, sondern auch leicht erweiter- und änderbar sein, damit es schnell auf Kundenwünsche angepasst werden kann.

Wünschen Sie mir Glück, dass alles wie geplant verläuft die nächsten Tage. Wie gesagt, wird nächste Woche wieder ein Review mit neuen tollen Funktionen hier vorgestellt. Wenn Ihnen jetzt noch welche einfallen oder Wünsche da sind, dann gern als Kommentar hinterlassen.

Entwickler können den aktuellen Stand auf https://github.com/sourcerer-mike/_d sehen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *