Share
Durchsuchen Sie eine Google-Suche nach 'WordPress Theme with Bootstrap' und Sie erhalten Hunderte von Ergebnissen. Diese enthalten Anleitungen, in denen Sie erfahren, wie Sie mit Bootstrap Ihr Design sowie kommerzielle und frei verfügbare Designs mit dem Bootstrap-Framework erstellen können.
Suchen Sie im WordPress-Theme-Repository nach "Bootstrap", und Sie erhalten 199 Ergebnisse. Das ist eine große Auswahl.
Es scheint, dass die Entwicklung von WordPress-Themes mit Bootstrap der letzte Schrei ist. Aber ist es immer der beste Ansatz für Ihren Workflow bei der Themenentwicklung??
Hier werde ich die Vor- und Nachteile der Verwendung von Bootstrap für WordPress-Themes betrachten und Ihnen helfen zu erkennen, wann Bootstrap verwendet wird, was Ihrem Workflow hilft und wann dies nicht der Fall ist.
Die Bootstrap-Website beschreibt Bootstrap als:
Das beliebteste HTML-, CSS- und JS-Framework für die Entwicklung responsiver, mobiler Projekte im Web.
Das sagt Ihnen ein paar Dinge:
Wenn Sie aufpassen, werden Sie feststellen, dass PHP nicht enthalten ist. Bootstrap ist zwar ein Anwendungs-Framework, aber es ist nicht wie ein Design-Framework: Es enthält keine der Design-Vorlagendateien, die Sie erstellen müssen, wenn Sie sie in einem Design nutzen möchten. Stattdessen erhalten Sie einen Rahmen aus Stilen und Skripten, der es Ihnen erleichtert, eine responsive Site in Betrieb zu nehmen und Interaktionen und Ereignisse hinzuzufügen, für die JavaScript erforderlich ist.
Ursprünglich war Bootstrap als Framework gedacht, mit dem Twitter-Entwickler effizienter und konsistenter arbeiten können. Sein früherer Name war Twitter Blueprint, der in Bootstrap geändert wurde, nachdem weitere Entwickler involviert waren und das Projekt zu wachsen begann.
Es wurde 2011 als Open-Source-Framework veröffentlicht und wurde seitdem für verschiedene Anwendungen einschließlich WordPress-Themes verwendet.
Als ich zum ersten Mal auf Bootstrap stieß, war sein Hauptverkaufsargument die Reaktionszeit in einer Zeit, in der viele Webentwicklungen (einschließlich WordPress-Entwicklung) noch auf responsives Webdesign aufpassen mussten. Ursprünglich war es nicht ansprechbar: 2012 wurde es hinzugefügt und 2013 wurde der Rahmen mobiler gemacht.
Wenn Sie Bootstrap herunterladen, werden Sie feststellen, dass es aus einer Reihe von Stylesheets (einschließlich reduzierter Versionen), JavaScript-Dateien und Glyphicons besteht, die in Schriftdateien enthalten sind. Diese ersetzen Ihre Designdateien nicht: Stattdessen rufen Sie sie in Ihrem Stylesheet und in der Funktionsdatei nach Bedarf auf.
Ich werde hier keine ausführlichen Erklärungen geben, wie Sie Bootstrap mit Ihrem WordPress-Theme verwenden. Das wird in diesem Tutorial ausführlich behandelt. Stattdessen schaue ich mir an, wie Bootstrap den Workflow für die Entwicklung des WordPress-Themas unterstützen oder behindern kann und welche Situationen in denen Sie es verwenden könnten oder nicht.
Die große Popularität von Bootstrap als Framework für WordPress-Designs zeigt, dass es definitiv einen Platz hat. Schauen wir uns einige der Vorteile von Bootstrap an.
Bootstrap gibt Ihnen automatisch ein ansprechendes Styling für Ihr Design, das zuerst mobil ist. Wenn Sie Schwierigkeiten hatten, sich mit der responsiven Themenentwicklung auseinanderzusetzen, sparen Sie sich die harte Arbeit, zu lernen, wie Sie Ihre eigenen Stylesheets zu Responsive machen und Medienanfragen hinzufügen.
Bootstrap verwendet ein gitterbasiertes Layout aus 12 Spalten mit Rasterklassen, die Sie mit den Elementen in Ihren Vorlagendateien verwenden können, um Ihren Inhalt in das Raster einzupassen.
Vorteile dieses Ansatzes sind:
Meiner Meinung nach ist das Layout und die Typografie von Bootstrap sehr schön. Es wird keine Designpreise gewinnen, aber es wird Ihnen helfen, ein Thema zu erstellen, das modern, einfach zu bedienen und lesbar ist. Es gibt einige Styling-Funktionen, die ich besonders mag:
Accentsconagua
Bootstrap führt nicht nur eigene Klassen für das Styling ein, sondern enthält auch das Styling für die gesamte Palette von HTML5-Elementen, die Sie in Ihrem Design verwenden können. Wenn Sie alle diese Optionen von Grund auf neu gestalten, kann dies sehr mühsam sein. Das erspart Ihnen viel Arbeit und erleichtert Ihnen die Verwendung von semantischem Markup in Ihrem Design.
Anstatt Plugins oder Quellenscripts von einem anderen Ort aus zu verwenden, bietet Bootstrap eine Reihe von Skripts, mit deren Hilfe Sie die am häufigsten verwendeten Animationen und Interaktionen zu Ihrer Site hinzufügen können. Diese schließen ein:
… und mehr. Dies kann Ihre Entwicklung beschleunigen und stellt außerdem sicher, dass alle Ihre Skripts gut miteinander spielen. Wenn Sie mehr als ein oder zwei davon verwenden, kann Bootstrap die Entwicklung Ihres Designs erheblich erleichtern. Wenn Sie jedoch nur einen oder vielleicht zwei verwenden, ist der Ansatz mit weniger Code möglicherweise effizienter.
Ich glaube jedoch nicht, dass Bootstrap das richtige Werkzeug für alle WordPress-Theme-Entwickler ist. Hier sind einige der Nachteile der Verwendung von Bootstrap beim Entwickeln Ihrer Designs.
Ich habe bereits auf das responsive Grid-System hingewiesen, das in Bootstraps Stylesheets verwendet wird, und auf die Vielzahl von Klassen, die Sie verwenden können, um dies in Ihrem Design zu nutzen. Das ist großartig, wenn Sie sich mit diesen Klassen vertraut machen und herausfinden möchten, wie Sie sie in Ihrem Thema verwenden können. Wenn Sie jedoch kein so kompliziertes Layout benötigen und nur wenige Stile verwenden, stellen Sie möglicherweise fest, dass Sie unverhältnismäßig viel Zeit damit verbringen, alle Klassen durchzuarbeiten und herauszufinden, welche verwendet werden sollen.
Das Stylesheet enthält 155 Zeilen Code, die nur für das Rasterlayout in der kleinsten Bildschirmbreite bestimmt sind. Dies ist viel zu bewältigen, wenn Sie das Beste daraus machen möchten, und mehr als die meisten Designs benötigen.
Darüber hinaus gibt es Klassen für die Glyphicons, für Buttons und vieles mehr.
Wenn Ihr Design einen erheblichen Teil dieses Stylings verwendet (oder Sie Bootstrap verwenden, um mehrere Designs zu unterstützen), sollten Sie sich die Zeit nehmen, um zu erfahren, wie Bootstrap-Stile funktionieren. Wenn Sie jedoch nur ein paar Spalten und ein ansprechendes Design benötigen, könnte es zu übertrieben sein.
Die von Bootstrap verwendeten Medienabfragen basieren auf der Annahme, dass Bildschirm- und Gerätebreiten veraltet sind.
Dies sind die Medienanfragen:
/ * Extra kleine Geräte (Telefone mit weniger als 768px) * / / * Keine Medienabfrage, da dies die Standardeinstellung in Bootstrap ist. * / / * Kleine Geräte (Tablets ab 768px und höher) * / @media (min-width: @screen) -sm-min) … / * Mittlere Geräte (Desktops, 992px und höher) * / @media (min-width: @ screen-md-min) … / * Große Geräte (große Desktops, 1200px und höher) * / @media (min-width: @ screen-lg-min) …
Im letzten Jahr hat sich die responsive Entwicklung von vordefinierten Haltepunkten für Medienabfragen hin zu designorientierten Haltepunkten entwickelt. Diese Medienabfragen basieren zwar auf dem Design von Bootstrap und werden mit diesem sicherlich funktionieren (es sollte also auf keinem der unterstützten Geräte oder Browser Probleme geben, von denen es viele gibt), aber es gibt nicht die Flexibilität, die Sie haben, wenn Sie codiere deine eigene.
Wenn Sie sich entscheiden, Ihrem Stylesheet eine Zwischen-Medienabfrage hinzuzufügen, müssen Sie die 155 Layoutlinien für das Rastersystem übernehmen und diese an Ihren neuen Haltepunkt anpassen - keine Aufgabe, die ich beneiden würde!
Ja, ich schätze, Sie haben auf diese eine Antwort gewartet - die Antwort eines skeptischen Web-Entwicklers auf ein neues Framework oder Tool.
Bootstrap bietet unbestreitbar viele Funktionen und Stylingmöglichkeiten, die Sie in Ihrem Design verwenden können, und das ist eine großartige Sache. Wenn Sie jedoch nur einen Bruchteil des Angebots verwenden, müssen Sie den zusätzlichen Code für nichts hinzufügen.
Die Dateien sind minimiert, was hilft, aber trotzdem benötigen Sie wirklich den gesamten ungenutzten Code in Ihrem Design?
Fügen Sie Bootstrap zu Ihrem Design hinzu, rufen Sie das Stylesheet vom Stylesheet und von bam Ihres Themes auf! Sie haben ein fertiges, ansprechendes Layout, das gut aussieht. Die meisten von uns wären in der Versuchung, es dabei zu belassen und einige Farbkorrekturen hinzuzufügen, vielleicht aber nicht viel mehr.
Dies bedeutet, dass Ihr Design auf dem basiert, was Bootstrap bietet, und nicht auf den Anforderungen Ihrer Site. Ich arbeite mit vielen Kunden zusammen, und bevor wir anfangen, das Design ihrer Website zu diskutieren, stelle ich ihnen Fragen zu den Zielen, dem Publikum und mehr ihrer Website. All dies wird das Design der Website sowohl visuell als auch hinsichtlich der Benutzeroberfläche beeinflussen.
Die Gefahr, dass viele Motive Bootstrap verwenden, besteht darin, dass am Ende so viele Motive enden, die im Wesentlichen gleich aussehen. WordPress-Theme-Entwickler haben in den letzten Jahren eine großartige Arbeit geleistet, um die Anschuldigungen ihrer Themes "wie WordPress auszusehen" abzuwerfen. Wir möchten, dass alle unsere Themes "wie Bootstrap aussehen".?
Ich denke, der wichtigste Faktor, der Sie von Bootstrap abschrecken könnte, ist die Tatsache, dass es nie für WordPress entwickelt wurde und dass es auf eine ganz andere Weise funktioniert.
In einem WordPress-Theme-Framework erhalten Sie häufig alles, was Sie von Bootstrap erhalten, und das auf eine Weise, die viel stärker auf die Funktionsweise von WordPress-Entwicklern abgestimmt ist. Diese müssen nicht teuer sein oder über große Codebasen verfügen: Das Wonderflux-Theme ist beispielsweise kostenlos und Open Source und umfasst ein responsives Grid-System (wie Bootstrap, aber weniger aufgebläht) und eine Bibliothek mit Funktionen und Hooks, die Sie nicht benötigen. Mit Bootstrap geht es nicht.
Ein Beispiel dafür, wie Bootstrap und WordPress nicht kompatibel sind, ist das Design von Navigationsmenüs. Ihr WordPress-Menü ist bei aktiviertem Bootstrap nicht sofort einsatzbereit. Stattdessen müssen Sie einen benutzerdefinierten Nav Walker erstellen. Dies ist nicht schwierig, wenn Sie mit dem Code vertraut sind, aber Sie fügen Ihrer Designentwicklung einen weiteren Schritt hinzu.
Bootstrap hat definitiv seine Vorteile. Wenn Sie ein attraktives, sauberes und ansprechendes Layout für Ihre Website und Zugriff auf eine Reihe von JavaScript-Effekten benötigen, kann dies die Entwicklung Ihres Designs beschleunigen.
Wenn Sie jedoch das Beste aus Bootstrap herausholen möchten, müssen Sie etwas Zeit damit verbringen, es zu lernen. Es gibt viel zu lernen mit Bootstrap, und wenn Sie nicht alles ausnutzen werden, lohnt es sich vielleicht nicht.
Zum Schluss würde ich die Verwendung von Bootstrap unter verschiedenen Umständen empfehlen:
Und ich würde raten, es unter diesen Umständen nicht zu verwenden:
Letztendlich liegt die Entscheidung bei Ihnen!
