Home / WordPress / Begini Cara Membuat Author Box Di WordPress

Begini Cara Membuat Author Box Di WordPress

Begini Cara Membuat Author Box Di WordPress – Untuk pelengkap tampilan halaman artikel WordPress diantaranya dengan menampilkan author box. Agar web sedikit terlihat profesional, maka disarankan membuat author box di akhir artikel. Tapi sebetulnya menampilkan author box di WordPress pada setiap akhir artikel tidak wajib. Itu tergantung selera Anda masing-masing sebagai pengelola WordPress.

Baca Juga : Belajar WordPress Offline Dengan Instant WordPress

Author box adalah data profil singkat admin web yang biasanya tampil di akhir artikel. Untuk tepatnya author box tampil di bawah related post diatas kotak komentar. Author box selain berisi catatan profil singkat admin web, bisanya terdapat photo (gravatar) admin web. Mungkin sekiranya dengan ditampilkan author box pada setiap akhir artikel, diharapkan pembaca web sedikitnya bisa mengenal penulis artikel.

Contoh author box web info-menarik.NET :

cara membuat author box di wordpress 1

Untuk sebagian tema WordPress, author box tidak perlu lagi dioptimasi. Karena fitur author box sudah tersedia disertakan dalam tema yang digunakan. Kita tinggal menambahkan catatan singkat untuk mengisi author box. Untuk mengisi catatan yang akan ditampilkan pada author box, Anda tinggal pergi ke menu Users > Your Profile pada wp-admin Dashborad.

Namun sebagian tema yang kita gunakan, tidak tersedia fitur untuk menampilkan author box. Sehingga kita membutuhkan kode PHP untuk membuat author box di WordPress.

Membuat author box di WordPress bisa kita lakukan dengan bantuan Plugin. Namun disini saya hanya akan menerangkan cara membuat author box di WordPress tanpa plugin. Caranya Anda copy kode PHP berikut dan tempatkan pada menu Appearance > Editor single.php. Kode PHP author box biasanya ditempatkan dibawah kode related-post.php atau diatas responcomment.php.

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

Selanjutnya agar author box terlihat lebih menarik lagi, Anda tempatkan kode CSS berikut di menu Appearance > Editor syle.css.

/*-[ 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 Anda modifikasi lagi tampilan CSS author boxnya agar terlihat lebih menarik lagi.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

28 comments

  1. keren mas author box nya, sayang bukan untuk blogspot. hehee

    • Biasa aja mas, intinya ini hanya untuk menampilkan author box jika tema yang digunakan tidak tersedia untuk menampilkannya.

  2. Eah info baru nih. Nanti saya cek deh di blog saya.

  3. wah mas,,, saya masih belum paham wordpress,,, saya masih pai blogger,,,, nyimak dulu deh

  4. Nyimak aja deh mas, saya paka blogspot soalnya. :)

  5. nice info gan… tapi saya pakainya blogspot :)

  6. Ikut menyimat, kalau sudah kembali ke WP bisa dicoba, hehe.

  7. Wahh mantap gan cuma kok saya bentuk gravatar dan box nya ga kyk demo agan yah kenapa gan padahal saya sudah copy css nya juga,
    oya gan skalian request script bikin popular post yang di sidebar nya kyk agan punya boleh?hehe

    • CSS-nya memang beda dengan yang saya gunakan. Disesuaikan saja gan dengan tema yang digunakan. Bedanya hanya terletak pada background dan bordernya saja. Jika blog ini seperti ini :

      .postauthor {
      min-height: 125px;
      float: left;
      clear: both;
      margin-top: 0px;
      padding: 15px 2.4% 0 2.4%;
      border-top:3px solid #b11c42;
      background: #ebeef2; 
      }

      Jika ingin gravatarnya menjadi lingkaran, tinggal menambahkan kode ini border-radius: 60px; pada .postauthor img Bukankah blog agan juga sudah ada Pupular Postnya?

  8. Bermamfaat gan ilmunya,, salam sukse :)

  9. Keren. Ke sini-kesini saya makin sadar kalau pengelolaan wordpress itu hampir sama dengan blogspot. Selama ini saya hanya tergantung themes yang ada saja.

    • Iya mas terkadang malas juga kalau harus edit-edit theme, mending yang standar saja menghemat waktu.

  10. ternyata mesti pakai utak atik kode ya, di blogspot juga. Istri saya suka pakai wordpress sedangkan saya suka pakai blogspot. istri bilang, bp itu susah, enakan wp, tp saya bilang bp itu mudah, saya gak paham wp.hehe. masing-masing punya kelebihan dan kekurangan ya mas, tinggal kita mau pilih yang mananya saja.

    • Wah ternyata pasangan yang sama-sama aktif di dunia blogger ya mas? Enak dong bisa saling sharing ilmu pengetahuan. Coba kalau seandainya sama menggunakan satu CMS, pasti ga seru mas.

  11. mas cara masukin fotonya gimana..ko ga ada caranya tau2 udah ada.saya perhatikan tutorial nya ngga ada acara upload photo

    • Photo itu otomatis muncul karena kita sudah memasang photo di Gravatar mas. Karena fungsi kode untuk membuat Author Box ini photonya diambil dari photo profil Gravatar.

  12. apakah tidak ada cara untuk upload gravatar di worpres domain kita sendiri tanpa harus ganti di worpresss.org nya..soalnya ribet kalau bolak balik

  13. Kalau ada mohon cara bikin comment box kaya yang punya agan ini. caranya gemana. minta code nya dong

    • Untuk WordPress kotak komentar yang saya gunakan adalah kotak komentar default WordPress. Dan untuk membedakan tampilan kita tinggal bermain di style.css saja mas.
      Saya menggunakan kode seperti ini untuk Comment Form :

      #commentform textarea {
          width: 360px;
          border: 1px solid #E1E1E1;
          background: #fff;
          font-size: 14px;
          padding: 2%;
          line-height: 25px;
          font-family: inherit;
          float: right;
          max-width: 85%;
      }
      #commentform p {
          margin-bottom: 15px;
          float: left;
          width: 100%;
          clear: both;
      }
      #commentform p label {
          display: inline-block;
          margin-bottom: 2px;
          padding-bottom: 5px;
          padding-top: 5px;
          float: left;
      }
      .required {
          color: #a8a8a8;
          font-size: 16px;
          font-style: italic;
          padding: 0;
          line-height: 1;
      }
      .comment-notes .required {
          padding-left: 0;
          padding-top: 3px;
      }
      .comment-notes, .logged-in-as { margin-top: 15PX }
      .comment-form-left {
          float: left;
          width: 50%;
      }
      .comment-form-right {
          float: right;
          width: 50%;
      }
      input#author:focus, input#email:focus, input#url:focus, #contactForm textarea:focus, #commentform textarea:focus { border-color: #c9a096 }
  14. bro kalo yang di wordpress.com gimana cara masangnya ?

    mau komen ribet banget harus 100 karakter…………………………

  15. Mantepp Banget :D Ijin Praktek masbro, Kebetulan Baru Pake WordPress Self Host ni sedikit Bingung Sih , Btw Buat Form Komentar Kayak Gini gimana ya Mas? Biar ada Commnet , Name , Email , Dan Website? Makasih.

  16. terimakasih gan untuk infonya, senang melihat tampilan dan konten website mohon kunjungan balik terimakasih

Leave a Reply

Your email address will not be published. Required fields are marked *