Share
Gör en Google-sökning efter "WordPress Theme med Bootstrap" och du får hundratals resultat. Dessa inkluderar guider som berättar hur du använder Bootstrap för att bygga ditt tema såväl som kommersiellt och fritt tillgängliga teman med hjälp av Bootstrap-ramverket.
Sök efter "Bootstrap" i WordPress-temförvaret och du får 199 resultat. Det är mycket val.
Det verkar som om att utveckla WordPress-teman med Bootstrap är all raseri. Men är det alltid det bästa tillvägagångssättet för ditt arbetsflöde för temautveckling?
Här ser jag på för och nackdelar med att använda Bootstrap för WordPress-teman och hjälper dig att identifiera när du använder Bootstrap kommer du att hjälpa ditt arbetsflöde och när det inte kommer.
Bootstraps webbplats beskriver Bootstrap som:
den mest populära HTML-, CSS- och JS-ramen för att utveckla lyhörda, mobila första projekt på webben.
Detta berättar ett par saker:
Om du är uppmärksam, märker du att det inte innehåller PHP. Medan Bootstrap är ett applikationsramverk, är det inte som ett temramaterial: det ger dig inte någon av temalmallfilerna du behöver skapa om du ska utnyttja det i ett tema. Istället ger det dig en ram av stilar och skript som gör det lättare för dig att få en responsiv webbplats igång och lägga till interaktioner och händelser som kräver JavaScript.
Bootstrap var ursprungligen utformat som en ram för att hjälpa Twitter-utvecklare att arbeta mer effektivt och konsekvent. Dess tidiga namn var Twitter Blueprint, som byttes till Bootstrap efter att fler utvecklare blev involverade och projektet började växa.
Den släpptes som en öppen källkodsrama 2011 och har sedan dess använts för att driva en mängd olika applikationer, inklusive WordPress-teman.
När jag först kom över Bootstrap var dess huvudförsäljningspunkt sin respons vid en tidpunkt då mycket webbutveckling (inklusive WordPress-utveckling) fortfarande var tvungen att komma ikapp med lyhörd webbdesign. Det var inte originellt mottagligt: detta tillkom 2012 och ramverket gjordes mobil-först i 2013.
Om du laddar ner Bootstrap ser du att det består av en uppsättning stilark (inklusive minifierade versioner), JavaScript-filer och glyficoner, som ingår i typfiler. Dessa ersätter inte dina temafiler: i stället ringer du dem i ditt stilark och funktionsfiler efter behov.
Jag kommer inte att ge en fördjupad förklaring till hur du använder Bootstrap med ditt WordPress-tema här: det beskrivs i detalj i denna handledning. Istället ska jag titta på hur Bootstrap kan hjälpa till eller hindra ditt WordPress-temautvecklings arbetsflöde och de situationer där du kanske eller kanske inte använder den.
Bootstraps mycket popularitet som ram för WordPress-teman indikerar att det definitivt har en plats. Så låt oss ta en titt på några av fördelarna med att använda Bootstrap.
Bootstrap ger dig automatiskt lyhörda, mobila första styling för ditt tema. Om du har kämpat för att ta tag i responsiv temat utveckling, kommer det att spara dig det svåra arbetet med att lära dig hur du gör dina egna stylesheets lyhörda och lägg till mediasökningar.
Bootstrap använder en rutnätbaserad layout av 12 kolumner med rutnätklasser som du kan använda med elementen i dina mallfiler för att göra ditt innehåll passande i rutnätet.
Fördelarna med detta tillvägagångssätt är:
Enligt min uppfattning är layout och typografi du får med Bootstrap mycket trevligt. Det kommer inte att vinna några designpriser, men det hjälper dig att bygga ett tema som är modernt, lätt att interagera med och läsligt. Det finns några stylingfunktioner som jag särskilt gillar:
Accentsconagua
Förutom att införa egna klasser för styling inkluderar Bootstrap också styling för hela spektret av HTML5-element som du kan förvänta dig att använda i ditt tema. Att stryka alla dessa från början kan vara en verklig besvär, så det sparar dig mycket arbete, och gör det lättare för dig att använda semantisk markering i ditt tema.
I stället för att behöva använda plugins eller källskript från andra håll, erbjuder Bootstrap dig ett bra utbud av skript som hjälper dig att lägga till de mest använda animationerna och interaktionerna på din webbplats. Dessa inkluderar:
… och mer. Detta kan påskynda din utveckling, och säkerställer också att alla dina skript spelar snyggt med varandra. Om du ska använda mer än en eller två av dessa kan Bootstrap göra din temautveckling mycket enklare. Om du bara ska använda en eller kanske två kan det dock vara ett effektivare tillvägagångssätt med mindre kod.
Men jag tror inte att Bootstrap är det rätta verktyget för alla WordPress-temaprojektorer. Här är några av nackdelarna med att använda Bootstrap när du utvecklar dina teman.
Jag har redan refererat till det responsiva rutnätverket som används i Bootstraps stilark, och de många klasserna du kan använda för att utnyttja detta i ditt tema. Det här är bra om du är beredd att bekanta dig med de här klasserna och utarbeta hur du använder dem i ditt tema. Men om du inte behöver en så komplicerad layout och bara kommer att använda några av stilarna, kanske du tycker att du spenderar en oproportionerligt stor del av tiden som arbetar igenom alla klasser och utarbetar vilka som ska användas.
Stilarkretet innehåller 155 streckkod bara för den rutnätlayouten i den minsta skärmens bredd: det är mycket att ta hand om om du vill få ut det mesta och mer än de flesta teman behöver.
Utöver detta finns klasser för glyphicons, för knappar och mycket mer.
Om ditt tema kommer att utnyttja en betydande del av denna styling (eller om du ska använda Bootstrap för att stödja flera teman), är det värt att ta dig tid att lära dig hur Bootstrap-stilar fungerar. Men om du bara behöver ett par kolumner och en lyhörd design, kan det vara overkill.
Mediasökningarna som används av Bootstrap baseras på ett antagande om skärm- och enhetsbredder som blir föråldrade.
Det här är mediefrågorna:
/ * Extra små enheter (telefoner, mindre än 768px) * / / * Ingen media fråga eftersom det här är standard i Bootstrap * / / * Små enheter (tabletter, 768px och uppåt) * / @media (min bredd: @screen -sm-min) ... / * Medium enheter (skrivbord, 992px och uppåt) * / @media (min bredd: @ screen-md-min) ... / * Stora enheter (stora skrivbord, 1200px och uppåt) * / @media (min bredd: @ skärm-lg-min) ...
Under det senaste året har responsiv utveckling flyttat bort från fördefinierade brytpunkter för mediefrågor och mot designbaserade brytpunkter. Medan dessa mediefrågor är baserade på och säkert kommer att fungera med Bootstraps design (så det borde inte orsaka några problem på någon av de stödda enheterna eller webbläsarna, av vilka det finns många), ger det inte den flexibilitet du har om du " re kodar din egen.
Om du skulle bestämma dig för att lägga till en mellanliggande mediafråga i ditt stilark, måste du ta de 155 linjerna med layout styling för nätverket och anpassa det till din nya brytpunkt - inte en uppgift som jag skulle avundas!
Ja, jag antar att du väntade på det här - aktiesvaret från någon skeptisk webbutvecklare till en ny ram eller ett verktyg.
Bootstrap ger otvivelaktigt mycket funktionalitet och styling du kan använda i ditt tema, och det är en bra sak. Men om du bara ska använda en bråkdel av vad som tillhandahålls betyder det att du lägger till all den extra koden för ingenting.
Filerna minas, vilket hjälper, men även så behöver du verkligen all den oanvända koden i ditt tema?
Lägg till Bootstrap till ditt tema, ring stilarket från temat stilark och bam! Du har en färdig, lyhörd layout som ser bra ut. De flesta av oss skulle bli frestad att lämna den därvid och lägga till några färg tweaks kanske men inte mycket mer.
Detta innebär att din design kommer att baseras på vad Bootstrap tillhandahåller, och inte på vad som krävs för din webbplats. Jag jobbar med många kunder, och innan vi ens börjar diskutera designen på deras webbplats frågar jag dem om deras webbplats mål, publik och mer. Allt detta kommer att informera webbplatsens utformning, både när det gäller bilder och användargränssnitt.
Faren med många teman som använder Bootstrap är att vi kommer att hamna med så många teman som ser väsentligen ut på samma sätt. WordPress temat utvecklare har gjort ett bra jobb att slänga bort anklagelserna för deras teman "ser ut som WordPress" de senaste åren, så vill vi att alla våra teman ska se ut som Bootstrap?
I slutändan tror jag att den viktigaste faktorn som kan ge dig bort med Bootstrap är det faktum att det aldrig är utformat för att arbeta med WordPress och att det fungerar på ett helt annat sätt.
Ett WordPress-tema ramverk ger dig ofta allt du får från Bootstrap, och på ett sätt som är mycket närmare anpassat till hur WordPress-utvecklare arbetar. Dessa behöver inte vara dyra eller ha stora kodbaser: Wonderflux-temat är till exempel gratis och öppen källkod och innehåller ett lyhörd system (som Bootstrap men mindre uppblåst) och ett bibliotek med funktioner och krokar som du inte " Jag kommer inte med Bootstrap.
Ett exempel på hur Bootstrap och WordPress inte är kompatibla är i utformningen av navigeringsmenyerna. Din WordPress-meny kommer inte att fungera i rutan med Bootstrap-aktiverad: i stället måste du skapa en anpassad nav-rullare. Detta är inte svårt att göra om du är bekväm med koden, men lägger till ytterligare ett steg till din temat utveckling.
Bootstrap har definitivt sina fördelar. Om du behöver en attraktiv, ren och responsiv layout för din webbplats och tillgång till en rad JavaScript-effekter, kan det hjälpa till att påskynda din utvecklingsprocess.
Men om du ska få ut det mesta av Bootstrap, måste du spendera lite tid på att lära dig det. Det finns mycket att lära sig med Bootstrap, och om du inte kommer att utnyttja allt, kanske det inte är värt det.
Avslutningsvis rekommenderar jag att du använder Bootstrap under olika omständigheter:
Och jag skulle råda att inte använda det under dessa omständigheter:
Slutligen är beslutet ditt!
