Zaufane samouczki WordPress, kiedy ich najbardziej potrzebujesz.
Przewodnik dla początkujących po WordPressie
WPB Cup
25 milionów+
Witryny korzystające z naszych wtyczek
16+
Lata doświadczenia z WordPressem
3000+
Samouczki WordPress od ekspertów

Jak inaczej stylizować poszczególne kategorie w WordPress

Czy kiedykolwiek chciałeś, aby Twoje kategorie WordPress się wyróżniały? Może chcesz, aby Twoja sekcja „Wiadomości” wyglądała inaczej niż Twoje kategorie „Poradniki” lub „Recenzje” 🎨

Szczerze mówiąc, stylizowanie kategorii w różny sposób nie jest palącym problemem dla większości blogów. My sami w WPBeginner tego nie robimy.

Ale rozumiemy, że każdy blog ma unikalne potrzeby i jak ważne jest angażowanie czytelników. A dla niektórych stron posiadanie odrębnych stylów i funkcji dla każdej strony kategorii może naprawdę pomóc czytelnikom w łatwiejszym znajdowaniu treści.

Dobra wiadomość jest taka, że indywidualne stylowanie stron kategorii jest w rzeczywistości dość łatwe. Wymyśliliśmy kilka sposobów na zrobienie tego bez kodu: za pomocą pełnego edytora strony, kreatora stron i wizualnego edytora CSS.

Jak inaczej stylizować poszczególne kategorie w WordPress

Czy stylizowanie stron kategorii WordPressa w inny sposób jest aż tak ważne? 🧐

Chociaż nie jest to konieczne dla każdej witryny WordPress, istnieją sytuacje, w których niestandardowe kategorie mogą naprawdę poprawić wrażenia czytelników.

Jeśli tematy Twoich wpisów na WordPressie znacznie się różnią, możesz chcieć nadać unikalny styl poszczególnym kategoriom.

Na przykład, jeśli Twój blog WordPress obejmuje zarówno wiadomości, jak i samouczki, możesz inaczej stylizować te kategorie. Pomaga to czytelnikom od razu wiedzieć, jakiego rodzaju treści szukają.

Lub stwórz witrynę z recenzjami. Możesz inaczej stylizować pojedynczą kategorię recenzji produktów niż kategorię porównawczą. Ułatwia to odwiedzającym znalezienie tego, czego szukają na Twojej witrynie WordPress.

Niektóre witryny mogą również chcieć stylizować określone kategorie, aby bardziej się wyróżniały i podkreślały ich znaczenie. Na stronie z wiadomościami możesz chcieć nadać swojej kategorii „Breaking News” bardziej przyciągający uwagę styl w porównaniu do zwykłych kategorii wiadomości w WordPress.

Pamiętaj, głównym powodem innego stylizowania kategorii w WordPressie jest ułatwienie korzystania z Twojej witryny. Jeśli uważasz, że pomoże to Twoim czytelnikom szybciej znaleźć to, czego szukają, wdrożenie tej wskazówki dotyczącej projektowania WordPress może być dobrym pomysłem.

Mając to na uwadze, przyjrzyjmy się 3 sposobom stylizacji poszczególnych kategorii w WordPressie. Możesz skorzystać z poniższych szybkich linków, aby przejść do preferowanej metody:

Metoda 1: Użyj Page Buildera do stylizacji stron kategorii (niestandardowe motywy)

Jeśli chcesz zmienić motyw lub stworzyć niestandardowy motyw WordPress od podstaw, użycie kreatora stron może być doskonałym sposobem na stylizację kategorii w WordPressie.

Ta metoda jest idealna dla tych, którzy chcą mieć większą kontrolę nad wyglądem swojej witryny i czują się komfortowo, korzystając z narzędzi stron trzecich.

Po przetestowaniu różnych opcji stwierdziliśmy, że Thrive Architect jest jednym z najlepszych kreatorów stron do stylizacji poszczególnych kategorii.

Oferuje przyjazny interfejs typu „przeciągnij i upuść”, pozwalający na tworzenie niestandardowych kategorii i ich unikalne stylizowanie bez znajomości kodowania. Więcej o wtyczce dowiesz się w naszej recenzji Thrive Architect.

Należy jednak pamiętać, że to podejście nie jest odpowiednie dla każdego.

Jeśli jesteś zadowolony z obecnego motywu WordPress i nie chcesz go zmieniać, możesz rozważyć Metodę 2 z edytorem całego motywu lub Metodę 3 z wizualnym edytorem CSS (którą omówimy później).

