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.

Un ejemplo de menú de WordPress

Un ejemplo de menú de WordPress

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.

Una web de WordPress no sería gran cosa sin sus menús y submenús ✨ Aprende a crear los tuyos aquí 👇Click to Tweet

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:

Una pantalla volante que muestra dos menús.

Una pantalla «fly-in» que muestra dos menús.

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:

El menú de pie de página de Kinsta.

El menú de pie de página de Kinsta.

También verás menús dentro de una barra lateral si el sitio la utiliza:

Un ejemplo de navegación en la barra lateral.

Un ejemplo de navegación en la barra lateral.

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.

La pantalla del menú de WordPress.

La pantalla del menú de WordPress.

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:

El enlace de los menús de WordPress.

El enlace de los menús 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:

El menú desplegable de selección.

El menú desplegable de selección.

Si decides crear un nuevo menú, dale un nombre y revisa la sección Configuración del menú:

La sección "Ajustes del menú".

La sección «Ajustes del menú».

Hay muchas casillas de verificación aquí, pero tienes que tomar dos decisiones principales:

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:

El menú acordeón de los elementos del menú.

El menú acordeón de los elementos del menú.

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:

Arrastrar y soltar elementos en la sección de la estructura del menú.

Arrastrar y soltar elementos en la sección de la estructura del menú.

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:

Desplegar un elemento del menú.

Desplegar un elemento del menú.

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 panel de opciones de pantalla.

El panel de opciones de pantalla.

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:

El meta box de enlaces personalizados.

El meta box de enlaces personalizados.

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:

El plugin Max Mega Menu.

El plugin Max Mega Menu.

Una vez instalado y activado, encontrarás un nuevo panel de Mega Menu dentro de WordPress:

El enlace de las ubicaciones de los menús dentro de WordPress.

El enlace de las ubicaciones de los menús dentro de WordPress.

Si miras la pantalla de Ubicaciones del Menú, notarás que hay más personalizaciones disponibles para ti:

La pantalla de ubicaciones del menú para el Max Mega Menu.

La pantalla de ubicaciones del menú para el Max Mega Menu.

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:

La pantalla de Temas de Menú en Max Mega Menu.

La pantalla de Temas de Menú en Max Mega Menu.

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:

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ú:

Registro de menús en WordPress.

Registro de menús en WordPress.

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.

Tu menú de WordPress es una herramienta esencial para conseguir un alto ranking de búsqueda y mantener a los visitantes en el sitio. 👀 Aprende a mejorar la funcionalidad del tuyo con esta guía 👇Click to Tweet

Cómo mejorar tu menú de WordPress

Como esta sección es avanzada, haremos algunas suposiciones antes de continuar:

¿Necesitas un alojamiento rápido, fiable y totalmente seguro para tu sitio web de comercio electrónico? Kinsta proporciona todo esto y un soporte de clase mundial 24/7 de expertos en WooCommerce. Consulta nuestros planes

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.

El generador de plantillas de plugins de WordPress.

El generador de plantillas de plugins de WordPress.

Cuando estés listo, crea y sube tu plugin a WordPress:

Un nuevo plugin instalado en WordPress

Un nuevo plugin instalado en 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:

Pestañas sin rellenar dentro del meta box de los autores.

Pestañas sin rellenar dentro del meta box de los autores.

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.

La meta caja del autor, poblada de usuarios

La meta caja del autor, poblada de usuarios

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
}
El cuadro meta de los Autores terminado dentro de WordPress.

El cuadro meta de los Autores terminado dentro de WordPress.

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.


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 28 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.