Niedawno pokazaliśmy Ci jak stylizować układ komentarzy i jak stylizować formularz komentarzy. Jeden z naszych użytkowników napisał do nas z pytaniem: „jak sprawiliście, że Wasze obrazy gravatar są okrągłe? Czy przechowujecie obrazy gravatar lokalnie, aby były okrągłe?” W tym artykule pokażemy Ci, jak wyświetlać okrągłe obrazy gravatar w WordPress. Użyjemy właściwości border-radius CSS3 do stworzenia okrągłych obrazów gravatar.
Pierwszą rzeczą, którą musisz zrobić, to edytować plik style.css swojego motywu. Możesz to zrobić za pomocą programu FTP lub przechodząc do Wygląd » Edytor w panelu administracyjnym WordPress. Następnie dodaj następujący kod do swojego pliku CSS:
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
Powinno to działać na większości motywów WordPress. Jednak jeśli nie działa to na Twoim motywie, prawdopodobnie jakiś plugin lub funkcja Twojego motywu zakłóca domyślne klasy używane dla gravatar w WordPress. Aby dowiedzieć się, jakiej klasy CSS używają obrazy gravatar w Twoim motywie, musisz otworzyć post na blogu, który ma komentarze. Przewiń w dół do sekcji komentarzy i kliknij prawym przyciskiem myszy na obraz gravatar, aby wybrać „Zbadaj element”. Pokaże Ci to kod źródłowy Twojego gravatara, w ten sposób:
Jeśli obrazek gravatara ma coś innego niż avatar, użyj tego zamiast .avatar w powyższym kodzie CSS.
Mamy nadzieję, że ten artykuł pomógł Ci wyświetlać okrągłe obrazy gravatar na Twoim blogu WordPress. Daj nam znać, jeśli masz jakieś pytania lub uwagi, zostawiając komentarz poniżej.
Rex
Bardzo na czasie. Dziękuję bardzo.
Wsparcie WPBeginner
You’re welcome
Admin
pujara
Jak automatycznie dodać obrazek do komentarza, tak jak w Twoim systemie komentarzy?
Nataly
witam, zadziałało, dziękuję, ale opis wydaje się być zbyt wysoko. nad zdjęciem, czy wiesz, jak sprawić, by pojawił się obok zdjęcia?
Therese
I can’t make it work.
I can’t figure out where exactly to put it, nothing seams to change. I’ve looked at the source code and it’s got avatar just like the example source code.
Wsparcie WPBeginner
Czy dodałeś CSS do arkusza stylów swojego motywu?
Admin
ERFmama
Tak, zrobiłem. Mam motyw Twenty Twelve.
Czy jest jakieś konkretne miejsce, w którym musi się znaleźć? W pliku style.css
Edit: Never mind it suddenly worked now!
Czy mogę zapytać, jak zmienić rozmiar awatarów? Czy może już gdzieś to opisałeś?
Dziękuję bardzo za to!
Daniel
Zadziałało, dziękuję
Chrissy
Fantastycznie! Dokładnie tego szukałem! Dzięki, jesteście super!
Jacky
DZIĘKUJĘ bardzo za to, spędziłem godziny próbując to osiągnąć. Zapewniłeś najbardziej bezpośrednie rozwiązanie!
Abdul Samad
Bracie, dzięki za ten kod. Jestem nowy w WP i naprawdę cieszę się Twoim blogiem, człowieku. Dzięki za to i za wszystkie samouczki....
Richie
Zamierzałem przekazać tę wskazówkę i oczywiście najpierw wypróbowałem ją na jednej ze swoich stron.
Działało jak marzenie. Po prostu zmieniłem moje CSS z px na % dla obramowania moz i webkit.
Tutaj zrobiło się ciekawie.
Poszedłem na inną stronę, zrobiłem tę samą poprawkę i nie zadziałało. Po chwili drapania się po głowie przypomniałem sobie, że miałem zainstalowaną wtyczkę WP User Avatar na stronie, na której zadziałało, a nie miałem jej zainstalowanej na stronie, na której nie zadziałało.
Zainstalowałem wtyczkę i działa jak marzenie.
Dla obu stron używam niestandardowego motywu zbudowanego na frameworku Presswork.
Podsumowując, udało mi się to zrobić, ale tylko z wtyczką.
Jakieś pomysły?
Personel redakcyjny
Jest możliwe, że Twój motyw nie używał klasy CSS .avatar, a wtyczka ją dodała.
Admin
Richie
I’ll check it out. Thanks
Roselle Celina
Cześć, dzięki za ten tutorial! Działa świetnie w Chrome i Firefox, ale w Safari mam ten sam problem: http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
Personel redakcyjny
Wygląda na to, że szerokość obramowania jest problemem w Safari.
Admin
RW
Zgadzam się i używam IE tylko około 4% czasu, ale kilku moich klientów nadal korzysta z wersji 8.
Dzięki,
Bob
Martin
If somebody uses IE8 does not deserve for round image
RW
Świetna wskazówka. Należy pamiętać, że IE8 nie renderuje natywnie zaokrąglonych rogów (border-radius). W tym celu trzeba by użyć javascript, pie itp., ale nie jest to warte zachodu. Na szczęście IE9 rozpoznaje obecne standardy...
Dzięki.
Jim Burnett
Pamiętam czasy, kiedy próbowaliśmy utrzymać wsparcie dla IE6. Teraz jest IE 8 dla zaokrąglonych rogów. Na szczęście IE9 się rozwija.
Z drugiej strony, FF 3.0 nie obsługuje żadnego HTML 5. *smutna mina*
Fajny trik CSS!