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(https://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  Sitenize Duyuru Penceresi Ekleyin

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.