Así está quedando mi proyecto. Estoy haciendo una copia del portal del rolling stones, ya que este está hecho en WordPress, también utiliza React.js.
Comenzar con WordPress
Desarrollo de Aplicaciones Robustas con WordPress
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Incorporación de Menús en Temas de WordPress
17/35Recursos
¿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.
Aportes 44
Preguntas 27
Ordenar por:
Todos los argumentos de wp_nav_menu
Espero les sea de utilidad, recuerden que el respeto de estándares es fundamental 😃
a,h1,h2,h3,h4,li,p,span,ul{
font-family:Montserrat
}
.attachment-large{
max-width:100%;
height:auto!important
}
h1{
margin:50px 0;
font-weight: 900;
}
ul{
margin-bottom: 0px;
}
header{
background-color:#1c3643
}
header nav li{
list-style:none;
display:inline-block;
padding:0 15px
}
header nav li a{
color:#fff;
text-transform:uppercase
}
header nav li a:hover{
color:#fff
}
footer{
background-color:#1c3643;
padding:10px 0
}
footer{
color:white
}
footer p{
margin:0;
color:#fff
}
.lista-productos h2{
font-weight:900
}
.lista-productos h4{
font-weight:400
}
.lista-productos h4 a{
color:#000
}
No entendí, Al registrar puso el nombre “Menú principal” pero al actualizar en el navegador solo apareció el nombre “Menú” entre los items de Apariencia. Que es lo que hace exactamente register_nav_menu ?
IMPORTANTE!
si realizaste el ejercicio anterior (Crear un tema hijo) recuerda que para continuar con el curso debes volver a activar el tema Platzigifts, de lo contrario el menú no se te va a visualizar.
Cómo funciona el sistema de grilla de Bootstrap
no me aparece la opcion menu en el panel, alguien sabe porque,tengo el mismo codigo y no lo entiendo
¿Se le puede agregar una clase a los elementos <li>?
Ahora mismo el dom quedaría asi:
nav > div > ul > li's
Creo que quedaría más limpio si utilizasemos la propiedad container de la funcion wp_nav_menu que nos permite modificar el elemento que wrappea al ul
<?php
wp_nav_menu([
'theme_location' => 'top_menu',
'menu_class' => 'menu-principal',
'container' => 'nav',
'container_class' => 'container_menu',
]);
?>
El markup resultaría en:
nav > ul > li's
este profesor no me gusta
Por si le pasa a alguien lo mismo que a mí, esta fue la forma como me funcionó la inserción del menú. Tengo instalada la versión de WordPress 6.0.2.
register_nav_menu( ‘top_menu’, ‘Menú Principal’ );
Paso a paso aprendiendo
Agregar al style.css
a,h1,h2,h3,h4,li,p,span,ul{font-family:Montserrat}.attachment-large{max-width:100%;height:auto!important}
h1{margin:50px 0;font-weight: 900;}
ul{margin-bottom: 0px;}
header{background-color:#1c3643}
header nav li{list-style:none;display:inline-block;padding:0 15px}
header nav li a{color:#fff;text-transform:uppercase}
header nav li a:hover{color:#fff}
footer{background-color:#1c3643;padding:10px 0}
footer{color:white}
footer p{margin:0;color:#fff}.lista-productos
h2{font-weight:900}.lista-productos
h4{font-weight:400}.lista-productos
h4 a{color:#000}
agregar en functions.php debajo de add_theme_support('title-tag');:
register_nav_menus(
array (
'top_menu' => 'Menu Principal'
)
);
Actualizar el administrador y entrar en el menu
Crear menu
Añadir elementos
Activar check de Menu Principal
Guardar
Agregar al header.php
<div class="col-8">
<nav>
<?php wp_nav_menu (
array(
'theme_location' => 'top_menu',
'menu_class' => 'menu-principal',
'container_class' => 'container-menu',
)
);
?>
</nav>
</div>
pregunta: en el curso de arquitectura frontend si explican mejor el uso de cada etiqueta y funciones, porque aquí solo puedo seguir los pasos pero no es claro su uso o variables :[
wp_nav_menu() la función para registrar una ubicación de menú
Es una opinión. Considero que al utilizar bootstrap como soporte en la creación del theme deberían explicar el uso de navwalker para el uso de la navegación.
Faltó saber algo así como: “centrar el menú” y colocar efectos On mouse over,
¿Tengo una duda y si quiero agregar una clase a la etiqueta <a> del menu?
¿Como lograria eso con wp_nav_menu?
Hola
Muchachos ya tengo la plantilla de BeTheme pero al momento de subir unos de los temas me sale este error.
Dios pero que basura usar wordpress con php complica mucho la vida. Tan fácil usar react o next, solo tomo el curso para un trabajo. Pero esta horrible todo esto hay demasiadas opciones para mejorar y la incompatibilidad de plugins esta mas que del asco.
que mal que esté tan desactualizado con las versiones de wordpress 6.5.3, todo cambió, por favor una nueva actualización, llegó varios días intentado que aparezca el menú y no lo consigo :'(
Hola alguien tiene el codigo comentado?
Excelente clase profe, gracias.
Para manejar menús en nuestro tema primero debemos registrarlos, lo cual debemos hacer en alguna función que se esté ejecutando en el archivo “functions.php” y luego debemos usarlos en los archivos php que son de renderizado (EJ: header.php).
Para registrar Menús debemos pasarle un arreglo. Las llaves serán los códigos con los que reconoceremos al menú (localización en el tema), y como valor pondremos el nombre como queremos que se le muestre al usuario (Apariencia->Menús->GestionarLugares):
register_nav_menus([
‘codigo_menu_1’ => ‘Mi menú 1’,
‘menu_superior’ => ‘Mi menú superior’
]);
Para renderizar un menú debemos pasarle la localización o código con el que se reconoce el menú, y las clases CSS que se van a usar. Con el siguiente código se renderiza el menú:
wp_nav_menu([
‘theme_location’ => ‘codigo_menu_1’,
‘menu_class’ => ‘menu-principal’,
‘container_class’ => ‘container-menu’
]);
Para renderizar construye un elemento ‘div’ con la clase que pasamos como ‘container_class’ (‘container-menu’), y dentro una lista ‘ul’ con la clase que pasamos como ‘menu_class’ (‘menu-principal’) así:
<div class=“container-menu”>
<ul class=“menu-principal”>
<li>
<a href="#">Inicio</a>
</li>
</ul>
</div>
A mí me aparece:
“Su tema no admite menús de forma nativa, pero puede usarlos en las barras laterales agregando un widget de “Menú de navegación” en la pantalla”
Eh visto este curso como 10 veces y más no le entiendo, je.
Lo malo es que el que sigue se basa en este, pero bueno a verlo otras 10 veces más para entender como poner un menu y todo lo de mas.
arrhe!!
😃
Hola a todos,
No se por que me paso pero al crear el menu me aparecian mas opciones como se ve en el recuadro rojo, cree el menu con la opcion de menu horizontal de escritorio, y posteriormente se habilita una ventana llamada Gestionar ubucaciones (Recuadro azul). en esta ventana de da la opcion de colocar tu menu como principal.
En general me funciono, aunque no se si lo estoy haciendo de la mejor forma. Si pueden retroalimentarme al respecto les agradeceria.
no entiendo la ventaja de worpress sobre tecnologias de front, ew WP y php!
excelente esta parte del menú muy fácil y intuitiva
No me genera el menú y lo hice igual, ayuda por favor:
<?php
function init_template(){
add_theme_support( 'post-thumbnails ');
add_theme_support( 'title-tag ');
register_nav_menus(
array(
'top_menu' => 'Menú Principal'
)
);
}
add_action( 'after_setup_theme ', 'init_template ');
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/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet’, ‘’, ‘1.0’, ‘all’);
wp_enqueue_style('estilos', get_stylesheet_uri(), array('bootstrap', 'montserrat'), '1.1', 'all');
wp_register_script('popper', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js', '', '1.16.0', true);
wp_enqueue_script('bootstraps', '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’);
Cristian: “Te invito que te PASES por la carrera de frontend, para aprender más al respecto”
… Han pasado 84 años…
Chicos hice todo como se indicó en la clase y no me aparecé el menú, al contrario me aparece el menú del curso pasado que hice de wordpress ¿Alguién sabe por qué pasa esto?
Incluso viendo esta situación borre el menú del curso pasado desde Personalizar->Menus y sigue apareciendo.
Gracias, y Saludos.
Gracias por la clase. Perfectamente claro
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?