WordPress icin onlarca yazar kutusu eklentisi mevcut. Fakat bu eklentilerin bir coğu gereksiz JavaScript ve CSS kodlarından oturu hantal veya tasarım acısından başarısız.
Nasıl yapılır?
Hazırlayacağımız yazar bilgi kutusu sadece birkac satır HTML ve CSS koduyla tamamlanacak. Herhangi bir JavaScript koduna ihtiyac duymayacağız. Sosyal iconları ise CSS Sprite tekniğiyle hazırlayacağız.
Başlangıc
Tasarım olarak gayet basit bir arayuz hazırladık. Boylece sizler tarafından geliştirilmesi ve renklendirilmesi daha kolay olacak.
Hazırsak tasarıma başlayalım.
HTML
Yazar kutusu icin bir oluşturacağız. İcerisinde ise ile sosyal iconlarımızı listeleyeceğiz.
Kod:
Hakkında
CSS
Sıra geldi CSS kodlarımıza. Bizler yazı tipi olarak Google Fonts‘un arşivinden Lora’yı kullanacağız. Dolayısıyla yazı tipimizi sayfamıza tanıtalım :
Kod:
@import url(http://fonts.googleapis.com/css?family=Lora:400,700);
Şimdi de yazar kutusunun taslağını oluşturalım. Buradaki width değerini kendi blog yapınıza gore değiştirebilirsiniz.
Kod:
.yazar
Yazarın avatarını stilize edelim.
Kod:
.yazar img
Sırada sosyal iconlarımız var. CSS Sprite icin gorsel hazırlayarak zaman kaybetmenizi istemedik ve sizlere aşağıdaki resmi hazırladık.
Kod:
.yazar .sosyal .yazar .sosyal li .yazarfb .yazartwt .yazarggl .yazarfb:hover .yazartwt:hover .yazarggl:hover
Ve şimdi de “Yazar hakkında” başlığını duzenleyelim.
Kod:
.yazar a.hakkinda .yazar a.hakkinda:hover
Yerleşim
Şimdi sıra yazar bilgi kutusunu sitenize yerleştirmenizde. Yapmanız gereken işlem basit.
WordPress sitemizin wp-contents/themes/tema-adı/single.php dosyasını herhangi bir yazı editoruyle actıktan sonra alanda bulunan dongunun icerisine yukarıda paylaştığımız HTML kodlarını ekliyorsunuz.
Yine aynı dizindeki style.css (ismi değiştirilmiş olabilir) dosyasına da oluşturduğumuz CSS kodlarını eklemeyi unutmayın.
Veya
Bircok WordPress teması function.php icerisinde post_author_info ve turevi fonksiyon isimleriyle bir yazar bilgi kutusu bulunduruyor. Burada oluşturduğumuz HTML kodlarını oradakiler ile değiştirebilirsiniz.
İyi calışmalar.
Kaynak : http://www.adobewordpress.com/wordpr...r-bilgi-kutusu