Ale jeśli chcesz zmienić swój motyw, zalecamy zapoznanie się z naszym przewodnikiem na temat jak prawidłowo zmieniać motywy WordPress.

Warto również zauważyć, że Thrive Architect nie ma darmowej wersji. Ale możesz użyć naszego kodu kuponu Thrive Themes, aby uzyskać do 50% zniżki na pierwszy zakup.

Krok 1: Zainstaluj Thrive Architect

Zacznijmy od skonfigurowania Thrive Architect. Po zakupie planu możesz zalogować się na stronie Thrive Themes.

Tam znajdziesz wtyczkę Thrive Product Manager. Po prostu pobierz plik i zainstaluj go w swoim panelu administracyjnym WordPress. Jeśli nie wiesz, jak to zrobić, zapoznaj się z naszym przewodnikiem na temat instalowania wtyczek WordPress dla początkujących.

Zainstaluj menedżera produktów Thrive

Po aktywacji wtyczki otwórz pozycję menu Menedżer produktów w swoim panelu administracyjnym WordPress.

Kliknij „Zaloguj się na moje konto”, aby połączyć swoją witrynę WordPress z kontem Thrive Themes.

Zaloguj się na swoje konto Thrive Themes

Teraz powinieneś zobaczyć listę produktów Thrive Themes, których możesz użyć.

Znajdź „Thrive Architect” i zaznacz pole obok „Zainstaluj produkt”.

Instalacja Thrive Architect

Przewiń w dół, aż zobaczysz „Thrive Theme Builder” i wybierz opcję „Zainstaluj motyw”.

Następnie kliknij „Zainstaluj wybrane produkty”. Musimy to zrobić, ponieważ Thrive Architect współpracuje z Thrive Theme Builder.

Instalacja Thrive Theme Builder

Następna strona pokaże Menedżera Produktów Thrive konfigurującego Thrive Architect i Thrive Theme Builder.

Po zakończeniu kliknij przycisk „Przejdź do panelu Theme Builder”.

Aktywacja Thrive Architect i Thrive Theme Builder

Teraz nadszedł czas, aby wybrać początkowy projekt swojej witryny z kolekcji motywów Thrive.

Jeśli nie masz pewności, który wybrać, po prostu użyj przycisku „Podgląd”, aby zobaczyć, jak wygląda każdy motyw. Gdy znajdziesz taki, który Ci się spodoba, kliknij „Wybierz”.

Wybór motywu Thrive Theme Builder

Następnie uruchomisz Kreatora Budowania Motywu. Ten kreator pomoże Ci dodać logo, wybrać kolory marki i skonfigurować różne części Twojego motywu.

Upewnij się, że zakończyłeś kreatora konfiguracji przed przejściem do następnego kroku.

Kreator konfiguracji Thrive Theme Builder

Krok 2: Utwórz szablon archiwum kategorii

Po skonfigurowaniu motywu przejdź do zakładki „Szablony”. Tutaj zobaczysz domyślne szablony używane przez Twój motyw do projektowania stron internetowych. W tym przypadku szablon używany dla archiwów kategorii nazywa się „Wszystkie Archiwa”.

Ponieważ chcemy stylizować poszczególne kategorie WordPress, musimy najpierw utworzyć nowy szablon archiwum kategorii. Aby to zrobić, kliknij „+ Dodaj nowy”.

Dodawanie nowego szablonu w Thrive Architect

Pojawi się nowe okno podręczne. Najpierw wprowadź nazwę swojego nowego szablonu kategorii. Możesz użyć czegoś prostego i umieścić tam nazwę kategorii.

Poniżej wybierz „Lista”, ponieważ chcemy utworzyć stronę, która wyświetla wszystkie posty z określonej kategorii.

W typie listy wybierz „Archiwa” i wybierz „Kategorie” w „Typie archiwum”.

W polu „Zdefiniowano dla” wybierz nazwę kategorii, dla której tworzysz szablon. Dla przykładu wybraliśmy „Blogowanie”.

Na końcu możesz wybrać „Rozpocznij od zera” lub „Wybierz szablon”.

Tworzenie nowego szablonu kategorii w Thrive Architect

Zdecydujemy się na drugą opcję, ponieważ wiele gotowych szablonów Thrive Themes wygląda już dobrze zaprojektowanych.

W następnym oknie podręcznym możesz wybrać jeden z dostępnych szablonów. Dla ilustracji wybierzemy „Układ siatki – Wyróżniony post”.

Po dokonaniu wyboru kliknij przycisk „Utwórz szablon”.

