Un sitio web de WordPress no sería mucho sin sus menús y submenús. Personalizar esos menús a tu gusto desde WordPress también es sencillo. Como tal, tu menú de WordPress es una herramienta esencial para obtener un alto ranking de búsqueda y mantener a los visitantes en el sitio.
Las pantallas dedicadas dentro de WordPress desmienten lo complejo que pueden ser tus menús. También puedes mostrar los menús en varios lugares de tu sitio. Si tienes conocimientos de codificación, puedes personalizar tu menú de WordPress con posibilidades casi infinitas.
En esta entrada, te ofreceremos una guía en profundidad para crear un menú en WordPress. También te mostraremos cómo tomar la funcionalidad y mejorarla de diferentes maneras.
La anatomía de un menú de WordPress
Para los no iniciados, un menú de WordPress suele ser una colección de enlaces (incluidos los desplegables). Es una pieza sencilla de funcionalidad que no es más que una «vértebra» en la columna vertebral de tu sitio web.
En la próxima sección hablaremos con más detalle de dónde se ven los menús en un sitio web. Por ahora, tienes que saber que pueden caber en cualquier lugar donde quieras mostrarlos. Es posible que solo tengas unas pocas opciones preseleccionadas (basadas en áreas de widgets). Sin embargo, en un sentido técnico, un menú puede ir en cualquier lugar.
Por supuesto, un menú de WordPress es primordial para navegar por un sitio web. Si tienes un menú de navegación claro y definido, esto ayudará a los usuarios a moverse por tu sitio, y mantendrá tu tasa de rebote baja.
También sirven para otro propósito: tus menús ayudan a la optimización de los motores de búsqueda (SEO). La optimización de un menú de WordPress para el SEO tiene que ver más con lo que se deja fuera que con lo que se pone. Para empezar, puedes prescindir de elementos – como las nubes de etiquetas – y mantener bajo el número de enlaces que incluyes.
Aunque Google permite añadir hasta 250 enlaces en una página, es esencial mantener un «valor de enlace» alto. Por ello, reducir el número de enlaces externos te será útil a largo plazo.
Los diferentes tipos de estructuras de menú de WordPress
Como ya debes saber, dependiendo de las necesidades de tu aplicación, puedes optar por diferentes estructuras de menú de WordPress.
Los menús de cabecera, por ejemplo, son los más comunes porque se ocupan de la navegación principal del sitio. A menudo también verás menús más pequeños encima de la navegación principal, ya que es un lugar excelente para los iconos de las redes sociales, las barras de búsqueda, etc.
El sitio web de SAU/CAL, socio de Kinsta, tiene un menú «fly-in» que incluye navegación y enlaces sociales:
Este menú muestra que hay más casos de uso para un menú de WordPress que la navegación de un sitio. Utilizando la funcionalidad incorporada de WordPress (más adelante), puedes crear un menú para casi cualquier cosa que necesites.
Tan popular como la navegación en la cabecera es el pie de página. A menudo se utiliza esta zona para repetir la navegación principal para los usuarios que se desplazan hacia abajo. Además, es un lugar excelente para ofrecer más enlaces basados en el contexto de tus productos y servicios:
También verás menús dentro de una barra lateral si el sitio la utiliza:
Aunque en muchos casos no verás aquí la navegación principal, es un lugar tradicional para los enlaces sociales, los archivos de las entradas del blog y mucho más.
Cómo crear un menú personalizado en WordPress (3 métodos)
Crear un menú en WordPress es un proceso sencillo, independientemente de tu nivel de experiencia. Hay tres maneras principales de hacer el trabajo: utilizar la funcionalidad integrada de WordPress, instalar un plugin adecuado o ensuciarse las manos con el código.
A continuación, te mostraremos cómo crear un menú de WordPress utilizando los tres enfoques.
1. Utiliza la funcionalidad integrada de WordPress para crear tu menú
WordPress tiene herramientas integradas para ayudarte a crear un menú. Una pantalla dedicada dentro de la administración de WordPress será familiar para todos los usuarios, excepto los más nuevos.
Por supuesto, utilizar la funcionalidad nativa para crear tu menú de WordPress tiene numerosas ventajas. Para empezar, tiene una compatibilidad total con tu sitio. Además, puedes construir tus menús usando una interfaz familiar y herramientas nativas.
Para ello, dirígete a la página Apariencia > Menús dentro de WordPress:
Esta pantalla se divide en varias secciones diferentes. En la parte superior, encontrarás la opción de seleccionar un menú actual o crear uno nuevo:
Si decides crear un nuevo menú, dale un nombre y revisa la sección Configuración del menú:
Hay muchas casillas de verificación aquí, pero tienes que tomar dos decisiones principales:
- Añade automáticamente las páginas de nivel superior al menú. Por «nivel superior» se entienden las páginas que se crean en WordPress y que no son páginas secundarias de otras. Por ejemplo, una entrada de blog no es una página de nivel superior porque tendrá una página de archivo principal en muchos casos (por ejemplo, /blog). Por otro lado, una página de contacto suele ser de primer nivel porque no suele tener una página principal.
- La ubicación del menú. Cada tema tendrá sus ubicaciones de menú. A menos que modifiques los archivos principales de su tema, los desarrolladores del tema han codificado estas ubicaciones de los menús. Algunos temas pueden permitirte personalizarlos a través de su configuración.
Una vez que estés listo, haz clic en el botón Crear menú. La pantalla se actualizará y mostrará que estás en tu nuevo menú. A continuación, echa un vistazo a la parte izquierda de la pantalla:
Esta pantalla enumera todas las entradas, páginas, taxonomías y otros activos enlazables de tu sitio. Construye tu menú marcando las casillas de la izquierda y haciendo clic en el botón Añadir al menú.
Eso los moverá a la sección central de la pantalla de Menús:
Aquí puedes arrastrar y soltar los elementos del menú en su lugar. Si haces clic en la flecha de expansión junto a cada elemento, también puede establecer una etiqueta para tu elemento de menú o eliminarla:
Una vez que hagas clic en Guardar menú, ya estás listo. Sin embargo, si expandes el menú de Opciones de Pantalla en la parte superior de la pantalla, hay más cosas que puedes hacer con tu menú de WordPress:
El grupo Elementos de pantalla permite mostrar los meta-cuadros del menú en la barra lateral izquierda. En cambio, el grupo Mostrar propiedades avanzadas del menú muestra los destinos de los enlaces, las descripciones y las clases CSS de los elementos de la lista.
Hay otro aspecto de la pantalla de menús que merece la pena destacar. El cuadro de enlaces personalizados te permite establecer un enlace de tu elección, en lugar de una página predefinida en tu sitio:
Con esta opción puedes añadir enlaces de redes sociales a tu menú de WordPress. La plataforma te sacará el icono correcto en función del sitio que selecciones, dándote la oportunidad de que los logotipos de los sitios que elijas se muestren bien.
2. Utiliza un plugin para crear tu menú personalizado de WordPress
La solución inmediata para añadir funcionalidad a WordPress es a través de los plugins. La sección anterior ha cubierto por qué la opción nativa de WordPress es casi todo lo que necesitas, pero los plugins pueden ampliar esa funcionalidad.
Existe la duda de si es necesario un plugin dedicado (y adicional) para crear un menú en WordPress, aunque hay muchas buenas razones para hacerlo. Para empezar, a menudo harás un menú basado en un estilo al que no puedes acceder bajo la configuración por defecto. Diseños responsivos específicos, «mega menús» y más están disponibles para ti a través de plugins.
Es más, puedes construir menús usando un editor dedicado y elegir entre plantillas preestablecidas en muchos casos. Junto con las amplias opciones de personalización, tienes una solución «sin código» que proporcionará un menú de WordPress que funciona para tu sitio.
Por ejemplo, el plugin Max Mega Menu no ofrece sorpresas en cuanto a lo que puedes lograr:
Una vez instalado y activado, encontrarás un nuevo panel de Mega Menu dentro de WordPress:
Si miras la pantalla de Ubicaciones del Menú, notarás que hay más personalizaciones disponibles para ti:
También puedes aplicar temas de menú y editarlos con un alcance similar al de algunos de los mejores constructores de páginas del mercado:
Podríamos profundizar mucho más aquí, aunque nos estaríamos repitiendo. Te animamos a que eches un vistazo a nuestro post anterior sobre los plugins de menú de WordPress. Entramos en detalles sobre cómo elegir el plugin adecuado para ti y cómo utilizarlo.
3. Escribe el código para crear tu menú personalizado de WordPress
Codificar tu propio menú de WordPress es una forma fiable de lograr tu objetivo para los valientes (o si eres un desarrollador que está creando un nuevo tema de WordPress). Por supuesto, no vas a abrir un editor de código en el día a día para añadir un menú. Para eso, utilizarás las herramientas nativas de WordPress (o quizás un plugin).
Dicho esto, aprender a codificar un menú de WordPress es un requisito vital si quieres desarrollar temas. Existen cuatro puntos para el éxito:
- Registra tu menú.
- Mostrar el menú de WordPress en la parte delantera.
- Mostrar contenido adicional dentro de tu menú o sus elementos.
- Definir una devolución de llamada.
Asumiremos que eres hábil con un editor de código, que tienes un entorno de desarrollo en el que trabajar y que tus habilidades son buenas. Si todavía no tienes un tema con el que trabajar, puedes utilizar las opciones por defecto de WordPress o elegir uno de nuestra lista de temas de WordPress más rápidos.
Cuando estés listo, querrás abrir el archivo functions.php del tema. Ten en cuenta que este es diferente del archivo general de WordPress del mismo nombre. Aquí, necesitas registrar tu menú. En otras palabras, tienes que decirle a WordPress qué mostrar en la página Apariencia > Menús. Para ello, se utiliza la función register_nav_menus():
function register_my_menus() {
register_nav_menus(
array(
'header' => __( 'Header Menu' ),
'other' => __( 'Other Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
Este código indica a la pestaña de Gestión de Ubicaciones dentro de WordPress que muestre dos menús: Menú de Cabecera y Otro Menú:
A continuación, tienes que mostrar tu menú utilizando la función wp_nav_menu(). Añadirás esto en el archivo de la plantilla que corresponda con el lugar donde quieras mostrar el menú. En nuestro caso, vamos a ir con la cabecera, por lo que vamos a añadir el siguiente código al archivo header.php de nuestro tema:
wp_nav_menu( array( 'theme_location' => 'header' ) );
Puede ser que este código esté envuelto en una sentencia if, junto con algunos de sus otros menús, así que querrá seguir las convenciones que encuentres.
En este punto, puedes trabajar con el menú en WordPress como cualquier otro. Sin embargo, también puedes considerar añadir contenido adicional a tus elementos de menú. Por ejemplo, puedes ampliar la matriz definida para incluir etiquetas HTML que se renderizarán en la salida:
wp_nav_menu(
array(
'menu' => 'primary',
'link_before' => '',
'link_after' => '',
)
);
Tu tarea final aquí es definir un callback. Por defecto, WordPress muestra un menú poblado cuando no se encuentra el especificado. Como alternativa, WordPress mostrará un menú de páginas cuando no se seleccione un menú personalizado. Si esta no es tu acción deseada, puedes establecer un parámetro diferente para el argumento theme-location y también añadir un argumento fallback_cb:
wp_nav_menu(
array(
'menu' => 'primary',
// do not fall back to first non-empty menu
'theme_location' => '__no_such_location',
// do not fall back to wp_page_menu()
'fallback_cb' => false
)
);
Una vez que entiendas cómo crear un menú en WordPress, puedes empezar a mejorar su funcionalidad. Veremos esto en nuestra sección final para crear un meta box de menú personalizado para WordPress.
Cómo mejorar tu menú de WordPress
Como esta sección es avanzada, haremos algunas suposiciones antes de continuar:
- Sabes cómo crear un menú de WordPress usando PHP.
- Tus conocimientos de PHP son lo suficientemente buenos como para seguir algunos temas avanzados.
- Sabes cómo registrar e inicializar un plugin de WordPress.
Estás más allá del alcance de este artículo, pero puedes utilizar el generador de plantillas de plugins de WordPress para crear una nueva plantilla de plugin estandarizada.
Cuando estés listo, crea y sube tu plugin a WordPress:
A continuación, navega hasta la carpeta del plugin y abre el archivo principal. Aquí, añade el siguiente código:
/**
* Add menu meta box
*
* @param object $object The meta box object
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*/
function custom_add_menu_meta_box( $object ) {
add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );
return $object;
}
add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);
La función add_meta_box() de WordPress registrará un meta box dentro del admin de WordPress. Hay algunos argumentos que querrás consultar en la documentación oficial. También usamos el filtro nav_menu_meta_box_object() porque no hay ninguna acción dentro del archivo nav-menus.php a la que engancharse. Esta sentencia determina si la función añade la meta caja de un elemento de menú para un tipo de objeto. Cuando el filtro se ejecuta, add_meta_box registra el meta box personalizado.
Definición de una función de devolución de llamada
A continuación, podemos definir una función de devolución de llamada para producir el contenido HTML para la caja meta:
/**
* Displays a metabox for an author menu item.
*
* @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu
*/
function custom_menu_meta_box(){
global $nav_menu_selected_id;
$walker = new Walker_Nav_Menu_Checklist();
...
}
La variable global recuerda el ID del menú actual, mientras que $walker almacena una nueva instancia del objeto Walker_Nav_Menu_Checklist. Eso construirá la lista HTML de los elementos del menú.
A partir de aquí, tenemos que determinar la pestaña activa en el meta box personalizado. Para ello, establecemos el valor de $current_tab, trabajando dentro de la elipsis establecida en el bloque de código anterior.
Aquí estamos usando dos pestañas, pero puedes añadir tantas como necesites:
$current_tab = 'all';
if ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'admins';
} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'all';
}
La siguiente línea obtendrá todos los usuarios con privilegios de escritura y añadirá muchas propiedades al objeto $authors:
$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );
$admins = array();
/* set values to required item properties */
foreach ( $authors as &$author ) {
$author->classes = array();
$author->type = 'custom';
$author->object_id = $author->nickname;
$author->title = $author->nickname . ' - ' . implode(', ', $author->roles);
$author->object = 'custom';
$author->url = get_author_posts_url( $author->ID );
$author->attr_title = $author->displayname;
if( $author->has_cap( 'edit_users' ) ){
$admins[] = $author;
}
}
$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' );
?>
Aquí, get_users devuelve un array de objetos $user seleccionados por los parámetros especificados. El parámetro who forzará a WordPress a consultar la base de datos para los usuarios que tienen privilegios de escritura.
Además, el array $admins almacenará un array de autores, mientras que $removed_args almacenará una lista de variables de consulta a eliminar.
Ahora puedes imprimir el marcado de la meta caja. Para ello, vamos a construir las etiquetas de las pestañas y los enlaces.
<div id="authorarchive" class="categorydiv">
<ul id="authorarchive-tabs" class="authorarchive-tabs add-menu-item-tabs">
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'all', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-all">
<?php _e( 'View All' ); ?>
</a>
</li>
<li <?php echo ( 'admins' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-admins" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'admins', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-admins">
<?php _e( 'Admins' ); ?>
</a>
</li>
</ul>Recuerda asignar los nombres de clase, IDs y atributos de datos correctos a los elementos de la meta caja; de lo contrario, el menú no funcionará como se espera.
Las funciones add_query_arg y remove_query_arg establecen valores específicos para la variable authorarchive-tabs y eliminan variables innecesarias.
En este punto, tenemos una meta caja con pestañas definidas:
Nuestro siguiente paso es construir el contenido HTML de las pestañas.
Construir el contenido HTML para las pestañas del Meta Box
Querrás seguir el código de la sección anterior dentro de la función custom_menu_meta_box(). Para construir el contenido, utiliza lo siguiente dentro de la etiqueta <div> que escribiste en la última sección:
<div id="tabs-panel-authorarchive-all" class="tabs-panel tabs-panel-view-all <?php echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-all" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>
<div id="tabs-panel-authorarchive-admins" class="tabs-panel tabs-panel-view-admins <?php echo ( 'admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-admins" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>En resumen, cada pestaña contiene una lista de casillas de verificación. La función walk_nav_menu_tree() imprime la lista utilizando tres argumentos: $items, $depth, y $r – todos requeridos.
El array $items almacena un array de usuarios administradores. La función array_map() aplica la función wp_setup_nav_menu_item() a $admins y añade las propiedades de los elementos del menú a los elementos del array.
A partir de aquí, podemos añadir los toques finales.
Añadir un botón de envío
La mayor parte de la caja meta personalizada está completa, aunque todavía tenemos que añadir un botón de envío y un icono de procesamiento «spinner».
Aquí hay un pequeño trozo de código que puedes colocar justo después del bloque anterior:
<p class="button-controls wp-clearfix">
<span class="list-controls">
<a href="<?php echo esc_url( add_query_arg( array( 'authorarchive-tab' => 'all', 'selectall' => 1, ), remove_query_arg( $removed_args ) )); ?>#authorarchive" class="select-all"><?php _e('Select All'); ?></a>
</span>
<span class="add-to-menu">
<input type="submit"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e('Add to Menu'); ?>" name="add-authorarchive-menu-item" id="submit-authorarchive" />
<span class="spinner"></span>
</span>
</p>
</div>
<?php
}
Con este conocimiento, puedes añadir casi cualquier funcionalidad a tus menús. Ten en cuenta que también hay un Gist público del plugin en GitHub que está disponible para descargar de forma gratuita.
Resumen
El menú de WordPress es un aspecto esencial de tu sitio. Por ello, la plataforma ofrece un panel nativo y potente que te permitirá personalizar cada menú de tu sitio. Sin embargo, no te proporcionará todo lo que necesitas por defecto.
Varias opciones de pantalla te ayudan a añadir etiquetas CSS y mucho más. Además, la instalación de un plugin te permitirá convertir tus menús nativos en mega menús y trabajar con una funcionalidad mejorada para que el tuyo sea más responsivo (entre otras facetas). La codificación también es una posibilidad, y aunque es una tarea desafiante para un codificador novato, es algo que puedes montar en una tarde.
¿Quieres personalizar tu menú de WordPress, y si es así, qué enfoque vas a adoptar? Comparte tus pensamientos y opiniones en la sección de comentarios más abajo.
Salman Ravoof es desarrollador web autodidacta, escritor, creador y un gran admirador del Software Libre y de Código Abierto (FOSS, Free and Open Source Software). Además de la tecnología, le apasionan la ciencia, la filosofía, la fotografía, las artes, los gatos y la comida. Obtén más información sobre él en su sitio web, y conecta con Salman en X.
Deja una respuesta