TUTORIAL SCRIPT UNTUK MEMBUAT AUTHOR BOX DI WORDPRESS – Seringkali kita meilihat website-website memeiliki sesuatu dibawah artikelnya ada kolom penulis atau author dan beberapa kalimat mengenai info biografi dari sang penulis artikel tersebut, dalam sebutan kerenya author box, terus bagaimanakah cara untuk membuat Author box seperti pada wordpress?
Di beberapa template pada wordpress banyak sekali yang sudah mendukung ataupun telah memberi fasilitas untuk author box, tapi ada disebagian template wordpress juga ada banyak yang masih belum ada, mungkin ada diantara anda yang sudah terlanjur suka pada sebuah template untuk wordpress milik anda dan anda tidak mau mengganti template lagi tapi ingin ada author box nya janganlah anda kawatir, karena disini kita akan dijelaskan bagaimana cara membuat author box sekaligus akan diberikan script CSS nya juga agar tampilan author box terlihat lebih bagus.
langkah-langkah untuk membuat author box pada website yang menggunakan wordpress yaitu copy kan script yang ada dibawah ini untuk anda pasang di file single.php template milik anda, diatas bagian tag script comment.
[php]<!– Script Author Box –>
<div class=”postauthor-container”>
<h4><?php _e(‘About The Author’, ‘twentyfourteen’); ?></h4>
<div class=”postauthor”>
<span class=”photo”><?php if(function_exists(‘get_avatar’)) { echo get_avatar( get_the_author_meta(’email’), ‘100’ ); } ?></span>
<h5><?php the_author_meta( ‘nickname’ ); ?></h5>
<p><?php the_author_meta(‘description’) ?></p>
</div>
</div>
<!– Akhir Script Author Box –>[/php]
*Dapat dilihat script diatas ada nama sebuah template, twentyfourteen karena saya mencoba kode script ini di template twentyfourteen tersebut, jika di template yang ini saya akan meletakkanya di file content.php, karena di theme twentyfourteen banyak sekali jenis kontennya, maksudnya terdapat konten image, konten berupa video, jadi jika menghendaki muncul di bagian konten image ya anda tinggal kopi script diatas ke content-image.php tepat diatas script.
| 1 | <?php the_tags( ‘<footer class=”entry-meta”><span class=”tag-links”>’, ”,'</span></footer>’ ); ?> |
Untuk memperindah tampilan agar author box nantinya akan terlihat menarik dan tidak mainstream maka jangan lupa anda copy kan juga beberapa script css seperti dibawah ini di style.css template anda.
[css]/*———————
CSS Author
———————–*/
.postauthor-container {
clear: both;
float: left;
margin-top: 20px;
width: 94.8%;
margin-left:20px;
}
.postauthor p {
padding-top: 0px;
font-size: 14px;
margin-bottom: 0;
}
.postauthor {
min-height: 125px;
float: left;
clear: both;
padding: 15px 2.4% 0 2.4%;
background: #EEEEEE;
border: 1px solid #E1E1E1;
width: 94.8%;
}
.postauthor h4 {
font-weight: bold;
font-size: 18px;
}
.postauthor h5 {
display: inline-block;
text-transform: capitalize;
font-size: 14px;
padding: 0;
margin: 0;
margin-bottom: 5px;
}
.postauthor img {
float: left;
margin: 5px 20px 15px 0;
}[/css]
Baca juga: TUTORIAL CARA MEMBUAT WEB LOWONGAN KERJA DENGAN WORDPRESS
