WordPress için onlarca yazar kutusu eklentisi mevcut. Fakat bu eklentilerin bir çoğu gereksiz JavaScript ve CSS kodlarından ötürü hantal veya tasarım açısından başarısız.
Nasıl yapılır?
Hazırlayacağımız yazar bilgi kutusu sadece birkaç satır HTML ve CSS koduyla tamamlanacak. Herhangi bir JavaScript koduna ihtiyaç duymayacağız. Sosyal iconları ise CSS Sprite tekniğiyle hazırlayacağız.
Başlangıç
Tasarım olarak gayet basit bir arayüz hazırladık. Böylece sizler tarafından geliştirilmesi ve renklendirilmesi daha kolay olacak.
Hazırsak tasarıma başlayalım.
HTML
Yazar kutusu için bir
oluşturacağız. İçerisinde ise
- ile sosyal iconlarımızı listeleyeceğiz.
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 :
@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 göre değiştirebilirsiniz.
.yazar{
margin:0 auto;
margin:-top:10px;
margin-bottom:20px;
padding: 30px 0 30px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
overflow: hidden;
width: 95%;
color: #464646;
font-family: 'Lora', serif;
font-size: 14px;
line-height: 1.5em;
}
Yazarın avatarını stilize edelim.
.yazar img{
background: #FFF;
float: left;
margin: 0 20px 0 3px;
padding: 15px;
border: 1px solid #d2d2d2;
}
Sırada sosyal iconlarımız var. CSS Sprite için görsel hazırlayarak zaman kaybetmenizi istemedik ve sizlere aşağıdaki resmi hazırladık.
.yazar .sosyal {width:69px; position:relative; float:right; margin-top:-20px;}
.yazar .sosyal li{
list-style:none;
width:19px;
height:19px;
margin:2px;
background-image:url(social-icons.png);
float:left;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
-o-transition:background 0.2s;
}
.yazarfb{background-position:0 0; }
.yazartwt{background-position:19px 0;}
.yazarggl{background-position:38px 0;}
.yazarfb:hover{background-position:0 19px;}
.yazartwt:hover{background-position:19px 19px;}
.yazarggl:hover{background-position:38px 38px;}
Ve şimdi de “Yazar hakkında” başlığını düzenleyelim.
.yazar a.hakkinda {
text-transform: uppercase;
color: #464646;
font-size: 16px;
line-height: 36px;
font-weight:bold;
text-decoration:none;
}
.yazar a.hakkinda:hover {color: #00b4ff;}
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ı editörüyle açtıktan sonra alanda bulunan döngünün içerisine 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
Birçok WordPress teması function.php içerisinde post_author_info ve türevi fonksiyon isimleriyle bir yazar bilgi kutusu bulunduruyor. Burada oluşturduğumuz HTML kodlarını oradakiler ile değiştirebilirsiniz.
İyi çalışmalar.
Kaynak : http://www.adobewordpress.com/wordpresse-eklentisiz-yazar-bilgi-kutusu
