Mungkin kamu pernah melihat website yang terdapat kolom tentang biografi penulis (About the author) seperti pic dibawah. Mungkin kamu juga melihat contoh author box setiap artikel blog dokterweb.

Memang banyak terdapat plugin wordpress mengenai author box, tetapi perlu kamu ketahui semakin banyak plugin kamu gunakan, maka akan memperlambat loading website wordpress. Lalu jalan keluarnya adalah membuat script author box. Silahkan kamu ikuti langkah-langkah dibawah ya

Pada tutorial kali ini saya menggunakan theme Twenty Fourteen, silahkan anda copy kan script dibawah pada content.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 -->

letakkan script tersebut diatas

<?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?>

Script sudah selesai, sekarang untuk mempercantik tampilan author box silahka anda masukkan script css di style.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;
}

Nah silahkan anda lihat di artikel anda sendiri, semoga berhasil ya

• Next Post
• Prev Post