Dodanie obrazów taksonomii lub ikon kategorii do Twojej witryny WordPress może pomóc wyróżnić kategorie.
Jednak WordPress domyślnie nie oferuje opcji przesyłania tych obrazów. Wyświetla jedynie nazwy kategorii lub taksonomii na stronach archiwum. Może to wyglądać prosto i nudno.
W naszym samouczku pokażemy Ci, jak dodać obrazy taksonomii lub ikony kategorii do WordPress. Dowiesz się również, jak wyświetlać je na stronach archiwum, dzięki czemu Twoja witryna będzie bardziej angażująca i przyjazna dla użytkownika.
Dlaczego dodawać obrazy taksonomii w WordPressie?
Domyślnie Twoja strona WordPress nie zawiera opcji dodawania obrazów do taksonomii, takich jak kategorie i tagi (lub inne niestandardowe taksonomie).
Używa nazw taksonomii wszędzie, w tym archiwów kategorii lub stron archiwum taksonomii.
To wygląda nudno.
Jeśli Twoje strony taksonomii generują duży ruch z wyszukiwarek, możesz chcieć, aby wyglądały bardziej angażująco.
Widzieliśmy, jak nudne strony z dużą ilością tekstu zamieniają się w angażujące, po prostu dodając odpowiednie obrazy. Nie dlatego, że obrazy były wyjątkowe, ale dlatego, że ludzie wolą wskazówki wizualne od tekstu.
Możesz dodać obrazy taksonomii lub ikony kategorii, aby te strony były bardziej przyjazne dla użytkownika i angażujące.
Dobrym przykładem jest strona taka jak NerdWallet, która używa ikon kategorii w swoim nagłówku:
Możesz go również użyć do tworzenia pięknych sekcji nawigacyjnych na swojej stronie głównej.
Oto przykład ze strony Bankrate:
Mając to na uwadze, zobaczmy, jak łatwo dodać obrazy taksonomii w WordPress.
Łatwe dodawanie obrazów taksonomii w WordPress
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Categories Images. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.
Po aktywacji możesz po prostu przejść do strony Wpisy » Kategorie. Zauważysz, że wtyczka wyświetla obraz zastępczy dla Twoich istniejących kategorii.
Aby wybrać własną ikonę kategorii, musisz kliknąć link Edytuj poniżej kategorii.
Na stronie Edytuj kategorię przewiń w dół, a znajdziesz formularz do przesłania własnego obrazu taksonomii.
Po prostu kliknij przycisk „Prześlij/Dodaj nowe zdjęcie”, aby przesłać obraz, którego chcesz użyć dla danej kategorii.
Nie zapomnij kliknąć przycisku „Dodaj kategorię” lub „Zaktualizuj”, aby zapisać zmiany.
Następnie możesz powtórzyć proces, aby przesłać obrazy dla innych kategorii. Możesz także przesłać obrazy dla swoich tagów i wszelkich innych taksonomii.
Teraz problem polega na tym, że po dodaniu obrazów, jeśli odwiedzisz stronę kategorii, nie zobaczysz tam swojego obrazu kategorii.
Aby go wyświetlić, musisz edytować swój motyw WordPress lub motyw potomny lub dodać kod za pomocą wtyczki WPCode.
Pokażemy obie metody, a Ty możesz wybrać tę, która wydaje Ci się łatwiejsza.
Opcja 1. Wyświetlanie ikon obrazów kategorii za pomocą WPCode (zalecane)
Ta metoda jest łatwiejsza, ponieważ nie musiałbyś zastanawiać się, który plik motywu zmodyfikować, i możesz bezpiecznie dodać kod bez psucia witryny.
Jest to również zalecane dla użytkowników korzystających z motywu blokowego z obsługą edytora witryny.
Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Aby uzyskać więcej szczegółów, zobacz nasz samouczek dotyczący instalowania wtyczki WordPress.
Po aktywacji przejdź do strony WPCode » + Dodaj fragment i kliknij przycisk Użyj fragmentu pod polem „Dodaj własny kod (nowy fragment)”.
Na następnym ekranie nadaj swojemu fragmentowi tytuł, który pomoże Ci go zidentyfikować.
Następnie wybierz fragment PHP jako typ kodu.
W polu Podgląd kodu skopiuj i wklej następujący fragment kodu:
if( is_category() ) { ?> <div class="taxonomy-image"> <img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>" alt="" / > </div> <?php } else { //do nothing } Następnie przewiń w dół do sekcji Wstawianie i wybierz Shortcode jako metodę wstawiania.
Zauważysz, że WPCode automatycznie wyświetla shortcode. Możesz jednak również utworzyć niestandardowy shortcode, aby łatwo go zapamiętać.
Następnie kliknij przycisk „Kopiuj” dla niestandardowego skróconego kodu.
Możesz teraz użyć tego skróconego kodu, aby wyświetlić obraz kategorii na stronach archiwum.
Dodawanie Shortcode w Edytorze Witryny
Jeśli korzystasz z motywu blokowego z obsługą edytora witryny, przejdź do strony Wygląd » Edytor, aby uruchomić Edytor Witryny.
Tutaj możesz dodać blok shortcode tuż przed blokiem Tytuł Archiwum.
Teraz wklej skrócony kod, który wcześniej skopiowałeś, w bloku skróconego kodu.
Nie zapomnij zapisać zmian, aby je zastosować. Możesz teraz odwiedzić stronę archiwum kategorii, aby zobaczyć skrócony kod w akcji.
Nie martw się, jeśli obraz nie wygląda poprawnie. Pokażemy Ci, jak to naprawić później za pomocą niestandardowego CSS.
Opcja 2. Wyświetlanie ikon obrazów kategorii ręcznie
W przypadku tej metody będziesz musiał dodać niestandardowy kod do plików motywu WordPress.
Jeśli po raz pierwszy edytujesz pliki WordPress, zapoznaj się z naszym przewodnikiem na temat jak kopiować i wklejać kod w WordPress.
Najpierw musisz połączyć się ze swoją witryną WordPress za pomocą klienta FTP lub menedżera plików swojego hostingu WordPress.
Po połączeniu będziesz musiał znaleźć szablon odpowiedzialny za wyświetlanie archiwów taksonomii. Mogą to być pliki archives.php, category.php, tag.php lub taxonomy.php.
Więcej szczegółów znajdziesz w naszym przewodniku, jak znaleźć pliki do edycji w motywie WordPress.
Po znalezieniu pliku musisz pobrać go na swój komputer i otworzyć w edytorze tekstu takim jak Notatnik lub TextEdit.
Teraz wklej poniższy kod tam, gdzie chcesz wyświetlić obraz taksonomii. Zazwyczaj chcesz dodać go przed tytułem taksonomii lub the_archive_title() tagiem.
<?php if( is_category() ) { ?> <div class="taxonomy-image"> <img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>" alt="" / > </div> <?php } else { //do nothing } ?> Po dodaniu kodu musisz zapisać ten plik i przesłać go z powrotem na swoją stronę za pomocą FTP.
Teraz możesz odwiedzić stronę archiwum taksonomii, aby zobaczyć, jak wyświetla obraz taksonomii. Oto jak wyglądało to na naszej stronie demonstracyjnej archiwum.
Teraz może to nadal wyglądać niezgrabnie, ale nie martw się. Możesz to stylizować za pomocą niestandardowego CSS.
Stylizacja ikon kategorii za pomocą niestandardowego CSS
Po dodaniu ikon kategorii lub obrazów taksonomii do motywu WordPress, obraz może nie wyglądać zbyt dobrze.
Aby to naprawić, musisz dodać kod CSS, aby go poprawnie wyrównać.
Jeśli po raz pierwszy dodajesz kod CSS w WordPress, zapoznaj się z naszym przewodnikiem dla początkujących na temat dodawania niestandardowego CSS w WordPress.
Oto niestandardowy CSS, którego użyliśmy do obrazu taksonomii.
img.taxonomy-img { float: left; max-height: 100px; max-width: 100px; display: inline-block; padding: 20px; } W zależności od motywu może być również konieczne stylizowanie otaczających elementów, takich jak tytuł archiwum, tytuł taksonomii i opis.
Po prostu opakowaliśmy tytuł i opis archiwum taksonomii w element <div> i dodaliśmy niestandardową klasę CSS. Następnie użyliśmy następującego kodu CSS do dostosowania tytułu i opisu.
.taxonomy-title-description { display: inline-block; padding: 18px; } Oto jak to wyglądało później na naszej stronie testowej.
Wyklucz taksonomie z wyświetlania obrazów taksonomii
Teraz niektórzy użytkownicy mogą chcieć używać obrazów taksonomii tylko dla określonych taksonomii.
Na przykład, jeśli prowadzisz sklep internetowy za pomocą WooCommerce, możesz chcieć wykluczyć kategorie produktów.
Po prostu wróć do strony Obrazy kategorii w obszarze administracyjnym WordPress i zaznacz taksonomie, które chcesz wykluczyć.
Nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zachować swoje ustawienia.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodawać obrazy taksonomii w WordPress. Możesz również zapoznać się z tymi przydatnymi hackami i wtyczkami kategorii dla WordPress lub naszym artykułem na temat zmiany kolejności kategorii w 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.
Ivan
Czy są jakieś sugestie dotyczące innych aktualnych wtyczek. Wygląda na to, że ta sugerowana tutaj nie była ostatnio aktualizowana.
shiv
jak dodać obrazy kategorii w pasku bocznym WordPress, podobnie jak na stronie wpbeginner „potrzebuję pomocy z”
pamela
Co jeśli chcę przejść przez wszystkie terminy i wyświetlić je na jednej stronie
Gabrielle
Cześć, obecnie używam tego pluginu na localhost.
Znalazłem dziwne/ciekawe zastosowanie dla tego pluginu:
Rozszerzenie domyślnego menu WP, dla linków kategorii,
aby wyświetlać linki z obrazkami w tle.
Czy ktoś wie, jak zintegrować ten filtr pluginu,
do menu WP, aby zwrócić
dla każdego menu?
Sytuacja jest skomplikowana, czy muszę użyć klasy Walker?
Jess
Jak wyświetlić obrazy używane na froncie? Mam stronę z listą i chcę wyświetlić obraz taksonomii, gdy tylko ta strona wyświetli tę taksonomię. Nie mogę znaleźć niczego, co faktycznie pokazywałoby, jak wyświetlić obraz na froncie. Widzę tylko etykietę taksonomii, a nie obraz.
Dziękuję za pomoc,
Jess
Harsha
Cześć,
Powodem, dla którego trafiłem na ten post, jest to, że wyszukałem w Google – polecane treści w WordPressie
Właściwie szukam sposobu, jak mogę ulepszyć powiązane treści w WordPress.
Z powodu wyboru wielu kategorii i wielu tagów do postów, widzę, że WordPress się myli i nie pokazuje powiązanych treści, jak przypuszczam.
Czy taksonomie to sposób na poprawę sposobu, w jaki pokazujemy powiązane posty czytelnikom.
A ta wtyczka Taxonomy Images nie była aktualizowana od 2 lat
Wsparcie WPBeginner
Taksonomie mogą być sposobem na ulepszenie powiązanych postów. Ale istnieją inne narzędzia, których możesz użyć do scalania i masowej edycji kategorii i tagów.
Admin
JW
Świetny tutorial! Dziękuję!
Niestety wygląda na to, że ta wtyczka nie jest już wspierana, czy wiesz, czy istnieje alternatywa?
Czy kod jest nadal ważny?
Dan Horvat
Brakuje najważniejszej części – jak faktycznie wyświetlić te obrazy na froncie.
Wsparcie WPBeginner
Szczegółowe instrukcje znajdziesz na stronie wtyczki.
Admin
patrick raobelina
Aby wyświetlić obraz:
$url = apply_filters( ‘taxonomy-images-queried-term-image-url’, ” );
if ( ! empty( $url ) ) {
echo ”;
}
Shinkov
Szukałem artykułu, który pokazuje, jak to zakodować zamiast używać wtyczki
Gonzalo
Jak wyświetlać zdjęcia taksonomii w motywie?
Użyłem kodu, ale nie działa
print apply_filters( ‘taxonomy-images-queried-term-image’, ” );
Proszę o pomoc?
Nicholas Worth
Bardziej sensowne byłoby, gdyby tytuł brzmiał: „Najlepsza wtyczka do dodawania obrazów do taksonomii w WordPressie”, ponieważ to nie jest właściwie tutorial o tym, jak dodawać obrazy do taksonomii. Nie chcę być zrzędą, ale nienawidzę trafiać na artykuły, które obiecują informacje, a w rzeczywistości mówią, że ten inny facet wie to, czego miałeś nadzieję usłyszeć.
Wsparcie WPBeginner
Przykro nam, że tak się poczułeś. Prosimy o informację, co masz na myśli mówiąc o dodawaniu obrazów do taksonomii? Być może będziemy w stanie pomóc Ci znaleźć właściwą odpowiedź.
Admin
Jacob Perl
Zgaduję, że Nicholas pomyślał to samo, co ja, kiedy znalazłem ten artykuł: że będzie to samouczek, jak ręcznie dodać niestandardowe pole obrazu do taksonomii za pomocą kodowania, a nie wtyczki. Nadal wtyczka wygląda fajnie... może ją sprawdzę.
Luís Felipe
To samo pomyślałem, szukałem artykułu, który pokazuje, jak to zakodować zamiast używać wtyczki
Ale to i tak dobry artykuł.
lemonthirst
Jestem zachwycony, że znalazłem ten świetny plugin, działa jak marzenie, napotkałem drobne problemy z moimi niestandardowymi postami/taksonomią, ale wszystko jest już w porządku.
Dzięki chłopaki!
Mattia
Cześć, mam powiązane pytanie dotyczące niestandardowych taksonomii: jak utworzyć niestandardową taksonomię, która istnieje tylko w ramach konkretnego niestandardowego typu posta (jak Twój niestandardowy typ posta „praca”), bez wtyczki?
Mój problem polega na tym, że kiedy tworzę niestandardową taksonomię, okazuje się, że pojawia się ona również pod zwykłymi artykułami lub innymi niestandardowymi typami postów…
Personel redakcyjny
Musiałbyś użyć register_taxonomy w następujący sposób:
1-click Use in WordPress
Gatunek to taksonomia, a książka to typ posta.
Admin
Mattia
Grazie!
I’ll try and let you know…
Banna
Cześć,
Używamy tego,
Ale nie możemy sprawić, by działało z identyfikatorem kategorii.
Mamy identyfikator kategorii, który chcemy wyświetlić jako miniaturę, proszę pomóż mi to zrobić.
jak uzyskać miniaturę za pomocą identyfikatora taksonomii
Proszę, daj mi znać.
Dziękuję
Banna Daxxip
Ruben Boehler
Przepraszam, ale nie mogę sprawić, by ten plugin działał… brak wyników. Może robię coś źle?!
używam wtyczki + ten kod i podłączyłem go:
print apply_filters( ‘taxonomy-images-list-the-terms’, ”, array( ‘image_size’ => ‘detail’, ‘taxonomy’ => ‘company’, ‘after’ => ”, ‘after_image’ => ”, ‘before’ => ”, ‘before_image’ => ”, ) );
absolutnie nic nie dostaję… czy możesz mi pomóc to rozgryźć?
_mfields
@devinsays Świetnie! Dzięki za wskazówkę!
DanielPeiser
Brzmi interesująco! Co jeśli mam kilka wpisów na blogu, które nie mają miniatury (lub obrazu we wpisie), a na stronach archiwum zawsze ładuje się ten sam domyślny obraz jako miniaturę: Czy wtyczka załaduje obraz powiązany z kategorią/tagiem?
wpbeginner
@DanielPeiser Z pewnością możesz to ustawić tak, aby tak się działo. Podstawowe kroki byłyby następujące: Najpierw sprawdź, czy istnieje miniatura posta… Jeśli nie istnieje, sprawdź, czy istnieje obraz taksonomii… jeśli i tego nie ma, zwróć domyślną miniaturę.