Para los no iniciados definir y menús en WordPress puede parecer algo complejo, pero realmente no lo es. Los menús se definen en el archivo functions.php, y existen dos funciones distintos para hacerlo, dependiendo de si vas a crear uno o varios.
Cuando queramos crear uno solo:
function registrar_mi_menu() {
register_nav_menu('nav-menu',__( 'Menú de navegación' ));
}
add_action( 'init', 'registrar_mi_menu' );Cuando queramos crear varios:
function registrar_mis_menus() {
register_nav_menus(
array(
'nav-menu' => __( 'Menú de navegación' ),
'menu-lateral' => __( 'Menú lateral' ),
'footer-menu' => __( 'Menú footer' )
)
);
}
add_action( 'init', 'registrar_mis_menus' );Muy simple: Hay que dar una denominación y un nombre al menú. la denominación servirá para mostrar el menú y el nombre para administrarlo.
Una vez hecho esto el menú está casi listo. Lo último es indicarle al tema dónde queremos que aparezcan los menús. Por ejemplo, el menú de navegación por lo general está en el archivo header.php, así que tendremos que abrirlo con nuestro editor (yo recomiendo Sublime Text) y poner lo siguiente donde queramos que se muestre el menú:
<?php wp_nav_menu (array ('theme_location' => 'nav-menu')); ?>Todo lo que necesitamos es recordar la denominación que hemos proporcionado al Menú de Navegación y ponerlo en el parámetro ‘theme_location’.
Realmente esta función tiene más parámetros, los cuales paso a mostrar a continuación con su valor por defecto.
<?php $defaults = array( 'theme_location' => '', 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth' => 0, 'walker' => '' ); wp_nav_menu( $defaults ); ?>
Parámetros de wp_nav_menu
theme_location
(String) (Opcional) Es la denominación del menú definido en el archivo functions.php. Debe estar registrado en register_nav_menus() con el fin de ser seleccionado por el usuario.
Por defecto: nada
menu
(string) (opcional) Acepta, en este orden, id, slug o nombre del menú a mostrar.
Por defecto: nada
container
(string) (opcional) Dentro de qué elemento se engloba el menú. Admite div y nav. Para no englobarlo en nada, usar false.
Por defecto: div
container_class
(string) (opcional) Atributo class del container establecido antes.
Por defecto: nada
container_id
(string) (opcional) Atributo id del container establecido antes.
Por defecto: nada
menu_class
(string) (opcional) Atributo class del elemento ul que engloba al menú. Es posible establecer múltiples clases separadas por espacios.
Por defecto: menu
menu_id
(string) (opcional) Atributo id del elemento ul que engloba al menú. Por defecto será menu-{menu slug}.
Por defecto: menu-{menu slug}
echo
(boolean) (opcional) Si lo que queremos es guardar el menú en una variable, establecemos este valor en 0.
Por defecto: true
fallback_cb
(string) (opcional) ¿Qué pasa si el menú que estamos definiendo no existe? Que la función aquí definida se llamará. Por defecto, wp_page_menu. false para no llamar a nada.
Por defecto: wp_page_menu
before
(string) (opcional) Texto antes del <a>
Por defecto: nada
after
(string) (opcional) Texto después del </a>
Por defecto: nada
link_before
(string) (opcional) Texto antes del texto del enlace
Por defecto: nada
link_after
(string) (opcional) Texto después del texto del enlace
Por defecto: nada
items_wrap
(string) (opcional ) Formato de la cadena de una expresión con sprintf. Incorpora otros parámetros: %1$s es el valor de «menu_id», %2$s es el valor de «menu_class», y %3$s el valor de la lista de items. Podemos omitir un token para que no aparezca.
Por defecto: <ul id=’%1$s’ class=’%2$s’>%3$s</ul>
depth
(número) (opcional) Niveles de jerarquía incluidos en el menú. Por defecto, 0, que implica a todos los submenús. -1 rompe la jerarquía y muestra todos los menús y submenús en un menú simple no jerárquico.
Por defecto: 0
walker
(objeto) (opcional) Objeto walker a usar (debe ser un objeto, no un string).
Por defecto: new Walker_Nav_Menu
Terminando
Para finalizar este post, voy a poner los codigos del menú de esta página:
Archivo functions.php
function mytheme_setup() {
register_nav_menus(
array(
'top_menu' => __( 'Top Menu' )
)
);
}
add_action( 'init', 'mytheme_setup' );Archivo header.php
<?php
wp_nav_menu( array(
'theme_location' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>Lo cual genera el siguiente código HTML:
<ul id="menu-menu-navegacion" class="nav navbar-nav">
<li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-4">
<a title="Inicio" href="http://www.ejavier.es/">Inicio</a>
</li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23">
<a title="Sobre mí" href="http://www.ejavier.es/sobre-mi/">Sobre mí</a>
</li>
<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-10">
<a title="Blog" href="http://www.ejavier.es/blog/">Blog</a>
</li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52">
<a title="Contacto" href="http://www.ejavier.es/contacto/">Contacto</a>
</li>
</ul>Esta información (y más) se puede conseguir en el Codex de WordPress.
Lo mejor que puedes hacer si te ha ayudado este post es compartirlo en tus redes sociales.
Un saludo y hasta el siguiente post.