
WordPress Eklentisiz Yazar Bilgi Kutusu
Wordpress mehmetkpln18 4 Ekim 2018Giriş
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.
Kapanış
İyi çalışmalar.
Kaynak : adobewordpress.com
Bir yorum bırak
- Ajax (1)
- Autocad (7)
- Css (2)
- Genel (2)
- Google (3)
- Html (3)
- İnternetten Para Kazanma (2)
- İpuçlar (1)
- JavaScript (3)
- Php (13)
- Tasarım (1)
- Wordpress (16)
- CryptoTab Browser ile İnternetten Para Kazanmak – 2021
- Mehmet Kaplan – Kişisel Blog Tanıtım
- PHP ile Barkod veya QR Kod Oluşturma
- Php ile Telefon Numarası Formatlama
- PHP ile HTML GZIP Sıkıştırma
- Sitenize Çerez Uyarısı Ekleme için
- Sitenize Çerez Uyarısı Ekleme için
- Sitenize Çerez Uyarısı Ekleme için
- Sitenize Çerez Uyarısı Ekleme için
- Sitenize Çerez Uyarısı Ekleme için