Für die Entwicklung von kundenspezifischen WordPress-Themes verwende ich seit 2012 das Starter-Theme _s (underscores). Dieses Starter-Theme (oder auch “Blank-Theme”) wurde von Auttomatic ins Leben gerufen und wird mittlerweile von ca. 60 Entwicklern weiterentwickelt. _s ist ein Theme, das nur sehr wenig CSS enthält, dafür aber die wichtigsten Templates, Funktionen, Javascripts und ein paar Extras, um ein eigenes WordPress-Theme zu entwickeln. Laut den Machern von _s stecken bereits über 1000 Stunden Arbeit in dem Theme. Dieses Starter-Theme für die Entwicklung eigener WordPress-Themes zu nutzen, hat für mich vor allem einen wirtschaftlichen Nutzen: ich muss nicht bei jedem neuen Theme bei NULL anfangen sondern habe eine solide Basis, die mir viel Zeit erspart. Hinzu kommt, dass _s stetig weiterentwickelt wird und somit auch immer eine Referenz für die aktuellen WordPress-Standards ist.
Eine Hürde gibt es jedoch: der Aufwand für die Erstellung des responsiven Layouts und das Styling unzähliger Elemente ist sehr hoch, da das Stylesheet von _s ja so gut wie keine Styles enthält (daher sollte man das Theme auch nicht unverändert verwenden). Es bietet sich also an, zusätzlich auf ein robustes HTML/CSS-Framework zurück zu greifen, welches einen Großteil des Layouts und der Styles gleich mitbringt. Meine Wahl fällt hierbei zur Zeit auf das Mobile First Frontend Framework Bootstrap 3, weil mich das Grid-System und der Umfang der Styles und der Komponenten absolut überzeugen. Das ursprünglich von und für Twitter entwickelte Framework ist mittlerweile sehr populär, wenn nicht sogar das populärste überhaupt.
Bei der Entwicklung des neuen WordPress-Themes für den EURONICS Trendblog habe ich erstmals _s und Bootstrap miteinander kombiniert. Bei der Entwicklung fiel mir auf, dass ich wesentlich weniger Zeit mit der Erstellung eigener Styles verbringen musste, da viele ja in Bootstrap schon vorgefertigt sind und “nur noch” über CSS-Klassen angesprochen werden müssen. Im Gegensatz dazu benötigte ich aber wesentlich mehr Zeit für die Erstellung des HTML-Layouts und die Anpassung der Theme-Templates. Mit dem Ergebnis bin ich aber sehr zufrieden und ich plane, auch bei den nächsten Projekten auf eine Mischung aus _s und Bootstrap zu setzen.
_s und Bootstrap sind für mich ein starkes Team.
Hi Matthias,
ich habe Deinen Artikel mit großem Interesse gelesen. Vielen Dank dafür. BT3 und _s sind stabil, sturmerprobt und aktuell. Ich habe aber bisher nur ein Projekt mit einer Kombination aus BT2 und s_ gebaut und überlege jetzt, wie mein zukünftiger Workflow aussehen könnte. Welche Teile schmeiße ich aus _s raus? Welche Teile überarbeite ich in BT?
Ich arbeite übrigens mit Codekit und LESS. Dadurch ist BT noch viel flexibler und die bootstrap.css wird richtig handlich. Ein Blank-Theme, das _s und BT3 vereint, macht auch irgendwie keinen Sinn, weil ich bei jedem neuen Projekt die aktuellen Dateien als Basis nehmen möchte. Ich habe festgestellt, dass viele BT3-Blank-Themes nicht aktuell sind und zum Teil überalterte Klassen benutzen.
Mir schwebt mehr eine Art Framework mit einzelnen Dateien vor, die ich dann – je nach Anforderung – einbaue: zum Beispiel eine navbar.php, die die Bootrap-Navbar an WordPress anpasst usw.
Wie sieht Dein/Euer Workflow aus?
Danke für deinen ausführlichen Kommentar.
Mein Workflow sieht aktuell so aus: 1. Bootstrap über LESS anpassen, dann Layout für die wichtigsten Seiten erstellen (Start, Single, Page etc.) inkl. ein paar wesentlicher Elemente (Nav, Off-Canvas-Bereich u.ä.). 2. Aktuelle Version von _s herunterladen und alles rauswerfen, was ich nicht brauche, ggf. noch ein paar kleinere Sachen vorab anpassen. 3. BS-Layout und _s miteinander verheiraten. 4. Stylen.
Für zukünftige Projekte werde ich mir aber auch Teile, die ich immer wieder benötige, separat speichern und einbinden. get_template_part bietet sich für sowas ja an.
Hallo.
Vielen Dank für die hilfreichen und interessanten Anregung in Ihrem Artikel.
Hat mit sehr geholfen. Fettes Lob dafür.
Ich bin zwischenzeitlich auch mal bei Bootstrap gelandet. Allerdings bereitet mir die WordPress Navigation noch ein bisschen Probleme. Egal mit welchem wp_nav_menu Walker ich es probiere, ich bekomme die Navi nicht weiter als Level 1 auf geblättert. Hat einer einer Idee wie es mit einem Menü geht, welches 3-4-5 Childs hat, so in der Art wie hier http://wptest.io/demo/ -> Depth:
About
Pages
Categories
Depth
-Level1
–Level2
—Level3
—-etc.
Advanced
und könnte mir dafür den passenden Walker inkl. css/js liefern? Auf http://wptest.io/demo/ wird es schließlich auch richtig angezeigt (vermutlich aber mit Bootstrap2).
Schau doch mal hier. Vielleicht ist da ja was dabei. Du bist sicher nicht der erste, der vor diesem Problem steht.
Danke, aber da hab ich natürlich als erstes geschaut :-p
Hab auch schon Leute gefunden mit gleichem Problem und auch ohne Lösung. Deshalb ja meine Frage.
Hmm, ok. Vielleicht geht das hier in die Richtung? Sehe aber nicht, ob das auf BS 2 oder 3 basiert. Müsste da auch erstmal tiefer einsteigen. Wenn du eine Lösung findest, gerne hier posten.
Nachtrag: Bootstrap 3.
Danke Matthias, scheint zu funktionieren. Setzt mir zumindest in die ULs die depth rein.
Den Rest muss ich jetzt nur noch formatieren.
Besten Dank!
Wir benutzen _s (underscores) seit 2013 zur Entwicklung von WordPress Seiten und können dieses Blank Theme nur empfehlen. Im Vergleich mit anderen Blank Themes war _s (underscores) die beste Lösung. Wir haben das responsive Design bisher mit Plugins wie symple-shortcodes realisiert, war für uns die einfachste Lösung. Sicherlich ist die Verbindung von Bootstrap mit _s (underscores) eine professionellere Lösung, wir werden das ausprobieren.
Keins davon ^_^
Für Bootstrap verwende ich eine leicht angepasste Version des Bootstrap Basic-Themes. Das integriert im Prinzip nur Bootstrap 3 schön und sauber, den Rest muss man selber hinzufügen. In meinem Fall – also der angepassten Version – ist das noch HeadJS sowie das Smartmenus-Script, für bessere responsive Dropdown-Menüs 😉
Theme-Frameworks – wozu? WP bietet doch von Haus aus schon genug. Da braucht man das Rad nicht ultrakomplex neu erfinden 😉
cu, w0lf.
Zu deiner Info, ein Auszug aus der readme.txt des von dir angepassten Themes:
„Bootstrap Basic is based on the _s (Underscores) starter theme by Automattic Inc., licensed under GPL.“
Also „keins davon“ trifft nicht so ganz zu 😉
Jedenfalls danke für die Info, ich kannte dieses Theme noch nicht – scheint ja genau das zu bieten, was Matthias in diesem Post beschrieben hat.
@Daniel
Also ich nutze Genesis sehr gerne. Die Entwicklercommunity ist extrem groß und man bekommt inzwischen beinahe alles was man braucht. Zudem ist das Genesis Framework immer noch sehr sparsam mit Funktionen und Code, sodass man eine solide Basis hat, auf der man sein ChildTheme aufbauen oder verändern kann. In meinem Blog findest du noch einige weitere Vorteile. Es ist auf jedenfall ein super Framework.
Genesis oder Underscores?
Was meint ihr?
Kann man nicht so ganz vergleichen, würde ich sagen. Underscores ist ein „nacktes“ Starter-Theme und Genesis ein bereits gestyltes Theme(-Framework) mit diversen Optionen.
Also dem Setup _s und Bootstrap kann ich nur zustimmen. Das Styling geht leichter von der Hand und die Logik die das Blanktheme mitbringt hat (fast) alles was man braucht.
Ich hab vor nicht allzu langer Zeit ein Theme damit im Flatdesign umgsetzt und war positiv überrascht, wie schnell ich das Theme innerhalb weniger Tage auf einem Stand hatte wo ich sonst Wochen gebraucht habe.
Ja, hatte auch das Gefühl, dass man gerade beim Aufbau des Layouts oder bei der Erstellung von Menüs oder Tabs ziemlich schnell voran kommt. Und irgendwie macht es auch mehr Spaß als ohne Bootstrap.