Yıllar boyunca WPBeginner, etiketlerle ilgili birçok soru aldı, bunlardan biri de WordPress etiketlerini bir sayfada öne çıkacak şekilde stil vermeye değip değmeyeceğiydi.
Etiketler, içeriğinizi konulara göre düzenlemenize yardımcı olur. WordPress blog yazılarınız için hashtag'ler gibidirler ve kullanıcıların daha fazla içerik keşfetmesine yardımcı olurlar. Ancak, deneyimlerimize göre, görsel olarak öne çıkmazlarsa gözden kaçabilirler.
Bu makalede, daha fazla kullanıcı etkileşimi ve web sitenizde sayfa görüntülemesi elde etmek için WordPress'te etiketleri nasıl kolayca stilize edeceğinizi göstereceğiz.
WordPress'te Etiketler Nasıl Görüntülenir
WordPress, kategoriler ve etiketler olmak üzere iki ana taksonomi ile birlikte gelir. Kategoriler içeriğinizin ana alanları için kullanılırken, etiketler içeriği daha belirli konulara göre sıralamanıza olanak tanır.
Varsayılan olarak, popüler WordPress temalarının çoğu, yazılarınızın başında veya sonunda etiketleri görüntüler.
Ancak, arşiv sayfalarında, alt bilgide, kenar çubuklarında ve WordPress'te istediğiniz hemen hemen her yerde etiketleri de görüntüleyebilirsiniz.
Gönderilerinize, sayfalarınıza ve kenar çubuğu widget'larınıza bir etiket bulutu eklemek için 'Etiket Bulutu' bloğunu eklemeniz yeterlidir.
Bir etiket bulutu, her etikete gönderi sayısına göre farklı bir yazı tipi boyutu verir. Her etiketin yanına gönderi sayısını göstermeyi de seçebilirsiniz.
Bunlar yalnızca WordPress'te bulunan varsayılan seçeneklerdir, ancak etiketlerinizi daha da özelleştirmek isteseydiniz ne olurdu? Size göstereceğiz.
WordPress'te etiketleri kolayca nasıl stilize edeceğimize bir göz atalım.
WordPress'te Varsayılan Etiket Bulutunu Stilize Etme
Etiket Bulutu bloğunu bir gönderiye veya sayfaya ekledikten sonra, özel CSS ekleyerek onu özelleştirebilirsiniz.
Etiket bulutu bloğu, bunları biçimlendirmek için kullanılabilecek varsayılan WordPress tarafından oluşturulan CSS sınıflarını otomatik olarak içerir.
WordPress sitenize özel CSS eklemek için WordPress sitenize, Görünüm » Özelleştir sayfasına gidin ve Ek CSS sekmesine geçin.
Bu özel CSS kodunu bir başlangıç noktası olarak ekleyerek başlayabilirsiniz.
.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 { font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 { font-size:30px!important; }
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Gördüğünüz gibi, bağlantıların konumuna göre stili ayarlamak için .tag-link-position sınıfını kullanabilirsiniz. Daha fazla gönderisi olan etiketler daha üst konumda, daha az gönderisi olan etiketler ise daha alt konumdadır.
Etiket bulutu bloğunuzdaki tüm etiketlerin aynı boyutta olmasını istiyorsanız, bunun yerine aşağıdaki CSS'i kullanabilirsiniz:
.tag-cloud-link {
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Test sitemizde böyle görünüyordu:
WordPress'te Gönderi Etiketlerini Biçimlendirme
Etiket bulutlarınızı biçimlendirmenin yanı sıra, bireysel blog yazılarınızda görüntülenen gönderi etiketlerini de biçimlendirmek isteyebilirsiniz. Genellikle WordPress temanız bunları gönderi başlığının veya gönderi içeriğinin üstünde veya altında görüntüler.
Etiketlerin üzerine fareyle gelip sağ tıklayarak WordPress temanız tarafından kullanılan CSS sınıflarını görüntülemek için Denetim aracını kullanabilirsiniz.
Bundan sonra, bu CSS sınıflarını özel CSS'nizde kullanabilirsiniz. Aşağıda, test temamızdaki CSS sınıflarına dayalı örnek bir kod bulunmaktadır:
.entry-tag {
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a {
color:#fff;
font-size:small;
font-weight:bold;
}
Test sitemizde böyle görünüyordu.
WordPress'te Özel Etiket Bulutu Oluşturma
Varsayılan etiket bulutu bloğu kullanımı kolaydır, ancak bazı ileri düzey kullanıcılar daha fazla esneklik için onu özelleştirmek isteyebilir.
Bu yöntem, etiket bulutunu çevreleyen kendi HTML ve CSS sınıflarınızı eklemenizi sağlar. Ardından, etiket bulutunun görünümünü kendi gereksinimlerinize göre özelleştirmek için kullanabilirsiniz.
Yapmanız gereken ilk şey, bu kodu temanızın functions.php dosyasına veya bir kod parçacıkları eklentisine kopyalayıp yapıştırmaktır:
function wpb_tags() {
$wpbtags = get_tags();
foreach ($wpbtags as $tag) {
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n" ;
}
return $string;
}
add_shortcode('wpbtags' , 'wpb_tags' );
Bu kodu, WordPress için en iyi kod parçacığı eklentisi olan WPCode ile eklemenizi öneririz. Bu, temanızın functions.php dosyasını düzenlemeden özel kodu WordPress'e kolayca eklemenizi sağlar, böylece sitenizi bozmazsınız.
Başlamak için, ücretsiz WPCode eklentisini kurun ve etkinleştirin. Yardıma ihtiyacınız olursa, bir WordPress eklentisinin nasıl kurulacağına dair eğitimimize bakın.
Eklenti etkinleştirildikten sonra, WordPress kontrol panelinden Kod Parçacıkları » Parçacık Ekle'ye gidin.
Ardından, fare imlecini 'Özel Kodunuzu Ekleyin (Yeni Kod Parçası)' seçeneğinin üzerine getirin ve 'Kod Parçasını Kullan' düğmesine tıklayın.
Buradan, ekranda görünen seçenekler listesinden kod türü olarak 'PHP Snippet'i seçmeniz gerekir.
Ardından, sayfanın üst kısmındaki kod parçacığına bir başlık ekleyebilirsiniz. Bu, kodun ne işe yaradığını hatırlamanıza yardımcı olacak herhangi bir şey olabilir.
Ardından, yukarıdaki kodu 'Kod Önizleme' kutusuna yapıştırmanız yeterlidir.
Bundan sonra yapmanız gereken tek şey anahtarı 'Etkin Değil'den 'Etkin'e getirmek ve 'Kod Parçasını Kaydet' düğmesine tıklamaktır.
Bu kod, etiketlerinizi gönderi sayılarıyla birlikte gösteren bir kısa kod ekler.
Arşiv sayfanızda veya bir widget'ta görüntülemek için bu kısa kodu kullanmanız gerekir:
[wpbtags]
Bu kodu tek başına kullanmak yalnızca etiket bağlantılarını ve yanlarındaki gönderi sayısını gösterecektir. Daha iyi görünmesi için bazı CSS ekleyelim. Bu özel CSS'yi web sitenize kopyalayıp yapıştırmanız yeterlidir.
.tagbox {
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;
}
.taglink {
padding:2px;
}
.tagbox a, .tagbox a:visited, .tagbox a:active {
text-decoration:none;
}
.tagcount {
background-color:green;
color:white;
position: relative;
padding:2px;
}
İhtiyaçlarınıza göre CSS'yi değiştirmekten çekinmeyin. Demo sitemizde bu şekilde görünüyordu:
Umarım bu makale, WordPress'te etiketleri kolayca nasıl stilize edeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca alt kategorilerinizi gizleme veya stilize etme hakkındaki rehberimize veya bu kullanışlı WordPress ipuçları, püf noktaları ve hack'leri listesine göz atmak isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
kzain
WordPress'te etiketleri biçimlendirmek, bir blogun genel görünümünde ve hissinde büyük bir fark yaratabilir. Süreci basit adımlara ayırmanıza bayıldım; CSS örnekleri gerçekten çok faydalı. Özelleştirmeleri kaybetmemek için bir alt tema kullanma ipucunuz da çok takdir edildi. Artık etiketlerime hak ettikleri makyajı yapabilirim! Uzmanlığınızı paylaştığınız ve WordPress özelleştirmesini hepimiz için daha erişilebilir kıldığınız için teşekkürler.
Jiří Vaněk
Bu makaleyi okuduğumda kendi etiket bulutumu oluşturma isteği duydum. Kod parçacığınızı kullandım ancak renkleri değiştirdim ve köşeleri hafifçe yuvarladım. Sihir gibi çalıştı. Etiketlerin tüm web sitesinin temasıyla aynı renkte olması güzel. Küçük bir detay olabilir ama çok hoş.
Dennis Muthomi
adım adım kılavuz ve kod parçacıkları gerçekten yardımcı oluyor
HIZLI SORU: Bu kod parçacıklarını etiketlerimi stilize etmek için uygularsam ve daha sonra WordPress temamı değiştirmeye karar verirsem, etiket stilizasyonu yeni temanın varsayılan stillerine göre mi değişecek, yoksa bu kod parçacıklarını kullanarak yaptığım özelleştirmelerle mi kalacak?
WPBeginner Yorumları
Eklediğiniz CSS kalmalı, ancak yeni temanın CSS'sinin stil üzerindeki etkisine ve herhangi bir çakışma olup olmadığına bağlı olarak CSS'yi düzenlemeniz gerekebilir.
Dennis Muthomi
Merhaba, yardımcı açıklama için teşekkürler!
Küçük ayarlamalarla özelleştirmeleri koruyabildiğim sürece, bu bilmek çok faydalı.
Bir takip sorusu daha – temaları değiştirirken, etiket stilini etkileyen CSS çakışmalarını kontrol etmenin ve çözmenin en iyi yolu ne olur?
WPBeginner Desteği
Tavsiye ettiğimiz belirli bir en iyi yolumuz yok. Manuel olarak kontrol etmeniz gereken bir şey olurdu.
Jiří Vaněk
Dennis'in sorusunu takip ediyorum. CSS'i WP Code ile eklemek mi yoksa doğrudan şablona yerleştirmek mi daha iyi? Şablona yerleştirirsem temayı değiştirirken ayarları kaybedeceğimi, ancak WP Code kullanırsam stillerin temayı değiştirdikten sonra bile kalacağını varsayıyorum. Bu doğru mu?
WPBeginner Yorumları
Doğru. Bu, temanın Özelleştiricisindeki Ek CSS bölümünü kullanmaya benzer.
Bununla birlikte, gereken CSS temadan temaya farklı olacaktır, bu nedenle kullanışlılığı değişecektir.
Nikola
Harika bir rehber, teşekkürler!
Etiketleri en çok kullanılanlara göre sıralayıp gösterilen etiket sayısını sınırlamak mümkün mü?
WPBeginner Desteği
Şu anda bunun için bir eklenti veya özel kod kullanmanız gerekir, şu anda bunun için önerilen bir yöntemimiz yok.
Yönetici
Jemma Pollari
Harika, teşekkürler. Bu gerçekten yardımcı oldu.
WPBeginner Desteği
Glad our guide could help
Yönetici
Joe Smith
Harika! Tam aradığım şey ve çok şık. Sadece bir sorum var: Etiketler arasına daha fazla boşluk eklemek istersem, CSS'i nasıl değiştirmem gerekir? Yukarıdaki CSS'teki birkaç ayarı değiştirmeyi denedim ancak hiçbiri etiketler arasına basitçe boşluk eklemedi.
WPBeginner Desteği
You would want to increase the padding for what you’re wanting
Yönetici
Ibiye Ambille
Merhaba, gönderi etiketimi öne çıkan görselin altına taşımak istiyorum
WPBeginner Desteği
Bunun için, öne çıkan görselin konumu her temanın kendine özgü olduğundan, yardım için belirli temanızın desteğiyle iletişime geçmek isteyeceksiniz.
Yönetici
Trishah
Tek bir gönderi için etiketlere "current" CSS sınıfı eklemeye çalışıyorum. Bulduğum birkaç çözüm artık işe yaramıyor gibi görünüyor. Bunu nasıl yapabilirim?
WPBeginner Desteği
Bu, belirli temanıza göre değişiklik gösterecektir. Tema desteğinizle iletişime geçerseniz, etiketleriniz için bu sınıfı nereye ekleyebileceğinizi size bildirebilirler.
Yönetici
uche Peter
Etiketlerim seri olarak listeleniyor.. Kenarlık yok hiçbir şey yok,,, sadece bir metin… Lütfen nasıl kenarlık ve arka plan rengi verebilirim?
Kingsolomon
CSS'yi nasıl uygularım lütfen
Hugo
Etiket bulutum bir bulut olarak değil, bir liste olarak geliyor, çünkü her span'dan sonra bir satır sonu ekleniyor. Bu satır sonlarını nasıl kaldırabilirim?
WPBeginner Desteği
Merhaba Hugo,
Bu makale, etiketlerin farklı şekillerde nasıl stilendirileceğini tartışmaktadır. Bir etiket bulutu istiyorsanız, varsayılan WordPress etiket bulutu widget'ını kullanabilirsiniz. Ayrıca şablon etiketini de kullanabilirsiniz
1-click Use in WordPress
Yönetici
bob
Belirli bir sayıda etiketi sınırlama hakkında başka bir sayfa gösterdiğini anlıyorum, ancak bu örnekle nasıl yapabilirim? Bağlantı verilen yöntem bu yöntemle birlikte çalışmıyor gibi görünüyor.
Amy Croson
Bunu eklemekte zorlanıyorum ve bunun 'Seçilen' Temamın beni sınırladığını düşünüyorum. Her şeyi php'me kopyalayıp yapıştırdım ve her yerde hatalar veriyor. Şu anda bu ayrıntıda bilinmeyen bir '.' olduğunu söylüyorlar. '.taglink', '.tagbox' ve '.tagcount'tan önce '.' kullanmadan bunu biçimlendirmenin bir yolu var mı?
Val Archer
Merhaba – bir kategori-slug.php sayfasında etiketleri listelemek için bir yol arıyorum. Bu eğitimleri nerede bulabileceğimi biliyor musunuz?
Şimdiye kadar bir kategori [siteadı]/kategori/tarifler ve bir category-recipes.php oluşturdum.
Tarifleri etiketliyorum, örneğin Kahvaltı, Akşam Yemeği vb.
Etiketlerin category-recipes.php'de şu şekilde görüntülenmesini istiyorum. Ne yaptığımı bilmiyorum. category.php dosyamdan kopyalıyorum.
Kategori Arşivleri:
Kahvaltı
şimdi Kahvaltı ile etiketlenmiş tüm gönderileri şöyle listeler:
<a href="”>
by / / posted in cat_name . ‘ ‘;} ?>
Akşam Yemeği
şimdi Akşam Yemeği olarak etiketlenmiş tüm gönderileri şöyle listeler:
<a href="”>
by / / posted in cat_name . ‘ ‘;} ?>
[Ardından tüm Etiketlerin sonunda:]
</div
Lütfen burada yardım alabileceğim bir yer biliyor musunuz?
teşekkür ederim! – Val
WPBeginner Desteği
Şunu eklemeyi denediniz mi:
<?php the_tags('gönderildi:', '' ,'' ); ?>Yönetici
Magistar
Kod, etiket bulutu için iyi çalışıyor. Ancak ben bunu gönderi etiketlerine (yani bir gönderiyle ilişkili etiketler ve bunların sayısı, büyük liste yerine) uygulamak istiyorum.
wp_get_post_tags ile bir şeyler denedim ama pek işe yaramadı. Herhangi bir öneriniz var mı?
WPBeginner Ekibi
get_tags yerine get_terms kullanabilirsiniz, bu codex sayfasına bakın:
http://codex.wordpress.org/Function_Reference/get_terms
DER KUNSTBLOG
Harika, kodunuzu siteye özel bir eklentiye ekledim – ancak yazı tipi boyutunun etiketin ne sıklıkla kullanıldığına göre değişecek şekilde değiştirmek mümkün mü? Lütfen herhangi bir fikriniz var mı? Teşekkürler!
WPBeginner Ekibi
Evet, mümkün. İlk kod parçasında get_tags yerine wp_tag_cloud fonksiyonunu kullanmanız gerekir. Şöyle ki:
$wpbtags = wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count&format=array');
Misafir
Kategoriler ve Özel Taksonomiler için özel etiket bulutu ile aynı şeyi nasıl yaparsınız?
Terence O'Neill
Merhaba dostum; Kategoriler ve Özel Taksonomiler için tam olarak aynısını (kısa kod ile görüntüleme) nasıl yaparım? Bu eğitim için teşekkürler. Harika çalışıyor.