Jak zmienić rozmiar obrazu Gravatara w WordPress

Jeśli chcesz zmienić rozmiar obrazów Gravatar na swojej stronie WordPress, jesteś we właściwym miejscu. Zdarzały się przypadki, gdy musieliśmy zmieniać rozmiar niestandardowych rozmiarów Gravatar na stronach WordPress, nad którymi pracowaliśmy, ale metoda różni się w zależności od używanego motywu.

Gravatar to obraz używany do reprezentowania komentującego lub autora wpisu na blogu. Motywy WordPress wyświetlają Gravatary w określonym rozmiarze, ale możesz chcieć je zmniejszyć lub powiększyć, aby lepiej pasowały do projektu Twojej witryny.

W tym artykule pokażemy Ci, jak zmienić rozmiar obrazów Gravatar w WordPress.

Dlaczego zmieniać rozmiar obrazu Gravatara w WordPress?

Gravatar to skrót od Globally Recognized Avatar. Jest to usługa internetowa, która pozwala na utworzenie profilu i powiązanie obrazów awatarów z Twoim adresem e-mail.

Większość motywów WordPress wyświetla Gravatara obok komentarza użytkownika. Niektóre motywy wyświetlają również Gravatara w polu biografii autora.

Nawet jeśli użytkownik nie ma konta Gravatar, Twoja witryna nadal wyświetli jeden z domyślnych Gravatarów WordPress.

Czasami możesz chcieć zmienić rozmiar Gravatarów w swoim motywie. Na przykład, możesz chcieć je powiększyć, aby się wyróżniały, przyciągając uwagę odwiedzającego do sekcji komentarzy Twojej witryny.

Mając to na uwadze, przyjrzyjmy się, jak możesz zmienić rozmiar niestandardowego obrazu Gravatara w swojej witrynie WordPress. Po prostu użyj poniższych szybkich linków, aby przejść do metody, której chcesz użyć:

• Metoda 1: Zmień rozmiar Gravatara za pomocą Edytora Pełnej Witryny (tylko motywy blokowe)
• Metoda 2: Zmień rozmiar Gravatara, edytując plik comments.php (Wszystkie motywy)
• Metoda 3: Zmień rozmiar Gravatara, edytując style.css (wszystkie motywy)
• Method 4: Change Gravatar Size for Author Bios With Code

Metoda 1: Zmień rozmiar Gravatara za pomocą Edytora Pełnej Witryny (tylko motywy blokowe)

Jeśli używasz motywu opartego na blokach, takiego jak Twenty Twenty-Five, możesz zmienić domyślny rozmiar Gravatara WordPress za pomocą edytora pełnej witryny.

Ta metoda nie działa ze wszystkimi motywami, więc jeśli nie używasz motywu obsługującego bloki, zalecamy użycie metody 2.

W panelu administracyjnym WordPress przejdź do Wygląd » Edytor.

Teraz przejdziesz do edytora pełnej strony i zobaczysz kilka ustawień do edycji różnych części Twojej witryny WordPress.

Aby zmienić domyślny rozmiar awatara dla komentarzy w WordPress, kliknij ikonę paska wyszukiwania w górnej części lewego panelu.

W tym momencie po prostu poszukaj części szablonu Komentarze.

Kliknij go, gdy go znajdziesz.

Na następnej stronie zobaczysz informacje o części szablonu komentarzy.

Aby edytować część szablonu komentarzy, kliknij przycisk ołówka. Następnie zostaniesz przekierowany do interfejsu edycji.

Możesz teraz przejść dalej i kliknąć dowolny z Gravatarów w podglądzie na żywo.

W menu po prawej stronie możesz wybrać zakładkę „Blok”, jeśli nie jest jeszcze wybrana.

Teraz możesz powiększać lub zmniejszać Gravatary, przeciągając suwak „Rozmiar obrazu”.

Podczas przesuwania suwaka wszystkie Gravatary będą się automatycznie aktualizować, dzięki czemu możesz wypróbować różne rozmiary, aby zobaczyć, co wygląda najlepiej.

Dodatkowo możesz włączyć ustawienie „Link do profilu użytkownika”. Kiedy użytkownik kliknie Gravatara, zostanie przekierowany na stronę profilu komentującego w Twojej witrynie.

Gdy będziesz zadowolony z nowego domyślnego rozmiaru obrazu Gravatara, kliknij przycisk „Zapisz”.

Teraz, jeśli odwiedzisz dowolną sekcję komentarzy na swojej stronie WordPress, zobaczysz zmiany na żywo.

Metoda 2: Zmień rozmiar Gravatara, edytując plik comments.php (Wszystkie motywy)

