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.

• 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.

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>

Pada bagian:

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

Baca juga: Membuat Tombol Sembunyikan dan Tampilkan Komentar GeneratePress

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.

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

Versi 2

Untuk menampilkan author box seperti berikut ini:

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:

• Simple Author Box
• Author Bio Box
• VK Post Author Display.

Baca juga: Menampilkan Artikel di Halaman 404 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.