WordPress adalah platform website yang paling banyak digunakan di seluruh dunia, yang memberikan fleksibilitas luar biasa kepada penggunanya. Salah satu area yang sering membingungkan pengguna baru adalah cara mengganti avatar pengguna, yang biasanya dikendalikan oleh layanan eksternal bernama Gravatar.
Dalam tutorial ini, Tim DEVanoda akan membahas cara upload avatar lokal di WordPress tanpa menggunakan plugin.
Mengapa Menggunakan Avatar Lokal?
Sebelum kita melanjutkan, mungkin Anda bertanya-tanya, mengapa kita perlu mengganti cara kerja avatar di WordPress? Ada beberapa alasan yang mungkin:
- Kontrol penuh atas avatar: Dengan mengunggah avatar secara lokal, Anda memiliki kontrol penuh atas gambar yang digunakan, daripada mengandalkan layanan eksternal seperti Gravatar.
- Penghematan bandwidth: Menghosting gambar sendiri bisa menghemat sedikit bandwidth dibandingkan dengan memuatnya dari situs eksternal.
- Pengalaman pengguna yang lebih baik: Dengan membiarkan pengguna mengunggah avatar mereka sendiri secara langsung di situs Anda, mereka mungkin merasa lebih terlibat dan memiliki kontrol lebih besar atas profil mereka.
Cara Upload Avatar Lokal di WordPress
Untuk mengunggah avatar lokal di WordPress, cukup tambahkan kode ini ke file functions.php di tema Anda. Pastikan untuk membuat backup sebelum melakukan perubahan apa pun.
// Add enctype to user profile form
add_action('user_edit_form_tag', 'custom_user_profile_form');
function custom_user_profile_form() {
echo ' enctype="multipart/form-data"';
}
// Add custom profile field
add_action('show_user_profile', 'custom_user_profile_fields');
add_action('edit_user_profile', 'custom_user_profile_fields');
function custom_user_profile_fields($user) {
$profile_pic = get_the_author_meta('profile_pic', $user->ID);
?>
<table class="form-table">
<tr>
<th><label for="profile_pic">Profile Picture</label></th>
<td>
<?php if ($profile_pic) : ?>
<img src="<?php echo esc_url($profile_pic); ?>" style="width: 50px; height: auto;">
<?php endif; ?>
<input type="file" name="profile_pic" id="profile_pic"><br>
<span class="description">Upload an image for your profile picture.</span>
</td>
</tr>
</table>
<?php
}
// Save custom profile field
add_action('personal_options_update', 'save_custom_user_profile_fields');
add_action('edit_user_profile_update', 'save_custom_user_profile_fields');
function save_custom_user_profile_fields($user_id) {
if (!current_user_can('edit_user', $user_id)) {
return false;
}
if (!empty($_FILES['profile_pic']['name'])) {
// Allowed file extensions/types
$allowed = array('jpg', 'jpeg', 'gif', 'png');
// Get file extension
$extension = pathinfo($_FILES['profile_pic']['name'], PATHINFO_EXTENSION);
// Check if extension is in the list of allowed ones
if (!in_array($extension, $allowed)) {
wp_die(__('The uploaded image is not of allowed type. The allowed image types are: jpg, gif, and png.'));
return false;
}
// Upload file
$upload_overrides = array('test_form' => false);
$movefile = wp_handle_upload($_FILES['profile_pic'], $upload_overrides);
if ($movefile && !isset($movefile['error'])) {
// File is valid, and was successfully uploaded
update_user_meta($user_id, 'profile_pic', $movefile['url']);
} else {
// Error
wp_die(__('An error occurred while uploading the image.'));
return false;
}
} else {
// Handle delete
update_user_meta($user_id, 'profile_pic', '');
}
}
// Add the profile pic wherever you need
function display_user_profile_pic() {
$user_id = get_current_user_id();
if ($user_id) {
$user_meta = get_user_meta($user_id);
$profile_pic = $user_meta['profile_pic'][0];
if ($profile_pic) {
echo '<img src="'.$profile_pic.'">';
}
}
}
add_filter( 'get_avatar' , 'custom_avatar' , 1 , 5 );
function custom_avatar( $avatar, $id_or_email, $size, $default, $alt ) {
$user = false;
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 && is_object( $user ) ) {
$profile_pic = get_user_meta($user->ID, 'profile_pic', true);
if ($profile_pic) {
$avatar = "<img alt='{$alt}' src='{$profile_pic}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
}
}
return $avatar;
}
Hasil nya nanti akan menjadi seperti ini
Cara Kerja
Apabila Anda ingin tahu bagaimana cara kerja script lokal avatar ini, berikut adalah penjelasan di setiap potongan script nya.
Menambahkan Enctype ke Form Profil Pengguna
Pertama, kita perlu menambahkan atribut enctype ke form profil pengguna. Atribut enctype ini diperlukan agar form dapat memproses data file yang diunggah.
add_action( 'show_user_profile', 'custom_user_profile_fields' );
add_action( 'edit_user_profile', 'custom_user_profile_fields' );
function custom_user_profile_fields( $user ) {
?>
<h3>Profile Picture</h3>
<table class="form-table">
<tr>
<th><label for="image">Image Upload</label></th>
<td>
<input type="file" name="image" id="image" /><br />
<span class="description">Upload your image.</span>
</td>
</tr>
</table>
<?php
}
Menambahkan Field Profil Kustom
Selanjutnya, kita akan menambahkan field kustom ke halaman profil pengguna untuk memungkinkan pengguna mengunggah avatar mereka. Field ini akan muncul di halaman Edit Profil pengguna di bawah semua field lainnya.
add_action( 'personal_options_update', 'save_custom_user_profile_fields' );
add_action( 'edit_user_profile_update', 'save_custom_user_profile_fields' );
function save_custom_user_profile_fields( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) ) {
return false;
}
update_user_meta( $user_id, 'image', $_POST['image'] );
}
// Allow file upload
add_action('user_edit_form_tag', 'make_form_accept_uploads');
function make_form_accept_uploads() {
echo ' enctype="multipart/form-data"';
}
Menyimpan Field Profil Kustom
Sekarang kita perlu menulis fungsi yang akan dipanggil ketika pengguna memperbarui profil mereka. Fungsi ini akan memproses file yang diunggah, memverifikasi bahwa itu adalah gambar, dan kemudian menyimpannya ke direktori upload WordPress. Jika pengguna tidak mengunggah gambar baru, gambar lama akan tetap digunakan.
$user_id = get_current_user_id();
if ($user_id) {
$user_meta = get_user_meta($user_id);
$image = $user_meta['image'][0];
if ($image) {
echo '<img src="'.$image.'">';
}
}
Menampilkan Avatar Pengguna
Akhirnya, kita perlu menulis fungsi lain yang akan menampilkan avatar pengguna yang telah diunggah. Fungsi ini akan mencari gambar yang diunggah oleh pengguna, dan jika ditemukan, akan menampilkan gambar tersebut. Jika tidak, avatar default WordPress akan ditampilkan.
// Add custom profile fields
add_action( 'show_user_profile', 'custom_user_profile_fields' );
add_action( 'edit_user_profile', 'custom_user_profile_fields' );
function custom_user_profile_fields( $user ) {
?>
<h3>Profile Picture</h3>
<table class="form-table">
<tr>
<th><label for="image">Image Upload</label></th>
<td>
<input type="file" name="image" id="image" /><br />
<span class="description">Upload your image.</span>
</td>
</tr>
</table>
<?php
}
// Save custom profile fields
add_action( 'personal_options_update', 'save_custom_user_profile_fields' );
add_action( 'edit_user_profile_update', 'save_custom_user_profile_fields' );
function save_custom_user_profile_fields( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) ) {
return false;
}
update_user_meta( $user_id, 'image', $_POST['image'] );
}
// Allow file upload
add_action('user_edit_form_tag', 'make_form_accept_uploads');
function make_form_accept_uploads() {
echo ' enctype="multipart/form-data"';
}
// Display user profile image
function display_user_profile_image() {
$user_id = get_current_user_id();
if ($user_id) {
$user_meta = get_user_meta($user_id);
$image = $user_meta['image'][0];
if ($image) {
echo '<img src="'.$image.'">';
}
}
}
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda sekarang harus memiliki sistem avatar pengguna yang sepenuhnya fungsional yang tidak mengandalkan plugin atau layanan eksternal. Ini memberi Anda lebih banyak kontrol atas situs Anda dan dapat meningkatkan pengalaman pengguna.
Pastikan untuk selalu membuat backup situs Anda sebelum membuat perubahan apa pun, dan selalu lakukan pengujian menyeluruh setelah membuat perubahan.
Selamat mencoba dan selamat berkreasi dengan WordPress!
