Share
Faceți o căutare Google pentru 'WordPress Theme with Bootstrap' și veți obține sute de rezultate. Acestea includ ghiduri care vă spun cum să utilizați Bootstrap pentru a vă construi tema, precum și teme comerciale și disponibile în mod liber utilizând cadrul Bootstrap.
Căutați "Bootstrap" în depozitul de tematici WordPress și veți obține 199 de rezultate. Este o alegere foarte bună.
Se pare că dezvoltarea de teme WordPress folosind Bootstrap este tot furia. Dar este întotdeauna cea mai bună abordare pentru fluxul de lucru pentru dezvoltarea temelor?
Aici mă voi uita la argumentele pro și contra de a folosi Bootstrap pentru tematica WordPress și vă va ajuta să identificați când folosiți Bootstrap va ajuta fluxul de lucru și când nu va.
Site-ul Bootstrap descrie Bootstrap ca:
cele mai populare cadre HTML, CSS și JS pentru dezvoltarea unor proiecte primare mobile, receptive, pe web.
Acest lucru vă spune câteva lucruri:
Dacă vă acordați atenție, veți observa că aceasta nu include PHP. În timp ce Bootstrap este un cadru de aplicații, nu este ca un cadru tematic: nu vă oferă niciunul dintre fișierele tematice de șablon pe care va trebui să le creați dacă intenționați să le folosiți într-o temă. În schimb, ceea ce vă oferă vă oferă un cadru de stiluri și scripturi care vă vor ajuta să obțineți mai ușor un site receptiv și să adăugați interacțiuni și evenimente care necesită JavaScript.
Bootstrap a fost conceput inițial ca un cadru pentru a ajuta dezvoltatorii Twitter să funcționeze mai eficient și mai consistent. Numele său timpuriu a fost Twitter Blueprint, care a fost schimbat în Bootstrap după ce mai mulți dezvoltatori s-au implicat și proiectul a început să crească.
A fost lansat ca un cadru open source în 2011 și de atunci a fost folosit pentru a servi o varietate de aplicații, inclusiv teme WordPress.
Când am întâlnit pentru prima oară Bootstrap, principalul său punct de vânzare a fost reacția sa într-un moment în care o mulțime de dezvoltare web (inclusiv dezvoltarea WordPress) a trebuit încă să-și atingă designul web receptiv. Aceasta nu a fost inițial receptivă: aceasta a fost adăugată în 2012, iar cadrul a fost făcut mobil în premieră în 2013.
Dacă descărcați Bootstrap, veți vedea că acesta constă dintr-un set de foi de stil (inclusiv versiuni miniaturate), fișiere JavaScript și glificon, care sunt incluse în fișierele de fonturi. Acestea nu înlocuiesc fișierele temei: în schimb, le apelați în foaia de stil și funcționează după cum este necesar.
Nu voi oferi o explicație în profunzime despre modul în care utilizați Bootstrap cu tema WordPress aici: este prezentat în detaliu în acest tutorial. În schimb, mă voi uita la modul în care Bootstrap ar putea să vă ajute sau să vă împiedice fluxul de lucru pentru dezvoltarea temelor WordPress și situațiile în care ați putea sau nu să-l utilizați.
Foarte popularitatea lui Bootstrap ca cadru pentru teme WordPress indică faptul că acesta are cu siguranță un loc. Deci, să aruncăm o privire la unele dintre beneficiile utilizării Bootstrap.
Bootstrap vă oferă în mod automat un stil de viață receptiv, mobil pentru prima dată pentru tema dvs. Dacă v-ați străduit să vă ocupați de dezvoltarea temelor receptive, aceasta vă va salva munca grea de a învăța cum să vă răspundeți la propriile foi de stil și să adăugați interogări media.
Bootstrap folosește o structură bazată pe grilă de 12 coloane cu clase de rețea pe care le puteți utiliza cu elementele din fișierele șablonului pentru a vă face conținutul să se încadreze în grila.
Beneficiile acestei abordări includ:
În opinia mea, aspectul și tipografia pe care o aveți cu Bootstrap este foarte plăcută. Nu va câștiga niciun premiu de design, dar vă va ajuta să construiți o temă modernă, ușor de interacționat și lizibilă. Există câteva caracteristici de stil care îmi place în mod deosebit:
Accentsconagua
Pe lângă introducerea propriilor clase de stil, Bootstrap include și styling pentru întreaga gamă de elemente HTML5 pe care le puteți aștepta să le utilizați în tema dvs. Styling-ul acestor lucruri de la zero poate fi un hassle real, așa că vă economisește multă muncă, precum și simplificarea utilizării marcajului semantic în tema dvs..
În loc să utilizați pluginuri sau scripturi sursă din altă parte, Bootstrap vă oferă o gamă largă de scripturi, care vă vor ajuta să adăugați cele mai frecvent utilizate animații și interacțiuni pe site-ul dvs. Acestea includ:
… și altele. Acest lucru vă poate accelera dezvoltarea și, de asemenea, vă asigură că toate scenariile joacă frumos unul cu celălalt. Dacă intenționați să utilizați mai mult de una sau două dintre acestea, Bootstrap vă poate face mult mai ușor dezvoltarea temelor; cu toate acestea, dacă veți folosi doar una sau două, este posibil să existe o abordare mai eficientă cu un cod mai puțin adăugat.
Cu toate acestea, nu cred că Bootstrap este instrumentul potrivit pentru toți dezvoltatorii temei WordPress. Iată câteva dintre dezavantajele de a utiliza Bootstrap atunci când vă dezvoltați temele.
Am făcut deja referire la sistemul de grilă receptiv utilizat în foile de stil Bootstrap și la multitudinea de clase pe care le puteți folosi pentru a le folosi în tema dvs. Acest lucru este minunat dacă sunteți pregătit să vă familiarizați cu aceste clase și să lucrați în modul de utilizare a acestora în tema dvs. Cu toate acestea, dacă nu aveți nevoie de un astfel de aspect complicat și veți folosi doar câteva dintre aceste stiluri, este posibil să constatați că petreceți o perioadă de timp disproporționat de mare în toate clasele și de a determina care dintre ele să fie utilizate.
Foaia de stil include 155 de linii de cod doar pentru acel aspect al rețelei în lățimea cea mai mică a ecranului: este foarte mult să te descurci dacă vrei să profiți la maximum și mai mult decât majoritatea temelor vor avea nevoie.
În plus, există clase pentru glificoni, butoane și multe altele.
Dacă tema dvs. va utiliza o parte semnificativă a acestui stil (sau veți folosi Bootstrap pentru a accepta mai multe teme), atunci merită să vă luați timp pentru a afla cum funcționează stilurile Bootstrap. Dar, dacă aveți nevoie doar de câteva coloane și un design receptiv, atunci ar putea fi prea mult.
Interogările media utilizate de Bootstrap se bazează pe o prezumție despre ecranul și lățimile dispozitivului care devin învechite.
Acestea sunt interogările media:
/ * Dispozitivele de mici dimensiuni (telefoane, mai puțin de 768 pixeli) * / / * Nici o interogare media, deoarece aceasta este cea implicită în Bootstrap * / / * Dispozitivele mici (tablete, 768px și peste) * / @media (min-width: @screen -sm-min) ... / * Dispozitivele medii (desktop-uri, 992 pixeli și peste) * / @media (min-width: @ screen-md-min) * / @media (min-width: @ screen-lg-min) ...
În ultimul an, evoluția reactivă se îndepărtează de punctele predefinite pentru interogările media și față de punctele de întrerupere de proiectare. În timp ce aceste interogări media se bazează și cu siguranță vor funcționa cu designul Bootstrap (deci nu ar trebui să provoace probleme pe niciunul dintre dispozitivele sau browserele acceptate, dintre care există multe), nu oferă flexibilitatea pe care o aveți, re codarea dvs..
Dacă ați decide să adăugați o interogare media intermediară în foaia dvs. de stil, atunci ar trebui să luați cele 155 de linii de design de aspect pentru sistemul de rețea și să-l adaptați noului punct de întrerupere - nu o sarcină pe care aș invidia!
Da, cred că așteptați acest lucru - răspunsul stocului oricărui dezvoltator sceptic la un nou cadru sau instrument.
Bootstrap vă oferă cu siguranță o mulțime de funcționalități și stil care le puteți utiliza în tema dvs. și este un lucru minunat. Cu toate acestea, dacă veți folosi doar o fracțiune din ceea ce este furnizat, înseamnă că adăugați tot codul suplimentar pentru nimic.
Fișierele sunt minificate, ceea ce vă ajută, dar chiar și așa, chiar aveți nevoie de tot codul neutilizat în tema dvs.?
Adăugați Bootstrap la tema dvs., apelați foaia de stil din foile de stil și bam! Aveți o configurație gata și receptivă care arată foarte bine. Cei mai mulți dintre noi ar fi tentați să-l lăsăm la asta, adăugând unele modificări de culoare, poate, dar nu mult mai mult.
Aceasta înseamnă că designul dvs. se va baza pe ceea ce oferă Bootstrap și nu pe ceea ce este necesar pentru site-ul dvs. Lucrez cu mulți clienți și, înainte de a începe să discutăm despre designul site-ului lor, îi pun întrebări despre obiectivele site-ului, publicul și multe altele. Toate acestea vor informa design-ul site-ului, atat din punct de vedere vizual cat si din punct de vedere al interfetei utilizatorului.
Pericolul multor teme care utilizează Bootstrap este că vom termina cu atât de multe teme care arată în esență aceleași. Dezvoltatorii temei WordPress au făcut o treabă excelentă de a elimina acuzațiile temelor lor "arătând ca WordPress" în ultimii ani, așa că vrem ca toate temele noastre să "arate ca Bootstrap"?
În cele din urmă, cred că cel mai important factor care te-ar putea scoate folosind Bootstrap este faptul că nu a fost niciodată proiectat să funcționeze cu WordPress și că funcționează într-un mod foarte diferit.
Un cadru tematic WordPress vă va oferi adesea tot ceea ce obțineți de la Bootstrap și într-un mod mult mai strâns aliniat la modul în care funcționează dezvoltatorii WordPress. Acestea nu trebuie să fie scumpe sau să aibă baze de coduri uriașe: tema Wonderflux, de exemplu, este gratuită și open source și include un sistem grid receptiv (cum ar fi Bootstrap, dar mai puțin umflat) și o bibliotecă de funcții și cârlige pe care nu le- iei cu Bootstrap.
Un exemplu de modul în care Bootstrap și WordPress nu sunt compatibile este în proiectarea meniurilor de navigare. Meniul dvs. WordPress nu va funcționa din cutie cu Bootstrap activat: în schimb va trebui să creați un navigator custom nav. Acest lucru nu este greu de făcut dacă sunteți confortabil cu codul, dar adăugați un alt pas spre dezvoltarea temelor.
Bootstrap are cu siguranță beneficiile sale. Dacă aveți nevoie de un aspect atrăgător, curat și receptiv pentru site-ul dvs. și de accesul la o serie de efecte JavaScript, atunci acesta poate contribui la accelerarea procesului dvs. de dezvoltare a temelor.
Cu toate acestea, dacă veți obține cele mai multe din Bootstrap, va trebui să petreceți ceva timp învățând-o. Există multe lucruri de învățat cu Bootstrap și, dacă nu veți folosi totul, atunci este posibil să nu merități.
În concluzie, aș recomanda utilizarea Bootstrap într-o serie de circumstanțe:
Și aș sfătui să nu o folosesc în aceste circumstanțe:
În cele din urmă decizia este a ta!
