Membuat Author Box di GeneratePress Tanpa Plugin

Fitur author box tidak disediakan di tema GeneratePress. Kita bisa membuat author box di GeneratePress sendiri memanfaatkan modul Elements GP Premium.

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

Versi 1

Kita akan menampilkan author box di GeneratePress seperti berikut ini.

Membuat Author Box di GeneratePress
Membuat 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">
	<?php 
	
	global $post;
	
	?>
	
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
 
        <h5 class="author-title"><?php printf( esc_attr__( '%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="Read more">
                ...
            </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 = 10 atau 20.
  • Display Rules -> Location = Pos / All Pos.
  • Terbitkan.

Kustomisasi Penampilan

Langkah berikutnya adalah mempercantik tampilan author box. Kita akan memasukkan kode CSS berikut ini (masukkan di CSS Tambahan).

/* Author Box */

.author-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 4%;
    margin-top: 60px;
    font-size: 0.8em;
	  
}

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

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

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

Untuk mengatur deskripsi biografi dan menampilkan foto author, semuanya perlu diatur di bagian Pengguna -> Profil.

Membuat Author Box di GeneratePress
Pengaturan foto profil dan biografi author box di GeneratePress

Dan pastikan juga di menu Pengaturan -> Diskusi -> Tampilan Avatar sudah aktif.

Membuat Author Box di GeneratePress
Tampilan Avatar author box di GeneratePress

Versi 2

Untuk menampilkan author box seperti berikut ini:

Author Box di GeneratePress
Author Box Versi 2

Gunakan kode berikut di Element:

<div class="author-box">
	<div class="avatar">
		<?php echo get_avatar( get_the_author_meta('user_email'), '250', '' ); ?>
	</div>
	<div class="author-info">
		<h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
			<span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
		</h5>
		<div class="author-summary">
			<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div>
		<div class="author-links">
			<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">...</a>
		</div>
	</div>
</div>

Dan gunakan CSS berikut ini:

/* Author Box */
.author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 60px;
	font-size: 0.9em;
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 5px;
	box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}
.author-box .avatar {
	width: 250px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
h5.author-title {
	margin-bottom: 0.1em;
	font-weight: 600;
}
.author-description {
	line-height: 1.6em
}
.author-links a {
	margin-top: -1.5em;
	font-size: 2em;
	line-height: 2em;
	float: left;
}
@media (max-width: 768px) {
	.author-box {
		padding: 20px;
		padding-bottom: 0px;
		margin-top: 100px;
		flex-direction: column;
		text-align: center;
	}
	.author-box .avatar {
		margin-right: 0;
		margin-bottom: 10px;
		width: 100%;
		margin-top: -35px;
	}
	.author-box .avatar img {
		max-width: 100px;
	}
	.author-links a {
		float: none;
		align-self: center;
	}
	.author-description {
		margin-bottom: -1.1em;
	}
}

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

Baca juga:

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.

Part-time blogger, content writer, WordPress enthusiast dan penikmat kopi. Lulusan Teknik Informatika yang berkecimpung di dunia internet sejak 2002.

4 pemikiran pada “Membuat Author Box di GeneratePress Tanpa Plugin”

  1. Buatin tutor siidebar dan homepage di GP pro kaya airul dong yg di blog mastahseo dot com, keren tuh mas pasti mas bisa

    Balas

Tinggalkan komentar