Wybieranie układu szablonu w Thrive Architect

Powinieneś teraz zobaczyć swój nowy szablon dodany do listy szablonów.

Najedź na niego kursorem i kliknij „Edytuj”, aby rozpocząć jego dostosowywanie.

Edycja szablonu kategorii w Thrive Architect

Krok 3: Dostosuj stronę szablonu kategorii

Thrive Architect oferuje wiele sposobów na dostosowanie strony.

Działa to podobnie do edytora bloków, ponieważ możesz przeciągać i upuszczać elementy na swojej stronie, wybierać jeden do dostosowania i gotowe. Różnica polega na tym, że jest znacznie więcej opcji dostosowywania, którymi można się bawić.

Kreator stron Thrive Architect

Przyjrzyjmy się przykładowi. W naszym szablonie archiwum kategorii znajduje się ogromny wyróżniony post na górze, a poniżej pozostałe posty z tej samej kategorii. Domyślnie wyróżniony post to najnowszy post opublikowany w tej kategorii.

Jeśli chcesz zmienić układ tego elementu, kliknij element „Wyróżniona lista 01”. Następnie kliknij przycisk ikony zewnętrznej na górze lewego paska bocznego.

Zmiana projektu wyróżnionego posta w Thrive Architect

Pojawi się okno dialogowe z prośbą o wybranie innego projektu wyróżnionego posta.

Jest ich kilka do wyboru i zawsze możesz je zmienić ponownie, jeśli nie jesteś zadowolony z obecnego wyboru. Po prostu kliknij pożądany układ, a Thrive Architect automatycznie zastosuje go w szablonie strony.

Wybieranie projektu wyróżnionego posta w Thrive Architect

Możesz również zrobić to samo z listą postów poniżej.

Po prostu wybierz element „Lista blogów”. Następnie kliknij ikonę zewnętrzną w lewym górnym pasku bocznym, a znajdziesz inne szablony do wyświetlania listy postów jak poprzednio.

Wybór projektu listy kategorii w Thrive Architect

Jeśli chcesz dalej zmieniać wygląd listy kategorii, przewiń w dół bocznego panelu.

Tam znajdziesz ustawienia umożliwiające zmianę typu wyświetlania (np. przekształcenie w karuzelę), wyłączenie postu wyróżnionego, zmianę typu paginacji (np. z numerycznej na „Wczytaj więcej”), zwiększenie/zmniejszenie liczby wyświetlanych postów i wiele więcej.

Konfiguracja bloku listy blogów w Thrive Architect

Możesz również dodać inne elementy, takie jak duży nagłówek informujący odwiedzających, na jakiej stronie kategorii się znajdują, wraz z opisem.

Aby to zrobić, możesz kliknąć przycisk „+” po prawej stronie edytora. Następnie wybierz element „Tekst” i umieść go tam, gdzie najlepiej pasuje do strony.

Dodawanie bloku tekstowego w Thrive Architect

W elemencie tekstowym kliknij ikonę dynamicznego tekstu po prawej stronie paska narzędzi tekstu. Po zakończeniu wybierz „Archive” w polu Dynamic text, a następnie wybierz „Archive name” w polu poniżej.

Teraz kliknij „Wstaw”. Thrive Architect doda nazwę Twojej kategorii. Ponieważ ta funkcja dodaje dynamiczną treść, nazwa kategorii zostanie automatycznie dostosowana, jeśli kiedykolwiek ją zmienisz w przyszłości.

Stąd możesz zmienić styl tekstu, formatowanie, wyrównanie i inne opcje.

Dodawanie dynamicznego tekstu w Thrive Architect

Aby dodać opis kategorii, po prostu kliknij ponownie przycisk „+”.

Następnie wybierz element „Opis terminu taksonomii”.

Dodawanie opisu terminu taksonomii w Thrive Architect

Jeśli dodałeś opis do swojej kategorii w panelu administracyjnym WordPress » Posty » Kategorie, opis powinien automatycznie pojawić się tutaj.

W przeciwnym razie możesz wrócić do tej strony i zaktualizować ją później. Aby uzyskać więcej informacji, możesz skorzystać z naszego poradnika jak wyświetlać opisy kategorii w WordPress.

Przykład bloku opisu terminu taksonomii w Thrive Architect

Jedną z fajnych rzeczy w odmiennym stylizowaniu kategorii w WordPress jest to, że możesz dodawać różne elementy, które są specjalnie dopasowane do każdej kategorii.

