Setiap platform online selalu menyediakan fitur foto profil, bukan? Lihat saja Facebook, Instagram, Medium, Tumblr, dan lain sebagainya. Namun, ada yang berbeda dengan foto profil WordPress.
Pasalnya, jika pada beberapa platform yang disebutkan sebelumnya kita bisa mengganti foto profil langsung pada website/aplikasi yang sama. Jika menggunakan WordPress, kita harus memiliki akun Gravatar terlebih dulu untuk bisa memasang dan mengganti gambar profil.
Kami memiliki solusi untuk mempermudah Anda mengganti foto profil WordPress tanpa melalui Gravatar. Atau dengan kata lain, menggunakan foto avatar WordPress secara lokal.
Anda akan membutuhkan tambahan plugin Advanced Custom Fields atau Meta Box AIO. Silakan pilih salah satu atau coba satu per satu untuk membuktikan kebenaran metode ini.
Mari simak artikel ini dan ikuti tutorial secara teliti agar dapat menerapkannya pada website Anda secara benar.
Tutorial Versi Video
1. Menggunakan Advanced Custom Fields
Hampir bisa dipastikan semua pengguna WordPress pasti mengetahui plugin yang satu ini. Plugin yang dibuat oleh Elliot Condon ini telah diinstal pada lebih dari 2 juta website.
Fungsi utama dari plugin ini adalah menambahkan custom field pada post type yang ada pada website WordPress Anda. Misalnya, Anda ingin menambahkan kolom galeri pada post editor. Anda bisa menambahkan kolom lainnya. Silakan lihat daftarnya di sini.
Nah, pada artikel ini kami hanya akan menjelaskan tutorial mengenai salah satu fungsi ACF. Silakan simak langkah-langkah mengganti foto profil WordPress menggunakan ACF.
1. Download dan Instal Plugin
Sebelum memulai materi ini, silakan download plugin Advanced Custom Fields pada plugins repository.
Kemudian, instal plugin tersebut pada website Anda dan aktifkan agar muncul menu baru pada sidebar dashboard WordPress Anda.
2. Menambahkan Field Groups Baru
Setelah muncul menu “ACF” di sebelah kiri dashboard, arahkan mouse ke menu tersebut, maka akan muncul beberapa submenu. Pilih “Field Group” untuk mulai membuat new field group.
3. Menambahkan Image Field untuk Foto Profil WordPress
Selanjutnya, klik “Add New” di bagian atas. Anda akan diarahkan ke halaman baru tempat Anda membuat custom field.
Pada kolom judul – di samping kanan “Edit Field Group”, ketik “Custom Avatar ACF” sebagai nama field group. Lalu pilih Field Type “Image” pada tab “General”.
Ketik Foto Profil pada kolom Field Label, kemudian Anda akan menemukan kata “foto_profil” ter-generate secara otomatis pada kolom Field Name.
Nama inilah yang akan kita gunakan sebagai id untuk mendapatkan $image_url. Kemudian, pada opsi Return Format dan Library biarkan saja default.
Beralih ke tab “Presentation”. Yang harus Anda pastikan adalah kolom “Preview Size”, karena ukuran yang Anda pilih di sini harus sama dengan skrip yang akan ditambahkan.
Misalnya, jika Anda memilih Thumbnail (150 x 150), maka pada kode khusus nanti Anda harus menulis wp_get_attachment_image_src( $image_id, 'thumbnail' ); , begitu pula untuk ukuran lainnya yang tersedia.
Konfigurasi terakhir adalah pada “Settings” yang terpisah di bagian bawah. Pada tab “Location Rules”, Anda akan menemukan pilihan “Show this field group if”. Pastikan Anda memilih “User Form” is equal to “Add / Edit”, agar field muncul pada menu Profile.
Sampai di sini Anda telah berhasil membuat custom field untuk foto profil WordPress. Namun, ketika Anda menambahkan gambar pada “Add Image”, tidak akan memengaruhi foto profil Anda.
Saat inilah kita membutuhkan beberapa baris kode PHP untuk menambahkan fungsi baru agar kolom gambar terhubung pada profil WordPress.
4. Menambahkan Kode PHP Pada File functions.php
Kami berasumsi bahwa Anda menginstal child theme agar skrip yang akan ditambahkan tidak mengganggu file asli tema Anda.
Apabila tema yang Anda gunakan tidak menyediakan child theme, silakan pelajari cara membuat child theme pada tutorial ini: Membuat Child Theme Tanpa dan Menggunakan Plugin.
Silakan klik menu “Appearance”, lalu Anda akan menemukan submenu “Theme File Editor”. Salin kode di bawah ini lalu tempel pada file functions.php tema Anda dan klik “Update”:
add_filter('get_avatar', 'ganti_profile_avatar', 10, 5);
function ganti_profile_avatar( $avatar, $id_or_email, $size, $default, $alt ) {
$user = '';
// Dapatkan pengguna berdasarkan id atau email
if ( is_numeric( $id_or_email ) ) {
$id = (int) $id_or_email;
$user = get_user_by( 'id' , $id );
} elseif ( is_object( $id_or_email ) ) {
if ( ! empty( $id_or_email->user_id ) ) {
$id = (int) $id_or_email->user_id;
$user = get_user_by( 'id' , $id );
}
} else {
$user = get_user_by( 'email', $id_or_email );
}
if ( ! $user ) {
return $avatar;
}
// Mendapatkan user id
$user_id = $user->ID;
// Mendapatkan file id
$image_id = get_user_meta($user_id, 'foto_profil', true); // Ganti sesuai field ID
// Kalau tidak ada avatar, mau diapakan...
if ( ! $image_id ) {
return $avatar;
}
// Mendapatkan file size
$image_url = wp_get_attachment_image_src( $image_id, 'medium' ); // Atur ukuran gambar sesuai nama ukuran
// Mendapatkan file url
$avatar_url = $image_url[0];
// Mendapatkan img markup
$avatar = '<img alt="' . $alt . '" src="' . $avatar_url . '" class="avatar avatar-' . $size . '" height="' . $size . '" width="' . $size . '"/>';
// Return avatar kita
return $avatar;
}Selain menambahkan kode khusus langsung pada tema website, Anda juga bisa menggunakan plugin seperti WP Codebox, Code Snippets, WPCode, ScriptOrganizer, AdvancedScript, FluentSnippets, dan lainnya. Pilihan ini agar lebih mudah mengelola kode-kode tambahan pada website Anda.
Selanjutnya, kembali ke menu Users => Profile. Gulir hingga ke bagian bawah pada custom field yang telah Anda buat sebelumnya dengan nama Custom Avatar ACF.
Pada bidang Foto Profil, klik Add Image dan pilih gambar profil yang Anda inginkan lalu klik Select. Langkah terakhir adalah memuat ulang (refresh) halaman dengan mengklik tombol Update Profile.
Anda akan melihat foto profil WordPress Anda telah diperbarui sesuai pilihan Anda sebelumnya. Dengan begitu, Anda tidak perlu lagi membuat akun Gravatar untuk menambahkan foto profil.
Mudah, bukan? Sampai di sini Anda telah berhasil menerapkan cara pertama. Sekarang, mari kita lanjut ke cara berikutnya, yaitu menggunakan plugin Meta Box AIO.
2. Menggunakan Meta Box AIO
Secara garis besar, prosesnya hampir sama dengan cara pertama. Yang membedakannya adalah karena perbedaan tampilan dan function bawaan masing-masing plugin.
Pada 10 Januari lalu, Meta Box mengumumkan di official Meta Box Facebook group menengai peluncuran plugin Meta Box Lite. Namun, versi ini tidak memenuhi semua fitur yang dibutuhkan untuk membuat custom avatar. Oleh karena itu, Anda harus menggunakan versi Meta Box AIO.
Salah satu fitur yang tidak disediakan pada versi lite adalah field location. Agar dapat berfungsi sesuai tutorial ini, Anda membutuhkan opsi lokasi “User”. Pada versi lite hanya ada pilihan Post type dan Comment.
1. Download dan Instal Meta Box AIO Plugin
Tidak sama dengan plugin sebelumnya, Meta Box Lite maupun Meta Box AIO harus di-download langsung pada halaman website resmi mereka. Mengapa mereka memilih untuk tidak mendaftarkan plugin ini di repositori WordPress?
Tidak ada jawaban pasti. Namun, mungkin saja ada kaitannya dengan drama WordPress akhir tahun lalu.
Silakan kunjungi halaman resmi Meta Box plugin di sini. Setelah selesai, Anda bisa mengunduhnya langsung pada user dashboard yang diberikan. Pastikan Anda mengunduh versi AIO terbaru.
Setelah unduhan selesai, silakan masuk ke menu Plugins => Add New Plugin => Upload Plugin. Selanjutnya Anda bisa menarik file unduhan langsung ke kolom instal atau memilih file dengan klik tombol “Choose File”. Lalu, klik “Install Now”.
2. Membuat Custom Fields Baru
Silakan kembali ke dashboard WordPress. Pada menu Meta Box, pilih “Custom Fields”. Anda akan di arahkan ke halaman Field Groups.
Di sini Anda akan menemukan tombol “Add New Field Group”. Silakan klik dan beri nama “Custom Avatar”.
Kemudian,pada tab “General” silakan isi “Label” dengan nama yang sama, yang kemudian akan otomatis ter-generate pada kolom ID menjadi “custom_avatar”.
Untuk “Type” cari pada kolom pencarian “Single Image”. Biarkan konfigurasi lainnya mengikuti pengaturan default. Apabila “Image size” bukan “Thumbnail”, silakan ganti terlebih dulu. Karena pada tutorial kali ini kami menggunakan ukuran gambar thumbnail.
Untuk pengaturan di tab “Settings”, pastikan “Location” memilih “User”. Lalu klik tombol “Publish” di sebelah kanan. Dengan begitu, Anda sudah menambahkan field group baru. Field ini akan muncul pada halaman user profile.
Anda akan menemukan bidang pilihan “Custom Avatar” dan di sana ada opsi “+ Add Media”. Namun, jika sekarang Anda menambahkan media, gambar tersebut tidak akan mengganti foto profil Anda. Mengapa?
Nah, saat inilah Anda harus menambahkan custom code pada file functions.php child theme Anda.
3. Menambahkan Fungsi untuk Menimpa Foto Profil Gravatar
Saatnya sekarang Anda menambahkan kode PHP agar fitur mengganti foto profil WordPress dapat berfungsi. Kode ini kami salin dari tutorial Meta Box tanpa melakukan perubahan sedikitpun.
Tahap ini sama dengan yang telah kami jelaskan sebelumnya di sini. Jadi, Anda dapat mengikuti langkah-langkah yang ada pada poin tersebut.
Jika sebelumnya Anda telah menyalin kode ACF, maka silakan dihapus agar tidak terjadi error. Selanjutnya, silakan salin-tempel kode berikut ke file functions.php atau plugin code snippets jika menggunakannya:
add_filter( 'get_avatar_url', 'mb_get_avatar_url', 10, 3 );
function mb_get_avatar_url( $url, $id_or_email, $args ) {
if ( is_numeric( $id_or_email ) ) {
$user_id = $id_or_email;
} elseif ( is_string( $id_or_email ) && ( $user = get_user_by( 'email', $id_or_email ) ) ) {
$user_id = $user->ID;
} elseif ( is_object( $id_or_email ) && ! empty( $id_or_email->user_id ) ) {
$user_id = (int) $id_or_email->user_id;
}
if ( empty( $user_id ) ) {
return $url;
}
$custom_avatar = rwmb_meta( 'custom_avatar', [ 'object_type' => 'user' ], $user_id );
if ( ! $custom_avatar ) {
return $url;
}
$url = $custom_avatar['full_url'];
return $url;
}Apabila Anda menggunakan plugin snippets, pastikan statusnya sudah aktif dan hanya dieksekusi pada halaman admin.
Kembali ke menu “Users” => “Profile”. Pada bagian Custom Avatar, tambahkan media baru yang ingin Anda jadikan foto profil, lalu klik “Update Profile”. Pastikan “Profile Picture” juga diperbarui seperti gambar di bawah ini:
Jika hasilnya sama, artinya Anda telah berhasil mengganti foto profil WordPress tanpa Gravatar.
Personalisasi Avatar WordPress Anda
Baik itu Advanced Custom Fields maupun Meta Box AIO, keduanya dapat digunakan untuk memudahkan Anda untuk menambahkan custom fields. Dalam pembahasan kali ini, kita telah menggunakannya untuk menambahkan custom field atau bidang khusus pada halaman pengguna.
Fungsi custom field tersebut adalah untuk memudahkan pengguna mengganti gambar profil WordPress. Selain itu, metode ini juga dapat menjaga performa website Anda. Karena, secara teori Anda tidak perlu melakukan permintaan ke pihak ketiga (Gravatar).
Demikianlah tutorial bagaimana cara mengganti foto profil WordPress tanpa akun Gravatar. Semoga artikel ini dapat memberikan solusi bagi Anda.
Silakan tinggalkan komentar apabila ada yang ingin Anda diskusikan. Jika Anda membutuhkan jasa website profesional, silakan hubungi kami pada halaman ini.
Apabila Anda merasa video tutorial bara mengganti gambar profil WordPress ini bermanfaat, silakan subscribe YouTube channel kami. Anda juga bisa mentraktir kami di sini.
