Jak dodać własne zdjęcie profilowe WordPress bez Gravatara

Wprowadzenie

Wiele osób używa WordPressa do prowadzenia blogów czy stron firmowych. Domyślnie WordPress korzysta z Gravatara do wyświetlania zdjęć profilowych. To rozwiązanie działa, ale bywa niewygodne i ograniczające. Pokażę Ci lepszy sposób: jak samodzielnie dodać zdjęcie profilowe WordPress i uczynić swój panel bardziej funkcjonalnym.

Dlaczego warto ominąć Gravatara?

Gravatar wymaga osobnego logowania i konfiguracji na zewnętrznej stronie. Wielu użytkowników nie zna tej platformy. Dodatkowo, każda zmiana zdjęcia wymaga edycji profilu na gravatar.com, co jest niewygodne. Zamiast tego możemy użyć własnego kodu, który umożliwia zarządzanie zdjęciem bez wychodzenia z panelu WordPress.

Jak działa kod?

Kod dodaje nowe pole „Załaduj zdjęcie” do formularza edycji profilu użytkownika. To pole pozwala wybrać obraz z biblioteki mediów WordPressa. Wybrany plik jest zapisywany jako meta dane użytkownika. Funkcja get_avatar została nadpisana, aby zamiast Gravatara pobierać lokalne zdjęcie profilowe WordPress.

To oznacza, że użytkownik widzi dokładnie to, co sam załadował – bez potrzeby synchronizacji z innym serwisem.

Kluczowe elementy kodu

• Funkcja add_custom_user_profile_fields – dodaje interfejs do wgrania zdjęcia w panelu użytkownika.
• JavaScript (wp.media) – uruchamia bibliotekę mediów WordPress, umożliwiając wybór zdjęcia.
• Filtr get_avatar – podmienia zdjęcie profilowe Gravatara na lokalne zdjęcie z biblioteki.
• Shortcode [ author_profile_picture ] – pozwala dodać zdjęcie profilowe WordPress autora wpisu w dowolnym miejscu treści.

Dlaczego lepiej używać wtyczki Code Snippets?

Zamiast dodawać kod do functions.php motywu, lepiej używać wtyczki Code Snippets. Dzięki temu:

• kod nie zostanie usunięty po zmianie motywu,
• edycja i dezaktywacja kodu jest bezpieczna,
• nie trzeba edytować plików motywu przez FTP,
• wtyczka oferuje przejrzysty interfejs do zarządzania fragmentami kodu.

To szczególnie ważne dla mniej technicznych użytkowników.

Wygoda użytkowania

Korzystanie z własnego kodu zamiast Gravatara oznacza pełną kontrolę nad zdjęciem profilowym. Nie trzeba rejestrować się na zewnętrznych stronach. Użytkownik może zmienić swoje zdjęcie bezpośrednio w panelu WordPressa. Wystarczy kliknąć jeden przycisk. To prostsze, szybsze i bardziej przyjazne.

Co więcej, zdjęcie profilowe WordPress dodane w ten sposób jest od razu widoczne we wszystkich miejscach, gdzie funkcja get_avatar jest używana, w tym w komentarzach i na stronie profilu autora.

Podsumowanie

Dodanie własnego systemu zdjęć profilowych jest bardziej elastyczne niż korzystanie z Gravatara. Dzięki temu mamy większą kontrolę nad wyglądem i bezpieczeństwem strony. Dodatkowo – całość można łatwo wdrożyć przy pomocy wtyczki Code Snippets. To wygodne, niezależne i proste rozwiązanie, idealne dla każdego użytkownika WordPressa.

Gotowy kod

// Dodanie pól zdjęcia profilowego do profilu użytkownika
function add_custom_user_profile_fields($user) { ?>
    <h3>Zdjęcie Profilowe</h3>
    <table class="form-table">
        <tr>
            <th>
                <label for="profile_picture">Załaduj zdjęcie</label>
            </th>
            <td>
                <input type="hidden" id="profile_picture" name="profile_picture" value="<?php echo esc_attr(get_user_meta($user->ID, 'profile_picture', true)); ?>" />
                <input type="button" class="button button-secondary" id="upload_profile_picture_button" value="Załaduj zdjęcie" />
                <div id="profile_picture_preview" style="margin-top: 10px;">
                    <?php
                    $profile_picture_id = get_user_meta($user->ID, 'profile_picture', true);
                    if ($profile_picture_id) {
                        echo wp_get_attachment_image($profile_picture_id, 'thumbnail');
                    }
                    ?>
                </div>
            </td>
        </tr>
    </table>
<?php }
add_action('show_user_profile', 'add_custom_user_profile_fields');
add_action('edit_user_profile', 'add_custom_user_profile_fields');

