Jak łatwo stylizować Tagi w WordPress (z przykładami)

Czy chcesz stylować tagi w WordPress, aby wyglądały bardziej widocznie?

Tagi pomagają organizować treści w tematach. Są jak hashtagi dla postów na blogu WordPress i pomagają użytkownikom odkrywać więcej treści.

W tym artykule pokażemy, jak łatwo stylować tagi w WordPress, aby uzyskać większe zaangażowanie użytkowników i odsłony stron w Twojej witrynie.

Jak wyświetlić Tagi w WordPress

WordPress zawiera dwie główne taksonomie zwane kategoriami i tagami. Podczas gdy kategorie są używane dla głównych obszarów treści, tagi umożliwiają sortowanie treści na bardziej konkretne tematy.

Wiele popularnych motywów WordPress domyślnie wyświetla tagi u góry lub u dołu postów.

Możesz jednak wyświetlać tagi na stronach archiwum, stopce, paskach bocznych i prawie w dowolnym miejscu.

Aby wstawić chmurę tagów do swoich postów, stron i widżetów paska bocznego, możesz po prostu dodać blok chmury tagów.

Chmura tagów nadaje każdemu tagowi inny rozmiar czcionki w zależności od liczby postów. Możesz także wybrać wyświetlanie liczby postów obok każdego znacznika.

Są to tylko domyślne opcje dostępne w WordPress, ale co, jeśli chcesz jeszcze bardziej dostosować swoje tagi? Pokażemy Ci jak.

Przyjrzyjmy się, jak łatwo stylować tagi w WordPress.

Stylizacja domyślnej chmury tagów w WordPress

Po dodaniu bloku chmury znaczników do postu lub strony możesz go dostosować, dodając Niestandardowy CSS.

Blok chmury tagów automatycznie zawiera domyślne klasy CSS generowane przez WordPress, które można wykorzystać do ich stylizacji.

Aby dodać niestandardowy CSS do swojej witryny WordPress, po prostu przejdź do Wygląd ” Dostosuj strony i przełącz na dodatkową kartę CSS.

Możesz zacząć od dodania tego niestandardowego kodu CSS jako punktu wyjścia.

.tag-link-position-1 { font-size: 40px!ważne;}
.tag-link-position-2 { font-size:35px!ważne;}
.tag-link-position-3 { font-size: 30px!ważne;}
.tag-link-position-4 { font-size: 35px!ważne;}
.tag-link-position-5 { font-size: 30px!ważne;}


.tag-cloud-link {
	tekst-Dekoracja: Brak;
	background-color: # ffff;
}
.tag-link-count {
    background-color: # d6d6d6;
}

Jak widać, można użyć .tag-link-pozycjonowanie Klasa do dostosowania stylu w oparciu o położenie linków. Tagi z większą liczbą postów są wyższe, a tagi z mniejszą liczbą postów są niższe.

Jeśli chcesz, aby wszystkie znaczniki w bloku chmury znaczników miały ten sam rozmiar, możesz użyć następującego CSS:

.tag-cloud-link { 
/ style = "font-size:16px" / ważne;
border: 1px solid #d6d6d6;
}
.tag-cloud-link {
	tekst-Dekoracja: Brak;
	background-color: # ffff;
}
.tag-link-count {
    background-color: # d6d6d6;

}

Tak to wyglądało na naszej stronie testowej:

Stylizacja tagów postów w WordPress

Oprócz stylizacji chmur tagów, możesz także stylować tagi postów, które są wyświetlane na poszczególnych postach na blogu. Zazwyczaj Twój motyw WordPress wyświetla je u góry lub u dołu tytułu postu lub treści postu.

Możesz najechać kursorem myszy na tagi i kliknąć prawym przyciskiem myszy, aby użyć narzędzia Inspect, aby wyświetlić klasy CSS używane przez Twój motyw WordPress.

Następnie możesz użyć tych klas CSS w swoim niestandardowym CSS. Poniżej znajduje się przykładowy kod oparty na klasach CSS na naszym temacie testowym:

.entry-tag { 
padding: 5px 8px;
border-radius: 12px;
transformacja tekstu: małe litery;
background-color: # e91e63;
color: # fff;
}
.entry-tags a { 
color: # fff;
font-size: small;
font-weight: bold;
}

Tak to wyglądało na naszej stronie testowej.

Tworzenie niestandardowej chmury tagów w WordPress

Domyślny blok chmury tagów jest łatwy w użyciu, ale niektórzy zaawansowani użytkownicy mogą chcieć go dostosować, aby mieć większą elastyczność.

Ta metoda pozwala na dodanie własnych klas HTML i CSS otaczających chmurę tagów. Następnie można go użyć do dostosowania wyglądu chmury tagów do własnych wymagań.

Pierwszą rzeczą, którą musisz zrobić, to skopiować i wkleić ten kod w funkcjach szablonu.plik php lub wtyczka specyficzna dla witryny.

function wpb_tags () { 
$wpbtags = get_tags();
foreach ($wpbtags as $tag) { 
$ string .= '<span class = "tagbox" > <a class = "taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->nazwa . '</a > <span class = "tagcount">'. $tag - > count .'</span></span>' . "n"   ;
} 
return $ string;
} 
add_shortcode ('wpbtags', 'wpb_tags');

Ten kod dodaje shortcode, który wyświetla wszystkie Twoje tagi z liczbą postów obok nich. Aby wyświetlić go na stronie Archiwum lub w widżecie, musisz użyć tego krótkiego kodu:

[wpbtags]

Korzystanie z tego kodu tylko pokaże linki tagów i liczbę postów obok nich. Dodajmy trochę CSS, aby wyglądał lepiej. Po prostu skopiuj i wklej ten niestandardowy CSS na swoją stronę.

.tagbox { 
background-color: # eee;
border: 1px solid # ccc;
margin: 0px 10px 10px 0px;
wysokość linii: 200%;
padding: 2px 0 2px 2px;
 
}
.taglink { 
padding: 2px;
}
 
.tagbox a,tagbox a: odwiedziny, .tagbox a: active { 
tekst-Dekoracja: Brak;
}
 
.tagcount { 
background-color:green;
Kolor: Biały;
pozycja: względna;
padding: 2px;
}

Możesz modyfikować CSS, aby spełnić swoje potrzeby. Tak to wyglądało na naszej stronie demo:

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo stylować tagi w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia niestandardowych stron docelowych w WordPress lub zobaczyć tę listę przydatnych wskazówek, sztuczek i hacków 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.