Araç ipuçları, renkli düğmeler ve üzerine gelindiğinde efektler 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. Renkli widget'lar ve tabloları WordPress'e nasıl ekleyeceğinizi gösterdik. Bu makalede, kısa kodları kullanarak WordPress'te Twitter Bootstrap CSS'yi nasıl kullanacağınızı göstereceğiz.
Twitter Bootstrap, sitenizin tasarımını ve işlevselliğini hızla geliştirmenize yardımcı olan bir CSS ve JavaScript çerçevesidir. Mark Otto ve Jacob Thornton tarafından Twitter'da dahili araçları arasında tutarlılığı teşvik etmek için bir çerçeve olarak geliştirilmiştir. Daha sonra açık kaynaklı bir araç olarak yayınlandı. Güzel, basit ve tüm tarayıcılarda uyumludur.
Yapmanız gereken ilk şey WordPress Twitter Bootstrap CSS eklentisini kurmak ve etkinleştirmektir. Etkinleştirdikten sonra, eklenti WordPress yönetici panelinize bir Twitter Bootstrap menü öğesi ekleyecektir. Buna tıklamak sizi eklentinin kontrol paneline götürecektir.
Kontrol panelinde, eklenti yazarı tarafından eklenen çok sayıda reklam göreceksiniz. Onları aşağı kaydırın ve gönderilerinize 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ğlantılıdır.
Yönetici panelinizdeki Twitter Bootstrap menü öğesinin altında, Bootstrap CSS ayarlarını yapılandırmak için bir bağlantı bulunur. Buna tıklamak sizi, ayarları ihtiyaçlarınıza uyacak şekilde değiştirebileceğiniz yapılandırma sayfasına götürecektir. Hangi Bootstrap CSS sürümünü kullanmak istediğinizi seçme seçeneğiniz vardır. Bunun altında, daha çok ileri düzey kullanıcılar için uygun seçenekler bulacaksınız.
Yapılandırmaya baktığımıza göre, bir blog gönderisine bazı bootstrap css öğeleri ekleyelim. Kısa kodları gönderi veya sayfa içeriğinize şu şekilde 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 gönderisinde şöyle görünecektir:
Gönderilerinize ekleyebileceğiniz çok daha fazla CSS öğesi var. Araç ipuçları, akordeon menüler, açılır pencereler, ilerleme çubukları vb. Bu eklentinin web sitesinde bu özellikleri nasıl kullanacağınıza dair daha fazla belge bulunmaktadır. Simgeler hakkında merak ediyorsanız, kullanabileceğiniz tüm simge setini görmek için Twitter Bootstrap'ın resmi sitesine bakabilirsiniz.
Genesis ve diğerleri gibi tema çerçevelerinin kendi seçenekleriyle geldiğini biliyoruz. Gönderilerinizde CSS öğeleri kullanıyor musunuz? Aşağıya yorum bırakarak bize bildirin.
kezzy
Bu gönderi için teşekkürler. Bootstrap framework üzerine kurulu bir tema kullanıyorum ve her yere kısa kod girmek yerine süreç oldukça basit. Yine de, aynı sonucu elde etmek için bootstrap betiğini ve stilini bir tema başlığına eklemek daha kolay olmaz mı?
Thiago
Çok teşekkür ederim! Bu bana çok yardımcı olabilir.
Deprito
Genesis kullanıyorum ama bu eklentiyi denediğimde... CSS'im çıldırdı.
Bunu nasıl düzeltebilirim? Biraz kafam karıştı..
WPBeginner Desteği
Deprito, Genesis kendi başına bir Tema Çerçevesidir ve Twitter Bootstrap'ı Genesis üzerinde çalıştırmak ek adımlar gerektirecektir. Genesis destek forumlarını deneyin, birisi bunu zaten yapmış olmalı.
Yönetici
James Matthews
Harika bir eğitim. Twitter bootstrap hakkındaki birçok kafa karışıklığımı giderdi. Bootstrap'ın bazı kısımlarını anlamakta hala zorlanıyorum, ancak buna daha aşina olmaya başladıkça bu kesinlikle çok faydalı olacaktır.
Steven Blake mba
Eminim iyi bir makale olan bu yazı için teşekkürler. Gerçekten ilgilenebileceğim makalelerin, her gün kullandığınız kelime oyunlarının, daha önce karşılaşmamış kimse tarafından anlaşılmayacağını unutması veya fark etmemesi oldukça sinir bozucu. Bir yaşam koçu olarak kendi işimde bunu yapmamaya çalışıyorum, eğer NLP uygulayıcısı olarak reklam yapsaydım, bunun ne olduğunu bilmeyen insanların %90'ını uzaklaştırırdım.
Bu yüzden, ne olduğunu anlayana kadar bir twitter boot strap'inin ne olduğunu anlayana kadar maalesef nasıl kurulacağına dair ayrıntıya ihtiyacım yok. Belki bir şeyleri kaçırıyorum ama zaten yaptığım araştırmadan daha fazlasını araştıracak zamanım yok ve makalenize geldim, geri dönmeden önce birkaç tane daha bakmak istemiyorum!
Ne işe yaradığını ve bir twitter boot strap'ine sahip olmanın faydalarını açıklayan tek bir satır, benim okumaya devam etmem ile ilerlemem arasındaki farkı yaratacaktır.
Bu arada bu yapıcı bir eleştiridir, açıklamayı bu ve sonraki bloglara ekleyin ve sonuçlarınızın iyileştiğini görün. İyi dileklerimle, Steven
Noumaan Yaqoob
@Steven Twitter bootstrap, diğer tasarımcıların ve geliştiricilerin bu öğeleri kendi projelerinde kullanmalarına yardımcı olan önceden tanımlanmış tasarım araçları kümesidir.
Bu makalenin ve eklentinin amacı, sizin gibi kullanıcıların kod veya css öğrenmeden twitter bootstrap kullanmalarına yardımcı olmaktır.
Richie
Harika bir eğitim.
craig grella
harika yazı, teşekkürler. Bootstrap kullandım ve tez ve diğer birkaç tema için uyarladım, ancak bu, çerçeveye ihtiyaç duymayan siteler için kullanışlı olacaktır – sadece düğmeler ve simgeler.
güzel yakalamışsın!