Na przykład, jeśli masz magnes na leady lub formularz zapisu, który nadaje się tylko do konkretnego tematu, dodanie go do tej strony kategorii jest świetnym sposobem na dotarcie do zainteresowanych czytelników.

Na szczęście Thrive Architect ma bloki specjalnie do tego celu.

Na przykład, możesz kliknąć przycisk „+” i dodać element „Wezwanie do działania” w dowolnym miejscu na swojej stronie. Jest to doskonała taktyka, aby przełamać długą listę postów na stronie kategorii.

Dodawanie elementu wezwania do działania w Thrive Architect

Stąd możesz wybrać szablon wezwania do działania.

Jeśli nie podoba Ci się żaden z istniejących projektów, możesz wybrać ten, który najbardziej Ci się podoba, a styl zmienić później.

Wybieranie elementu wezwania do działania w Thrive Architect

Teraz możesz zmienić tekst elementów wezwania do działania.

Aby dodać docelowy adres URL przycisku wezwania do działania, wystarczy kliknąć sam przycisk. Następnie wstaw adres URL i wybierz, czy ma się on otwierać w nowej karcie i czy ma być używany atrybut nofollow.

Dodawanie docelowego adresu URL do elementu wezwania do działania w Thrive Architect

Następnie możesz dowolnie modyfikować element wezwania do działania, zmieniając jego typografię, dodając kolor tła, wstawiając animacje i tak dalej.

Gdy będziesz zadowolony z wyglądu strony kategorii, kliknij „Zapisz pracę”.

Zapisywanie pracy w Thrive Architect

Po ukończeniu strony kategorii możesz teraz przejrzeć swoją witrynę na urządzeniach mobilnych, komputerach stacjonarnych lub tabletach, aby upewnić się, że wszystko wygląda dobrze.

Następnie możesz albo powtórzyć te same kroki, co wcześniej, aby utworzyć indywidualne strony kategorii z własnymi stylami. Albo po prostu stylizuj swoje główne kategorie, a reszta będzie korzystać z domyślnego szablonu archiwum kategorii z Thrive Themes.

Oto jak wygląda nasza strona demonstracyjna:

Przykład strony kategorii blogowania w Thrive Architect

Metoda 2: Użyj edytora pełnej witryny do stylizacji stron kategorii (motywy blokowe)

Ta druga metoda jest dla użytkowników motywów blokowych. Edytor całego motywu zapewnia łatwy sposób tworzenia niestandardowych szablonów WordPress dla stron archiwum kategorii i stylizowania poszczególnych kategorii w inny sposób.

Dobrą stroną tej metody jest to, że nie wymaga ona wtyczki. Mimo to upewnij się, że jesteś zadowolony z opcji dostosowywania oferowanych przez motyw WordPress i edytor pełnej witryny, ponieważ to wszystko, z czym będziesz pracować.

Najpierw otwórz edytor całej witryny, przechodząc do Wygląd » Edytor w swoim panelu administracyjnym WordPress.

Wybieranie Edytora Pełnej Witryny z panelu administracyjnego WordPress

Teraz zobaczysz główne ustawienia do dostosowywania swojego motywu blokowego.

Aby utworzyć niestandardowy szablon kategorii, kliknij „Szablony”.

Wybieranie menu Szablony w FSE

Teraz zobaczysz kilka domyślnych szablonów oferowanych przez Twój motyw. Będzie się to różnić w zależności od motywu WordPress, ale zazwyczaj motyw będzie zawierał szablon używany dla wszystkich Twoich stron archiwów kategorii. Deweloper motywu określi, co to jest, w opisie.

W naszym przypadku domyślny szablon dla stron archiwum kategorii nazywa się „Wszystkie Archiwa”. Oprócz kategorii, ten szablon jest również używany dla innych typów archiwów, takich jak tagi, niestandardowe taksonomie, niestandardowe typy postów i tak dalej.

Aby utworzyć nowy szablon dla stron archiwum kategorii, kliknij „Dodaj nowy szablon” w prawym górnym rogu.

Dodawanie nowego szablonu w FSE

Teraz pojawi się okno podręczne z prośbą o wybranie typu szablonu do utworzenia.

Tutaj po prostu wybierz „Archiwa kategorii”.

Wybór typu archiwum do utworzenia szablonu w FSE

Na tym etapie możesz wybrać, czy chcesz utworzyć nowy niestandardowy szablon archiwum kategorii dla wszystkich kategorii, czy tylko dla konkretnej kategorii.

Ponieważ chcemy stylizować poszczególne kategorie inaczej, wybierzemy „Kategoria dla konkretnego elementu”.

