Añadir un menú personalizable a tu tema de WordPress

por
Tiempo de lectura: 2 minutos

Continuando con el post anterior de crear un tema de WordPress (https://devcodelight.com/?p=6987), ahora vamos a añadir un menú personalizable.

Para ello vamos a ir a header.php y añadimos lo siguiente:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
    <div class="container">
        <a class="navbar-brand" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
        <?php
        wp_nav_menu(array(
            'theme_location' => 'main-menu',
            'menu_class' => 'navbar-nav ml-auto',
            'container' => false,
        ));
        ?>
    </div>
</nav>
<body <?php body_class(); ?>>

Hemos creado el menu llamado main-menu:

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
    <div class="container">
        <a class="navbar-brand" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
        <?php
        wp_nav_menu(array(
            'theme_location' => 'main-menu',
            'menu_class' => 'navbar-nav ml-auto',
            'container' => false,
        ));
        ?>
    </div>
</nav>

Y que además va a permitir personalizarlo desde el propio WordPress.

Ahora vamos a añadir la acción que nos permitirá personalizarlo. Vamos a functions.php y añadimos:

function register_menus() {
    register_nav_menu('main-menu', 'Main Menu');
}
add_action('after_setup_theme', 'register_menus');

Y bien, ahora podremos personalizar nuestro menú:

Podemos mejorar el diseño del menú con los CSS

Post Views: 3

Deja un comentario