Jak wyświetlić Gravatar z adresu e-mail użytkownika w WordPress

Gravatar to usługa internetowa, która łączy adres e-mail użytkownika z awatarem online.

WordPress automatycznie wyświetla odwiedzającym Gravatary w sekcji komentarzy, ale możesz chcieć dodać je również do innych obszarów swojej witryny. Może to pomóc w stworzeniu bardziej atrakcyjnego wizualnie doświadczenia użytkownika i zwiększeniu zaangażowania.

W tym artykule pokażemy Ci, jak łatwo wyświetlić Gravatara na podstawie adresu e-mail użytkownika w WordPress, omawiając różne metody, aby zapewnić Ci elastyczne opcje.

Czym jest Gravatar i dlaczego go wyświetlać?

Gravatar to skrót od Globally Recognized Avatar i pozwala ludziom powiązać obrazek z ich adresem e-mail.

Jeśli strona internetowa obsługuje Gravatara, może pobrać zdjęcie danej osoby i wyświetlić je obok jej imienia. Na przykład, gdy użytkownik zostawi komentarz z podaniem swojego adresu e-mail na stronie WordPress, WordPress wyświetli Gravatara tej osoby obok jej komentarza.

Gravatary mogą zachęcać użytkowników do udziału w konwersacji, budować poczucie wspólnoty i sprawić, że Twoje strony będą wyglądać ciekawiej. Wszystko to razem może pomóc Ci zdobyć więcej komentarzy pod Twoimi wpisami na WordPressie.

W zależności od konfiguracji Twojej witryny, WordPress może wyświetlać Gravatary w innych miejscach, takich jak bio autora. Możesz jednak chcieć zmienić miejsce, w którym pojawiają się Gravatary użytkowników na Twoim blogu lub stronie WordPress. Na przykład, możesz wyświetlać Gravatar użytkownika na pasku narzędzi Twojej witryny lub w profilu użytkownika.

Mając to na uwadze, przyjrzyjmy się, jak możesz wyświetlić Gravatar z adresu e-mail użytkownika w WordPress. Po prostu użyj poniższych szybkich linków, aby przejść do preferowanej metody:

Metoda 1: Edycja motywu WordPress (najlepsza dla spójności)

Po pierwsze, możesz dodać Gravatar do swojego motywu WordPress za pomocą kodu. Jest to dobry wybór, jeśli chcesz wyświetlać Gravatar w tym samym miejscu na całej swojej stronie, na przykład w pasku bocznym lub nad nagłówkiem. Będziesz jednak musiał edytować pliki szablonu, więc nie jest to metoda najbardziej przyjazna dla początkujących.

Ta metoda pokazuje Gravatar osoby, która jest aktualnie zalogowana do Twojej witryny. Jest to przydatne w przypadku witryn członkowskich, sklepów internetowych lub każdej innej witryny, w której użytkownik musi zalogować się na konto.

Aby dodać Gravatar do swojego motywu, będziesz musiał wkleić kod do plików swojego motywu. Jeśli nigdy tego nie robiłeś, zapoznaj się z naszym przewodnikiem dla początkujących na temat wklejania fragmentów kodu ze stron internetowych do WordPressa.

Najprostszym sposobem dodawania fragmentów kodu do Twojej witryny WordPress jest użycie WPCode. Jest to najlepsza wtyczka do fragmentów kodu dla WordPressa, która pozwala na dodawanie PHP, CSS, JavaScript i innych do Twojej witryny.

Najpierw musisz zainstalować i aktywować bezpłatną wtyczkę WPCode. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat jak zainstalować wtyczkę WordPress.

Po aktywacji odwiedź stronę Fragmenty kodu » + Dodaj fragment » w panelu administracyjnym WordPress. Tutaj zobaczysz wszystkie gotowe fragmenty, które WPCode może dodać do Twojej witryny.

Po prostu najedź kursorem myszy na „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „Użyj fragmentu”, gdy się pojawi.

Na początek wpisz tytuł dla fragmentu kodu. Jest to tylko do Twojej wiadomości, więc możesz wpisać cokolwiek chcesz.

Następnie otwórz menu rozwijane „Typ kodu” i wybierz „Fragment PHP”.

Teraz możesz wkleić poniższy kod do edytora kodu:

function wpbeginner_display_gravatar() { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
    echo '<img src="' . $usergravatar . '" class="wpb_gravatar">';
	echo $getuseremail;
	
} 

Ten kod tworzy prostą funkcję, która pozwala dodać Gravatara w dowolnym miejscu plików szablonu WordPress.

