Wprowadzenie
Jak zmienić domyślny Gravatar na własny w WordPress?
WordPress domyślnie korzysta z usługi Gravatar, aby przypisywać awatary do użytkowników na podstawie ich adresu e-mail. Dla wielu właścicieli stron jest to wygodne rozwiązanie, ale nie zawsze spełnia wszystkie potrzeby. Jak zmienić domyślny Gravatar na własny w WordPress ? Co zrobić, jeśli chcesz, aby użytkownicy mogli dodawać swoje własne, unikalne awatary bez konieczności korzystania z Gravatar? W tym poradniku pokażemy, jak krok po kroku zastąpić awatary Gravatar własnymi obrazami. Dzięki temu użytkownicy Twojej strony zyskają pełną kontrolę nad swoim wizerunkiem!
Przed rozpoczęciem procesu, upewnij się, że w ustawieniach Gravatara (Ustawienia -> Dyskusja) nie jest wybrana opcja „Pusto”
1. Tworzenie obszaru ustawień dla własnego awatara
Najpierw dodamy możliwość przesyłania własnych awatarów dla użytkowników. Możesz zrobić to, dodając kod do swojego pliku functions.php lub tworząc mały plugin.
<?php
// Własny avatar wybierany z biblioteki mediów - pole wyboru w profilu użytkownika
function custom_avatar_media_library_field($user)
{
$avatar_url = get_user_meta($user->ID, 'custom_avatar', true);
?>
<table class="form-table">
<tr>
<th><label for="custom_avatar">Wybierz Avatar</label></th>
<td>
<img id="custom_avatar_preview" src="<?php echo esc_url($avatar_url ? $avatar_url : ''); ?>"
style="width: 100px; height: 100px; <?php echo !$avatar_url ? 'display:none;' : ''; ?>" />
<br>
<input type="hidden" name="custom_avatar" id="custom_avatar" value="<?php echo esc_url($avatar_url); ?>" />
<button type="button" class="button" id="custom_avatar_button">Wybierz Avatar</button>
<button type="button" class="button" id="remove_custom_avatar"
style="<?php echo !$avatar_url ? 'display:none;' : ''; ?>">Usuń Avatar</button>
</td>
</tr>
</table>
<script>
jQuery(document).ready(function ($) {
var mediaUploader;
$('#custom_avatar_button').click(function (e) {
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Avatar',
button: { text: 'Choose Avatar' },
multiple: false
});
mediaUploader.on('select', function () {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$('#custom_avatar').val(attachment.url);
$('#custom_avatar_preview').attr('src', attachment.url).show();
$('#remove_custom_avatar').show();
});
mediaUploader.open();
});
$('#remove_custom_avatar').click(function (e) {
e.preventDefault();
$('#custom_avatar').val('');
$('#custom_avatar_preview').hide();
$(this).hide();
});
});
</script>
<?php
}
add_action('personal_options', 'custom_avatar_media_library_field');2. Zapisywanie wyboru w profilu użytkownika
Kolejno dodamy funkcję odpowiedzialną za zapisywanie w profilu własnych awatarów dla użytkowników. Możesz zrobić to, dodając kod do swojego pliku functions.php lub rozbudowując swój plugin.
<?php
// Zapisanie własnego Avatara
function save_custom_avatar_from_media_library($user_id)
{
if (isset($_POST['custom_avatar'])) {
update_user_meta($user_id, 'custom_avatar', esc_url_raw($_POST['custom_avatar']));
}
}
add_action('personal_options_update', 'save_custom_avatar_from_media_library');
add_action('edit_user_profile_update', 'save_custom_avatar_from_media_library');3. Modyfikacja funkcji wyświetlania awatara
Teraz musimy sprawić, aby WordPress pobierał nasz własny avatar zamiast Gravatar. Poniżej metoda za to odpowiedzialna.
<?php
// Wyświetlanie własnego awatara
function custom_avatar($avatar, $id_or_email)
{
$user_id = is_numeric($id_or_email) ? $id_or_email : (is_object($id_or_email) && isset($id_or_email->ID) ? $id_or_email->ID : null);
if ($user_id) {
$custom_avatar = get_user_meta($user_id, 'custom_avatar', true);
if ($custom_avatar) {
// Adjust width and height based on the requested size or display position (admin / frontend)
if (is_admin()) {
$size = 32;
} else {
$size = 75;
}
$avatar = sprintf(
'<img src="%s" class="avatar avatar-%s photo" width="%s" height="%s" alt="User Avatar" />',
esc_url($custom_avatar),
esc_attr($size),
$size,
$size,
);
}
}
return $avatar;
}
add_filter('get_avatar', 'custom_avatar', 10, 3);4. Testowanie nowego systemu awatarów
Po dodaniu kodu, przejdź do profilu użytkownika i spróbuj przesłać nowy avatar. Sprawdź na swojej stronie, czy nowy obraz pojawia się zamiast domyślnego Gravatara.
5. Pełny kod
Poniżej pełny kod do pliku functions.php Twojego motywu potomnego:
<?php
// Własny avatar wybierany z biblioteki mediów - pole wyboru w profilu użytkownika
function custom_avatar_media_library_field($user)
{
$avatar_url = get_user_meta($user->ID, 'custom_avatar', true);
?>
<table class="form-table">
<tr>
<th><label for="custom_avatar">Wybierz Avatar</label></th>
<td>
<img id="custom_avatar_preview" src="<?php echo esc_url($avatar_url ? $avatar_url : ''); ?>"
style="width: 100px; height: 100px; <?php echo !$avatar_url ? 'display:none;' : ''; ?>" />
<br>
<input type="hidden" name="custom_avatar" id="custom_avatar" value="<?php echo esc_url($avatar_url); ?>" />
<button type="button" class="button" id="custom_avatar_button">Wybierz Avatar</button>
<button type="button" class="button" id="remove_custom_avatar"
style="<?php echo !$avatar_url ? 'display:none;' : ''; ?>">Usuń Avatar</button>
</td>
</tr>
</table>
<script>
jQuery(document).ready(function ($) {
var mediaUploader;
$('#custom_avatar_button').click(function (e) {
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Avatar',
button: { text: 'Choose Avatar' },
multiple: false
});
mediaUploader.on('select', function () {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$('#custom_avatar').val(attachment.url);
$('#custom_avatar_preview').attr('src', attachment.url).show();
$('#remove_custom_avatar').show();
});
mediaUploader.open();
});
$('#remove_custom_avatar').click(function (e) {
e.preventDefault();
$('#custom_avatar').val('');
$('#custom_avatar_preview').hide();
$(this).hide();
});
});
</script>
<?php
}
add_action('personal_options', 'custom_avatar_media_library_field');
// Zapisanie własnego Avatara
function save_custom_avatar_from_media_library($user_id)
{
if (isset($_POST['custom_avatar'])) {
update_user_meta($user_id, 'custom_avatar', esc_url_raw($_POST['custom_avatar']));
}
}
add_action('personal_options_update', 'save_custom_avatar_from_media_library');
add_action('edit_user_profile_update', 'save_custom_avatar_from_media_library');
// Wyświetlanie własnego awatara
function custom_avatar($avatar, $id_or_email)
{
$user_id = is_numeric($id_or_email) ? $id_or_email : (is_object($id_or_email) && isset($id_or_email->ID) ? $id_or_email->ID : null);
if ($user_id) {
$custom_avatar = get_user_meta($user_id, 'custom_avatar', true);
if ($custom_avatar) {
// Adjust width and height based on the requested size or display position (admin / frontend)
if (is_admin()) {
$size = 32;
} else {
$size = 75;
}
$avatar = sprintf(
'<img src="%s" class="avatar avatar-%s photo" width="%s" height="%s" alt="User Avatar" />',
esc_url($custom_avatar),
esc_attr($size),
$size,
$size,
);
}
}
return $avatar;
}
add_filter('get_avatar', 'custom_avatar', 10, 3);Podsumowanie
Jak zmienić domyślny Gravatar na własny w WordPress?
Korzystając z powyższych kroków, stworzyliśmy system, który umożliwia użytkownikom dodawanie własnych awatarów, które będą wyświetlane zamiast standardowych awatarów Gravatar. Ten proces może zwiększyć zaangażowanie użytkowników i sprawić, że ich doświadczenia na Twojej stronie będą bardziej spersonalizowane.
Teraz Twoja strona WordPress jest bardziej elastyczna, a użytkownicy mogą wybrać obraz, który najlepiej ich reprezentuje.
Często zadawane pytania
Jak zmienić domyślny Gravatar na własny w WordPress?
Jerzy Lazaridis
Senior Web developer
Archiwum autora
Od roku 2018 zajmuje się profesjonalnie programowaniem, posiada 15 certyfikatów z tej dziedziny oraz wyższe wykształcenie. Pasjonuję się nauką, sportem i sztuką. Fan nowoczesnych technologii i autorskich rozwiązań.
