De seguro hay muchos usuarios que se preguntan como añadir una pestaña para la navegación basada en un blog Wordpress, usando el wp_list_categories. Por lo tanto, creo este tutorial rápido, por si acaso hay personas que buscan la misma respuesta.

En este tutorial voy a aplicar código HTML / CSS necesario para crear una categoría basada en un menú de navegación, utilizando algunas buenas esquinas redondeadas, algo así:

Las esquinas redondeadas

Para las esquinas redondeadas vamos a necesitar 4 imagenes, 2 para cada estado (normal, activo). Nombra las imágenes tabizquierda, tabderecha y tabizquierda_activo, tabderecha_activo. Las imágenes que van a la derecha tienen que ser lo suficientemente amplio, a fin de que quepan leyendas.

El HTML y CSS

Dado que se trata de una pestaña de navegación, en la mayoría de los casos, el HTML se pondrá en header.php. La plantilla wp_list_categories etiqueta una serie de lista (li), para cada categoría. Todo lo que necesitas hacer es colocar el código PHP entre etiquetas ul, de este modo:

Clic para ver Texto Plano
PHP:
  1. <ul id="navtabs">
  2.       <?php wp_list_categories(‘title_li=’); ?>
  3.       </ul>

Aviso cómo la etiqueta ul también tiene un id (navtabs). Esto hará más fácil el estilo del menú usando CSS:

Clic para ver Texto Plano
CSS:
  1. body {
  2. background: #FFFFFF;
  3. font-family: Arial, Helvetica, sans-serif;
  4. font-size: 12px;
  5. color: #404040;
  6. }
  7.  
  8. a {
  9. text-decoration: none;
  10. color: #0288D8;
  11. }
  12.  
  13. a:hover {
  14. text-decoration: underline;
  15. }
  16.  
  17. :focus {
  18. -moz-outline-style: none;
  19. }
  20.  
  21. #navtabs {
  22. list-style: none;
  23. padding: 0;
  24. height: 30px;
  25. font-size: 11px;
  26. font-weight: bold;
  27. text-transform: uppercase;
  28. border-bottom: 4px solid #0288D8;
  29. }
  30.  
  31. #navtabs li {
  32. float: left;
  33. background: #CCE7F7 url(tabizquierda.png) no-repeat left top;
  34. padding: 8px 0 8px 14px;
  35. margin-right: 1px;
  36. }
  37.  
  38. #navtabs li a {
  39. background: #CCE7F7 url(tabderecha.png) no-repeat top right;
  40. padding: 8px 14px 8px 0;
  41. }
  42.  
  43. #navtabs li.current-cat {
  44. background: #0288D8 url(tabizquierda_activo.png) no-repeat left top;
  45. }
  46.  
  47. #navtabs li.current-cat a {
  48. background: #0288D8 url(tabderecha_activo.png) no-repeat right top;
  49. color: #FFFFFF;
  50. }

He creado una página de ejemplo aquí. Es sólo una simple página HTML, pero el aspecto y sensación es la misma.

También te podría interesar...