WordPress Eklentisiz Yazar Bilgi Kutusu

Mehmet Kaplan 4 Ekim 2018 1:21 PM

İçerik gizle

Giriş

WordPress sitenizde, makaleleriniz altına yazar bilgi kutusu yayınlasak kötü mü olur ? Bence olmaz, neden çünkü eklentiyi yükle öyle kalsın mantığının dışında geliştirilebilir olduğunu da belirteyim.

Öyleyse az bir kodla bizde bir yazar kutusu oluşturmaya başlayalım ;

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 <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.
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.