<Hola> algo común en WordPress es que agregamos y agregamos plugins, no está mal, ya que uno de los objetivos de WordPress es facilitarnos la modificación de nuestro sitio web. Pero en ocasiones un plugins no nos permite modificarlo al 100% o tiene muchos elementos complicados, por eso veremos cómo pasar una menú creado en html a un menú dinámico con WordPress sin plugins.
Nuestro objetivo es que el menú nos quede de la siguiente manera, este menú inicial está creado con html y no nos permite modificarlo mediante el panel administrativo.
Tenemos el siguiente código html
<ul class=”nav col-12 col-md-auto mb-2 justify-content-center mb-md-0″>
<li><a href=”#” class=”nav-link px-2″>Home</a></li>
<li><a href=”#” class=”nav-link px-2″>Exclusivo</a></li>
<li><a href=”#” class=”nav-link px-2″>Blog</a></li>
<li><a href=”#” class=”nav-link px-2″>Contacto</a></li>
</ul>
Para la creación de menús en WordPress se necesita la siguiente funciones wp_nav_menu, nosotros utilizamos los siguientes parámetros:
theme_location
Este parámetros nos permite relacionar la ubicación del menú en los archivos del template con el menú seleccionado. Por ejemplo este menú está ubicado en el archivo header.php pero también podríamos colocarlo en el footer.php por mencionar alguno.
menu_class
Las clases CSS que se coloquen aquí es lo que aparecerá en la etiqueta <ul>
container
El valor por defecto es la etiqueta <div> pero lo podemos cambiar por la etiqueta <nav> o cualquiera que necesitemos
container_class
Este tiene relación con el anterior parámetro, nos permite asignarles clases CSS a la etiqueta anterior.
Por el momento hagamos una pausa para agregar unos parámetros personalizados, en el caso de este sitio, necesitamos agregar clases en las etiquetas <li> y <a>, para ello agregamos las siguientes funciones al final del archivo functions.php
//código php
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter(‘nav_menu_css_class’, ‘add_additional_class_on_li’, 1, 3);
function add_additional_class_on_a($classes, $item, $args)
{
if (isset($args->add_a_class)) {
$classes[‘class’] = $args->add_a_class;
}
return $classes;
}
add_filter(‘nav_menu_link_attributes’, ‘add_additional_class_on_a’, 1, 3);
//fin del código php
Con esto ya podemos agregar los siguientes parámetros:
add_li_class
Nos permite colocar clases en la etiqueta <li>
add_a_class
Nos permite colocar clases a las etiquetas <a> del menú
Aquí dejo los parámetros el código completo que agregamos en header.php
<?php
wp_nav_menu(
array(
//locación del menú
‘theme_location’ => ‘header-menu’,
//Clases que aparecerá en el ul
‘menu_class’ => ‘nav col-12 col-md-auto mb-2 justify-content-center mb-md-0’,
//Contenedor del menú por defecto es un div
‘container’ => ‘nav’,
//Clase que aparecerá en el contenedor del menú
‘container_class’ => ”,
//Se agrega una clase a las listas
‘add_li_class’ => ”,
//función agregada en functions.php, se agrega una clase a los enlaces
‘add_a_class’ => ‘nav-link px-2’,
),
);
?>
Con esto ya creamos un menú dinámico, ahora podemos ir a la creacion de menu en el panel de administración de WordPress
Una vez dentro de esta página nos vamos directamente a la sección que se encuentra a la derecha
Colocamos el nombre del menú y el lugar donde se verá el menú, le damos clic al botón “Crear menú” y una vez que termine de cargar lo modificamos.
Como podemos ver en la imagen anterior, agregamos los elementos que necesitemos, agregamos las páginas de Inicio, Contacto y el Blog, en automático nos aparecerá en la sección que se encuentra a lado derecho.
Ahora solo nos falta acomodar, por lo general el menú de Contacto siempre va a lo ultimo, por eso vamos a realizarle un clic y sin soltar arrastramos hacia abajo
Perfecto, ahora ya quedo todo, guardamos los cambios que hicimos, ahora sí, veremos los resultados finales.
</Saludos>