Po wklejeniu kodu przewiń do sekcji „Wstawianie” i wybierz „Automatyczne wstawianie”. Musisz również otworzyć menu rozwijane „Lokalizacja” i wybrać „Uruchom wszędzie”.

Po zakończeniu przewiń do góry strony i kliknij przełącznik „Nieaktywny”, aby zamiast tego wyświetlał się „Aktywny”.

Następnie po prostu kliknij przycisk „Zapisz fragment”.

Teraz możesz wyświetlać Gravatara użytkownika w dowolnym miejscu swojej witryny WordPress, używając następującej funkcji:

<?php wpbeginner_display_gravatar(); ?>

Po prostu dodaj tę funkcję do odpowiedniego pliku szablonu. Na przykład, jeśli chcesz pokazać Gravatara użytkownika w nagłówku swojej strony internetowej, zazwyczaj edytujesz plik header.php.

Może się to jednak różnić w zależności od Twojego motywu WordPress. Aby pomóc Ci znaleźć odpowiedni plik szablonu dla Twoich potrzeb, zapoznaj się z naszą ściągawką dotyczącą hierarchii szablonów WordPress.

Metoda 2: Używanie niestandardowego skróconego kodu WordPress (w pełni konfigurowalny)

Możesz również dodać Gravatar do dowolnej strony, posta lub obszaru gotowego na widżety, tworząc niestandardowy krótki kod.

Jest to dobry wybór, jeśli chcesz dokładnie kontrolować, gdzie Gravatary pojawiają się na każdej stronie, lub jeśli chcesz wyświetlać te obrazy w różnych lokalizacjach na swojej stronie internetowej.

Podobnie jak metoda 1, to podejście pokaże Gravatar bieżącego użytkownika. Jeśli wolisz, możesz pokazać Gravatar przypisany do konkretnego adresu e-mail, dokonując prostej zmiany w kodzie.

Jest to przydatne, jeśli masz adres e-mail danej osoby i chcesz wyświetlić jej Gravatar na swojej stronie, ale nie jest ona zarejestrowanym użytkownikiem.

Najprostszym sposobem na tworzenie niestandardowych skrótów jest użycie WPCode. Co więcej, nie musisz edytować plików motywu, co czyni tę metodę znacznie bardziej przyjazną dla początkujących.

Jeśli jeszcze tego nie zrobiłeś, musisz zainstalować WPCode. Będziesz także musiał utworzyć nowy fragment niestandardowego kodu, postępując zgodnie z tym samym procesem, który został opisany powyżej.

Po wykonaniu tej czynności nadaj fragmentowi kodu nazwę i wybierz „Fragment PHP” jako typ kodu.

Następnie wklej następujący kod PHP do edytora kodu:

function wpb_display_gravatar($atts) { 
extract(shortcode_atts(array('wpb_user_email' => '',), $atts ));

if ($wpb_user_email == '') { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
} else {
	$getuseremail = $wpb_user_email; 

    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
  
    echo '<img src="' . $usergravatar . '">'; 
}
}
add_shortcode('wpb_gravatar', 'wpb_display_gravatar');

Ten kod tworzy `[wpb_gravatar]`shortcode, który możesz dodać do dowolnej strony, wpisu lub obszaru gotowego na widżety.

Gdy będziesz gotowy, przewiń do sekcji „Wstawianie” i upewnij się, że wybrano opcję „Automatyczne wstawianie”. Musisz również otworzyć menu rozwijane „Lokalizacja” i wybrać „Uruchom wszędzie”, jeśli nie jest już zaznaczone.

Na koniec przewiń do góry ekranu i kliknij przełącznik „Nieaktywny”, aby zamiast tego wyświetlał się „Aktywny”. Następnie możesz kliknąć „Zapisz fragment”, aby Twój kod zaczął działać.

Możesz teraz wyświetlać Gravatara użytkownika na dowolnej stronie, wpisie lub obszarze gotowym na widżety, używając następującego skróconego kodu:

[wpb_gravatar]

Więcej informacji na temat umieszczania shortcode’u znajdziesz w naszym przewodniku, jak dodać shortcode w WordPress.

Jeśli chcesz wyświetlić Gravatar konkretnego użytkownika, możesz po prostu dodać jego adres e-mail do shortcode'a:

[wpb_gravatar wpb_user_email="john.smith@example.com"]

Jeśli nie jesteś zadowolony z wyglądu Gravatara, możesz go stylizować za pomocą niestandardowego CSS. Na przykład, możesz dodać następujący fragment kodu CSS do arkusza stylów swojego motywu WordPress:

