Comenzar con WordPress

1

Desarrollo de Aplicaciones Robustas con WordPress

2

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

3

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

4

Funcionamiento y características principales de WordPress

5

Estructura de Archivos para Vistas Dinámicas en PHP

6

Manejo de Hooks y Filtros en PHP para Extender Funcionalidades

7

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

8

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

9

Instalación de WordPress en entorno local paso a paso

10

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

11

Gestión de Usuarios y Configuración en WordPress

12

Gestión de Roles y Permisos de Usuario en WordPress

Armar estructura del Theme

13

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

14

Integración de Librerías CSS en Proyectos Web

15

Carga y manejo de librerías en temas de WordPress

16

Instalación y Personalización de Themes en WordPress

Contruir vistas

17

Incorporación de Menús en Temas de WordPress

18

Uso de Widgets en WordPress para Personalizar Contenido

19

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

20

Gestión de Contenidos Personalizados en WordPress

21

Uso de Open Golpes para Gestión de Contenido Web

22

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

23

Creación de Vistas Personalizadas en WordPress con PHP

24

Creación de la Página Principal en WordPress

Personalizar el Loop de WordPress

25

Creación de Post Type Personalizado en WordPress

26

Creación de un Loop Personalizado en WordPress

Extra

27

Selección de Plugins en WordPress: Compatibilidad y Mantenimiento

28

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

29

Creación de un Plugin de Modo Oscuro en WordPress

30

Creación de Página 404 Personalizada en WordPress

Cierre del curso

31

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

Incorporación de Menús en Temas de WordPress

17/35
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:

  1. Navega a la sección de Apariencia > Menús en el dashboard de WordPress.
  2. 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:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

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.

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.

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

https://gwst.eu