SummArg | Cursos y recursos para webmasters

Clase 6: el archivo header.php y los menús en WordPress

En la clase 3 hablamos un poco sobre el código básico que debe ir en el archivo header.php, el cual incluye DOCTYPE, HTML, metas, charset, lenguaje, etc. Además se vinculan las plantillas de estilo y cualquier script que necesitemos cargar entre etiquetas <head>.

Toda página necesita tener un título para ser identificada. Vamos a colocar el nuestro utilizando la función bloginfo(). Dicha función es de uso frecuente en la construcción de themes WordPress y los parámetros mas utilizados (entre otros) son:

bloginfo(‘name’) = Devuelve el nombre del blog (se modifica desde Ajustes > General).
bloginfo(‘description’) = Devuelve la descripción del blog (se modifica desde Ajustes > General).
bloginfo(‘site_url’) = Devuelve el directorio en donde WP está instalado.
bloginfo(‘stylesheet_url’) = Devuelve la ruta a la plantilla de estilos.
bloginfo(‘template_url’) = También puede utilizarse ‘template_directory’, devuelve la ruta al directorio del theme.

Siguiendo con el título, si bien ya estuvimos viendo condicionales, hoy necesitamos profundizar un poquito mas en el tema. En PHP la estructra de un condicional es de la siguiente manera:

