WordPress sitenizde, makaleleriniz altında yazar bilgi kutusu yayınlamak istemez misiniz? Ayrıca bu işlemi eklenti kullanmadan yapacağız desek? Arkanıza yaslanın ve makalemizin devamına goz atın.

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