Exibir uma nuvem de tags - CSS-Tricks

Anonim
 8, // font size for the least used tag 'largest' => 22, // font size for the most used tag 'unit' => 'px', // font sizing choice (pt, em, px, etc) 'number' => 45, // maximum number of tags to show 'format' => 'flat', // flat, list, or array. flat = spaces between; list = in li tags; array = does not echo results, returns array 'orderby' => 'name', // name = alphabetical by name; count = by popularity 'order' => 'ASC', // starting from A, or starting from highest count 'exclude' => 12, // ID's of tags to exclude, displays all except these 'include' => 13, // ID's of tags to include, displays none except these 'link' => 'view', // view = links to tag view; edit = link to edit tag 'taxonomy' => 'post_tag', // post_tag, link_category, category - create tag clouds of any of these things 'echo' => true // set to false to return an array, not echo it ) ); ?>

O tamanho padrão, se nenhum fornecido, para esta função é “pt”, que é um pouco incomum e freqüentemente não confiável, portanto, certifique-se de alterar esse parâmetro para o tamanho das fontes normalmente em seu site.

Tamanho de fonte menos estranho

As nuvens de tags realizam seus tamanhos de fonte variados aplicando um estilo embutido a cada tag. Os tamanhos de fonte resultantes podem ser muito estranhos, como style = 'font-size: 29.3947354754px;'. Mike Summers propõe esta solução:


    8, // font size for the least used tag 'largest' => 40, // font size for the most used tag 'unit' => 'px', // font sizing choice (pt, em, px, etc) 'number' => 200, // maximum number of tags to show 'format' => 'array', // flat, list, or array. flat = spaces between; list = in li tags; array = does not echo results, returns array 'separator' => '', // 'orderby' => 'name', // name = alphabetical by name; count = by popularity 'order' => 'RAND', // starting from A, or starting from highest count 'exclude' => '', // ID's of tags to exclude, displays all except these 'include' => '', // ID's of tags to include, displays none except these 'link' => 'view', // view = links to tag view; edit = link to edit tag 'taxonomy' => 'post_tag', // post_tag, link_category, category - create tag clouds of any of these things 'echo' => true // set to false to return an array, not echo it )); foreach ($arr as $value) ( $ptr1 = strpos($value,'font-size:'); $ptr2 = strpos($value,'px'); $px = round(substr($value,$ptr1+10,$ptr2-$ptr1-10)); $value = substr($value, 0, $ptr1+10) . $px . substr($value, $ptr2); $ptr1 = strpos($value, "class="); $value = substr($value, 0, $ptr1+7) . 'color-' . $px . ' ' . substr($value, $ptr1+7); echo '
  • ' . $value . '
  • '; ) ?>

O resultado é o seguinte:

Tag Name

nisso:

Tag Name

Observe o bônus adicional de que os links têm um nome de classe de "cor 29" agora que não tinha antes. Agora você tem um gancho para colorir os nomes das tags com base em seu tamanho.