<?php
 if (condición) {
 Código a ejecutar si la condición es verdadera
 }
 elseif (otra condición) {
 Condición a ejecutar si otra condición es verdadera
 else {
 Código a ejecutar si las condiciones previas no son verdaderas
 }
?>

Entonces con esto presente pasaremos a elaborar un código utilizando conditional tags, que son etiquetas cuya finalidad es ayudarnos a construir condicionales según sección que se está mostrando.

Nuestro condicional debe decir:

“Si estamos en el inicio de página (is_home) entonces que muestre el nombre del blog, imprimimos ‘ | ‘ y luego la descripción del blog.

Si estamos en una categoría (is_category), entonces imprimir el título de la misma, imprimimos ‘ | ‘ y el nombre del blog.

Si estamos en una entrada (is_single) o en una página (is_page), entonces mostrar el título de la entrada, imprimimos ‘ | ‘ y el nombre del blog.

Si ninguna condición es verdadera, entonces imprimir el título que corresponda (utilizaremos wp_title()).”

<title><?php if (is_home () ) { echo bloginfo('name'); echo ' | '; bloginfo('description'); }
 elseif ( is_category() ) { single_cat_title(); echo ' | ' ; echo bloginfo('name'); }
 elseif (is_single() || is_page()) { single_post_title(); echo ' | ' ; echo bloginfo('name'); }
 else { wp_title('',true); } ?></title>

Otra función que debemos colocar en nuestro header.php es wp_head(), un hook (gancho) que debe ir entre etiquetas <head></head> y que es utilizado por WordPress para colocar links a recursos y código en general que necesita la plataforma o cualquiera de los plugins que nosotros vayamos instalando. Dicha función tiene su equivalente para el pié de página, llamado wp_footer(), y son de caracter obligatorios si pretendemos el correcto funcionamiento de nuestra plataforma.

Se coloca de la siguiente manera:

<head>
<?php wp_head(); ?>
</head>

Aprovechando esta oportunidad, recordemos que en la Clase 3 colocamos la ruta a nuestro logo, en el header.php, de la siguiente manera:

<div id="logo">
<img src="http://localhost/wp-content/themes/themetaller/images/logo.png" />
</div><!-- end of logo -->

Ahora que tenemos conocimiento de como funciona bloginfo(), podemos aprovechar y ponerlo en práctica. Reemplazaremos la parte de la ruta que corresponde al theme por la función:

<div id="logo">
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" />
</div><!-- end of logo -->

De este modo la imagen se mostrará correctamente sin importar en que dominio se encuentra instalado el theme.

Crear menús con wp_nav_menu()

Finalmente pasaremos a los menús que ahora podemos crear desde el panel de control de forma muy sencilla. Por defecto la función no viene activada, sino que debemos hacerlo desde el functions.php de nuestro theme con register_nav_menu (para registrar un único menú) o con register_nav_menus (múltiples menús).

Necesitamos dos menús, uno para el #menu-top y otro para el #menu. Así que vamos a registrarlos en el functions.php de la siguiente manera:

register_nav_menus( array(
'menu-top' => 'Menu superior',
'menu' => 'Menu principal'
));

Guardamos y ahora en el Escritorio nos dirigimos a Apariencia y veremos que aparece la sección Menús. Creamos dos menús, clickeando en el signo mas en el cuadro derecho. Uno se llamará “Menu Top” y el otro “Menu Principal”.

Luego definimos las ubicaciones de cada menú. En nuestro caso el nombre coincide con la ubicación. Guardamos al finalizar.

Y finalmente les colocamos algo de contenido. En nuestro caso, vamos a copiar la estructura que hicimos en el PSD inicial. Recuerden guardar cada menú luego de colocados los links. Utilicen las cajas de la izquierda (debajo de “Ubicación del tema”) para añadir páginas, categorías o links personalizados.

Para mostrar nuestros menús en la plantilla header.php necesitamos de la función wp_nav_menu(). Recordemos la estructura de nuestros menús dentro del HTML generado en la clase 3.

<ul id="menu-top">
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 <li><a href="#">Link 4</a></li>
 </ul>
 <ul id="menu">
 <li><a href="#">Inicio</a></li>
 <li><a href="#">P&aacute;gina est&aacute;tica</a></li>
 <li><a href="#">Categor&iacute;a</a></li>
 <li><a href="#">Cont&aacute;ctenos</a></li>
 </ul>

Necesitamos reemplazar las listas desordenadas por nuestros menús recién creados. Comenzaremos por borrar nuestra lista con id #menu-top (desde el <ul> de apertura hasta su </ul> de cierre) y reemplazarla por la función wp_nav_menu() con los siguientes parámetros:

<?php wp_nav_menu(
 array(
 'container' => false,
 'items_wrap' => '<ul id="menu-top">%3$s</ul>',
 'theme_location' => 'menu-top'
 )); ?>

Estos parámetros, y muchos otros que podemos utilizar, están explicados en el codex el cual les recomendamos aprender a utilizar por ser la fuente principal de aprendizaje para cualquier desarrollador de themes y plugins.

Container nos permite definir el tipo de contenedor en que se coloca al menu, permite elegir entre div, nav y false, el cual deshabilita la función (fue nuestra elección. Items_wrap nos permite indicarle al menú las características que tendrá la etiqueta que envuelva al menú y Theme_location nos permite seleccionar el menú que colocaremos en esta posición (definido en el functions.php).

Ahora haremos lo mismo con el menú principal.

<?php wp_nav_menu(
 array(
 'container' => false,
 'items_wrap' => '<ul id="menu">%3$s</ul>',
 'theme_location'=> 'menu',
 )); ?>

Dentro de uno de los items del menú, en nuestro caso de Blog, añadiremos algunas categorías o páginas hijas.

Para que funcione correctamente, utilizaremos un poco de jQuery, librería que podemos descargar desde jQuery.com. En el archivo functions.php, hacia el final, añadimos:

/* Mi jQuery */
function my_init_method() {
 if (!is_admin()) {
 wp_deregister_script( 'jquery' );
 wp_register_script( 'jquery', '/wp-content/themes/themetaller/scripts/jquery.min.js');
 wp_enqueue_script( 'jquery' );
 }
}
add_action('init', 'my_init_method');

Colocaremos el archivo jquery.min.js en nuestra carpeta scripts, y luego añadimos dentro de las etiquetas <head> las siguientes líneas:

<script type='text/javascript'>
$(document).ready(function() {
 $("#menu ul").css({display: "none"});
 $("#menu li").hover(function(){
 $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(300);
 },function(){
 $(this).find('ul:first').css({visibility: "hidden"});
 });
});
</script>

Y en nuestro CSS eliminamos las líneas antiguas que hacían referencia a #menu y las reemplazamos por estas:

/* Menu desplegable */
#menu {
float:left;
width: 940px;
margin: 0;
padding:0px;
height:35px;
background-image:url(images/menu_bg.png);
background-repeat: repeat-x;
background-color: #7ec5ff;
position:relative;
z-index:300;
list-style-type:none;
}
#menu ul {
list-style-type:none;
}
#menu a {
float:left;
display:block;
text-decoration:none;
color:#fff;
font-weight:bold;
padding: 10px 25px 10px 10px;
border-right: 1px solid white;
}
#menu a:hover {
color:#fff;
background: #8ed6ff;
}
#menu li {
float:left;
position:relative;
}
#menu ul {
position:absolute;
display:none;
width:160px;
top: 35px;
left: -10px;
}
#menu ul a {
float:left;
background: #7ec5ff;
border: 1px solid white;
border-top:none;
}
#menu li ul{
border-top: 1px solid white;
}
#menu li ul a {
width:150px;
height:auto;
}
#menu ul ul {
top:auto;
}
#menu li ul ul {
margin:0px 0 0 10px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul {
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul {
display:block;
}

Ahora el nuevo menú debería estar funcional.

Demo | Descargar ThemeTaller | Clase 6 (1291)

Volver al temario del taller

 

Dejar un comentario

  1. Muy buen aporte, estoy deseando que publiques los demás.

    Estoy creando un tema con WordPress y estoy algo atascado.
    En la página principal, me falta añadir los iconos sociales de ‘Me gusta’ y que me dé los resultados de la búsqueda al estilo blogger.

  2. Información Bitacoras.com…

    Valora en Bitacoras.com: En la clase 3 hablamos un poco sobre el código básico que debe ir en el archivo header.php, el cual incluye DOCTYPE, HTML, metas, charset, lenguaje, etc. Además se vinculan las plantillas de estilo y cualquier script que nece…..

  3. elmajaron

    Muy bueno, me ha alegrado el día ver una nueva lección, muy buen trabajo, gracias.

  4. me doy por vencido jamás aprenderé

  5. La verdad que no entiendo como descargar ese bendito jQuery !
    Entro a la página y los links de descarga solo me llevan a un código, y no sé si será el código del script o qué cosa, pero no tengo idea de cómo guardarlo.
    No puedo seguir con mi tema hasta que alguien me diga el link y los pasos a seguir para descargar y/o guardar el script.
    PD: nunca usé este script y por eso ni idea de cómo se descarga.
    Espero respuesta.

  6. Creo que lo logré, abrí los dos links de la página de descarga del jQuery y guardé uno como “jquery.min.js” (el comprimido o de código corto) y el otro como “jquery.js” (el no comprimido o código largo) y ya funciona bien mi menú. jaj
    Y Nekko pude hacer lo que dice la clase, vos me habías dicho que capaz se me complicaba, pero lo entendí.
    Muchas gracias y sigue así!

  7. Nekko

    Es que los conocimientos previos para hacer un theme de WordPress cada día se han elevado mas… de ahí que veo la necesidad de sacar nuevos talleres. Pasando a lo tuyo, efectivamente al colocar “download jQuery” verás un código que no es mas que el framework en sí mismo. Guardá ese archivo desde tu navegador con el nombre jquery.js o jquery.min.js si estás usando la versión minified.
    Saludos!

  8. Nekko

    Excelente! Muchas gracias

  9. Y acerca del problema de que estaba desordenado mi “Menu Top” lo que hice fue descargar los archivos de esta clase, y en “style.php” me di cuenta que me había faltado introducir un propieda para el Mnu Top y ya lo solucioné.
    Saludos y gracias por responder!

  10. andrea_11

    Estoy creando mi propio tema, y tengo una duda sobre los menus creados con la función wp_nav_menu(). ¿Es posible que muestre la imagen destacada de cada post perteneciente al menu? Me explico, quiero que muestre mi lista de post y junto con cada post que muestre su thumbnail.

    Gracias y muy buen aporte!!!

  11. Nekko

    La verdad es que no se me ocurre como hacerlo con wp_nav_menu(), si llego a saber de algo lo traigo para acá ;).

  12. Bassluna

    Hola, te felicito por tu tutorial! solo un detalle, quise descargar el archivo pero me marca que no existe…
    ThemeTaller | Clase 6 (200) —> Download does not exist!
    Saludos!

  13. Evelyn

    Hola Nekko. Estoy siguiendo este ariculo y he observado que mi menú continua desordenado, en bloque, no en linea. Y el texto color celeste. Copie y pegue la hoja de estilos de la clase, y ni caso…será que falta una propiedad en la hoja de la clase??

    Muchas gracias y totales!

  14. Si esta bien el tutorial probado y funcionando. Pero la verdad tenia un incoveniente con otro tema que estaba desarrollando y era que ya estaba trabajando con otra version de JQUERY la 1.41 y algo. y presentaba conflicto.

    Seria genial poder establecer los menu pero que se haya realizado solo con CSS para realizar la interactiviada y dejar de lado el JQUERY ,

    Gracias y Suerte XD

  15. madman

    Hola!!! ¿Cómo se construiría el menú pero siendo un select?? Sabría alguno orientarme respecto a crearlo así¿? Gracias!

  16. fernando

    hola , mi nombre es fernando. les pido el favor de que me ayuden, soy inextperto en esto wordezpress es lo mismo que framework o algo parecido es?
    2, tengo instalado en paquete word.. en mi dominio pero como hago para crear el menu de este tutorual, he intentado copiar ell contenido de la descarga y por via ftp lo colocol y nada. de nada.. he intentano sobre escribir los archivos de la carpeta raiz con esta descarga y nada de nada. alquie me puede orientar para que me funcione, los menu desde este maravilloso tutorial sale eroro Fatal error: Call to undefined function get_header() in /home/u944366006/public_html/wordpress/index.php on line 1

  17. […] Clase 6: el archivo header.php y los menús en WordPress […]

  18. […] Clase 6: el archivo header.php y los menús en WordPress […]

  19. Eduardo

    No puedo hacer andar el menú. Andaba hasta que le cargue el jQuery.

  20. […] Clase 6: el archivo header.php y los menús en WordPress […]

  21. […] Clase 6: El archivo header.php y los menús en WordPress. […]

  22. LOGAN WHITE

    Como agrego audio a los links del menú de WordPress cuando se pase el cursor sobre ellos?

  23. LOGAN WHITE

    Como le pongo audio a los links cuando se pase el cursor sobre ellos.
    Alguien sabe como?
    Saludos,

  24. No me aparecen las paginas y las categorías en el menú. No se si el fallo esta en el archivo de CSS.

  25. solucionado

  26. Kanon

    wenas, estoy probando a hacer un tema siguiendo este tutorial, pero no me sale el menu, no se en q puedo fallar, pq reviso codigo y esta igual, es mas, cargo el tema de tus archivos y no sale tampoco, no se cual puede ser el fallo, voy a probar a empezar de 0 y ver que puede ser

  27. Kanon

    Desaparece justo al poner

    false,
    ‘items_wrap’ => ‘%3$s’,
    ‘theme_location’=> ‘menu’,
    )); ?>

  28. hola, soy nuevo en esto del wordpress y me han encargado hacer un sitio, ya he conseguido realizar algunos cambios significativos en mi plantilla pero lo que no he podido lograr es suplantar la descripción del header.

    Lo que quiero hacer es que en lugar de que me aparezca la descripción del sitio me aparezca el titulo de la pagina dentro del header, alguien podría ayudarme? gracias.

  29. Ricardo

    Saludos, gracias por toda la lección! estoy aprendiendo a desarrollar mi propia plantilla desde cero y ajustarla a wordpress.

    Hasta esta clase del tema 6 no he tenido problemas y he probado todo correcto, pero tengo el siguiente problema…

    NO me muestra la sección del menu en el dashbord, probé cargar la del ejemplo y ahí si me lo muestra, pero en la mia no, revise el archivo funtion.php y header y esta todo igual al ejemplo, así que no tengo idea de porque no se me muestra la sección de editar el menú en el dashbord sección “Apariencia” solo me salen las opciones de “Temas, personalizar y editor” alguna sugerencia de porque no se muestra el menu en el escritorio de wp?

    Gracias y saludos.

  30. Ricardo

    Luego de revisar por 2 semanas el código de arriba y abajo, de pies a cabeza, cada estructura de mi propia plantilla, que no es muy diferente a la que se esta usando de ejemplo (salvo dimensiones, logo, encabezados,foorter e imagenes) logre descubrir porque en el dashbord no me aparecía la en “Apariencias” la opción de personalizar y/o crear menús, y es que el archivo php le hacia falta una letra (s) yo tenia “function.php” en lugar de “functions.php”

    agregue la s y listo, ahora si podre continuar con el resto de los temas 😛

  31. la entrada principal de mi pagina tiene un video y publicida si embargo no se encuentra centrada debido a la estructura del tema, me podria decir que debo hacer para centrar todo en la pantalla.

  32. Gracias, me ha servido para los metatags de geolocalización. Estaba un poco perdido, pero ahora me lo has aclarado.

    Saludos.

Dejar un comentario