Insertar un menú extra en cualquier zona

Insertar un menú extra en cualquier zona

 

Esta entrada será corta, ya que lo que vamos a tratar es algo bastante simple.

En algún momento o en algún proyecto podemos tener la necesidad de querer tener un menú extra en una zona de la página web el cual no está contemplado en nuestro theme.

La solución es bastante sencilla se trata de editar el archivo functions.php de nuestro theme. Lo recomendable a la hora de instalar un theme es tener un tema hijo (child theme), esto lo trataremos en otra entrada más detalladamente, hay algunos themes que ya te crean este tema hijo, si editamos el archivo functions.php del tema padre, o del tema en caso de que no hayamos creado el tema hijo, corremos el riesgo de que en alguna actualización del theme este archivo se «machaque» con el de la actualización y perdamos todo el código que hayamos insertado.

El código en cuestión nos crea un shortcode, con el cual lo podremos insertar en la zona que queramos de nuestra página web, nos inserta el menú y luego nosotros seremos los encargados de darle estilo con unas líneas de CSS.

Código en functions.php

El código es relativamente sencillo, solo tenemos que editar nuestro archivo functions.php, lo podemos encontrar en Apariencia >> Editor. En caso de que no nos aparezca significa que tenemos desactivado dicho editor, el cual lo podemos activar modificando el archivo wp-config.php en la raíz de nuestra instalación accediendo o bien a través de nuestro hosting o bien a través de Ftp.

El código en cuestión es:

function menu_function($atts, $content = null) {
extract(
shortcode_atts(
array( 'name' => null, ),
$atts
)
);
return wp_nav_menu(
array(
'menu' => $name,
'echo' => false
)
);
}
add_shortcode('menu', 'menu_function');

Una vez tenemos este código en nuestro archivo functions.php ya podemos insertar un menú extra en la zona que queramos de nuestra página web.

Que hace el código?

El código nos crea un shortcode para añadir un menú, con el cual podemos insertar el menú en la zona deseada.

Crear el menú

Antes de insertar el menú lógicamente tenemos que crear el menú, para ello lo creamos en Apariencia >> Menús, con los elementos deseados. Al cual le asignamos un nombre descriptivo para poder localizarlo. Una vez creado dicho menú ya podemos pasar a insertar el menú en cualquier lugar.

Insertando el menú

Con todo ya preparado, podemos insertar el menú a través del shortcode el cual es:

[menu name=”nombre_de_nuestro_menu”]

Y con este shortcode nos aparecerá el menú donde lo hayamos insertado.

El menú aparecerá sin estilo, con unas líneas de CSS podemos darle el estilo acorde con el diseño de nuestra pagina web.

 

No Comments

Post A Comment