Przez lata WPBeginner otrzymywał wiele pytań dotyczących tagów, a jednym z nich było to, czy powinieneś stylizować tagi w WordPressie, aby wyglądały na bardziej widoczne.
Tagi pomagają uporządkować twoją treść w tematy. Są jak hashtagi dla twoich wpisów na blogu WordPress i pomagają użytkownikom odkrywać więcej treści. Z naszego doświadczenia wynika jednak, że jeśli nie wyróżniają się wizualnie, mogą zostać przeoczone.
W tym artykule pokażemy ci, jak łatwo stylizować tagi w WordPressie, aby zwiększyć zaangażowanie użytkowników i zobaczyć więcej odsłon na twojej witrynie internetowej.
Jak wyświetlać tagi w WordPressie?
WordPress posiada dwie główne taksonomie zwane kategoriami i tagami. Podczas gdy kategorie są używane dla głównych obszarów twojej treści, tagi pozwalają na sortowanie treści na bardziej szczegółowe tematy.
Wiele popularnych motywów WordPress domyślnie wyświetla tagi na górze lub na dole twoich wpisów.
Jednak tagi można również wyświetlać na stronach archiwum, w stopce, na panelach bocznych i niemal w dowolnym miejscu w WordPressie.
Aby wstawić chmurę tagów do twoich wpisów, stron i widżetów panelu bocznego, możesz po prostu dodać blok „Chmura tagów”.
Chmura tagów nadaje każdemu tagowi inną wielkość litery w zależności od liczby wpisów. Można również wybrać wyświetlanie liczby wpisów obok każdego tagu.
To tylko domyślne opcje dostępne w WordPressie, ale co jeśli chciałbyś jeszcze bardziej dostosować twoje tagi? Pokażemy ci, jak to zrobić.
Przyjrzyjmy się, jak łatwo stylizować tagi w WordPressie.
Stylizacja domyślnej chmury tagów w WordPressie
Po dodaniu bloku chmury tagów do wpisu lub strony, można go dostosować, dodając własny CSS.
Blok chmury tagów automatycznie zawiera domyślne, wygenerowane przez WordPress klasy CSS, których można użyć do ich stylizacji.
Aby dodać własny CSS do twojej witryny WordPress, po prostu przejdź do Wygląd ” Dostosuj stronę i przełącz się na kartę Dodatkowe CSS.
Możesz zacząć od dodania tego własnego kodu CSS jako punktu wyjścia.
.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 { font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 { font-size:30px!important; }
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Jak widać, można użyć klasy .tag-link-position, aby dostosować styl na podstawie pozycji odnośników. Tagi z większą liczbą wpisów są wyżej w pozycji, a tagi z mniejszą liczbą wpisów są niżej.
Jeśli chcesz, aby wszystkie tagi w twoim bloku chmury tagów miały ten sam rozmiar, możesz zamiast tego użyć następującego CSS:
.tag-cloud-link {
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Tak to wyglądało na naszej witrynie testowej:
Stylizacja tagów wpisów w WordPressie
Oprócz stylizowania chmur tagów, możesz również chcieć stylizować tagi postów, które są wyświetlane w poszczególnych wpisach na Twoim blogu. Zazwyczaj twój motyw WordPress wyświetla je na górze lub na dole tytułu wpisu lub jego treści.
Możesz najechać myszką na tagi i kliknąć prawym przyciskiem myszy, aby użyć narzędzia Inspect i zobaczyć klasy CSS używane przez twój motyw WordPress.
Następnie możesz użyć tych klas CSS w twoim własnym CSS. Poniżej znajduje się przykładowy kod oparty na klasach CSS w naszym motywie testowym:
.entry-tag {
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a {
color:#fff;
font-size:small;
font-weight:bold;
}
Tak to wyglądało na naszej witrynie testowej.
Tworzenie własnej chmury tagów w WordPressie
Domyślny blok chmury tagów jest łatwy w użyciu, ale niektórzy zaawansowani klienci mogą chcieć go dostosować, aby mieć większą elastyczność.
Metoda ta pozwala na dodanie twoich własnych klas HTML i CSS otaczających chmurę tagów. Dzięki temu można dostosować wygląd chmury tagów do własnych potrzeb.
Pierwszą rzeczą, którą musisz zrobić, to skopiować i wkleić ten kod w pliku functions. php twojego motywu lub we wtyczce fragmentów kodu:
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->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n" ;
}
return $string;
}
add_shortcode('wpbtags' , 'wpb_tags' );
Zalecamy dodanie tego kodu za pomocą WPCode, najlepszej wtyczki do fragmentów kodu dla WordPress. Umożliwia ona łatwe dodawanie własnego kodu w WordPressie bez edytowania pliku functions.php twojego motywu, dzięki czemu nie zepsujesz swojej witryny.
Aby rozpocząć, zainstaluj i włącz darmową wtyczkę WPCode. Jeśli potrzebujesz pomocy, zobacz nasz poradnik jak zainstalować wtyczkę WordPress.
Po włączeniu wtyczki, przejdź do Code Snippets ” Add Snippet z kokpitu WordPress.
Następnie najedź kursorem myszy na opcję „Add Your Custom Code (New Snippet)” i kliknij przycisk „Use snippet”.
W tym miejscu można dodać tytuł fragmentu kodu u góry strony. Może to być cokolwiek, co pomoże ci zapamiętać, do czego służy kod.
Następnie wklej powyższy kod w polu „Podgląd kodu” i wybierz „Fragment kodu PHP” jako rodzaj kodu z rozwijanego menu.
Następnie wystarczy przełączyć przełącznik z „Nieaktywny” na „Aktywny” i kliknąć przycisk „Zapisz fragment kodu”.
Ten kod dodaje krótki kod, który wyświetla wszystkie twoje tagi z liczbą wpisów obok nich.
Aby wyświetlić go na twojej stronie archiwum lub w widżecie, musisz użyć tego krótkiego kodu:
[wpbtags]
Samo użycie tego kodu spowoduje wyświetlenie odnośników tagów i liczby wpisów obok nich. Dodajmy trochę CSS, aby wyglądało to lepiej. Po prostu skopiuj i wklej ten własny CSS na twoją witrynę internetową.
.tagbox {
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;
}
.taglink {
padding:2px;
}
.tagbox a, .tagbox a:visited, .tagbox a:active {
text-decoration:none;
}
.tagcount {
background-color:green;
color:white;
position: relative;
padding:2px;
}
Możesz dowolnie modyfikować CSS, aby dostosować go do twoich potrzeb. Tak to wyglądało na naszej witrynie demonstracyjnej:
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo stylizować tagi w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat ukrywania lub stylizowania twoich podkategorii w WordPress lub zobaczyć tę listę przydatnych wskazówek, sztuczek i hacków WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dennis Muthomi
the step-by-step guide and code snippets are really helpful
QUICK QUESTION: If I apply these code snippets to style my tags and later decide to change my WordPress theme, will the tag styling change according to the new theme’s default styles, or will it stick with the customizations I made using these code snippets?
WPBeginner Comments
The CSS you added should remain, but you may still have to edit the CSS depending on how the new theme’s CSS effects the styling, and if there are any conflicts.
Dennis Muthomi
hello, thank you for the helpful clarification!
As long as I can keep the customizations with some minor tweaking, that is very useful to know.
One follow-up question – when switching themes, what would be the best way to check for and resolve any CSS conflicts that affect the tag styling?
WPBeginner Support
We do not have a specific best way we would recommend. It would be something you would need to manually check for.
Nikola
Great guide, thanks!
Would it be possible to order the tags by most used and limit the number of tags shown?
WPBeginner Support
At the moment you would need to use a plugin for that or custom code, we do not have a recommended method for that at the moment.
Administrator
Jemma Pollari
Awesome, thanks. This really helped.
WPBeginner Support
Glad our guide could help
Administrator
Joe Smith
This is great! Exactly what I was looking for and very classy. Just one question: If I wanted to add more space between the tags, how would i modify the css? I’ve tried changing several of the settings in the css above but none of them simply add whitespace between the tags.
WPBeginner Support
You would want to increase the padding for what you’re wanting
Administrator
Ibiye Ambille
Hi, i would love to move my post tag to below the featured image
WPBeginner Support
For that, you would want to reach out to your specific theme’s support for assistance as each theme has its own location for the featured image.
Administrator
Trishah
I’m trying to add a CSS class „current” to tags for a single post. The few solutions I’ve found no longer seem to work. How would I do this?
WPBeginner Support
That would vary based on your specific theme, if you reach out to your theme’s support they should be able to let you know where you can add that class for your tags.
Administrator
uche Peter
My tags are listed serially.. No Border nothing nothing,,, just a text …please how do I give it a border with background color
Kingsolomon
How to i apply the css pls
Hugo
My tag cloud doesn’t come as a cloud but as a list, since after each span a line break is inserted. How can I remove these line breaks?
WPBeginner Support
Hi Hugo,
This article discusses how to style tags in different ways. If you want a tag cloud then you can use the default WordPress tag cloud widget. You can also use the template tag
1-click Use in WordPress
Administrator
bob
I get that you showed another page on how to limit tags to a certain number, but how can I do it with this example included? It doesn’t seem to work using the method linked in combination with this.
Amy Croson
I’m struggling with adding this, and I believe it’s with how my 'Chosen’ Theme is limiting me. I’ve copied & pasted all into my php, & it is giving me errors left and right. I’m currently being told that there is an unknown „.” in this detail. Is there any way to format this without using the „.”s before .taglink, .tagbox, & .tagcount?
Val Archer
Hi – I’m looking for a way to list tags on a category-slug.php page. Do you perhaps know where I can find that tutorial?
So far I’ve created a category [sitename]/category/recipes and a category-recipes.php.
I’m tagging the recipes, e.g. Breakfast, Dinner, etc
I’d like the Tags to display in category-recipes.php like this. I don’t know what I’m doing. I’m copying from my category.php file.
Archives for the Category:
Breakfast
now it lists all the posts tagged with Breakfast something like this:
<a href="”>
by / / posted in cat_name . ’ ’;} ?>
Dinner
now it lists all the posts tagged with Dinner something like this:
<a href="”>
by / / posted in cat_name . ’ ’;} ?>
[Then at the end of all the Tags:]
</div
Please do you know where I can get help on this?
thank you! – Val
WPBeginner Support
Have you tried adding:
<?php the_tags('posted in:', '' ,'' ); ?>Administrator
Magistar
Code works fine for a tag cloud. However I would like to apply this to the post tags (meaning the tags associated with a post and their count, instead of the big list).
I tried something with wp_get_post_tags but I did not really got it to work. Any suggestions?
WPBeginner Staff
You can use get_terms instead of get_tags, see this codex page:
http://codex.wordpress.org/Function_Reference/get_terms
DER KUNSTBLOG
That’s great, I’ve added your code to a site-specific plugin – but is there a possibility, to change it in a way, that the font-size vary on how often the tag is used? Any idea please? Thanks!
WPBeginner Staff
Yes it is possible, in the first piece of code you would need to replace get_tags with wp_tag_cloud function. Like this:
$wpbtags = wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count&format=array');
Guest
How do you do the same thing with the custom tag cloud for Categories and Custom Taxonomies?
Terence O'Neill
Hey mate; How do I do the exact same(display with shortcode) for Categories and Custom Taxonomies? Thx for the tutorial btw. Works like a charm.