W artykule:
Czy chcesz zmienić rozmiar obrazów Gravatar w swojej witrynie WordPress?
Gravatar to usługa, która łączy adres e-mail użytkownika z jego zdjęciem. Motywy WordPress wyświetlają obrazy Gravatar w określonym rozmiarze, ale niektórzy właściciele witryn mogą preferować większe lub mniejsze obrazy.
W tym artykule pokażemy, jak zmienić rozmiar obrazów Gravatar w Twoim motywie WordPress.
Co To Jest Gravatar?
Gravatar oznacza uznany na całym świecie Avatar. Jest to serwis internetowy stworzony i prowadzony przez współzałożyciela WordPress Matta Mullenwega o nazwie Automattic. Pozwala utworzyć profil i powiązać obrazy awatara z Adresami E-mail.
Większość motywów WordPress dodaje Gravatar obok każdego komentarza użytkownika. Niektóre wyświetlają również Gravatar w author bio box. Gdy użytkownik nie ma konta Gravatar, wyświetlany jest domyślny obraz Gravatar.
Ponieważ rozmiar obrazów Gravatar jest zdefiniowany przez Twój motyw, musisz edytować pliki motywów, aby zmienić to ustawienie w witrynie WordPress.
Jeśli nie jesteś zaznajomiony z edytowaniem kodu plików WordPress, zalecamy najpierw utworzenie kopii zapasowej witryny i zapoznanie się z naszym Przewodnikiem dla początkujących, jak wkleić fragmenty kodu do WordPress.
Możesz również zapoznać się z naszym Przewodnikiem dla początkujących, jak korzystać z FTP, aby uzyskać dostęp do plików WordPress.
Powiedziawszy to, rzućmy okiem na to, jak możesz zmienić rozmiar obrazu Gravatar w swojej witrynie WordPress. Możesz skorzystać z poniższej listy, aby przejść do sekcji, która cię najbardziej interesuje.
- Jak zmienić rozmiar Gravatar dla komentarzy WordPress
- Jak wyświetlać okrągłe obrazy Gravatar
- Jak zmienić rozmiar Gravatar dla Author Bios
Jak zmienić rozmiar Gravatar dla komentarzy WordPress
Pierwszą rzeczą, którą musisz zrobić, to połączyć się z witryną za pomocą oprogramowania FTP, a następnie przejść do / wp-content / themes/. Następnie otwórz folder aktualnie używanego motywu.
Alternatywnie, jeśli Twoja firma hostingowa WordPress oferuje menedżera plików, możesz edytować ten plik za pomocą interfejsu internetowego w swoim cPanel.
Tam powinieneś otworzyć komentarze.plik php znajdujący się w folderze themes. Następnie musisz znaleźć następujący kod: avatar_size
Będzie wewnątrz wp_list_komentarze funkcja.
<?php
wp_list_comments(
array(
'avatar_size' = > 60,
'style' = > 'ol',
'short_ping' = > true,
)
);
?>
Po prostu zmień rozmiar na dowolny wymiar. Na powyższym zrzucie ekranu zmienisz 60 na inną liczbę. Gravatary są kwadratowe, więc ustawiona wartość będzie taka sama zarówno dla szerokości, jak i wysokości.
Śmiało i zapisz swoje zmiany. Jeśli używasz FTP, prześlij zmiany na swój serwer.
Teraz otwórz post z komentarzami, aby sprawdzić, czy twoje zmiany są aktualne. W ten sposób nasza strona demonstracyjna pojawia się przed i po zwiększeniu rozmiaru Gravatar z 60 do 70 pikseli. Używamy domyślnego motywu Twenty Twenty-One.
Jeśli rozmiar obrazu Gravatar nie zmienił się, może to być spowodowane twoją pamięcią podręczną. Najpierw zobacz nasz przewodnik, Jak naprawić WordPress nie aktualizuje się od razu.
Jeśli nadal się nie zmieni, może to być spowodowane tym, że CSS Twojego motywu nadpisuje ustawienie w komentarzach.php. Najlepszym sposobem sprawdzenia jest użycie narzędzia Inspect w przeglądarce.
Po prostu kliknij prawym przyciskiem myszy Gravatar w przeglądarce i kliknij Inspect.
Spowoduje to podzielenie ekranu przeglądarki na dwie części. U dołu ekranu zobaczysz HTML i CSS dla strony.
Musisz spojrzeć na wysokość i szerokość obrazu Gravatar, aby zobaczyć, czy odzwierciedla on ustawioną wartość. Gdy kod, na który wskazuje mysz, podświetla Gravatar, powinieneś być w stanie zobaczyć rozmiar, w którym jest wyświetlany.
Zauważysz, że rozmiar obrazu tutaj jest inny niż określony w komentarzach.plik php. Oznacza to, że styl Twojego motywu.plik css nadpisuje domyślny rozmiar obrazu.
Wiele motywów, takich jak motyw Twenty Sixteen, używa CSS do kontrolowania rozmiaru obrazu Gravatar dla różnych rozmiarów ekranu.
Musisz otworzyć styl.plik css w folderze motywu i wyszukaj awatar. Prawdopodobnie znajdziesz klasę CSS komentarz-autor .avatar które zawierają taki kod:
.komentarz-autor .avatar {
wysokość: 42px;
pozycja: względna;
top: 0.25 em;
width: 42px;
}
Śmiało i zmień szerokość i wysokość, aby dopasować wartość ustawioną wcześniej w komentarzach.plik php.
To wszystko. Pomyślnie zmieniłeś Rozmiar obrazu Gravatar w komentarzach WordPress.
Teraz możesz się zastanawiać, dlaczego zaczynamy od zmiany avatar_size w komentarzach.plik php, gdy można po prostu nadpisać Rozmiar obrazu za pomocą CSS. Są dwa powody.
Po pierwsze, aby uniknąć rozmytych obrazów. Jeśli użyjesz CSS, aby obraz wyglądał na większy niż jest w rzeczywistości, będzie wyglądał na rozmyty.
Po drugie, dla krótszego czasu ładowania. Jeśli używasz CSS, aby obraz wyglądał na mniejszy, Twoja witryna nadal musi załadować większy obraz. Zmieniając rozmiar w komentarzach.php, zmniejszasz rzeczywisty obraz i ładuje się szybciej.
Jak wyświetlać okrągłe obrazy Gravatar
Być może zauważyłeś, że obrazy Gravatar na WPBeginner są okrągłe i chcesz zrobić to samo na własnej stronie. Niektóre motywy, takie jak Twenty Twenty-One i Astra, domyślnie wyświetlają okrągłe Gravatary.
Jeśli twój motyw domyślnie wyświetla kwadratowe Gravatary, możesz utworzyć ten sam efekt za pomocą kodu. Użyjemy własności border-radius CSS3.
Pierwszą rzeczą, którą musisz zrobić, to edytować styl swojego motywu.plik css za pomocą programu FTP. Alternatywnie możesz dodać CSS, przechodząc do Wygląd „Dostosuj” dodatkowy CSS w Twoim adminie WordPress.
Następnie chcesz dodać następujący kod:
.avatar {
border-radius: 50%;
- moz-border-radius: 50%;
- webkit-border-radius: 50%;
}
Powinno to działać na większości motywów WordPress. Oto zrzuty ekranu przed i po naszej stronie demonstracyjnej z wykorzystaniem motywu Twenty Twenty.
Jeśli jednak nie działa to na Twoim motywie, prawdopodobnie istnieje jakaś wtyczka lub funkcja motywu, która miesza się z domyślnymi klasami używanymi dla Gravatar w WordPress.
Aby dowiedzieć się, której klasy CSS Gravatar używają w Twoim motywie, musisz otworzyć post na blogu z komentarzami. Przewiń w dół do sekcji komentarze i kliknij prawym przyciskiem myszy obraz Gravatar, aby wybrać Inspect.
Spowoduje to podzielenie ekranu przeglądarki na dwie części. U dołu ekranu zobaczysz HTML i CSS dla strony. Musisz najechać kursorem na kod, aż obraz Gravatar zostanie podświetlony, a następnie znaleźć klasę CSS obrazu.
Jeśli klasa jest czymś innym niż 'avatar’ to Użyj tego zamiast .avatar w kodzie CSS powyżej.
Niektóre motywy WordPress używają również Gravatar dla author bio boxes. Być może najpierw musisz wpisać coś w polu informacji biograficznych profilu użytkownika. Dowiedz się więcej w naszym przewodniku, jak dodać pole informacji o autorze w postach WordPress.
Możesz zmienić domyślny rozmiar Gravatar tutaj w bardzo podobny sposób do szablonu komentarzy.
Najpierw musisz zlokalizować plik motywu, który dodaje biogram. Musisz przeszukać pliki szablonów motywu w poszukiwaniu kodu get_avatar.
Domyślny motyw Twenty Twenty-One wykorzystuje plik części szablonu o nazwie author-bio.php. W innych tematach może być w singlu.plik php, funkcje.plik php, lub gdzieś indziej.
Oto kod w biografii autora Twenty Twenty-One.plik php:
< div class = " author-bio <?PHP echo get_option ('show_avatars')? 'show-avatary':";?>">
<?PHP echo get_avatar (get_the_author_meta ('ID'), '85');?>
Musisz tylko zmienić numer 85 na dowolny.
W innych tematach kod może wyglądać następująco:
get_avatar (get_the_author_meta( 'user_email'), 85);
Po zmianie rozmiaru odśwież stronę, aby sprawdzić, czy rozmiar został zaktualizowany. Jeśli nie, musisz wyszukać klasę avatar w tym stylu.plik css, jak pokazaliśmy dla komentarzy, i tam również zaktualizować rozmiar.
W ten sposób nasza strona demonstracyjna pojawia się przed i po zmniejszeniu rozmiaru Gravatara z 85 do 60 pikseli przy użyciu domyślnego motywu Twenty Twenty-One.
Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak zmienić rozmiar obrazu Gravatar w WordPress.
Możesz także dowiedzieć się, jak utworzyć bezpłatny biznesowy adres e-mail lub sprawdzić naszą listę najlepszych usług hostingowych WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
