Membuat Author Box di GeneratePress Tanpa Plugin

Bagikan

Author box atau kotak yang menampilkan informasi tentang author atau penulis artikel mungkin terlihat sepele namun sebenarnya memiliki peran yang ternyata bisa vital. Jika Anda ingin membuat author box di GeneratePress, bisa mengikuti cara ini.

Menurut sebuah artikel yang ditulis oleh MOZ yang berjudul “E-A-T and the Quality Raters’ Guidelines“, secara singkat bahwa author box memiliki peranan untuk menampilkan EAT (Expertise, Authoritativeness, and Trustworthiness).

Author box tidak menentukan rangking dalam mesin pencarian, namun akan membantu Google menentukan apakah penulis artikel adalah orang yang ahli dan dapat dipercaya dalam bidangnya. Sehingga memberikan “sinyal” untuk menentukan kualitas isi artikel tersebut.

Kami tidak akan panjang lebar membahas SEO karena kami bukan ahlinya.

Fokus kami disini akan membantu menampilkan kotak author atau author box bagi Anda pengguna tema GeneratePress Premium. Jika Anda belum menggunakan GeneratePress Premium, Anda bisa membeli di kami dengan harga terjangkau. Klik gambar berikut untuk keterangan lebih lanjut.

Beli GeneratePress Premium
  • Metode ini tidak menggunakan plugin.
  • Hanya bisa diterapkan di GP Premium karena akan menggunakan modul Elements.

Menambahkan Author Box di GeneratePress

Element

Langkah pertama adalah membuat Element.

  • Tampilan > Elements > Add New Element > Pilih HOOK.
  • Masukkan kode berikut ini.
<div class="author-box">
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
 
        <h5 class="author-title"><?php printf( esc_attr__( 'Tentang %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>
	
	<div class="author-summary">
	
        <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
 
        <div class="author-links">
 
        <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Baca Lengkap">...</a>
 
        </div>
 
    </div>
 
</div>
Author Box GeneratePress
Setting Element Hook Author Box di GeneratePress

Pada bagian:

  • Settings > Hook = generate_after_content > Execute Php = Cek > Priority = 20.
  • Display Rules > Location = Pos / All Pos.
  • Terbitkan.

Kustomisasi Penampilan

Langkah berikutnya adalah mempercantik tampilan author box. Kita akan memasukkan kode CSS berikut ini.

.author-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 4%;
    margin-top: 30px;
    font-size: 1em;
    box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.author-links a {
    font-size: 3em;
    line-height: 0.5em;
    float: right;
}

.author-box .avatar {
    width: 30px;
    border-radius: 100%;
    margin-right: 20px;
}

.author-title {
   font-weight: 700;
}

h4.author-title {
    margin-bottom: 0.5em;
}

.author-description {
	margin-bottom: 10px;
}

/* For Mobile Devices */
@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        text-align: center;
	padding: 50px 10px;
    }

    .author-box .avatar {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
	margin-top: -35px;
    }

    .author-box .avatar img {
        max-width: 70px;
    }
}

Hasilnya akan seperti gambar berikut.

Author Box GeneratePress
Hasil penampilan author box di GP Premium

Baca juga:

Membuat Artikel Terkait di GeneratePress (Related Post)

Modifikasi GeneratePress dengan CSS Khusus (CSS Tambahan)

Jika Anda menyukai cara termudah dengan menggunakan plugin, berikut ini beberapa pilihan plugin yang bisa digunakan untuk menambahkan author box di GeneratePress:

Kesimpulan

Mana metode yang terbaik? Silahkan pilih mana yang mudah menurut Anda. Jika Anda seperti kami yang lebih memilih minimalistik dalam penggunaan plugin, maka cara membuat author box di tema GeneratePress diatas bisa Anda terapkan.

Tinggalkan komentar