Cum se adaugă Twitter Bootstrap CSS în WordPress folosind Shortcodes

Adăugarea de elemente CSS, cum ar fi vârfurile de instrumente, butoanele colorate și efectele de redirecționare pot ajuta la evidențierea conținutului dvs. Problema este că majoritatea oamenilor nu știu cum să utilizeze CSS pentru a adăuga butoane colorate, tabele, etichete etc. V-am arătat cum să adăugați widget-uri colorate și tabele în WordPress. În acest articol, vă vom arăta cum să utilizați Twitter Bootstrap CSS în WordPress folosind coduri scurte.

Twitter Bootstrap este un cadru CSS și JavaScript care vă ajută să îmbunătățiți rapid designul și funcționalitatea site-ului. Ea a fost dezvoltată de Mark Otto și Jacob Thornton la Twitter ca un cadru pentru a încuraja coerența între instrumentele lor interne. Mai târziu a fost lansat ca un instrument open source. Este frumos, simplu și compatibil în toate browserele.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul WordPress Twitter Bootstrap CSS. După activare, pluginul va adăuga un element de meniu din Bootstrap Twitter în administratorul dvs. WordPress. Dacă faceți clic pe acesta, veți ajunge la tabloul de bord al pluginului.

Pe tabloul de bord, veți vedea o mulțime de anunțuri adăugate de autorul pluginului. Derulați în jos pe acestea și veți vedea codurile scurte pe care le puteți adăuga în postările dvs. Fiecare cod scurt este legat de pagina de suport a pluginului, unde puteți vedea mai multe exemple de utilizare a acestor scurte coduri.

Sub elementul din meniul Bootstrap de pe Twitter, în admin, există un link pentru a configura setările CSS Bootstrap. Dacă faceți clic pe aceasta, veți ajunge la pagina de configurare unde puteți schimba setările pentru a se potrivi nevoilor dvs. Aveți opțiunea de a alege ce versiune CSS Bootstrap doriți să utilizați. Mai jos veți găsi opțiuni mai potrivite pentru utilizatorii de nivel avansat.

Acum că am analizat configurația, să adăugăm câteva elemente css de bootstrap la un post de blog. Pur și simplu lipiți codurile scurte de acest fel în postarea sau conținutul paginii:

  [TBS_BUTTON color = "prime" link = "http://example.com"] Descărcați [/ TBS_BUTTON] [TBS_BUTTON color = "danger" link = "http://example.com" [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_LABEL] Afișați mai multe [/ TBS_BUTTON] : Label [/ TBS_LABEL] [TBS_LABEL] [TBS_LABEL] Pericol: Etichetă [/ TBS_LABEL] [TBS_LABEL] 

Acesta este modul în care vor arăta aceste coduri scurte în postarea pe blog:

Există multe alte elemente CSS pe care le puteți adăuga la postările dvs. Tooltips, meniuri acordeon, casete pop-up, bare de progres etc. Acest site de plugin are mai multe documente despre modul de utilizare a acestor funcții. Dacă sunteți curios despre icoane, atunci vă puteți uita la site-ul oficial Twitter Bootstrap pentru setul complet de icoane pe care le puteți utiliza.

Știm că cadrele tematice precum Genesis și altele vin cu propriile opțiuni. Folosiți elemente CSS în postările dvs.? Spuneți-ne, lăsând un comentariu mai jos.