Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!
Bootstrap, başlangıçta Twitter tarafından geliştirilen en popüler ön uç çerçevelerinden biridir. Çerçevenin birincil amacı, yeniden kullanılabilir bileşenler kullanarak mobil uyumlu web siteleri oluşturmaktır. Başlangıçta Bootstrap, Glyphicon'ları sunuyordu, ardından Font Awesome'u kullanıyordu ve şimdi Bootstrap Simgeleri adı verilen kendi simge setlerini sunuyordu. Bootstrap Simgelerini WordPress siteleri de dahil olmak üzere herhangi bir web sitenizde kullanabilirsiniz. İşin iyi yanı, simgeleri kullanmak için temel çerçeve CSS ve JS'yi kullanmanıza gerek olmamasıdır. Bu yazımızda WordPress sitelerinde Bootstrap Icon'ların nasıl kullanılacağını anlatacağız. Bootstrap hakkında daha fazla bilgi edinmek istiyorsanız Bootstrap 5 ile ilgili eğitimlerimize göz atın.
WordPress'te simgeleri kullanmak iki adımdan oluşur:
Bu bağlantıyı WordPress sitenizin başlık bölümüne eklemeniz gerekir. Başlığa CSS bağlantıları eklemek için kullanılabilecek birçok ücretsiz eklenti vardır, örneğin WPBeginner Tarafından Üstbilgi ve Altbilgi Ekle. Ancak bu eklenti, bağlantıyı yalnızca birkaç sayfaya ekleme konusunda herhangi bir kontrol sunmaz. Varsayılan olarak, CSS dosyasını sitenizin tamamında başlıkta yükleyecektir. Simgeleri yalnızca birkaç gönderi veya sayfada kullanmak istediğinizde bu gerekli olmayabilir. Böyle bir durumda bu yazımızda anlatacağımız Header Footer Code Manager eklentisini kullanabilirsiniz.
Üstbilgi Altbilgi Kod Yöneticisi Eklentisini YükleyinEklentiyi etkinleştirdikten sonra, kenar çubuğuna HFCM adlı yeni bir menü öğesi ekleyecektir. HFCM menüsünün üzerine gelin ve "Yeni Ekle" seçeneğini seçin. İki bölüm göreceksiniz - biri snippet'i kontrol etmek için ve ardından gerçek kodu yapıştırmak için kutu. İlk bölümde aşağıdaki ayrıntıları doldurun:
Dolgu Snippet'i Ayrıntıları
Tüm detayları doldurduktan sonra CDN linkini "Snippet / Code" kısmına yapıştırın.
CDN CSS Bağlantısı Ekle
Değişikliklerinizi uygulamak için "Kaydet" düğmesine tıklayın.
Bu kodu Özel HTML bloğunun içine yapıştırabilirsiniz.
Gönderinizi yayınlayın ve yayınlanan gönderiyi görüntülediğinizde simge aşağıdaki gibi görünecektir.
Yayınlanan gönderide önyükleme simgesi
Sosyal simgelerin tam listesini bir widget olarak göstermek için aynı Özel HTML bloğunun içine ek simgeler ekleyebilirsiniz. Simgelerinize köprüler eklemek istiyorsanız, simgeleri HTML bağlantı etiketleriyle kaydırmanız yeterlidir. Ayrıca kullanabilirsiniz simgesine dokunarak simgeler arasına boşluk ekleyin. Aşağıda Facebook, Twitter, YouTube simgeleri içeren bir sosyal widget'ın kodu bulunmaktadır.
Daha Fazla Simge Ekleme
Yayınlanan gönderide aşağıdaki gibi görünecektir.
Sosyal Widget Simgeleri
Bootstrap Simgesi için SVG HTML Kodunu Kopyala
SVG aşağıdaki formatta olacaktır ve varsayılan olarak simge boyutu genişlik/yükseklik özellikleri aracılığıyla kontrol edilir.
[CODE lang="css" title="CSS Kodu:"]<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>[/CODE]
Aşağıdaki gibi
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>[/CODE]
Artık bu kodu WordPress sitenizdeki Özel HTML'nin içine gömebilirsiniz. Simgeyi görmek için ön izlemeye tıklayabilir veya simgeyi canlı sayfada görüntülemek için gönderiyi yayınlayabilirsiniz.
Bootstrap Simgeleri
Birkaç yıl öncesine kadar, Font Awesome o kadar popülerdi ki hemen hemen her geliştirici ve web sitesi sahibi bunları kullanıyordu. Bu başlangıçta, esasen ücretsiz Bootstrap Simgeleri seti ile değiştirilen Bootstrap ile kullanılmak üzere geliştirilmiştir. Bootstrap Simgelerini herhangi bir projede iki şekilde kullanabilirsiniz – SVG ve web yazı tipleri. SVG'nin WordPress sitenizde çalışmaması durumunda, web yazı tipleri seçeneğini kullanabilirsiniz.WordPress'te simgeleri kullanmak iki adımdan oluşur:
- Başlıklarda simgeleri bağlama CSS'si
- İçeriğe HTML gömme
WordPress'te Bootstrap Simgeleri CSS'yi Bağlama
Simgeleri sunucunuza indirip barındırabilseniz de, en kolay yol CDN bağlantılarını kullanmaktır. İşte Bootstrap Simgeleri için en son CDN bağlantısı:Bu bağlantıyı WordPress sitenizin başlık bölümüne eklemeniz gerekir. Başlığa CSS bağlantıları eklemek için kullanılabilecek birçok ücretsiz eklenti vardır, örneğin WPBeginner Tarafından Üstbilgi ve Altbilgi Ekle. Ancak bu eklenti, bağlantıyı yalnızca birkaç sayfaya ekleme konusunda herhangi bir kontrol sunmaz. Varsayılan olarak, CSS dosyasını sitenizin tamamında başlıkta yükleyecektir. Simgeleri yalnızca birkaç gönderi veya sayfada kullanmak istediğinizde bu gerekli olmayabilir. Böyle bir durumda bu yazımızda anlatacağımız Header Footer Code Manager eklentisini kullanabilirsiniz.
- WordPress yönetici panelinize giriş yapın ve "Eklentiler > Yeni Ekle" bölümüne gidin.
- Header Footer Code Manager eklentisini bulmak için "başlık kodu" araması yapın.
- Eklentiyi sitenizde kullanmaya başlamak için "Yükle" düğmesini ve "Etkinleştir" düğmesini tıklayın.
Üstbilgi Altbilgi Kod Yöneticisi Eklentisini Yükleyin
- Snippet adı – snippet'iniz için Bootstrap Simgeleri gibi bir ad girin.
- Snippet Türü – açılır menüden CSS'yi seçin.
- Site Görüntüleme – burada CSS'yi sitenize eklemek için "Site Genelinde" seçeneğini seçin. Aksi takdirde, belirli gönderiler, sayfalar, kategoriler, etiketler, ana sayfa vb. gibi mevcut seçeneklerden birini seçin. Seçiminize bağlı olarak ek seçenekler göreceksiniz. Örneğin, belirli gönderileri seçmek, gönderilerinizi seçmek için "Gönderi Listesi" açılır menüsünü gösterecektir. Simgeleri göstermek istediğiniz tek veya birden fazla gönderiyi seçebilirsiniz. Site genelinde kullanmak istiyorsanız, CSS'yi belirli yazılara ve sayfalara yüklemeyi hariç tutma listesinden seçerek hariç tutmak mümkündür.
- Konum – başlık seçeneğini seçin.
- Cihaz Ekranı – "Tüm Cihazlarda Göster" seçeneğini seçin. Gerekirse, yalnızca masaüstünde veya mobilde seçim yapabilirsiniz.
- Durum – "Aktif" seçeneğini seçin.
Dolgu Snippet'i Ayrıntıları
Tüm detayları doldurduktan sonra CDN linkini "Snippet / Code" kısmına yapıştırın.
CDN CSS Bağlantısı Ekle
Değişikliklerinizi uygulamak için "Kaydet" düğmesine tıklayın.
Simgeler için HTML Ekleme
Artık CSS'yi başlık bölümüne eklediğinize göre, bir sonraki adım simgeleriniz için HTML'yi gömmektir. Font Awesome simgelerine benzer şekilde, her Bootstrap simgesinin bir kod noktası ve karşılık gelen CSS sınıf adı da vardır. Tüm favori simgeleriniz için CSS sınıf adlarının tam listesini almak için simgeler sayfasına başvurabilirsiniz. İhtiyacınız olan tek şey, HTML kodunu Özel HTML bloğu kullanarak simgelerin doğru CSS sınıf adıyla gömmektir. CDN'den bağlantılı CSS her iki seçeneğe de izin verdiği için SVG veya web yazı tiplerini kullanabilirsiniz.Web Fontlarını Kullanma
Simgeniz için yalnızca CSS sınıf adını bilmeniz gerektiğinden bu en kolay seçenektir. Örneğin, WhatsApp simge yazı tipini ekleme biçimi aşağıdadır.Aşağıdaki gibi satır içi CSS ekleyerek boyutu ve rengi değiştirebilirsiniz:
Bu kodu Özel HTML bloğunun içine yapıştırabilirsiniz.
Web Yazı Tipi HTML'si Ekle
Gönderinizi yayınlayın ve yayınlanan gönderiyi görüntülediğinizde simge aşağıdaki gibi görünecektir.
Yayınlanan gönderide önyükleme simgesi
Sosyal simgelerin tam listesini bir widget olarak göstermek için aynı Özel HTML bloğunun içine ek simgeler ekleyebilirsiniz. Simgelerinize köprüler eklemek istiyorsanız, simgeleri HTML bağlantı etiketleriyle kaydırmanız yeterlidir. Ayrıca kullanabilirsiniz simgesine dokunarak simgeler arasına boşluk ekleyin. Aşağıda Facebook, Twitter, YouTube simgeleri içeren bir sosyal widget'ın kodu bulunmaktadır.
Daha Fazla Simge Ekleme
Yayınlanan gönderide aşağıdaki gibi görünecektir.
Sosyal Widget Simgeleri
SVG Simgelerini Kullanma
SVG formatını kullanmak için, simgeler ve CSS sınıfı için SVG'yi almanız gerekir. Bunu, Bootstrap Simgeleri sayfasındaki simgeye tıklayarak ve aşağıda gösterildiği gibi "HTML'yi Kopyala" bölümünün altındaki kodu kopyalayarak alabilirsiniz.
Bootstrap Simgesi için SVG HTML Kodunu Kopyala
SVG aşağıdaki formatta olacaktır ve varsayılan olarak simge boyutu genişlik/yükseklik özellikleri aracılığıyla kontrol edilir.
[CODE lang="css" title="CSS Kodu:"]<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>[/CODE]
Aşağıdaki gibi
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
boyutu değiştirebilir ve özel renk ekleyebilirsiniz.
[CODE lang="css" title="CSS Kodu:"]<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16" style="color: blue;"><path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>[/CODE]
Artık bu kodu WordPress sitenizdeki Özel HTML'nin içine gömebilirsiniz. Simgeyi görmek için ön izlemeye tıklayabilir veya simgeyi canlı sayfada görüntülemek için gönderiyi yayınlayabilirsiniz.
Final Kelimeler
Bootstrap Simgeleri açık kaynak olduğundan ve ücretsiz olarak sunulduğundan, WordPress içeriğinizi güzelleştirmek için bunları kullanabilirsiniz. Simgeler için yalnızca CSS sınıf adına ihtiyaç duyan web yazı tipi seçeneğini kullanmanızı öneririz. Ancak, rahatsanız SVG'yi kullanabilirsiniz. Halihazırda Bootstrap tabanlı bir WordPress teması kullanıyorsanız, simgeler için CSS bağlantısının temanızın bir parçası olması gerektiğini ve bir eklenti kullanarak eklemeniz gerekmediğini unutmayın.
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
