Dodawanie elementów CSS, takich jak podpowiedzi, kolorowe przyciski i efekty najazdu, może pomóc Twoim treściom się wyróżnić. Problem polega na tym, że większość ludzi nie wie, jak używać CSS do dodawania kolorowych przycisków, tabel, etykiet itp. Pokazaliśmy Ci, jak dodawać kolorowe widżety i tabele w WordPressie. W tym artykule pokażemy Ci, jak używać Twitter Bootstrap CSS w WordPressie za pomocą krótkich kodów.
Twitter Bootstrap to framework CSS i JavaScript, który pomaga szybko ulepszyć projekt i funkcjonalność Twojej strony. Został opracowany przez Marka Otto i Jacoba Thorntona w Twitterze jako framework, który zachęca do spójności w ich wewnętrznych narzędziach. Później został wydany jako narzędzie open source. Jest piękny, prosty i kompatybilny ze wszystkimi przeglądarkami.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę WordPress Twitter Bootstrap CSS. Po aktywacji wtyczka doda pozycję menu Twitter Bootstrap w panelu administracyjnym WordPress. Kliknięcie na nią przeniesie Cię do pulpitu wtyczki.
W panelu administracyjnym zobaczysz mnóstwo reklam dodanych przez autora wtyczki. Przewiń je, a zobaczysz skrócone kody, które możesz dodać do swoich postów. Każdy skrócony kod jest połączony ze stroną wsparcia wtyczki, gdzie możesz zobaczyć więcej przykładów użycia tych skróconych kodów.
W pozycji menu Twitter Bootstrap w Twoim panelu administracyjnym znajduje się link do konfiguracji ustawień Bootstrap CSS. Kliknięcie go przeniesie Cię do strony konfiguracji, gdzie możesz zmienić ustawienia, aby dopasować je do swoich potrzeb. Masz możliwość wyboru, której wersji Bootstrap CSS chcesz użyć. Poniżej znajdziesz opcje bardziej odpowiednie dla zaawansowanych użytkowników.
Teraz, gdy przyjrzeliśmy się konfiguracji, dodajmy kilka elementów CSS bootstrap do wpisu na blogu. Po prostu wklej skrócone kody w ten sposób w treści swojego posta lub strony:
<!--Shortcodes-> [TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="http://example.com"]Download[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="danger" link="http://example.com"]Cancel[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="success" link="http://example.com"]Learn more[/TBS_BUTTON] Icons: [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-chevron-right"] [TBS_ICON class="icon-music"] [TBS_ICON class="icon-film"] [TBS_ICON class="icon-user"] [TBS_ICON class="icon-wrench"] [TBS_LABEL class="warning"]Warning: Label[/TBS_LABEL] [TBS_LABEL class="danger"]Danger: Label[/TBS_LABEL] [TBS_LABEL class="success"]Green: Label[/TBS_LABEL] [TBS_ALERT class="success"]Settings saved[/TBS_ALERT]
Tak będą wyglądać te skrócone kody w poście na blogu:
Istnieje wiele innych elementów CSS, które można dodać do swoich postów. Podpowiedzi, menu akordeonowe, okna wyskakujące, paski postępu itp. Na stronie tego wtyczki znajduje się więcej dokumentacji na temat korzystania z tych funkcji. Jeśli interesują Cię ikony, możesz zajrzeć na oficjalną stronę Twitter Bootstrap, aby zobaczyć pełny zestaw ikon, których możesz użyć.
Wiemy, że frameworki motywów takie jak Genesis i inne mają swoje własne opcje. Czy używasz elementów CSS w swoich postach? Daj nam znać, zostawiając komentarz poniżej.
kezzy
Dzięki za ten post. Używam motywu zbudowanego na frameworku Bootstrap, a proces jest prosty, zamiast wpisywać krótkie kody tu i tam. Czy nie byłoby łatwiej podłączyć skrypt i styl Bootstrap do nagłówka motywu i osiągnąć ten sam rezultat?
Thiago
Dziękuję bardzo! To mi bardzo pomoże.
Deprito
I’m using genesis, but when i try this plugin.. My css gone crazy..
How to fix it? little bit confuse..
Wsparcie WPBeginner
Deprito, Genesis samo w sobie jest frameworkiem motywów, a sprawienie, aby Twitter Bootstrap działał na Genesis, wymagałoby dodatkowych kroków. Spróbuj forów wsparcia Genesis, ktoś już musiał to zrobić.
Admin
James Matthews
Niesamowity tutorial. Rozjaśnił wiele moich wątpliwości dotyczących Twitter Bootstrap. Niektóre części Bootstrapa nadal są dla mnie trudne do zrozumienia, ale to z pewnością będzie bardzo pomocne, gdy zacznę się z nim lepiej zapoznawać.
Steven Blake mba
Dziękuję za to, co jestem pewien, że musi być dobrym artykułem. Uważam za dość frustrujące, że wiele artykułów, które mogłyby mnie naprawdę zainteresować, zapomina lub nie zdaje sobie sprawy, że użycie modnych słów, z którymi masz do czynienia na co dzień, może nie być zrozumiałe dla nikogo, kto się z tym wcześniej nie spotkał. Staram się tego nie robić w mojej własnej pracy jako coach życiowy, który, gdybym reklamował się jako praktyk NLP, odstraszyłbym 90% ludzi, którzy nie wiedzą, co to jest.
Tak więc, niestety, dopóki nie zrozumiem, czym jest twitter boot strap, naprawdę nie potrzebuję szczegółów, jak go zainstalować. Może coś tracę, ale nie mam czasu na dalsze badania niż już robię, a trafiłem tutaj do Twojego artykułu, po prostu nie chcę szukać kilku kolejnych, zanim wrócę!
Jedna linijka wyjaśniająca, co robi i jakie korzyści daje twitter boot strap, byłaby różnicą między tym, czy będę czytać dalej, czy przejdę dalej.
To jest konstruktywna krytyka, dodaj opis w tym i kolejnych blogach, a zobaczysz poprawę wyników. Wszystkiego najlepszego, Steven
Noumaan Yaqoob
@Steven Twitter bootstrap to zestaw predefiniowanych narzędzi projektowych, które pomagają innym projektantom i programistom wykorzystywać te elementy we własnych projektach.
Celem tego artykułu i wtyczki jest pomoc użytkownikom takim jak Ty w korzystaniu z Twitter Bootstrap bez konieczności nauki kodu lub CSS.
Richie
Świetny tutorial.
craig grella
świetny post, dzięki. Używałem bootstrap i przeniosłem go do motywu tezy i kilku innych, ale to będzie przydatne dla stron, które nie potrzebują frameworka – tylko przycisków i ikon.
niezłe spostrzeżenie!