Hoe je tags opmaakt in WordPress

Met WordPress kunt u uw inhoud in taxonomieën sorteren. Standaard wordt het geleverd met categorieën en tags. Hoewel categorieën kunnen worden gebruikt om uw inhoud in verschillende secties te sorteren, kunnen tags worden gebruikt om inhoud te sorteren in meer specifieke onderwerpen. U kunt tags die op uw site worden gebruikt weergeven in een tagwolk of in een lijstindeling. In dit artikel laten we u zien hoe u tags in WordPress kunt stijlen.

Alle tags met berichtensortering weergeven in WordPress

Sommige populaire websites tonen hun populairste tags als onderwerpen op hun archievenpagina of in het voettekstgebied. Hier ziet u hoe u al uw postlabels kunt weergeven, met het aantal berichten en zonder de tagwolk te gebruiken.

Allereerst moet je deze code kopiëren en plakken in het function.php-bestand of de sitespecifieke plug-in van je thema.

 functie wpb_tags () $ wpbtags = get_tags (); foreach ($ wpbtag als $ tag) $ string. = 'term_id).' "> '. $ tag-> naam.' '. $ tag-> count.' '." \ n "; return $ string;  add_shortcode ('wpbtags', 'wpb_tags'); 

Met deze code worden gewoon al uw tags weergegeven met hun aantal posten naast hen. Om het echter op uw archievenpagina of in een widget weer te geven, moet u deze shortcode gebruiken:

[Wpbtags]

Als u deze code alleen gebruikt, worden alleen tag-links en aantal posten naast weergegeven. Het zal er niet mooi uitzien. Laten we wat CSS toevoegen om het mooi te maken. Kopieer en plak deze CSS in de stylesheet van uw thema.

 .tagbox background-color: #eee; border: 1px solid #ccc; marge: 0px 10px 10px 0px; regelhoogte: 200%; opvulling: 2px 0 2px 2px;  .taglink padding: 2px;  .tagbox a, .tagbox a: visited, .tagbox a: active text-decoration: none;  .tagcount background-color: green; kleur wit; positie: relatief; padding: 2px;  

U kunt de CSS aanpassen aan uw behoeften. Zo zag het er uit op onze demosite:

Stylingtags in bericht-meta-informatie

Sommige WordPress-thema's tonen keurig tags onder de post-metagegevensinformatie met publicatiedatum, auteur en andere meta-koppelingen. Sommige thema's zullen ze misschien helemaal niet stylen, of je kunt ze op een andere manier stijlen.

Laten we kijken hoe we taglinks onder een bericht in WordPress kunnen stijlen.

Eerst moet u weten welke CSS-klasse door uw WordPress-thema wordt gebruikt om tags weer te geven. Om dat te doen, klikt u op tags en selecteert u het element inspecteren in het browsermenu.

Hiermee wordt het browserscherm gesplitst om de toolbox voor ontwikkelaars onder de webpagina weer te geven. In de toolbox voor ontwikkelaars kunt u de CSS-klasse zien die door uw WordPress-thema wordt gebruikt om tags weer te geven.

In de bovenstaande schermafbeelding ziet u dat het thema wordt gebruikt termen voor CSS-klasse. Nu zullen we deze klasse gebruiken in de stylesheet van ons thema of het onderliggende thema om het standaardthema CSS te overschrijven.

 .terms a, .terms a: visited, .terms a: active background: #eee; border: 1px solid #ccc; border-radius: 5px; text-decoration: none; padding: 3px; margin: 3px; text-transform: in hoofdletters;  .terms a: hover background: # a8281a; color: # fff;  

U kunt CSS aanpassen aan de kleuren van uw thema. Dit is hoe de tags eruit zagen op onze demosite:

Mogelijk ziet u het verschil tussen de twee schermafbeeldingen anders dan de CSS-wijzigingen, hebben we ook Tags gewijzigd in Tagged en de komma's tussen tags verwijderd. Hoe hebben we dit gedaan?

We hebben the_tags () aangepast; sjabloon tag in ons single.php bestand zoals dit:

Als u het aantal totale tags wilt beperken dat wordt weergegeven, bijvoorbeeld 5 of iets anders, raadpleegt u dit artikel voor meer informatie over het weergeven van een beperkt aantal tags na het plaatsen.

We hopen dat dit artikel je heeft geholpen met het stijlen van tags in WordPress. Experimenteer met de CSS tot je het gewenste resultaat krijgt.

Als je dit artikel leuk vond, abonneer je dan op ons YouTube-kanaal voor meer tutorials over WordPress-video's. U kunt ons ook vinden op Google+ en Twitter.