Jeśli nie używasz motywu WordPress opartego na blokach, możesz zmienić rozmiar obrazu profilowego Gravatara dla komentarzy WordPress, edytując kod swojego motywu.

Ta metoda wymaga edycji plików motywu, więc nie jest to opcja najbardziej przyjazna dla początkujących. Jednak ta metoda powinna działać dla większości motywów WordPress.

Najpierw musisz połączyć się ze swoją witryną WordPress za pomocą klienta FTP, takiego jak FileZilla, lub możesz użyć menedżera plików swojego hostingu WordPress cPanel.

Jeśli korzystasz z FTP po raz pierwszy, zapoznaj się z naszym kompletnym przewodnikiem na temat jak połączyć się ze swoją witryną za pomocą FTP.

Po połączeniu musisz przejść do /wp-content/themes/ i otworzyć folder swojego aktualnego motywu WordPress.

Tutaj otwórz plik comments.php i poszukaj funkcji wp_list_comments. Wewnątrz tej funkcji znajdzieszavatar_size, która ustawia rozmiar Gravatara.

Oto przykład, jak może to wyglądać:

<?php
wp_list_comments(
    array(
        'avatar_size' => 60,
        'style'       => 'ol',
        'short_ping'  => true,
    )
);
?>

Możesz po prostu zmienić avatar_size na rozmiar, którego chcesz użyć. W powyższym fragmencie kodu oznaczałoby to zmianę 60 na inną liczbę.

Gravatary są kwadratowe, więc WordPress użyje tej samej wartości dla szerokości i wysokości obrazu. Oznacza to, że musisz wpisać tylko jedną liczbę.

Po wprowadzeniu tej zmiany upewnij się, że zapisałeś i przesłałeś plik z powrotem na swoje konto hostingowe WordPress. Po zakończeniu możesz odwiedzić swojego bloga WordPress, aby zobaczyć zmianę w akcji.

Jeśli obraz Gravatar się nie zmienił, może to być spowodowane pamięcią podręczną. Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem jak naprawić problem z brakiem natychmiastowej aktualizacji strony WordPress.

Jeśli Gravatar nadal się nie zmienia, to CSS Twojego motywu może nadpisywać ustawienia w pliku comments.php. W takim przypadku musisz spróbować następnej metody.

Metoda 3: Zmień rozmiar Gravatara, edytując style.css (wszystkie motywy)

Aby sprawdzić, czy CSS Twojego motywu nadpisuje plik comment.php, możesz użyć narzędzia Inspect tool swojej przeglądarki. Kroki będą się różnić w zależności od używanej przeglądarki, ale w Chrome możesz po prostu kliknąć prawym przyciskiem myszy lub Ctrl+kliknąć Gravatara, a następnie wybrać „Inspect”.

Spowoduje to wyświetlenie kodu HTML i CSS strony w nowym panelu.

W tym kodzie musisz skupić się na dolnym panelu i poszukać klasy lub klas CSS dla awatara autora komentarza.

W naszym przykładzie były to .comment-author i .avatar, które zawierają właściwości CSS dla wysokości i szerokości Gravatara. Wiemy to, ponieważ po najechaniu kursorem na fragmenty kodu CSS, Gravatar jest podświetlany na podglądzie.

Oto jak wygląda kod w naszym motywie. Należy pamiętać, że w Twoim może wyglądać inaczej:

.comment-author .avatar {
height: 42px;
position: relative;
top: .25em;
width: 42px;
}

Jeśli rozmiar Gravatara w kodzie CSS różni się od tego, który podałeś w pliku comments.php, oznacza to, że plik style.css Twojego motywu nadpisuje Twoje zmiany.

Aby edytować plik style.css, musisz użyć WPCode, która jest wtyczką fragmentów kodu, ułatwiającą wstawianie niestandardowego kodu do motywu. Dzięki temu możesz edytować plik style.css bez bezpośredniego dostępu do niego, zmniejszając ryzyko popełnienia błędów.

Ponadto musisz zachować otwartą kartę z narzędziem do inspekcji. Pozwoli to na skopiowanie i wklejenie kodu CSS dla Gravatara autora komentarza do WPCode i późniejszą edycję.

Najpierw zainstaluj WPCode na swojej stronie WordPress. Możesz przeczytać nasz przewodnik jak zainstalować wtyczkę WordPress, aby uzyskać więcej informacji.

Następnie przejdź do Fragmenty kodu » + Dodaj fragment i wybierz „Dodaj własny kod (nowy fragment)”. Kliknij przycisk „+ Dodaj własny fragment”.

Po zakończeniu wpisz nazwę dla swojego nowego kodu CSS. Może to być coś prostego jak „Zmień rozmiar Gravatara”.

W przypadku typu kodu wybierz opcję „Fragment kodu CSS”.

