Mostrar una nube de etiquetas - Trucos CSS

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

El tamaño predeterminado, si no se proporciona ninguno, para esta función es "pt", que es un poco inusual y, a menudo, poco confiable, así que asegúrese de cambiar ese parámetro al tamaño de las fuentes normalmente en su sitio.

Tamaño de fuente menos extraño

Las nubes de etiquetas logran sus variados tamaños de fuente aplicando estilo en línea a cada etiqueta. Los tamaños de fuente resultantes pueden ser realmente extraños como style = 'font-size: 29.3947354754px;'. Mike Summers propone esta solución:


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

El resultado convierte esto:

Tag Name

dentro de esto:

Tag Name

Observe la ventaja adicional de que los enlaces tienen un nombre de clase de "color-29" ahora que antes no lo tenían. Ahora tiene un gancho para colorear los nombres de las etiquetas según su tamaño.