Yazar Bilgi Kutusu

WordPress’e Eklentisiz Yazar Bilgi Kutusu

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 göz atın.

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.

Yazar Bilgi Kutusu

Hazırsak tasarıma başlayalım.

HTML

Yazar kutusu için bir <div> oluşturacağız. İçerisinde ise <ul> ile sosyal iconlarımızı listeleyeceğiz.

<div class="yazar">
<ul class="sosyal">
<a href="https://twitter.com/<?php echo get_the_author_meta( 'twitter', $post->post_author );?>" target="_blank"><li class="yazartwt"></li></a>
<a href="<?php echo get_the_author_meta( 'facebook', $post->post_author );?>" target="_blank"><li class="yazarfb"></li></a>
<a href="<?php echo get_the_author_meta( 'googleplus', $post->post_author );?>" target="_blank"><li class="yazarggl"></li></a>
</ul>
<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '100' ); }?>
<a href=# class="hakkinda"><?php the_author_posts_link(); ?> Hakkında</a><br>
<p><?php the_author_description(); ?></p>
</div>

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.

CSS Sprite


.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; }
.yazarggl{background-position:19px 0;}
.yazartwt{background-position:38px 0;}

.yazarfb:hover{background-position:0 19px;}
.yazarggl:hover{background-position:19px 19px;}
.yazartwt:hover{background-position:38px 19px;}

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.

Bu da ilginizi çekebilir  Google PageSpeed ile CSS ve JavaScript Dosyalarınızı Sıkıştırın

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.

Kapanış

Makale tekrar elden geçirilmiştir. O yüzden bir süreliğine yukarı taşınmıştır.

Geçtiğimiz haftalarda WordPress sitenize yazar kutusu eklemenizi sağlayan bir eklenti paylaşmıştık. Volkan Akpınar isimli okuyucumuz ise yazar kutusunun eklentisiz nasıl yapılacağı üzerine bir makale istemişti. Volkan’ın talebinin üzerinden 24 saat geçmeden makalemiz yayında.

İyi çalışmalar.



  • Eline sağlık vatanay çok güzel olmuş

    • Sağ ol Murat. Yalnız şimdi fark ettim. Keşke öncesinde WordPress’in get_the_author_meta desteğini anlatan bir makale yayınlasaymışım. Neyse onu da bir ara eklerim.

      • mantıklı birde DISQUS yorum alanı ile ilgili bir makale yazmanı isterdim açıkçası senin gözünden görmek isterim 😉 eksileri artıları şeklinde pek kullan yok geçip geçmemekte kararsız kaldım…

        • Ben DISQUS’a bayılıyorum şahsen. Çok aktif bir sistem ve kesinlikle sıradan bir yorum eklentisi değil. Çok gelişmiş bir ağ. Tavsiye ederim. İnsanların ne kullandığına bakma sen. Günümüzde bile Internet Explorer kullanan var ona bakarsan 🙂

  • Volkan Akpınar

    Çok teşekkür ederim, elinize sağlık hemen siteme uyguluyorum 🙂

  • Anonymous

    Nereye koycaz bu kodları?

    • @webkahriman

      CSS kodları temanızın içindeki “style.css” uzantılı dosyaya, HTML kodları ,se yine temanızın içerisindeki “single.php” uzantılı dosyaya kod düzenleyiciniz ile yapıştırabilirsiniz.

  • Çok teşekkür ederim işime yaradı