Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak dodać Twitter Bootstrap CSS w WordPress za pomocą krótkich kodów

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Dodawanie elementów CSS, takich jak etykietki, kolorowe przyciski i efekty przewijania, może pomóc wyróżnić twoją treść. Problem polega na tym, że większość ludzi nie wie, jak używać CSS do dodawania kolorowych przycisków, tabel, etykiet itp. Pokazaliśmy już, jak dodawać kolorowe widżety i tabele w WordPress. W tym artykule pokażemy, 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 poprawić wygląd i funkcjonalność twojej witryny. Został on opracowany przez Marka Otto i Jacoba Thorntona z Twittera jako framework zachęcający do spójności w ich wewnętrznych narzędziach. Później został wydany jako narzędzie open source. Jest piękny, prosty i zgodny [może być też „kompatybilny”] na wszystkich przeglądarkach.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę WordPress Twitter Bootstrap CSS. Po włączaniu wtyczka doda pozycję menu Twitter Bootstrap w twoim panelu administracyjnym WordPress. Kliknięcie na nią przeniesie cię do kokpitu wtyczki.

Bootstrap Menu

Na kokpicie zobaczysz mnóstwo reklam dodanych przez autora wtyczki. Przewiń w dół obok nich, a zobaczysz krótkie kody, które możesz dodać do swoich wpisów. Każdy krótki kod jest odnośnikiem do strony pomocy technicznej wtyczki, gdzie można zobaczyć więcej przykładów użycia tych skrótów.

Bootstrap shortcode usage examples

Pod pozycją menu Twitter Bootstrap w twoim panelu administratora znajduje się odnośnik do konfiguracji ustawień Bootstrap CSS. Kliknięcie go przeniesie cię na stronę konfiguracji, gdzie możesz zmienić ustawienia, aby dopasować je do twoich potrzeb. Masz możliwość wyboru wersji Bootstrap CSS, której chcesz używać. Poniżej znajdują się opcje bardziej odpowiednie dla zaawansowanych użytkowników.

Teraz, gdy przyjrzeliśmy się konfiguracji, dodajmy kilka elementów bootstrap css do wpisu na blogu. Po prostu wklej krótki kod w taki sposób do twojego wpisu lub treści 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 krótkie kody we wpisie na blogu:

Twitter bootstrap css elements added to a post

Istnieje wiele innych elementów CSS, które możesz dodać do swoich wpisów. Etykietki, menu akordeonowe, wyskakujące okienka, paski postępu itp. Witryna internetowa tej wtyczki zawiera więcej dokumentacji: jak korzystać z tych funkcji. Jeśli Zamierzasz zapoznać się z ikonkami, to możesz zajrzeć na oficjalną witrynę Twitter Bootstrap, gdzie znajdziesz kompletny zestaw ikonek, których możesz użyć.

Wiemy, że frameworki motywów, takie jak Genesis i inne, mają własne opcje. Czy używasz elementów CSS w swoich wpisach? Daj nam znać, zostawiając komentarz poniżej.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

10 komentarzyZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. kezzy says

    Thanks for this post. I have been using theme built on bootstrap framework and the process is straight forward rather than to input shortcodes here and there. Anyway will it not be easier to enqueue bootstrap script and style to a theme header and achieve the same result?

    • WPBeginner Support says

      Deprito, Genesis is itself a Theme Framework and getting Twitter Bootstrap to work on Genesis would require additional steps. Try Genesis support forums, someone must have already done that.

      Administrator

  3. James Matthews says

    Amazing tutorial. Cleared up a lot of confusion that I had about twitter bootstrap. Parts of bootstrap are still difficult for me to understand, but this will definitely be really useful as I start to become more familiar with it.

  4. Steven Blake mba says

    Thanks for what I am sure must be a good article. I find it quite frustrating the amount of articles I could really be interested in that forget or don’t realise that the use of buzz words that you deal with every day might not be understood by anyone who hasn’t come across it before. I try not to do this in my own work as a life coach, which if I advertised as being an NLP practitioner I would put off 90% of people who don’t know what that is.

    So unfortunately until I understand what a twitter boot strap is I really don’t need the detail of how to install it. It may be I am missing out, but I don’t have the time to research any more than I already do and I did arrive here at your article, I just don’t want to have to look up several more before I return!

    Just one line explaining what it does and the benefits of having a twitter boot strap would be the difference between me reading on instead of moving on.

    This is constructive criticism by the way, add the description in this and any subsequent blogs and watch your outcomes improve. Best wishes, Steven

    • Noumaan Yaqoob says

      @Steven Twitter bootstrap is a set of predefined design tools which helps other designers and developers to use those elements in their own projects.

      The purpose of this article and the plugin is to help users like yourself to use twitter bootstrap without learning code or css.

  5. craig grella says

    great post, thanks. I’ve used bootstrap and ported it for thesis and a few other themes, but this will be handy for sites that dont need the framework – just the buttons and icons.

    nice catch!

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.