Wybór konkretnej kategorii do utworzenia szablonu w FSE

Teraz wystarczy wybrać kategorię, dla której chcesz utworzyć szablon.

W tym przypadku wybierzemy kategorię „Blogging”.

Wybieranie nazwy kategorii, dla której chcesz utworzyć szablon w FSE

Wejdziesz teraz do edytora całej witryny. Powinno pojawić się okno dialogowe z prośbą o wybranie wzorca bloków do użycia dla strony archiwum kategorii.

Możesz wybrać wzorzec lub pominąć ten krok, jeśli chcesz zacząć od zera.

Wybieranie wzorca bloków dla szablonu kategorii w FSE

Dla przykładu zaczniemy od zera i podamy przykłady, jak inaczej stylizować stronę kategorii w WordPress.

Teraz, jeśli nie chcesz zaczynać od zera i szukasz innych wzorców do wykorzystania, oto co możesz zrobić.

Możesz kliknąć czarny znak „+” w lewym górnym rogu, aby dodać blok. Następnie przełącz się na zakładkę „Wzorce” i przewiń w dół do opcji „Posty”. Powinieneś teraz zobaczyć kilka wzorców do wyświetlania wielu postów WordPress.

Wybór wzorca bloków w FSE

Jeśli nie jesteś zadowolony z domyślnych opcji, możesz po prostu stworzyć własny projekt. Proces jest prosty dzięki pełnemu edytorowi witryny, ponieważ po prostu przeciągasz i upuszczasz bloki jak zwykle w edytorze bloków.

Niemniej jednak, zalecamy najpierw użycie bloku Grupa, aby można było zarządzać częściami szablonu jako jednym blokiem. Kliknij przycisk „+” w dowolnym miejscu na stronie i wybierz „Grupa”.

Dodawanie bloku grupy w FSE

Teraz wybierz układ dla bloku grupującego.

Są cztery do wyboru i możesz wybrać ten, który najlepiej pasuje do Twojej witryny WordPress.

Wybór układu dla bloku grupowego w FSE

Sugerujemy najpierw dodać blok Tytuł Archiwum do bloku grupującego. Spowoduje to automatyczne wyświetlenie tytułu Twojej kategorii.

Więc jeśli w przyszłości zmienisz nazwę kategorii, tytuł również zostanie automatycznie dostosowany. Możesz go znaleźć, klikając przycisk „+” w dowolnym miejscu na stronie i wybierając „Archive Title”.

Wybór bloku tytułu archiwum w FSE

Domyślnie ten blok pokaże tytuł w formacie „Typ archiwum: Tytuł archiwum”.

Możesz jednak wyłączyć typ archiwum w tytule, przechodząc do bocznego panelu ustawień bloku i dezaktywując przycisk „Pokaż typ archiwum w tytule”.]

Wyświetlanie tytułu typu archiwum w FSE

Inną rzeczą, którą powinieneś dodać, jest blok, który wyświetla wszystkie posty z danej kategorii.

Aby to zrobić, kliknij przycisk „+” i wybierz „Lista postów”.

Wybieranie bloku listy postów w FSE

Teraz możesz wybrać, czy chcesz użyć gotowego projektu, czy zacząć od pustego.

Dla ilustracji użyjemy opcji „Rozpocznij pusto”.

Wybór układu listy postów w FSE

Na tym etapie możesz wybrać układ wyświetlania postów.

Dostępne są 4 opcje: Tytuł i data; Tytuł i fragment; Tytuł, data i fragment; oraz Obraz, data i tytuł.

Wybór układu do wyświetlania listy postów w FSE

Po wybraniu układu powinieneś teraz zobaczyć listę wszystkich swoich postów.

Powinieneś teraz filtrować posty na podstawie kategorii. Aby to zrobić, przełącz się na zakładkę „Block” w bocznym panelu ustawień bloku. Następnie przewiń w dół do sekcji „Filters” i kliknij menu z trzema kropkami.

Tutaj wybierz „Taksonomie”.

Filtrowanie postów w określonej taksonomii w FSE

Wystarczy wpisać nazwę kategorii, aby przefiltrować listę postów w odpowiednim polu.

Upewnij się, że po tym naciśniesz klawisz „Enter”.

Filtrowanie postów w określonej kategorii w FSE

Aby zmienić liczbę wyświetlanych postów, możesz kliknąć blok „Lista postów” i wybrać ikonę „Ustawienia”.

Teraz możesz zmienić liczbę w polu „Elementy na stronę”.

Zmień liczbę wyświetlanych postów w FSE

