Menampilkan Gambar Avatar Ke Dalam Website WordPress

Apakah Anda menginginkan agar dapat menampilkan gambar Avatar Anda sebagai pemilik website dengan cara yang lebih kreatif, seperti menunjukkan gambar Avatar tepat di samping judul setiap posting ?

Yup, Anda bisa. Ini sebenarnya tidak sulit, hanya membutuhkan menempatkan beberapa baris kode setelah Anda selesai membuat website Anda.

Meng-upload Gambar Avatar

Sebelum kita masuk ke kode untuk melakukan hal ini, Anda harus memastikan bahwa Anda telah meng-upload sebuah avatar. WordPress default tidak memiliki tempat untuk meng-upload avatar, tapi Anda bisa menggunakan sebuah plugin, atau mungkin solusi termudah adalah masuk ke gravatar.com dan meng-upload avatar di sana.

Alamat email yang Anda gunakan di gravatar.com harus merupakan alamat email yang sama yang Anda gunakan sebagai alamat pendaftaran di website WordPress Anda.

Kode untuk Gambar Avatar / Foto Profil

Ada beberapa variasi dari kode yang dapat Anda gunakan untuk menampilkan Avatar di WordPress. Berikut adalah salah satu yang akan kita gunakan untuk contoh ini :

? < php get_avatar ( get_the_author_meta ( ‘ ID ‘ ) , 60 ) ; >

Dalam hal ini, nomor yang Anda lihat di sana ( 60 ) adalah ukuran dari Avatar. Anda dapat membuat lebih besar atau lebih kecil sesuai dengan kebutuhan anda.

Avatar Muncul, Tapi Tanpa Style

Jika Anda memasukkan kode di atas ke dalam tema Anda (misalnya dalam file single.php Anda), Anda akan melihat foto dari penulis dalam posting tulisan. Satu-satunya masalah dengan hal ini adalah bahwa kode itu hanya akan menempatkan gambar Avatar di mana pun yang mungkin tidak sesuai dengan keinginan Anda.

Mengontrol Avatar dengan Style

Agar mendapatkan gambar Avatar dengan cara yang terlihat lebih baik, kita akan perlu modifikasi dengan beberapa style CSS.

Untuk melakukannya, pertama kita perlu untuk memasukkannya ke dalam kode ” div ” – yaitu divisi sendiri yang merupakan bagian tersendiri :

Hal ini menciptakan sebuah divisi / bagian baru yang disebut ” author_pic ” yang unik .

Penting : Pastikan div baru Anda adalah unik. Ini tidak harus memiliki nama yang sama dengan div lain dalam tema Anda.

Jadi kita sekarang memiliki div yang unik, tetapi kita masih memerlukan style yang akan kita lakukan dengan referensi div baru saja kita buat ( ” author_pic ” ) di Stylesheet ( style.css ).

CSS Stylesheet

Dalam style sheet ( Tampilan > Edit > Stylesheet ( style.css ) ) , kita akan menggunakan div dengan style yang kita inginkan. Berikut ini adalah contohnya :

# author_pic {
float: left ;
margin-right : 10px ;
}

Pertama kita namakan sama seperti yang gunakan pada div, tapi kita menempatkan hash tag di depan terlebih dahulu dan juga tambahkan kurung buka.

# author_pic {

Kemudian kita masukan kode untuk sejajar ke kiri.

float: left ;

Dan kemudian, setelah disejajarkan ke kiri maka konten ( dalam hal ini judul dan tanggal ) terletak di sebelah kanan, maka kita akan ” Tambah margin 10 pixel di sisi kanan ” kemudian masukan tanda kurung tutup.

margin-right : 10px ;
}

Menghubungkan ke Posting Tulisan

Saat ini Avatar yang dapat dimasukkan baru sebatas gambar. Pengunjung website mungkin akan mencoba untuk mengklik pada Avatar dan berharap mereka akan mendapatkan posting lebih dari penulis atau info lebih lanjut tentang penulis.

Jadi mari kita menambahkan link ke gambar Avatar dengan memodifikasi kode yang telah kita buat :

<div id=”author_pic”>
<a href = “<php get_author_posts_url (get_the_author_meta (‘ID’));?>” rel = “author”>
? <php get_avatar (get_the_author_meta (‘ID’), 60); > </ a>
</ div>

Maka sekarang pengunjung website bisa mengklik gambar Avatar menuju halaman penulis seperti yang kita harapkan.

Memasukkan Gambar Avatar Di Sidebar

Di mana Anda ingin memasukkan gambar Avatar terserah Anda, kita akan berikan satu contoh untuk menempatkan avatar di bagian atas sidebar. ( Tampilan > Editor > Sidebar )

<a href = ” < php get_author_posts_url ( get_the_author_meta ( ‘ ID ‘ ) ) ; ? > ” rel = ” author ” >
? < php get_avatar ( get_the_author_meta ( ‘ ID ‘ ) , 198 ) ; > < / a >

Anda akan melihat bahwa ini pada dasarnya adalah kode yang sama seperti sebelumnya, tapi merupakan dua hal yang berbeda. Yang pertama adalah bahwa divs hilang. Alasan untuk ini adalah bahwa ruang di sidebar begitu terbatas , bahwa tidak ada ruang yang cukup untuk menempatkan gambar Avatar.

Hal kedua adalah piksel telah berubah dari ” 60 ” menjadi ” 198 ” sehingga akan ada gambar Avatar besar tepat di atas sidebar, dan hal ini akan mengambil seluruh ruang. (Ukuran piksel mungkin berbeda sesuai dengan tema website Anda).

Gunakan Style Sesuka Anda

Kedua contoh dasar diatas dapat digunakan dan dikembangkan sesuai keinginan Anda. Hanya perlu diingat untuk menambahkan kode ke file mana Anda ingin gambar Avatar untuk muncul. Gunakan imajinasi Anda sehingga benar-benar dapat menambahkan sentuhan profesional dalam cara membuat website Anda.