Share
Zoek op Google naar 'WordPress Theme with Bootstrap' en je krijgt honderden resultaten. Deze omvatten handleidingen die u vertellen hoe u Bootstrap kunt gebruiken om uw thema te bouwen, evenals commercieel en vrij beschikbare thema's met behulp van het Bootstrap-framework..
Zoek naar 'Bootstrap' in de WordPress-themarepository en krijg 199 resultaten. Dat is veel keuze.
Het lijkt erop dat het ontwikkelen van WordPress-thema's met Bootstrap een en al woede is. Maar is het altijd de beste benadering voor uw thema-ontwikkelingsworkflow?
Hier zal ik kijken naar de voor- en nadelen van het gebruik van Bootstrap voor WordPress-thema's, en u helpen bij het identificeren wanneer Bootstrap uw werkstroom zal helpen en wanneer dit niet het geval zal zijn..
De Bootstrap-website beschrijft Bootstrap als:
het meest populaire HTML-, CSS- en JS-framework voor het ontwikkelen van responsieve, mobiele eerste projecten op het web.
Dit vertelt u een aantal dingen:
Als je oplet, merk je dat PHP er niet bij hoort. Bootstrap is een toepassingsraamwerk, maar het is geen themaraamwerk: u krijgt geen themasjabloonbestanden die u moet maken als u het in een thema wilt gebruiken. In plaats daarvan is het een kader met stijlen en scripts die het voor u gemakkelijker maken om een responsieve site te gebruiken en interacties en gebeurtenissen toe te voegen waarvoor JavaScript is vereist.
Bootstrap is oorspronkelijk ontworpen als een raamwerk om Twitter-ontwikkelaars efficiënter en consequenter te laten werken. De vroege naam was Twitter Blueprint, die werd gewijzigd in Bootstrap nadat meer ontwikkelaars betrokken waren geraakt en het project begon te groeien.
Het werd in 2011 vrijgegeven als een open-source-raamwerk en is sindsdien gebruikt voor het aandrijven van een verscheidenheid aan applicaties, waaronder WordPress-thema's.
Toen ik Bootstrap voor het eerst zag, was zijn belangrijkste verkoopargument de reactietijd in een tijd dat veel webontwikkeling (inclusief WordPress-ontwikkeling) nog steeds moest reageren op responsief webontwerp. Het was aanvankelijk niet responsief: dit werd toegevoegd in 2012 en het kader werd in 2013 voor het eerst mobiel gemaakt.
Als u Bootstrap downloadt, ziet u dat het bestaat uit een set stijlbladen (inclusief verkleinde versies), JavaScript-bestanden en glyphicons, die zijn opgenomen in lettertypebestanden. Deze vervangen uw themabestanden niet: in plaats daarvan roept u ze op in uw stylesheet en functiedossier indien nodig.
Ik ga hier geen uitgebreide uitleg geven over hoe u Bootstrap gebruikt met uw WordPress-thema: dat is in deze tutorial in detail behandeld. In plaats daarvan zal ik bekijken hoe Bootstrap je WordPress-themaontwikkelingsworkflow en de situaties waarin je dit wel of niet zou kunnen gebruiken, kan helpen of belemmeren..
De populariteit van Bootstrap als kader voor WordPress-thema's geeft aan dat het zeker een plaats heeft. Dus laten we eens kijken naar enkele van de voordelen van het gebruik van Bootstrap.
Bootstrap geeft je automatisch responsieve, mobiel-eerste styling voor je thema. Als je moeite hebt gedaan om vat te krijgen op responsieve thema-ontwikkeling, zal dit je het harde werk besparen door te leren hoe je je eigen stylesheets responsief kunt maken en mediaquery's kunt toevoegen.
Bootstrap gebruikt een op rasters gebaseerde lay-out van 12 kolommen met rasterklassen die u kunt gebruiken met de elementen in uw sjabloonbestanden om uw inhoud in het raster te laten passen.
Voordelen van deze aanpak zijn onder andere:
Naar mijn mening is de lay-out en typografie die je krijgt met Bootstrap erg leuk. Het zal geen ontwerpprijzen winnen, maar het zal u helpen een thema te bouwen dat modern is, gemakkelijk te gebruiken en leesbaar is. Er zijn enkele stijlkenmerken die ik bijzonder goed vind:
Accentsconagua
Naast het introduceren van zijn eigen klassen voor styling, bevat Bootstrap ook een stijl voor het volledige scala aan HTML5-elementen die u kunt verwachten in uw thema. Deze helemaal vanaf het begin stylen kan een hele klus zijn, dus het bespaart je veel werk, en het maakt het ook gemakkelijker om semantische markup in je thema te gebruiken.
In plaats van plug-ins of bronscripts van elders te moeten gebruiken, biedt Bootstrap een mooie reeks scripts waarmee u de meest gebruikte animaties en interacties aan uw site kunt toevoegen. Waaronder:
… en meer. Dit kan uw ontwikkeling versnellen en zorgt er ook voor dat al uw scripts mooi met elkaar spelen. Als je meer dan één of twee hiervan gaat gebruiken, kan Bootstrap je thema-ontwikkeling een stuk eenvoudiger maken; Als u er echter maar een of twee gaat gebruiken, is er wellicht een efficiëntere aanpak met minder toegevoegde code.
Ik geloof echter niet dat Bootstrap de juiste tool is voor alle WordPress-thema-ontwikkelaars. Hier zijn enkele van de nadelen van het gebruik van Bootstrap bij het ontwikkelen van uw thema's.
Ik heb al verwezen naar het responsieve rastersysteem dat wordt gebruikt in de stylesheets van Bootstrap en naar de vele klassen die u kunt gebruiken om dit in uw thema te gebruiken. Dit is geweldig als je bereid bent om jezelf vertrouwd te maken met die lessen en uit te zoeken hoe je ze kunt gebruiken in je thema. Als je een dergelijke ingewikkelde lay-out echter niet nodig hebt en slechts een paar van de stijlen gebruikt, zou je kunnen merken dat je een onevenredig grote hoeveelheid tijd besteedt aan het doorwerken van alle klassen en het uitzoeken welke je wilt gebruiken.
Het stylesheet bevat 155 regels code alleen voor die rasterlay-out in de kleinste schermbreedte: dat is veel om grip op te krijgen als u er het beste van wilt halen, en meer dan de meeste thema's nodig hebben.
Daarnaast zijn er klassen voor de glyphicons, voor knoppen en nog veel meer.
Als je thema een aanzienlijk deel van deze styling gebruikt (of als je Bootstrap gaat gebruiken om meerdere thema's te ondersteunen), is het de moeite waard om de tijd te nemen om te leren hoe Bootstrap-stijlen werken. Maar als je maar een paar kolommen nodig hebt en een responsief ontwerp, dan is het misschien overdreven.
De mediaquery's die door Bootstrap worden gebruikt, zijn gebaseerd op een aanname over scherm- en apparaatbreedten die verouderd wordt.
Dit zijn de mediaquery's:
/ * Extra kleine apparaten (telefoons, minder dan 768px) * / / * Geen media-query, omdat dit de standaardinstelling is in Bootstrap * / / * Kleine apparaten (tablets, 768 px en hoger) * / @media (min-width: @screen -sm-min) ... / * Gemiddelde apparaten (desktops, 992px en hoger) * / @media (min-width: @ screen-md-min) ... / * Grote apparaten (grote desktops, 1200px en hoger) * / @media (min-width: @ screen-lg-min) ...
Voor het laatste jaar of zo is responsieve ontwikkeling weggegaan van vooraf gedefinieerde onderbrekingspunten voor mediaquery's en naar op ontwerp gebaseerde onderbrekingspunten. Hoewel deze mediaqueries gebaseerd zijn op en zeker zullen werken met het ontwerp van Bootstrap (en dus geen problemen zouden veroorzaken op de ondersteunde apparaten of browsers, waarvan er veel zijn), geeft het niet de flexibiliteit die je hebt als je ' codeer je eigen code.
Als u zou beslissen om een tussenliggende mediaquery aan uw stylesheet toe te voegen, zou u de 155 lay-outstylingregels voor het rastersysteem moeten nemen en aanpassen aan uw nieuwe onderbrekingspunt - geen taak die ik zou benijden!
Ja, ik vermoed dat je hier op zat te wachten - de voorraadreactie van elke sceptische webontwikkelaar op een nieuw framework of tool.
Bootstrap biedt je onmiskenbaar veel functionaliteit en stijl die je in je thema kunt gebruiken, en dat is iets geweldigs. Als u echter maar een fractie van het aanbod gaat gebruiken, betekent dit dat u voor niets al die extra code toevoegt.
De bestanden zijn verkleind, wat wel helpt, maar toch, heb je echt al die ongebruikte code nodig in je thema?
Voeg Bootstrap toe aan uw thema, bel de stylesheet uit de stylesheet van uw thema en bam! Je hebt een kant-en-klare, responsieve lay-out die er prima uitziet. De meesten van ons zouden in de verleiding komen om dat te laten en misschien wat kleurnuiken toevoegen, maar niet veel meer.
Dit betekent dat uw ontwerp gebaseerd zal zijn op wat Bootstrap biedt, en niet op wat nodig is voor uw site. Ik werk met veel klanten en voordat we het ontwerp van hun site beginnen te bespreken, stel ik hen vragen over de doelstellingen van hun site, het publiek en meer. Dit alles zal het ontwerp van de site informeren, zowel qua beeld als qua gebruikersinterface.
Het gevaar van veel thema's met Bootstrap is dat we zo veel thema's krijgen die er in wezen hetzelfde uitzien. WordPress-thema-ontwikkelaars hebben de afgelopen jaren de beschuldigingen over hun thema's 'eruitzien als WordPress' goed gedaan, dus we willen dat al onze thema's 'eruitzien als Bootstrap'?
Uiteindelijk denk ik dat de belangrijkste factor die je misschien zou kunnen afschrikken met Bootstrap, het feit is dat het nooit is ontworpen om met WordPress te werken, en dat het op een heel andere manier werkt.
Een WordPress-themaraamwerk geeft u vaak alles wat u van Bootstrap krijgt, en op een manier die veel nauwer aansluit bij de manier waarop WordPress-ontwikkelaars werken. Deze hoeven niet duur te zijn of grote codebases te hebben: het Wonderflux-thema is bijvoorbeeld gratis en open source en bevat een responsief rastersysteem (zoals Bootstrap maar minder opgeblazen) en een bibliotheek met functies en haken die je niet nodig hebt. niet bij Bootstrap.
Een voorbeeld van hoe Bootstrap en WordPress niet compatibel zijn, is het ontwerp van navigatiemenu's. Je WordPress-menu werkt niet automatisch als Bootstrap is ingeschakeld: in plaats daarvan zul je een aangepaste nav-walker moeten maken. Dit is niet moeilijk om te doen als u vertrouwd bent met de code, maar voegt wel een nieuwe stap toe aan uw thema-ontwikkeling.
Bootstrap heeft zeker zijn voordelen. Als u een aantrekkelijke, schone en responsieve lay-out voor uw site en toegang tot een reeks JavaScript-effecten nodig hebt, dan kan dit uw themagebiedproces versnellen.
Als je echter het meeste uit Bootstrap wilt halen, moet je wat tijd besteden aan het leren ervan. Er is veel te leren met Bootstrap en als je niet alles gaat gebruiken, is het misschien niet de moeite waard.
Om af te sluiten, zou ik aanraden om Bootstrap in verschillende omstandigheden te gebruiken:
En ik zou adviseren om het niet te gebruiken in deze omstandigheden:
Uiteindelijk is de beslissing voor jou!
