Creando sitios con WordPress desde 2005

Recibe GRATIS nuestros trucos, tutoriales, ofertas y promociones.

Añadiendo un menú superior

añadiendo un nuevo menú superior en wordpress

También es importante contar con un menú superior que apunte a páginas de wordpress o a categorías (según necesidades y/o gustos) y nosotros ya tenemos el nuestro.

Para incluirlo he creado un archivo al que he llamado menu.php y le he añadido este código html:

<div id="menu">
<ul>
<li><a href="http://www.blogalizate.com">inicio</a></li>
<li><a href="/sobre-nosotros/">sobre nosotros</a></li>
<li><a href="/que-hacemos/">qué hacemos</a></li>
<li><a href="/nuestros-trabajos/">nuestros trabajos</a></li>
<li><a href="/precios/">precios</a></li>
<li><a href="/contactanos/">contáctanos</a></li>
</ul>
</div>
<!-- /menu -->

después he editado el archivo header.php y le he añadido el siguiente include de wordpress:

<?php include(TEMPLATEPATH . '/menu.php'); ?>

con ello lo que hacemos es que aparezca el menú en todas las páginas de nuestro wordpress.

Seguimos…

Palabras relacionadas:

Sobre el autor

Roberto Miralles
@blogalizate

Soy diseñador web en el estudio de desarrollo web blogalizate, que comparto con Mercedes Romero, y estoy especializado en WordPress, con el que trabajo cada día desde que me levanto, hasta que me acuesto. Cada vez que un cliente me propone un proyecto web, siempre [...]

Leer la bío completa de Roberto Miralles

Lee más artículos de Roberto Miralles en el blog »

Comentarios

Hay 4 comentarios.

  • 25.11.2011

    nada más? sin estilo? y los css?

  • 26.11.2011
    Roberto dice:

    No, claro, faltaría aplicarle los estilos. Este post debería tener una segunda parte explicando como añadirlos, pero la falta de tiempo me lo impidió en su momento.

    Puedes ver los estilos aquí:

    http://www.blogalizate.com/wp-content/themes/blogalizate/style.css

    Y estos serían los estilos aplicados al menú actual (26/11/2011)

    /* MENU SUPERIOR
    ==================================================== */
    #menu { width:960px; height:30px; font-size:16px; background:#ff6000; margin:-20px auto 0 auto;}
    #menu ul { list-style:none; padding-top:3px; }
    #menu ul li { float:left; margin-right:30px;}
    #menu ul li a {color:#fff; text-decoration:none;}
    #menu ul li a:hover {color:#000; text-decoration:none;}

    Si necesitas que te los explique, dímelo y con gusto lo haré.

    Saludos y gracias por tu interés.

  • 16.12.2012
    zuccu dice:

    Hola, y en caso de que el menu sea más complejo, tenéis algún ejemplo de menús desplegables

    gracias

Escribe tu comentario