Home » Ask (Forum) » Cara Membuat Author Box pada WordPress?

Question

Salam,

Saya ingin membuat halaman auhor box pada wp yang ada foto saya sendiri, kira-kira bagaimana ya caranya ?

thanks

Aug 18, 2016 (4 months ago) - Posted by 1 Comment

One Answer

  1. Jihan says:

    Hi, silahkan simak instruksi dari saya.

    Langkah-langkah membuat author box pada wordpress yaitu copy kan script dibawah ini untuk dipasang di file single.php template anda, diatas tag script comment.

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

    *Terlihat script diatas ada nama template twentyfourteen karena saya mencoba script ini di template twentyfourteen, jika di template ini saya meletakkanya di file content.php, karena di twentyfourteen banyak sekali jenis konten, maksudnya ada konten image, konten video, jadi jika ingin muncul di konten image ya kopi script diatas di content-image.php tepat diatas script.

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

    Untuk mempercantik tampilan agar author box nanti terlihat menarik dan tidak morat marit maka jangan lupa copy kan juga script css dibawah ini di style.css template anda.

    /*---------------------
          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;
    }
    Register Member

Your Answer

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