.wpb_gravatar {
padding: 3px;
margin: 3px;
background:#FFFFFF;
border:3px solid #eee;
}

Więcej szczegółów na temat dodawania CSS do WordPressa znajdziesz w naszym przewodniku na temat jak łatwo dodać niestandardowy CSS do swojej witryny WordPress.

Jeśli wolisz, możesz dodać niestandardowy CSS za pomocą narzędzia Dostosuj WordPress. W panelu administracyjnym przejdź do Wygląd » Dostosuj.

W menu po lewej stronie kliknij „Dodatkowy CSS”.

Następnie możesz wkleić niestandardowy kod CSS do małego edytora kodu.

Po zakończeniu kliknij po prostu na „Opublikuj”.

Teraz, odwiedzając swoją witrynę, zobaczysz swój Gravatar w nowym stylu.

Aby uzyskać jeszcze więcej wskazówek dotyczących dostosowywania Gravatarów w Twojej witrynie, zapoznaj się z naszym przewodnikiem na temat zmiany rozmiaru obrazu Gravatar w WordPress.

Jak dodać niestandardowy skrócony kod za pomocą edytora całego witryny

Jeśli używasz jednego z nowszych motywów opartych na blokach, możesz dodać skrócony kod do dowolnego szablonu lub jego części. Pozwala to na wyświetlanie Gravatara użytkownika na całej Twojej stronie internetowej bez konieczności edycji plików szablonu.

Na przykład, możesz dodać krótki kod do szablonu bloga lub szablonu nagłówka swojej witryny.

Aby rozpocząć, przejdź do Wygląd » Edytor w panelu administracyjnym WordPress.

Domyślnie edytor całego witryny wyświetla szablon strony głównej Twojego motywu, ale możesz dodawać skrócone kody do dowolnego szablonu lub części szablonu, takiej jak nagłówek lub stopka.

Aby zobaczyć wszystkie dostępne opcje, po prostu wybierz „Szablony” lub „Części szablonu”.

Teraz możesz kliknąć na szablon lub część szablonu, którą chcesz edytować.

Jako przykład dodamy skrócony kod do szablonu strony 404, ale kroki będą dokładnie takie same, niezależnie od wybranego szablonu.

WordPress wyświetli teraz podgląd szablonu lub jego części.

Aby dodać krótki kod, kliknij małą ikonę ołówka.

Po zakończeniu kliknij niebieską ikonę „+” w lewym górnym rogu.

W pasku wyszukiwania wpisz „Shortcode”.

Gdy pojawi się właściwy blok, przeciągnij go i upuść na szablon motywu.

Możesz teraz wkleić lub wpisać skrót [wpb_gravatar] do tego bloku.

Po tym kliknij przycisk „Zapisz”.

Teraz po prostu odwiedź swojego bloga WordPress, aby zobaczyć Gravatar w akcji.

Bonus: Lenistwo ładowania Gravatarów w komentarzach WordPress

Po dodaniu Gravatarów w wielu miejscach na Twojej stronie internetowej, dobrym pomysłem jest leniwe ładowanie tych Gravatarów w komentarzach WordPress.

Dzieje się tak, ponieważ większość Gravatarów jest wyświetlana w sekcji komentarzy i może spowolnić działanie witryny, szczególnie w przypadku artykułów z dużą liczbą komentarzy.

Aby leniwie ładować Gravatary, po prostu zainstaluj i aktywuj wtyczkę a3 Lazy Load. Szczegółowe informacje znajdziesz w naszym przewodniku dla początkujących na temat instalacji wtyczki WordPress.

Po aktywacji przejdź do strony Ustawienia » a3 Lazy Load z poziomu panelu administracyjnego WordPress i rozwiń zakładkę „Lazy Load Images”.

Następnie po prostu przełącz przełącznik obok opcji „Gravatary” na „Włączone”. Po tym kliknij przycisk „Zapisz zmiany”, aby zapisać swoje ustawienia.

Teraz wszystkie Gravatary w biografiach autorów i komentarzach będą leniwie ładowane, aby zwiększyć wydajność witryny. Więcej instrukcji znajdziesz w naszym poradniku na temat leniwego ładowania Gravatarów w komentarzach WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak wyświetlać Gravatary z adresów e-mail użytkowników na Twojej stronie WordPress. Możesz również zapoznać się z naszym poradnikiem na temat powiadamiania użytkowników o zatwierdzeniu ich komentarza w WordPress oraz naszym przewodnikiem na temat dodawania szybkich tagów w formularzach komentarzy WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.