Teraz skopiuj i wklej fragmenty kodu CSS swojego oryginalnego motywu dotyczące rozmiaru Gravatara do pola Podgląd kodu.

Po zakończeniu możesz zmienić wartości wysokości i szerokości w kodzie. W naszym przykładzie zmieniliśmy je na 50px. Upewnij się, że rozmiary wysokości i szerokości są takie same.

Po zakończeniu przewiń w dół do sekcji Wstaw.

Upewnij się, że wybrano metodę „Automatyczne wstawianie”. Jeśli chodzi o Lokalizację, wybierz po prostu „Stopka całej witryny”, aby Twój niestandardowy kod CSS mógł nadpisać istniejący kod CSS.

Następnie po prostu kliknij przełącznik w prawym górnym rogu, aby kod stał się „Aktywny” i kliknij „Zapisz fragment”. Jeśli odwiedzisz swojego bloga lub witrynę WordPress, zobaczysz zaktualizowane obrazy Gravatara.

Teraz zalecamy spróbować zmienić rozmiar Gravatara w pliku comments.php przed użyciem łatwiejszej metody CSS.

Po pierwsze, CSS może czasami sprawić, że Gravatary będą wyglądać na rozmazane, zwłaszcza jeśli powiększysz awatary znacznie bardziej niż oryginalny obraz.

Po drugie, zmiana rozmiaru obrazu w comments.php często pomaga Twojej witrynie ładować się szybciej. Dzieje się tak, ponieważ przeglądarka nadal musi pobrać obraz w pełnym rozmiarze, a następnie użyć CSS do zmiany jego rozmiaru do wyświetlenia. Może to skutkować wolniejszym działaniem witryny.

Metoda 4: Zmień rozmiar Gravatara dla biogramów autorów za pomocą kodu

Jeśli prowadzisz wieloautorski serwis WordPress, pole autora może pomóc czytelnikom dowiedzieć się więcej o autorze wpisu.

Jeśli chcesz dodać tę funkcję do swojej witryny, zapoznaj się z naszym przewodnikiem jak dodać pole informacyjne autora w postach WordPress.

Wiele biogramów autorów pokazuje Gravatar pisarza wraz z jego biografią. Aby zmienić domyślny rozmiar Gravatara w polach biogramu autora, musisz znaleźć plik motywu, który dodaje biogram.

Po prostu połącz się ze swoją witryną za pomocą klienta FTP, takiego jak FileZilla, lub menedżera plików Twojego hostingu WordPress. Po połączeniu przejdź do /wp-content/themes/ i otwórz folder swojego aktualnego motywu WordPress.

Następnie musisz otworzyć folder części szablonu (template-parts).

Teraz musisz znaleźć plik zawierający kod get_avatar . Często znajdziesz ten kod w pliku części szablonu o nazwie author-bio.php, pliku single.php, pliku functions.php lub podobnym.

Oto przykład, jak ten kod może wyglądać:

<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>

W powyższym fragmencie możesz po prostu zmienić liczbę 85 na pożądany rozmiar.

W innych motywach kod może wyglądać tak:

get_avatar( get_the_author_meta( 'user_email' ), 85);

Możesz po prostu zastąpić liczbę wartością, której chcesz użyć, aby powiększyć lub zmniejszyć Gravatara.

Po zmianie rozmiaru nie zapomnij zapisać zmian. Następnie możesz odwiedzić swoją witrynę, aby zobaczyć nowy profil autora w akcji.

Jeśli Gravatary się nie zmieniły, musisz wyszukać klasę avatar w pliku style.css, postępując zgodnie z tym samym procesem opisanym w Metodzie 3. Po znalezieniu tej klasy możesz utworzyć nowy fragment kodu WPCode i wpisać nowe wartości wysokości i szerokości Gravatara.

Dowiedz się więcej sposobów na ulepszenie sekcji komentarzy

Chcesz przenieść komentarze w WordPressie na wyższy poziom? Sprawdź te przewodniki, jak dostosować sekcję komentarzy:

• Jak ograniczyć długość komentarzy w WordPress (łatwy samouczek)
• Jak zmienić tekst „Odpowiedz” w komentarzach WordPress
• Jak pozwolić użytkownikom na subskrybowanie komentarzy w WordPress
• Jak stronicować komentarze w WordPress (krok po kroku)
• Jak zezwolić użytkownikom na polubienie lub niepolubienie komentarzy w WordPressie
• Jak usunąć pole adresu URL strony internetowej z formularza komentarzy w WordPressie

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak zmienić rozmiar obrazu Gravatara w WordPress. Możesz również dowiedzieć się, jak stylizować formularz komentarzy WordPress lub zapoznać się z naszą listą najlepszych wtyczek do 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.