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

Kısa Kodlar kullanarak WordPress’te Twitter Bootstrap CSS nasıl eklenir

Araç ipuçları, renkli düğmeler ve roll-over efektleri gibi CSS öğeleri eklemek içeriğinizin öne çıkmasına yardımcı olabilir. Sorun şu ki, çoğu insan renkli düğmeler, tablolar, etiketler vb. eklemek için CSS’yi nasıl kullanacağını bilmiyor. WordPress‘te renkli widget ‘ların ve tabloların nasıl ekleneceğini gösterdik. Bu makalede, kısa kodlar kullanarak WordPress’te Twitter Bootstrap CSS’yi nasıl kullanacağınızı göstereceğiz.

Twitter Bootstrap, site tasarımınızı ve işlevselliğinizi hızlı bir şekilde artırmanıza yardımcı olan bir CSS ve JavaScript çerçevesidir. Twitter’da Mark Otto ve Jacob Thornton tarafından dahili araçlarında tutarlılığı teşvik etmek için bir çerçeve olarak geliştirilmiştir. Daha sonra açık kaynaklı bir araç olarak piyasaya sürüldü. Güzel, basit ve tüm tarayıcılarda uyumludur.

Yapmanız gereken ilk şey WordPress Twitter Bootstrap CSS eklentisini yüklemek ve etkinleştirmektir. Etkinleştirmenin ardından, eklenti WordPress yöneticinize bir Twitter Bootstrap menü öğesi ekleyecektir. Üzerine tıklamak sizi eklentinin kontrol paneline götürecektir.

Bootstrap Menu

Kontrol panelinde, eklenti yazarı tarafından eklenen çok sayıda reklam göreceksiniz. Bunları aşağı kaydırdığınızda yazılarınıza ekleyebileceğiniz kısa kodları göreceksiniz. Her kısa kod, bu kısa kodların daha fazla kullanım örneğini görebileceğiniz eklentinin destek sayfasına bağlanmıştır.

Bootstrap shortcode usage examples

Yöneticinizdeki Twitter Bootstrap menü öğesinin altında Bootstrap CSS ayarlarını yapılandırmak için bir bağlantı vardır. Buna tıkladığınızda, ayarları ihtiyaçlarınıza göre değiştirebileceğiniz yapılandırma sayfasına yönlendirilirsiniz. Hangi Bootstrap CSS sürümünü kullanmak istediğinizi seçme seçeneğiniz vardır. Bunun altında ileri düzey kullanıcılar için daha uygun seçenekler bulacaksınız.

Yapılandırmaya baktığımıza göre, şimdi bir blog gönderisine bazı bootstrap css öğeleri ekleyelim. Bunun gibi kısa kodları yazınıza veya sayfa içeriğinize yapıştırmanız yeterlidir:

<!--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]

Bu kısa kodlar blog yazısında bu şekilde görünecektir:

Twitter bootstrap css elements added to a post

Yazılarınıza ekleyebileceğiniz daha birçok CSS öğesi vardır. Araç ipuçları, akordeon menüler, açılır kutular, ilerleme çubukları vb. Bu eklentinin web sitesinde bu özelliklerin nasıl kullanılacağına dair daha fazla belge bulunmaktadır. Simgeleri merak ediyorsanız, kullanabileceğiniz simgelerin tamamı için Twitter Bootstrap’in resmi sitesine bakabilirsiniz.

Genesis ve diğerleri gibi tema çerçevelerinin kendi seçenekleriyle geldiğini biliyoruz. Yazılarınızda CSS öğeleri kullanıyor musunuz? Aşağıya bir yorum bırakarak bize bildirin.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

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.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

10 yorumBir Cevap Bırakın

  1. Syed Balkhi

    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

    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?

  3. Thiago

    Thank you so much! This can help me a lot.

  4. Deprito

    I’m using genesis, but when i try this plugin.. My css gone crazy..
    How to fix it? little bit confuse..

    • WPBeginner Support

      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.

      Yönetici

  5. James Matthews

    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.

  6. Steven Blake mba

    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

      @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.

  7. craig grella

    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!

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.