Share
Gjør et Google-søk etter 'WordPress Theme med Bootstrap', og du får hundrevis av resultater. Disse inkluderer guider som forteller deg hvordan du bruker Bootstrap for å bygge temaet ditt så vel som kommersielt og fritt tilgjengelige temaer ved hjelp av Bootstrap-rammeverket.
Søk etter 'Bootstrap' i WordPress-temaarkivet, og du får 199 resultater. Det er mye valg.
Det ser ut som at å utvikle WordPress-temaer ved hjelp av Bootstrap er alt raseri. Men er det alltid den beste tilnærmingen til arbeidsflyten for temautvikling?
Her ser jeg på fordeler og ulemper ved å bruke Bootstrap for WordPress-tema, og hjelper deg med å identifisere når Bootstrap bruker, vil hjelpe arbeidsflyten din og når den ikke vil.
Bootstraps nettsted beskriver Bootstrap som:
de mest populære HTML-, CSS- og JS-rammene for å utvikle responsive, mobile første prosjekter på nettet.
Dette forteller deg et par ting:
Hvis du betaler oppmerksomhet, vil du legge merke til at det ikke inkluderer PHP. Mens Bootstrap er en applikasjonsramme, er det ikke som et tema rammeverk: det gir deg ikke noen av tema malfiler du må opprette hvis du skal utnytte den i et tema. I stedet gir det deg et rammeverk av stiler og skript som gjør det enklere for deg å få et responsivt nettsted oppe og kjøre og legge til interaksjoner og hendelser som krever JavaScript.
Bootstrap ble opprinnelig utformet som et rammeverk for å hjelpe Twitter-utviklere til å arbeide mer effektivt og konsekvent. Tidlig navn var Twitter Blueprint, som ble endret til Bootstrap etter at flere utviklere ble involvert og prosjektet begynte å vokse.
Den ble utgitt som en åpen kildekode ramme i 2011 og har siden blitt brukt til å drive en rekke applikasjoner, inkludert WordPress-temaer.
Da jeg først kom over Bootstrap, var det viktigste salgsargumentet sin respons på en tid da mye webutvikling (inkludert WordPress-utvikling) fortsatt hadde å hente opp responsivt webdesign. Det var ikke opprinnelig responsivt: dette ble lagt til i 2012 og rammen ble gjort mobil-først i 2013.
Hvis du laster ned Bootstrap, ser du at den består av et sett med stilark (inkludert versjonsversjoner), JavaScript-filer og glyfikoner, som er inkludert i skriftfiler. Disse erstatter ikke temafilene dine: i stedet ringer du dem i stilarket og funksjonsfilen etter behov.
Jeg kommer ikke til å gi en grundig forklaring på hvordan du bruker Bootstrap med ditt WordPress-tema her: det er dekket i detalj i denne opplæringen. I stedet ser jeg på hvordan Bootstrap kan hjelpe eller hindre WordPress-temautviklings arbeidsflyten, og situasjoner der du kanskje eller kanskje ikke bruker den.
Den meget populære Bootstrap som ramme for WordPress-temaer indikerer at den definitivt har et sted. Så la oss se på noen av fordelene ved å bruke Bootstrap.
Bootstrap gir automatisk deg responsiv, mobil-første styling for ditt tema. Hvis du har slitt med å få tak i responsiv temautvikling, vil det spare deg for det harde arbeidet med å lære hvordan du lager dine egne stilark responsivt og legger til medieforespørsler.
Bootstrap bruker et rutenettbasert oppsett av 12 kolonner med rutenettklasser som du kan bruke med elementene i malfilene dine for å gjøre innholdet ditt passe inn i rutenettet.
Fordelene med denne tilnærmingen er:
Etter min mening er utformingen og typografien du får med Bootstrap veldig fin. Det vil ikke vinne noen designpriser, men det vil hjelpe deg å bygge et tema som er moderne, lett å samhandle med og leselig. Det er noen stylingfunksjoner jeg spesielt liker:
Accentsconagua
I tillegg til å innføre egne klasser for styling, inkluderer Bootstrap også styling for hele spekteret av HTML5-elementer som du kan forvente å bruke i temaet ditt. Styling alle disse fra grunnen kan være en ekte stress, så det sparer deg mye arbeid, samt gjør det enklere for deg å bruke semantisk markering i temaet ditt.
I stedet for å måtte bruke plugins eller kildeskript fra andre steder, gir Bootstrap deg et flott utvalg av skript som vil hjelpe deg med å legge til de mest brukte animasjonene og interaksjonene på nettstedet ditt. Disse inkluderer:
… og mer. Dette kan øke hastigheten på utviklingen din, og sørger også for at alle dine skript spiller pent med hverandre. Hvis du skal bruke mer enn en eller to av disse, kan Bootstrap gjøre temautviklingen mye enklere. Men hvis du bare skal bruke en eller kanskje to, kan det være en mer effektiv tilnærming med mindre lagt kode.
Men jeg tror ikke at Bootstrap er det riktige verktøyet for alle WordPress-temautviklere. Her er noen av ulemper ved å bruke Bootstrap når du utvikler dine temaer.
Jeg har allerede referert til det responsive grid-systemet som brukes i Bootstraps stilark og mengden klasser du kan bruke til å utnytte dette i temaet ditt. Dette er flott hvis du er forberedt på å bli kjent med disse klassene og finne ut hvordan du bruker dem i temaet ditt. Men hvis du ikke trenger en slik komplisert oppsett og bare vil bruke noen av stilene, kan du oppdage at du bruker uforholdsmessig stor tid på å jobbe gjennom alle klassene og trener hvilke som skal brukes.
Stilarket inneholder 155 linjer med kode bare for det nettverket layoutet i den minste skjermbredden: det er mye å få tak i hvis du vil få mest mulig ut av det, og mer enn de fleste temaer vil trenge.
I tillegg til dette er det klasser for glyphicons, for knapper og mye mer.
Hvis temaet ditt vil bruke en betydelig andel av denne stilen (eller du skal bruke Bootstrap for å støtte flere temaer), er det verdt å ta deg tid til å lære hvordan Bootstrap-stiler fungerer. Men hvis du bare trenger et par kolonner og et responsivt design, så kan det være overkill.
Medieforespørsmålene som brukes av Bootstrap er basert på en antagelse om skjerm- og enhetbredder som blir utdatert.
Dette er medieforespørsmålene:
/ * Ekstra små enheter (telefoner, mindre enn 768px) * / / * Ingen media spørring siden dette er standard i Bootstrap * / / * Små enheter (tabletter, 768px og opp) * / @media (min bredde: @screen (min. bredde: @ skjerm-md-min) ... / * Store enheter (store skrivebord, 1200px og oppover) * / @media (min bredde: @ skjerm-lg-min) ...
I løpet av det siste året har den responsive utviklingen beveget seg vekk fra forhåndsdefinerte breakpoints for medieforespørsler og mot designbaserte bruddpunkter. Selv om disse medieforespørsmålene er basert på og vil sikkert fungere med Bootstraps design (det burde ikke forårsake noen problemer på noen av de støttede enhetene eller nettleserne, hvorav mange er), gir det ikke den fleksibiliteten du har hvis du ' re koding din egen.
Hvis du skulle bestemme deg for å legge til et mellomliggende mediesøk på stilarket, må du ta 155 linjer med layout styling for rutenettet og tilpasse det til ditt nye brytepunkt - ikke en oppgave jeg ville misunnes!
Ja, jeg antar at du ventet på denne ene - lagerresponsen fra noen skeptiske webutviklere til et nytt rammeverk eller verktøy.
Bootstrap gir ubestridelig mye funksjonalitet og styling du kan bruke i temaet ditt, og det er en flott ting. Men hvis du bare skal bruke en brøkdel av det som er oppgitt, betyr det at du legger til all den ekstra koden for ingenting.
Filene blir minifisert, noe som hjelper, men likevel trenger du virkelig all den ubrukte koden i temaet ditt?
Legg til Bootstrap til temaet ditt, ring stilarket fra temaets stilark og bam! Du har et ferdig, responsivt layout som ser bra ut. De fleste av oss ville være fristet til å forlate det ved å legge til noen fargejusteringer kanskje, men ikke mye mer.
Dette betyr at designet ditt vil være basert på hva Bootstrap gir, og ikke på hva som kreves for nettstedet ditt. Jeg jobber med mange kunder, og før vi selv begynner å diskutere utformingen av nettstedet deres, spør jeg dem om deres nettsted mål, publikum og mer. Alt dette vil informere utformingen av nettstedet, både når det gjelder visuals og i forhold til brukergrensesnittet.
Faren for mange temaer ved hjelp av Bootstrap er at vi vil ende opp med så mange temaer som ser stort sett ut på samme måte. WordPress-temautviklere har gjort en god jobb med å kaste bort anklagene til deres temaer som "ser ut som WordPress" de siste årene, så vil vi at alle våre temaer skal "se ut som Bootstrap"?
Til slutt tror jeg at den viktigste faktoren som kan sette deg av med Bootstrap, er det faktum at det aldri ble designet for å jobbe med WordPress, og at det fungerer på en helt annen måte.
Et WordPress-tema rammeverk vil ofte gi deg alt du får fra Bootstrap, og på en måte som er mye nærmere tilpasset måten WordPress-utviklere jobber med. Disse må ikke være dyre eller ha store kodebaser: Wonderflux-temaet er for eksempel gratis og åpen kildekode, og inkluderer et responsivt grid-system (som Bootstrap, men mindre oppblåst) og et bibliotek med funksjoner og kroker som du ikke ' ikke få med Bootstrap.
Et eksempel på hvordan Bootstrap og WordPress ikke er kompatible, er i utformingen av navigasjonsmenyer. Din WordPress-meny fungerer ikke ut av boksen med Bootstrap-aktivert: i stedet må du opprette en tilpasset nav-ruller. Dette er ikke vanskelig å gjøre hvis du er komfortabel med koden, men legger til et nytt skritt for temautviklingen.
Bootstrap har definitivt fordelene. Hvis du trenger et attraktivt, rent og responsivt layout for nettstedet ditt og tilgang til en rekke JavaScript-effekter, kan det hjelpe til med å øke hastigheten på temautviklingsprosessen.
Men hvis du skal få mest mulig ut av Bootstrap, må du bruke litt tid på å lære det. Det er mye å lære med Bootstrap, og hvis du ikke skal gjøre bruk av alt, så er det kanskje ikke verdt det.
Til slutt vil jeg anbefale å bruke Bootstrap under en rekke forhold:
Og jeg anbefaler at du ikke bruker det under disse forholdene:
Til slutt er avgjørelsen din!
