Incorporación de Menús en Temas de WordPress

Contenido del curso

Comenzar con WordPress

Armar estructura del Theme

Contruir vistas

Personalizar el Loop de WordPress

Extra

Cierre del curso

31
Fundamentos de WordPress: Creación de Catálogo de Productos
02:16 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:51

Incorporación de Menús en Temas de WordPress

Curso de WordPress Práctico

Clase 17 de 31

Clase 17 / 31

Recursos

¿Cómo incorporar un menú en un tema de WordPress?

Incorporar un menú en un tema de WordPress puede parecer desafiante al principio, pero con las instrucciones adecuadas, el proceso se simplifica notablemente. Esta guía te llevará paso a paso para registrar, configurar e imprimir un menú usando funciones nativas de WordPress y adaptando estilos para que se integren perfectamente en tu tema.

¿Cómo registrar una localización para el menú?

El primer paso para añadir un menú a tu tema es registrar una localización para el menú. Esto se logra utilizando la función register_nav_menus. Al registrar una localización de menú, estás creando un "espacio" en tu tema donde podrás mostrar un menú. Esta localización será visible en el panel de administración de WordPress.

Aquí tienes un fragmento de código que debes incluir en tu archivo functions.php de tu tema:

function register_my_menu() {
    register_nav_menus(
        array(
            'main_menu' => __('Menú Principal')
        )
    );
}
add_action('init', 'register_my_menu');

¿Cómo crear y asignar menús desde el administrador de WordPress?

Una vez que la localización para el menú ha sido registrada, es momento de crear y gestionar tus menús desde el administrador de WordPress. Sigue estos pasos:

Navega a la sección de Apariencia > Menús en el dashboard de WordPress.
Crea un nuevo menú:
- Asigna un nombre al menú, como "Menú Principal".
- Añade páginas, enlaces personalizados o categorías al menú según desees.
- Asegúrate de asignar el menú creado a la localización que registraste (en este caso, main_menu).

¿Cómo imprimir el menú en tu tema?

Para mostrar el menú en una plantilla de tu tema, como header.php, debes llamar a la función de WordPress wp_nav_menu() y especificar la localización del menú que registraste.

Agrega el siguiente código en el archivo donde deseas que se vea el menú:

<?php
wp_nav_menu(array(
    'theme_location' => 'main_menu',
    'menu_class' => 'mi-menu-clase',
    'container' => 'div',
    'container_class' => 'mi-contenedor-clase'
));
?>

¿Cómo estilizar el menú con clases CSS?

Para que el menú se ajuste a la estética de tu sitio, es esencial aplicar estilos CSS adecuados. La función wp_nav_menu() te permite especificar clases CSS tanto para el <ul> que contiene los elementos del menú como para el contenedor padre.

Por ejemplo, puedes añadir las clases en tu CSS de la siguiente manera:

.mi-menu-clase {
    list-style: none;
    display: flex;
    justify-content: center;
}

.mi-contenedor-clase {
    background-color: #333;
    padding: 10px;
}

Recomendaciones finales

Prueba y revisa: Siempre revisa en varios navegadores para asegurarte de que el menú se ve correctamente.
Usa un Child Theme: Si estás haciendo cambios en un tema padre, considera trabajar en un tema secundario (child theme) para que puedas actualizar el tema padre sin perder tus modificaciones.
Explora más sobre CSS y JavaScript: Aprender más sobre estos lenguajes te ayudará a darle vida y dinamismo al menú, como menús desplegables o animaciones.

Con estos pasos, podrás implementar un menú completamente funcional y personalizado en tu tema de WordPress. ¡No dudes en explorar más y experimentar con diferentes configuraciones para ver cuál se adapta mejor a tus necesidades! A medida que avances, encontrarás que el mundo de WordPress es extenso y lleno de posibilidades apasionantes para desarrollar sitios web únicos y atractivos.

Angel Orellana

Hace 6 años

no me aparece la opcion menu en el panel, alguien sabe porque,tengo el mismo codigo y no lo entiendo

Cristian Ramanzin

Profesor

Hace 6 años