Aby zmienić wygląd strony, możesz wybrać jeden z bloków na stronie. Następnie przejdź do zakładki „Blok” w bocznym panelu ustawień i wybierz zakładkę „Styl”.

Zobaczysz teraz dostępne opcje stylizacji dla tego konkretnego bloku. Możesz zmienić kolor tekstu lub kolor linku, zmienić czcionki, dostosować dopełnienie i marginesy itp.

Pasek boczny ustawień stylów bloków w FSE

W tym momencie możesz przesunąć się w dół strony i zlokalizować blok z napisem „Dodaj tekst lub bloki, które będą wyświetlane, gdy zapytanie nie zwróci wyników”.

Tutaj możesz wpisać tekst lub dodać bloki, które pojawią się w przypadku, gdy kategoria nie będzie jeszcze zawierać żadnych postów.

Dodawanie tekstu, gdy w kategorii nie ma wyników w FSE

I to wszystko, jeśli chodzi o podstawy edycji strony kategorii w pełnym edytorze witryny. Możesz teraz dodać do niej więcej bloków, aby wyróżniała się na tle innych stron archiwum kategorii.

Następnie po prostu kliknij „Zapisz”.

Po tym możesz powtórzyć te same kroki, aby utworzyć niestandardowe strony WordPress dla wszystkich swoich kategorii. Możesz również edytować swoje główne kategorie, a reszta będzie korzystać z domyślnego szablonu archiwum w Twoim motywie.

Zapisywanie zmian w FSE

Jeśli chcesz uzyskać więcej wskazówek i sztuczek dotyczących korzystania z edytora całego witryny, zapoznaj się z naszym kompletnym przewodnikiem dla początkujących po edycji całego witryny w WordPress.

Zalecamy również zapoznanie się z naszą listą najlepszych wtyczek bloków Gutenberga, aby móc dodawać wiele innych elementów do swojej strony kategorii.

Oto jak wygląda nasza prosta strona kategorii:

Przykład strony kategorii stworzonej za pomocą FSE

Metoda 3: Użyj CSS Hero do stylizacji stron kategorii (wszystkie motywy)

Ta trzecia metoda jest zalecana dla użytkowników klasycznych motywów WordPress, chociaż użytkownicy motywów blokowych również mogą z niej skorzystać.

Powodem jest to, że niewiele klasycznych motywów oferuje opcję indywidualnego stylizowania stron archiwum kategorii. A jeśli nie chcesz stosować Metody 1, alternatywą jest użycie niestandardowego CSS.

Sztuczka z CSS polega na tym, że musisz wiedzieć, jak kodować. Jeśli jesteś całkowicie początkującym bez zaplecza technicznego, kodowanie może nie być dla Ciebie najbardziej przyjazną opcją.

Na szczęście znaleźliśmy łatwy sposób na dostosowanie motywu za pomocą CSS bez żadnego kodowania, a mianowicie za pomocą CSS Hero.

CSS Hero to wtyczka, która pozwala na dostosowanie istniejącego motywu za pomocą wizualnego edytora CSS. Wszystko, co musisz zrobić, to wybrać element na swojej stronie, zmienić jego styl, a CSS Hero zmieni kod CSS tego elementu.

Biorąc to pod uwagę, w porównaniu z poprzednimi metodami, zalecamy używanie CSS tylko wtedy, gdy chcesz wprowadzić drobne zmiany na stronach archiwum kategorii. Chociaż możliwa jest gruntowna przebudowa, może to zająć więcej czasu.

Ponadto wtyczka nie posiada darmowej wersji, chociaż możesz użyć naszego kodu rabatowego CSS Hero, aby uzyskać 40% zniżki.

Więcej informacji znajdziesz w naszej pełnej recenzji CSS Hero.

Po zakupie i pobraniu CSS Hero możesz zainstalować i aktywować go w swoim panelu administracyjnym WordPress. Instrukcje krok po kroku znajdziesz w naszym przewodniku dla początkujących dotyczącym instalacji wtyczek WordPress.

Następnie, w górnym pasku administracyjnym powinna pojawić się przycisk CSS Hero. Kliknij go, aby rozpocząć edycję swojej witryny.

Otwieranie CSS Hero w WordPress

Poniższy zrzut ekranu pokazuje, jak powinna wyglądać Twoja strona.

Po lewej stronie znajduje się pasek boczny, gdzie można modyfikować poszczególne elementy na stronie. Na górze znajdziesz przyciski do przeglądania strony na różnych urządzeniach, przełączania się w tryb nawigacji i cofania zmian.

