Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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.

Styling tags in WordPress

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.

Tags below post in WordPress

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”.

Tag cloud block

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.

Tag cloud preview

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.

Styling tag cloud

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:

Alternate tag cloud style

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.

Using inspect tool to find tags class

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.

Post tags styled

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”.

Add a new custom code snippet in WPCode

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.

Paste snippet into WPCode

Następnie wystarczy przełączyć przełącznik z „Nieaktywny” na „Aktywny” i kliknąć przycisk „Zapisz fragment kodu”.

Activate and save your custom code snippet

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:

Custom tag cloud

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.

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

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

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

Reader Interactions

29 komentarzyZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. 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.

  3. 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

  4. Jemma Pollari

    Awesome, thanks. This really helped.

    • WPBeginner Support

      Glad our guide could help :)

      Administrator

  5. 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

  6. 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

  7. 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

  8. 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

  9. Kingsolomon

    How to i apply the css pls

  10. 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

      <?php wp_tag_cloud(); ?>

      Administrator

  11. 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.

  12. 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?

  13. 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

  14. 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?

  15. 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');

  16. Guest

    How do you do the same thing with the custom tag cloud for Categories and Custom Taxonomies?

  17. 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.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.