Cara Membuat Author Box di WordPress Secara Manual Tanpa Plugin

Info Menarik – Pernahkan Kamu melihat informasi singkat tentang penulis dengan bentuk kotak yang tampil pada halaman posting blog atau website? Biasanya informasi yang tampil pada kotak ini adalah, foto profil, catatan singkat, dan media sosial penulis. Kotak ini bernama author box atau kotak penulis. Nah, pada artikel ini saya akan membagikan cara membuat untuk menampilkan kotak penulis di situs WordPress.

Author box adalah fitur WordPress untuk menampilkan sejumlah informasi penulis pada sebuah blog atau website. Pada umumnya pada author box ini berisi foto profil penulis, catatan singkat penulis, dan juga media sosial penulis seperti Facebook, Twitter, dan sebagainya.

Biasanya kotak penulis ini akan tampil di bawah artikel atau tepatnya di bawah meta tag dan di atas komentar. Untuk WordPress sendiri biasanya foto profil yang tampil pada author box akan terintegrasi dengan akun gravatar. Dengan menampilkan kotak penulis maka pembaca bisa tahu tentang profil penulis. Dan jika pembaca ingin mengenal penulis lebih jauh lagi bisa klik media sosial yang tampil di kotak penulis tersebut.

Contoh tampilan kotak penulis seperti gambar berikut:

Cara Membuat Author Box di WordPress Tanpa Plugin

Secara default WordPress sudah menyediakan fitur untuk menampilkan kotak penulis yaitu dari menu Pengguna yang bisa kita temukan di halaman dashboard. Namun biasanya fitur bawaan WordPress harus terintegrasi dengan tema yang kita gunakan. Terkadang kita menggunakan tema yang tidak mempunyai fitur untuk menampilkan kotak penulis.

Sebetulnya bagi pengguna WordPress tidak perlu dipusingkan dengan pengaturan untuk menampilkan kotak penulis. Karena di WordPress sudah tersedia beberapa plugin yang khusus untuk memenuhi keperluan ini.

Namun jika Kamu tidak suka dengan plugin, silakan ikuti tutorial ini sampai selesai. Karena memang dengan banyaknya menggunakan plugin maka bisa membebani pada kecepatan situs ketika kita akses.

1. Masukkan Kode PHP di Single Post

Langkah awal untuk Kamu yang ingin membuat author box di WordPress namun tidak ingin menggunakan plugin, silakan langkah pertama masukkan kode berikut ke dalam single.php tema yang Kamu gunakan.

<!-- Start Author Box -->
 <div class="postauthor-container">
 <h4><?php _e('About The Author', ''); ?></h4>
 <div class="postauthor">
 <?php if(function_exists('get_avatar')) { echo get_avatar( get_the_author_meta('email'), '100' ); } ?>
 <h5><?php the_author_meta( 'nickname' ); ?></h5>
 <p><?php the_author_meta('description') ?></p>
 </div>
 </div>
 <!-- End Author Box -->

Kode PHP author box di atas Kamu simpan di bawah kode related-post.php atau di atas responcomment.php.

2. Masukkan Kode CSS di Style CSS

Langkah selanjutnya agar author box terlihat lebih menarik lagi, tempatkan kode CSS berikut di menu Appearance > Editor syle.css tema yang Kamu gunakan.

/*-[ Author Box ]---------------------------*/
 .postauthor-container {
 clear: both;
 float: left;
 margin-top: 20px;
 width: 100%;
 }
 .postauthor-container h4 {
 margin-bottom: 10px;
 font-size: 18px;
 }
 .postauthor p {
 padding-top: 0px;
 font-size: 15px;
 margin-bottom: 0;
 }
 .postauthor-top span {
 font-size: 14px;
 line-height: 1.5;
 display: block;
 font-weight: bold;
 text-transform: uppercase;
 }
 .postauthor-top .thetime {
 font-weight: normal;
 font-size: 12px;
 color: #999;
 display: inline-block;
 text-transform: none;
 line-height: 1;
 }
 .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: 18px;
 padding: 0;
 margin: 0;
 margin-bottom: 5px;
 }
 .postauthor img {
 float: left;
 margin: 5px 20px 15px 0;
 }
 .postauthor h4 a { color: #473636 }

Silakan Kamu modifikasi lagi tampilan CSS author box-nya agar terlihat lebih menarik lagi atau sesuai dengan gaya dan niche website Kamu.

Baca Juga: Cara Membuat Related Post Otomatis Tanpa Plugin di Website WordPress

Selamat mencoba dan semoga artikel ini bermanfaat dan jika ada pertanyaan silakan bisa Kamu sampaikan pada kotak komentar. Atau bisa menghubungi Admin dari halaman kontak. Terima kasih …