Na dole możesz zapisać swoją pracę.

Interfejs CSS Hero

Domyślnie zobaczysz swoją stronę główną.

Aby dostosować stronę archiwum kategorii, przełącz się z trybu „Edytuj” na tryb „Nawiguj” w prawym górnym rogu strony. Następnie przejdź do kategorii, którą chcesz dostosować.

Aktywacja trybu nawigacji w CSS Hero

Gdy znajdziesz się na właściwej stronie, możesz wrócić do trybu „Edytuj”.

Aby upewnić się, że Twoje zmiany wpłyną tylko na tę konkretną stronę kategorii, a nie na pozostałe, zmień ustawienie „Tryb wyboru” na „Kategoria”.

Przełączanie do trybu wyboru kategorii w CSS Hero

Teraz możesz wybrać element do edycji.

W tym przykładzie kliknęliśmy grupę bloków wyświetlających tytuł i opis kategorii. Lewy pasek boczny zawiera teraz ustawienia do zmiany tego elementu.

Wybieranie bloku w CSS Hero

Spróbujmy przykładu. Jeśli chcesz zmienić kolor tła, kliknij opcję „Tło”.

Następnie możesz kliknąć ikonę selektora kolorów i wybrać kolor, który odpowiada Twoim gustom. Możliwe jest również dodanie gradientu lub obrazu jako tła.

Ustawienia tła w CSS Hero

Ponieważ wybraliśmy dość ciemny kolor, tekst nie jest teraz czytelny. Na szczęście CSS pozwala kliknąć poszczególne elementy tekstowe w tej grupie bloków.

Aby zmienić kolor tekstu, możesz przejść do ustawienia „Typografia” i wybrać pożądany kolor. Możesz również dostosować rozmiar czcionki, wysokość linii, a nawet rodzinę czcionek.

Ustawienia typografii w CSS Hero

Inną fajną rzeczą, którą możesz zrobić, jest dodanie cienia pola do swoich elementów, aby jeszcze bardziej się wyróżniały.

Aby to zrobić, kliknij dowolny element, do którego chcesz dodać cień. Następnie przejdź do zakładki „Dodatkowe” i kliknij „Utwórz cień”.

Dodatkowe ustawienia w CSS Hero

Teraz zacznij przeciągać kropkę do miejsca, w którym chcesz, aby pojawił się cień. Automatycznie zobaczysz cień pod elementem.

Po zakończeniu możesz dostosować rozmycie, rozszerzenie, pozycję i kolor cienia.

Dostosowywanie ustawień cienia bloku w CSS Hero

Jeśli okaże się, że elementy są zbyt blisko siebie (np. trzeba dodać łamanie linii) lub zbyt daleko od siebie, możesz je dostosować w ustawieniach „Odstępy”.

Tutaj możesz zmienić wypełnienie i margines każdego elementu, aby wyglądały bardziej proporcjonalnie.

Dostosowywanie odstępów i marginesów bloku w CSS Hero

Jest jeszcze znacznie więcej rzeczy, które można zrobić za pomocą CSS Hero. Jeśli chcesz dowiedzieć się więcej, zapoznaj się z tymi przewodnikami:

Gdy będziesz zadowolony z wyglądu strony kategorii, po prostu kliknij „Zapisz”.

Zapisywanie pracy w CSS Hero

To wszystko. Teraz możesz powtórzyć te same kroki z innymi stronami kategorii, aby wyglądały bardziej unikalnie.

Oto końcowy rezultat naszej strony kategorii, stworzonej za pomocą CSS Hero:

Przykład strony archiwum kategorii stworzonej za pomocą CSS Hero

Dodatkowa wskazówka: Użyj innego motywu dla stron konkretnych kategorii

Chcesz wprowadzić dużą zmianę w wyglądzie niektórych swoich kategorii? Możesz rozważyć użycie zupełnie innego motywu dla określonych kategorii.

Może to być świetne, jeśli chcesz, aby grupa stron kategorii wyglądała tak samo, ale inaczej niż wszystko inne.

Pamiętaj jednak, że nie możesz stylizować każdej kategorii. Zamiast tego tworzysz dwa odrębne wyglądy swojej witryny.

Chociaż daje to dużą swobodę w zmienianiu rzeczy, pamiętaj, że nadal ważne jest, aby Twoja strona wyglądała w miarę spójnie. Nawet jeśli niektóre kategorie wyglądają inaczej, staraj się zachować wspólne elementy.

