Crea un menú horizontal para tu Wordpress
En este tutorial voy a explicar cómo diseñar un menu horizontal para navegar por las páginas estáticas de nuestro blog. En el post anterior ya configuramos nuestro Wordpress para que nuestro blog sea una página más de nuestro site, de manera que aparezca cómo un botón más del menu.
El menu de navegación lo pondremos encima de la cabecera de la página. Para ello tendremos que editar el archivo header.php de nuestro Wordpress. El código del menú iría detras de la etiqueta <div id="nav"> del header.php
Comenzamos por las etiquetas HTML. Para crear un menú tenemos que definir una lista sin numerar mediante las etiquetas <ul> y <li>, anidadadas dentro de un div al que identificaremos con el id “nav”. Para marcar los elementos de la lista utilizaremos el script <?php wp_list_pages(’sort_column=menu_order&title_li=’); ?>, que lista las páginas estáticas del blog (el script lo he extraido del archivo sidebar.php) según el orden que les demos en el administrador. El código quedaría algo así:
<div id="nav"><ul><?php wp_list_pages('sort_column=menu_order&title_li='); ?></ul></div>
Ahora probamos a crear las páginas a las que enlazará nuestro menú. Las creamos desde el administrador, en la pantalla Escribir - Páginas. A modo de prueba yo he creado las siguientes:
- Home
- Company
- Services
- Solutions
- Partners
- Blog
- Contacts
Para que aparezcan ordenadas en el menú teneis que asignarle un número en la pestaña Orden de la página que aparece en el administrador, en la pantalla Administrar - Páginas.
Podeis probar también a crear una subpágina, recomiendo que leais antes la el artículo Organizando sus Páginas de la documentación de Wordpress
“Tal como usted puede tener Subcategorías dentro de sus Categorías, usted también puede tener Subpáginas dentro de sus Páginas, creando una jerarquía de páginas.”
Para crear una subpágina, desde el administrador creamos una página cómo lo hacemos normalmente, sólo que en la pestaña Página superior seleccionamos la página madre de esta.
Yo por ejemplo he creado una subpágina de nombre Service One cuyo padre sería la página Services. La idea sería crear un menú de navegación desplegable para poder acceder a todas las páginas y a sus respectivas subpáginas. Para la presentación del menú he recurrido al menú Suckerfish Dropdowns, de la página HTML Dog.
Para utilizar este menú tendreis que editar la hoja de estilos de vuestro theme y añadir algo de Javascript dentro del <head> del archivo header.php. Para no extenderme demasiado en cómo desarrollar este menú os remito a que leais el tutorial que os he citado anteriormente.
A modo de ayuda os dejo el código CSS que he utilizado yo para el menú:
/* Navmenu based on "Son of Suckerfish Dropdowns" */#nav ul {background: #000;display: block;height: 35px;list-style: none;padding: 0;}#nav a,#nav a:link,#nav a:visited {color: #FFF;display: block;height: 15px;padding: 10px 0;width: 100px;}#nav a:hover{background: #FF0000;}#nav a:active{background: #FF9900;}#nav li {border-right: 1px solid #5C7794;float: left;text-align: center;}#nav li ul {left: -999em;position: absolute;width: 100px;}#nav li:hover ul,#nav li.sfhover ul {left: auto;}
Y lo siguiente es el código Javascript que hay que incluir en el header.php del theme:
<script type="text/javascript">sfHover = function() {var sfEls =document.getElementById("nav").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=" sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" sfhover\\b"), "");}}}if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Y con esto listo, ya tenemos nuestro menú horizontal.
Muy buen post! Muchas gracias por la info
Te tengo que hacer una pregunta.
Ahora ando liado para crear una lista en el sidebar que me permita tener dos secciones que compartan contenidos. Ejemplo:
Tengo curros por años y por nombres de cliente. Eso me crea la sección madre “trabajos” con dos subsecciones, “años” y “nombre” . El asunto es ¿como hacer que salgan los trabajos anidados en las dos secciones?… ¿alguna pista?
Gracias!!
Respecto a la pregunta de listas anidadas, no tengo ni idea, ten en cuenta que cuando le asignas a una subpagina su pagina madre le asignas sólo UNA SOLA pagina madre, quiero decir que de esta manera no podrias asignar la pagina de un trabajo a dos paginas madre, pero me imagino q alguna manera habrá, WP es la ostia, es muy flexible. Felicitaros x vuestro curro, sois unos hachas!
¿Ese menú se podría haber logrado sin JavaScript no?
Anoto la página, espero que haya más artículos.