Hola! Deberíamos revisar la función register_nav_menus(). Compartime el código de tu archivo functions.php :)

Juan Aguirre

Company_admin

Hace 6 años

me pasa lo mismo....no me aparece la opcion del menu y el codigo es el mismo del curso

<?php

function init_template(){

add_theme_support('post-thumbnails');
add_theme_support( 'title-tag');

register_nav_menus(
    array(
        'top_menu' => 'Menú Principal'
    )
);

}

function assets(){ wp_register_style('bootstrap','https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', '', '4.4.1','all'); wp_register_style('montserrat', 'https://fonts.googleapis.com/css?family=Montserrat&display=swap','','1.0', 'all'); wp_enqueue_style('estilos', get_stylesheet_uri(), array('bootstrap','montserrat'),'1.0', 'all');

wp_register_script('popper','https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js','','1.16.0', true);
wp_enqueue_script('boostraps', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery','popper'),'4.4.1', true);
wp_enqueue_script('custom', get_template_directory_uri().'/assets/js/custom.js', '', '1.0', true);

}

add_action('wp_enqueue_scripts','assets');

Comentarios (70)70 comentarios

María Sierra

Alfonzo Morales

Emmanuel García

Hace 7 años

Juan Guillermo Perez Cardozo

Hace 5 años

Arlen Elian Ruiz Pedraza

Edgar Moises Valdez Faria

Jose L. Figueroa

Edgar Roquel

Hace 4 años

Cristina Andreani Vera

Hace 3 años

Emma Yendis

Pamela Medina

Marcelo Vinicio Chavarría Ugalde

Fredy A. Yomayuza Colorado

Luis Fernando Morla Mora

Ivan Fuentes González

Emerson Cedeño

Luis Adame Rodríguez

Kenny Poncio

David Fernando Aguirre Rodriguez

Dario Freire

Juan Castro

valentin bustos

Ismael Moya Espín

Oly Graterol

Julian David Alzate Cuervo

Jennifer chiquitica00@gmail.com

Luis Alejandro Vera Hernandez

Javier Paulo Perdomo Tamani

Daniel da Silva Jarque

Comenzar con WordPress

Curso Actualizado

Curso Profesional de WordPress: Profundiza en Taxonomías y Categorías

Gestión y Personalización de Sitios Web con WordPress

Funcionamiento y características principales de WordPress

Estructura de Archivos para Vistas Dinámicas en PHP

Manejo de Hooks y Filtros en PHP para Extender Funcionalidades

Manejo de Librerías y Dependencias en HTML con Funciones Personalizadas

Instalación de Apache y PHP en Windows para Entorno Local

Instalación de WordPress en entorno local paso a paso

Gestión de WordPress: Navegación y Personalización Básica

Gestión de Usuarios y Configuración en WordPress

Gestión de Roles y Permisos de Usuario en WordPress

Armar estructura del Theme

Creación de un Tema Personalizado en WordPress con Visual Studio Code

Integración de Librerías CSS en Proyectos Web

Carga y manejo de librerías en temas de WordPress

Instalación y Personalización de Themes en WordPress

Contruir vistas

Incorporación de Menús en Temas de WordPress

Uso de Widgets en WordPress para Personalizar Contenido

Creación de Widgets en WordPress y su Inserción en el Footer

Gestión de Contenidos Personalizados en WordPress

Uso de Open Golpes para Gestión de Contenido Web

Creación de vistas personalizadas en WordPress con PHP y Gutenberg

Creación de Vistas Personalizadas en WordPress con PHP

Creación de la Página Principal en WordPress

Personalizar el Loop de WordPress

Creación de Post Type Personalizado en WordPress

Creación de un Loop Personalizado en WordPress

Extra

Selección de Plugins en WordPress: Compatibilidad y Mantenimiento

Instalación de Plugins en WordPress: Métodos y Herramientas

Creación de un Plugin de Modo Oscuro en WordPress

Creación de Página 404 Personalizada en WordPress

Cierre del curso

Fundamentos de WordPress: Creación de Catálogo de Productos

Incorporación de Menús en Temas de WordPress