Pomaga to odwiedzającym czuć się komfortowo podczas poruszania się po Twojej witrynie. Możesz sprawić, że Twoja witryna WordPress będzie angażująca i łatwa w użyciu, znajdując równowagę między unikalnymi projektami a spójnością.

Więcej szczegółów na temat tego, jak to zrobić, znajdziesz w naszym przewodniku jak używać wielu motywów na swojej stronie WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak inaczej stylizować poszczególne kategorie w WordPress. Możesz również sprawdzić nasze najlepsze wybory najlepszych kreatorów motywów WordPress oraz nasz obszerny przewodnik po edycji strony 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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz w niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak finansowany jest WPBeginner, dlaczego to ważne i jak możesz nas wesprzeć. Oto nasz proces redakcyjny.

Ostateczny zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi – kolekcji produktów i zasobów związanych z WordPress, które powinien mieć każdy profesjonalista!

Interakcje czytelników

10 CommentsLeave a Reply

  1. Eksperymentowałem z niestandardowym stylizowaniem kategorii i chciałbym dodać, że kluczowe jest utrzymanie równowagi między unikalnością a spójnością.
    Chociaż kuszące jest, aby każda kategoria była drastycznie inna, ważne jest, aby zachować pewne wspólne elementy, aby zapewnić spójne doświadczenie użytkownika na całej stronie.

  2. czy jest możliwe, aby zmienić styl wszystkich postów w kategorii, a nie tylko strony archiwum kategorii, za pomocą opcji CSS?

    chcę wyświetlić:none elementu tylko na konkretnych stronach kategorii

    • Jest to możliwe, ale wymagałoby dodania kodu do przypisywania kategorii do postów, ponieważ nie jest to domyślne rozwiązanie WordPressa.

      Admin

  3. Dziękuję za artykuł!

    Powiedzmy, że chcę stylizować wszystkie posty w kategorii „Recenzje”, ale tylko podkategorie w recenzjach są zaznaczone dla posta.

    Jak mogę stylizować wszystkie podkategorie w kategorii Recenzja?

    • W tym, czego szukasz, chciałbyś skierować się na poszczególne podkategorie.

      Admin

        • Przepraszamy za zamieszanie, mieliśmy na myśli postępowanie zgodnie z tym przewodnikiem dla każdej z podkategorii, a jeśli chcesz pogrupować podkategorie, możesz dodać przecinek, aby CSS wpłynął na dodatkowy cel.

  4. Witam,

    dziękuję za artykuł.
    Co się dzieje, jeśli artykuł należy do dwóch lub więcej kategorii?

    Carosch

    • Pytanie brzmi, jak przypisać niestandardowy układ szablonu kategorii z panelu administracyjnego do wielu innych kategorii.

      na przykład stworzyłem szablon o nazwie Category-grid.php. jak przypisać go do wielu kategorii w moim wordpress?

  5. Fantastyczny artykuł!

    Jestem nowicjuszem w WordPressie i próbuję znaleźć sposób, aby zrobić dokładnie to. Napotkałem jednak pewne problemy, postępując zgodnie z Twoimi krokami. Nasza witryna WP jest skonfigurowana na serwerze Windows z systemem iis 7, więc nie wiem, czy to powoduje mój problem, ale jestem pewien, że problem leży po mojej stronie, a nie w Twoich instrukcjach.

    Próbowałem obu metod; kopiując category.php do nowego pliku php nazwanego na cześć jednej z moich kategorii, oraz CSS. CSS zadziałał jak marzenie, ale przy pierwszej metodzie otrzymałem błąd informujący, że wywołanie pewnej funkcji w oryginalnym pliku php kategorii zostało zduplikowane w moim niestandardowym pliku kategorii. Utworzyłem nowy plik php w katalogu mojego motywu potomnego (używam Avada). Oryginalny category.php nie został również znaleziony w lokalizacji, którą wspominasz, ale w folderze wp-includes. Moja strona bloga działała dobrze; podobnie jak moje kategorie. Nie jestem pewien, jak sobie z tym poradzić, ponieważ w oryginalnym pliku php kategorii było TAK dużo kodu; nie mam pojęcia, co, jeśli cokolwiek, powinienem był usunąć z mojego niestandardowego pliku php kategorii.

    Dużo informacji, które znam. Dziękuję za odpowiedź, jeśli masz dalsze sugestie.

    Uwielbiam tę stronę!

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszą polityką komentowania, a Twój adres e-mail NIE zostanie opublikowany. Prosimy NIE używać słów kluczowych w polu nazwy. Prowadźmy osobistą i znaczącą rozmowę.