Hur man utformar taggar i WordPress

Hur man utformar taggar i WordPress

WordPress lÄter dig sortera ditt innehÄll i taxonomier. Som standard kommer det med kategorier och taggar. Medan kategorier kan anvÀndas för att sortera ditt innehÄll i olika avsnitt, kan taggar anvÀndas för att sortera innehÄll i mer specifika Àmnen. Du kan visa taggar som anvÀnds pÄ din webbplats i ett taggmoln eller i ett listformat. I den hÀr artikeln visar vi dig hur du utformar taggar i WordPress.

Visar alla taggar med inlÀggsrÀkningar i WordPress

Vissa populÀra webbplatser visar sina mest populÀra taggar som Àmnen pÄ deras arkivsida eller i sidfotomrÄdet. SÄ hÀr kan du visa alla dina inlÀggstaggar, med antal inlÀgg och utan att anvÀnda taggmolnet.

Det första du behöver göra Àr att kopiera och klistra in den hÀr koden i ditt temas funktioner.php-fil eller platsspecifikt plugin.


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

Den hÀr koden visar helt enkelt alla dina taggar med antalet inlÀgg bredvid dem. För att visa den pÄ din arkivsida eller i en widget mÄste du dock anvÀnda den hÀr kortkoden:

[wpbtags]

Att bara anvÀnda den hÀr koden visar bara tagglÀnkar och antal inlÀgg bredvid dem. Det kommer inte att fÄ det att se vackert ut. LÄt oss lÀgga till lite CSS för att göra det vackert. Kopiera och klistra in den hÀr CSS i temat.


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

Ändra gĂ€rna CSS för att möta dina behov. SĂ„ hĂ€r sĂ„g det ut pĂ„ vĂ„r demosida:

Styling-taggar i postmetainformation

Vissa WordPress-teman visar taggar under posten metadatainformation med publiceringsdatum, författare och andra metalÀnkar. Men vissa teman kanske inte utformar dem alls, eller du kanske vill utforma dem annorlunda.

LÄt oss se hur vi kan utforma tagglÀnkar under ett inlÀgg i WordPress.

Först mÄste du ta reda pÄ CSS-klassen som anvÀnds av ditt WordPress-tema för att visa taggar. För att göra det högerklickar du pÄ taggar och vÀljer inspekteringselement frÄn webblÀsarens meny.

Detta kommer att dela webblÀsarskÀrmen för att visa utvecklingsverktygslÄdan under webbsidan. I utvecklarens verktygslÄda kan du se CSS-klassen som anvÀnds av ditt WordPress-tema för att visa taggar.

Hitta css-klassen som anvÀnds av temat för taggar

I skÀrmdumpen ovan kan du se att temat anvÀnder termer för CSS-klass. Nu kommer vi att anvÀnda den hÀr klassen i vÄrt temat eller underordnade temas stilblad för att ÄsidosÀtta standardtemat CSS.


.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:uppercase;
}

.terms a:hover { 
background:#a8281a;
color:#FFF;
}

Ändra gĂ€rna CSS för att matcha ditt temas fĂ€rger. SĂ„ hĂ€r sĂ„g taggarna ut pĂ„ vĂ„r demosida:

Ändrad CSS-stil för taggar under inlĂ€gg i WordPress

Du kanske mÀrker skillnaden mellan de tvÄ andra skÀrmdumpar Àn CSS-Àndringarna, vi Àndrade ocksÄ Taggar till Tagged och tog bort kommatecken mellan taggar. Hur gjorde vi det hÀr?

Vi Àndrade taggarna (); malltagg i vÄr single.php-fil sÄ hÀr:


<?php the_tags('Tagged:', '' ,'' ); ?>

Om du vill begrÀnsa antalet visade taggar till att sÀga 5 eller nÄgot annat, hÀnvisa till den hÀr artikeln om hur du visar ett begrÀnsat antal taggar efter inlÀgg.

Vi hoppas att den hÀr artikeln hjÀlpte dig att utforma taggar i WordPress. Experimentera gÀrna med CSS tills du fÄr önskat resultat.

Om du gillade den hÀr artikeln, prenumerera sedan pÄ vÄr YouTube-kanal för mer WordPress-videohandledning. Du kan ocksÄ hitta oss pÄ Google+ och Twitter.