// Dodanie skryptu do obsługi uploadu zdjęcia profilowego
function enqueue_custom_user_profile_script($hook) {
    if ('profile.php' != $hook && 'user-edit.php' != $hook) {
        return;
    }

    wp_enqueue_media();
    wp_enqueue_script('custom-user-profile', plugin_dir_url(__FILE__) . 'custom-user-profile.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'enqueue_custom_user_profile_script');

// Zapisanie zdjęcia profilowego użytkownika
function save_custom_user_profile_fields($user_id) {
    if (!current_user_can('edit_user', $user_id)) {
        return false;
    }

    if (isset($_POST['profile_picture'])) {
        update_user_meta($user_id, 'profile_picture', $_POST['profile_picture']);
    }
}
add_action('personal_options_update', 'save_custom_user_profile_fields');
add_action('edit_user_profile_update', 'save_custom_user_profile_fields');

// Wyświetlenie zdjęcia profilowego za pomocą filtru get_avatar
function display_user_profile_picture($avatar, $id_or_email, $size, $default, $alt) {
    // Jeśli to WooCommerce opinie, nie zmieniaj avatarów
    if (is_admin() || (defined('DOING_AJAX') && DOING_AJAX) || strpos($_SERVER['REQUEST_URI'], 'product-reviews') !== false) {
        return $avatar;
    }

    if (is_numeric($id_or_email)) {
        $user_id = (int) $id_or_email;
    } else {
        $user = get_user_by('email', $id_or_email);
        $user_id = $user ? $user->ID : 0;
    }

    if ($user_id) {
        $attachment_id = get_user_meta($user_id, 'profile_picture', true);
        if ($attachment_id) {
            $avatar_url = wp_get_attachment_image_url($attachment_id, 'thumbnail');
            if ($avatar_url) {
                return '<img src="' . esc_url($avatar_url) . '" alt="' . esc_attr($alt) . '" class="avatar avatar-' . esc_attr($size) . ' photo" width="' . esc_attr($size) . '" height="' . esc_attr($size) . '" />';
            }
        }
    }

    return $avatar;
}

add_filter('get_avatar', 'display_user_profile_picture', 10, 5);

// JavaScript do obsługi wyboru zdjęcia profilowego
add_action('admin_footer', function() {
    ?>
    <script>
        jQuery(document).ready(function($) {
            var frame;

            $('#upload_profile_picture_button').on('click', function(e) {
                e.preventDefault();

                if (frame) {
                    frame.open();
                    return;
                }

                frame = wp.media({
                    title: 'Wybierz lub załaduj zdjęcie profilowe',
                    button: {
                        text: 'Ustaw jako zdjęcie profilowe'
                    },
                    multiple: false
                });

                frame.on('select', function() {
                    var attachment = frame.state().get('selection').first().toJSON();
                    $('#profile_picture').val(attachment.id);
                    $('#profile_picture_preview').html('<img src="' + attachment.sizes.thumbnail.url + '" />');
                });

                frame.open();
            });
        });
    </script>
    <?php
});

// Funkcja generująca zdjęcie profilowe autora wpisu za pomocą shortcode
function display_author_profile_picture_shortcode($atts) {
    // Pobierz ID autora aktualnego wpisu
    if (is_single()) {
        $author_id = get_the_author_meta('ID');
    } else {
        $author_id = get_current_user_id();
    }

    if ($author_id) {
        $attachment_id = get_user_meta($author_id, 'profile_picture', true);
        if ($attachment_id) {
            $avatar_url = wp_get_attachment_image_url($attachment_id, 'thumbnail');
            if ($avatar_url) {
                return '<img src="' . esc_url($avatar_url) . '" alt="Zdjęcie profilowe autora" class="author-avatar" />';
            }
        }
    }
    
    // Opcjonalnie: wyświetl domyślny tekst lub obraz, jeśli użytkownik nie ma zdjęcia profilowego
    return '<p>Autor nie ma ustawionego zdjęcia profilowego.</p>';
}

// Rejestracja shortcode
add_shortcode('author_profile_picture', 'display_author_profile_picture_shortcode');

Czym jest Gravatar i jak działa?

Definicja

Gravatar to skrót od Globally Recognized Avatar – czyli globalnie rozpoznawalny avatar. Jest to darmowa usługa stworzona przez firmę Automattic, właściciela WordPress.com.

Jak działa?

Gravatar działa na podstawie adresu e-mail użytkownika. Gdy tworzysz konto na stronie gravatar.com i przypisujesz do niego zdjęcie, to będzie ono automatycznie wyświetlane wszędzie tam, gdzie wpiszesz ten adres e-mail – np. w komentarzach, na forach czy blogach korzystających z WordPressa.

Zalety

• Jedno zdjęcie działa globalnie na wielu stronach.
• Nie musisz za każdym razem dodawać swojego avatara.
• Integracja z WordPress jest automatyczna – działa bez dodatkowego kodu.

Wady

• Wymaga rejestracji na osobnej stronie (gravatar.com).
• Zmiana zdjęcia nie jest natychmiastowa – czasem trzeba poczekać.
• Brak kontroli w panelu WordPress – wszystko obsługiwane jest zewnętrznie.
• Niektórzy użytkownicy nie chcą lub nie potrafią korzystać z dodatkowych usług.

Dla kogo?

Gravatar jest wygodny, jeśli chcesz mieć jedno zdjęcie na wielu stronach. Ale jeśli zależy Ci na prywatności, kontroli lub własnym stylu, lepiej skorzystać z rozwiązania lokalnego – takiego jak własne zdjęcie profilowe WordPress.