Una guía detallada para crear y personalizar un menú de WordPress

Un sitio web de WordPress no sería gran cosa sin sus menús y submenús. Personalizar esos menús a su gusto desde WordPress también es sencillo. Como tal, su menú de WordPress es una herramienta de «primera línea» para obtener un alto ranking de búsqueda y mantener a los visitantes en el sitio.

Las pantallas dedicadas dentro de WordPress desmienten cuán complejos pueden ser sus menús. También puede mostrar menús en varias ubicaciones de su sitio. Si tiene las habilidades de codificación, puede personalizar su menú de WordPress con posibilidades casi infinitas.

Para esta publicación, le brindaremos una guía detallada para crear un menú de WordPress. También le mostraremos cómo aprovechar la funcionalidad y mejorarla de diferentes maneras.

La anatomía de un menú de WordPress

Para los no iniciados, un menú de WordPress es a menudo una colección de enlaces (incluidos los menús desplegables). Es una sencilla pieza de funcionalidad que no es más que una “vértebra” en la columna vertebral de su sitio web.

Entraremos en dónde verá los menús en un sitio web con más detalle en la siguiente sección. Por ahora, sepa que pueden caber en cualquier lugar donde desee exhibirlos. Es posible que solo tenga algunas opciones preseleccionadas (basadas en áreas de widgets). Sin embargo, en un sentido técnico, un menú puede ir a cualquier parte.

Por supuesto, un menú de WordPress es fundamental para navegar por un sitio web. Si tiene un menú de navegación claro y definido, esto ayudará a los usuarios a moverse por su sitio y mantendrá baja su tasa de rebote.

También sirven para otro propósito: sus menús ayudan con la optimización de motores de búsqueda (SEO). La optimización de un menú de WordPress para SEO se trata más de qué omitir que de incluir. Para empezar, puede eliminar elementos, como nubes de etiquetas, y mantener baja la cantidad de enlaces que incluye.

Si bien Google le permite agregar hasta 250 enlaces en una página, mantener alto su «valor de enlace» es esencial. Como tal, reducir el número de enlaces externos le será de gran utilidad a largo plazo.

Un sitio web de WordPress no sería gran cosa sin sus menús y submenús ✨ Aprenda a crear el suyo propio aquí 👇Haz clic para tuitear

Los diferentes tipos de estructuras de menú de WordPress

Como ya comprenderá, según las necesidades de su aplicación, puede optar por diferentes estructuras de menú de WordPress.

Los menús de encabezado, por ejemplo, son los más comunes porque se ocupan de la navegación del sitio principal. A menudo, también verá menús más pequeños sobre la navegación principal, ya que este es un lugar excelente para los íconos de las redes sociales, las barras de búsqueda y más.

El sitio web del socio de Kinsta SAU / CAL tiene un menú «fly-in» que incluye enlaces de navegación y sociales:

Este menú muestra que hay más casos de uso para un menú de WordPress que navegar por un sitio. Usando la funcionalidad incorporada de WordPress (más sobre esto más adelante), puede crear un menú para casi cualquier cosa que necesite.

Tan popular como la navegación del encabezado es el pie de página. A menudo utilizará esta área para repetir su 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 para sus productos y servicios:

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

Si bien no verá la navegación principal aquí en muchos casos, es un lugar tradicional para enlaces sociales, archivos de publicaciones de blogs y mucho más.

Cómo crear un menú personalizado de WordPress (3 métodos)

La creación de un menú de WordPress es un proceso sensato, independientemente de su nivel de experiencia. Hay tres formas principales de hacer el trabajo: utilice la funcionalidad incorporada de WordPress; instale un complemento adecuado o ensucie sus manos con el código.

A continuación, le mostraremos cómo crear un menú de WordPress utilizando los tres enfoques.

1. Utilice la funcionalidad incorporada de WordPress para crear su menú

WordPress tiene herramientas integradas para ayudarlo a crear un menú. Una pantalla dedicada dentro del administrador de WordPress será familiar para todos, excepto para los usuarios más nuevos.

Por supuesto, usar la funcionalidad nativa para crear su menú de WordPress tiene numerosos beneficios. Para empezar, tiene total compatibilidad con su sitio. Además, puede crear sus menús utilizando una interfaz familiar y herramientas nativas.

Para llegar, dirígete al Apariencia> Menús página dentro de WordPress:

Esta pantalla se divide en algunas secciones diferentes. En la parte superior, encontrará la opción de seleccionar un menú actual o crear uno nuevo:

Si decide crear un nuevo menú, asígnele un nombre y consulte la Configuración del menú sección:

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

• Agregue páginas de nivel superior al menú automáticamente. «Nivel superior» aquí significa páginas que crearía dentro de WordPress que no son hijos de otras páginas. Por ejemplo, una publicación de blog no es una página de nivel superior porque tendrá una página de archivo principal en muchos casos (p. Ej. /Blog). Por otro lado, una página de contacto suele ser de nivel superior porque normalmente no tendrá una página principal.
• La ubicación del menú. Cada tema tendrá sus ubicaciones de menú. A menos que modifique los archivos principales de su tema, los desarrolladores del tema han codificado estas ubicaciones de menú. Algunos temas pueden permitirle personalizarlos a través de su configuración.

Una vez que esté listo, haga clic en el Crear menú botón. La pantalla se actualizará y mostrará que estás en tu nuevo menú. A continuación, eche un vistazo al lado izquierdo de la pantalla:

Esta pantalla enumera todas las publicaciones, páginas, taxonomías y otros activos vinculables en su sitio. Usted crea su menú marcando las casillas a la izquierda, luego haciendo clic en el Agregar al menú botón.

Eso los moverá a la sección central del Menús pantalla:

Aquí, puede arrastrar y soltar elementos del menú en su lugar. Si hace clic en la flecha de expansión junto a cada elemento, también puede establecer una etiqueta para su elemento de menú o eliminarlo:

Una vez que haces clic Guardar menú, eres bueno para ir. Sin embargo, si expande el menú Opciones de pantalla en la parte superior de la pantalla, hay más que puede hacer con su menú de WordPress:

los Elementos de la pantalla grupo le permite mostrar cuadros de meta del menú en la barra lateral izquierda. En contraste, el Mostrar propiedades de menú avanzadas grupo muestra destinos de enlace, descripciones y clases de CSS para los elementos de la lista.

Hay un aspecto más del Menús pantalla digna de mención. los Enlaces personalizados El cuadro le permite establecer un enlace de su elección, en lugar de una página predefinida en su sitio:

Esta opción es cómo puede agregar enlaces de redes sociales a su menú de WordPress. La plataforma extraerá el ícono correcto según el sitio que seleccione, lo que le dará la oportunidad de obtener logotipos bien mostrados para los sitios que elija.

2. Utilice un complemento para crear su menú personalizado de WordPress

La solución inmediata para agregar funcionalidad a WordPress es a través de complementos. La sección anterior ha explicado por qué la opción nativa de WordPress es casi todo lo que necesita, pero los complementos pueden ampliar esa funcionalidad.

Existe la duda de si necesitaría un complemento dedicado (y adicional) para crear un menú de WordPress, aunque hay muchas buenas razones para hacerlo. Para empezar, a menudo creará un menú basado en un estilo al que no puede acceder con la configuración predeterminada. Los diseños específicos con capacidad de respuesta, los «mega menús» y más están disponibles a través de complementos.

Además, puede crear menús con un editor dedicado y elegir entre plantillas preestablecidas en muchos casos. Junto con amplias opciones de personalización, tiene una solución «sin código» que proporcionará un menú de WordPress que funciona para su sitio.

Por ejemplo, el complemento Max Mega Menu no ofrece sorpresas en lo que puede lograr:

Una vez que esté instalado y activado, encontrará un nuevo Mega menú panel dentro de WordPress:

Si miras el Ubicaciones del menú pantalla, notará que hay más personalizaciones disponibles para usted:

También puede aplicar temas de menú y editarlos con un alcance similar al de algunos de los mejores creadores de páginas del mercado:

Hay mucho más en lo que podríamos profundizar aquí, aunque estaríamos repitiéndonos. Le recomendamos que consulte nuestra publicación anterior sobre los complementos del menú de WordPress. Entramos en detalles sobre cómo elegir el complemento adecuado para usted y cómo usarlo.

3. Escriba código para crear su menú personalizado de WordPress

Codificar su propio menú de WordPress es una forma confiable de lograr su objetivo para los valientes (o si es un desarrollador que está creando un nuevo tema de WordPress). Por supuesto, no va a abrir un editor de código día a día para agregar un menú. Para eso, usará las herramientas nativas de WordPress (o tal vez un complemento).

Dicho esto, aprender a codificar un menú de WordPress es un requisito vital si desea desarrollar temas. Hay cuatro partes para el éxito:

• Registre su menú.
• Muestra el menú de WordPress en la interfaz.
• Muestre contenido adicional dentro de su menú o sus elementos.
• Defina una devolución de llamada.

Asumiremos que eres hábil con un editor de código, tienes un entorno de desarrollo en el que trabajar y tus habilidades son perfectas. Si aún no tiene un tema con el que trabajar, puede usar las opciones predeterminadas de WordPress o elegir uno de nuestra lista de temas de WordPress más rápidos.

Cuando esté listo, querrá abrir el tema functions.php expediente. Tenga en cuenta que esto es diferente del archivo general de WordPress del mismo nombre. Aquí, debe registrar su menú. En otras palabras, tienes que decirle a WordPress qué mostrar en el Apariencia> Menús página. Para hacer esto, usa 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 le dice al Administrar ubicaciones pestaña dentro de WordPress para mostrar dos menús: Menú de encabezado y Otro menú:

A continuación, debe mostrar su menú usando la función wp_nav_menu (). Agregará esto al archivo de plantilla que corresponda con el lugar donde le gustaría mostrar el menú. En nuestro caso, vamos con el encabezado, por lo que agregaremos el siguiente código a nuestro tema header.php expediente:

wp_nav_menu( array( 'theme_location' => 'header' ) );

Podría ser que este código esté envuelto en un if declaración, junto con algunos de sus otros menús, por lo que querrá seguir las convenciones que encuentre.

En este punto, puede trabajar con el menú en WordPress como cualquier otro. Sin embargo, es posible que también desee considerar agregar contenido adicional a los elementos de su menú. Por ejemplo, puede expandir la matriz definida para incluir etiquetas HTML que se mostrarán en la salida:

wp_nav_menu(
  array(
    'menu' => 'primary',
    'link_before' => '',
    'link_after' => '',
  )
);

Su tarea final aquí es definir una devolución de llamada. De forma predeterminada, WordPress muestra un menú completo cuando no se encuentra el especificado. Como alternativa, WordPress mostrará un menú de páginas cuando no se seleccione ningún menú personalizado. Si esta no es la acción que desea, puede establecer un parámetro diferente para el theme-location argumento y también agregue un fallback_cb argumento:

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 comprenda cómo crear un menú de WordPress, puede comenzar a mejorar la funcionalidad. Veremos esto en nuestra sección final para crear un cuadro de meta de menú personalizado para WordPress.

Su menú de WordPress es una herramienta de «primera línea» para obtener un alto ranking de búsqueda y mantener a los visitantes en el sitio. 👀 Aprenda cómo mejorar su funcionalidad con esta guía 👇Haz clic para tuitear

Cómo mejorar su menú de WordPress

Debido a que esta sección es avanzada, haremos algunas suposiciones antes de continuar:

• Sabes cómo crear un menú de WordPress usando PHP.
• Sus habilidades de PHP son lo suficientemente buenas para seguir junto con algunos temas avanzados.
• Sabes cómo registrar e inicializar un complemento de WordPress.

Está más allá del alcance de este artículo, pero puede usar el Generador de plantilla de complemento de WordPress para crear una nueva plantilla de complemento estandarizada.

Cuando esté listo, cree y cargue su complemento en WordPress:

A continuación, navegue hasta la carpeta del complemento y abra el archivo principal. Aquí, agregue 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 metabox dentro del administrador de WordPress. Hay algunos argumentos a los que querrá hacer referencia dentro de la documentación oficial. También usamos el filtro nav_menu_meta_box_object () porque no hay acción dentro del nav-menus.php archivo para enganchar. Esta declaración determina si la función agrega un metabox de un elemento de menú para un tipo de objeto. Cuando el filtro se ejecuta, add_meta_box registra el metabox 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 el cuadro 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 de menú actual, mientras $walker almacena una nueva instancia del Walker_Nav_Menu_Checklist objeto. Eso creará la lista HTML de elementos del menú.

A partir de aquí, tenemos que determinar la pestaña activa en el metabox personalizado. Para hacer esto, establecemos el valor de $current_tab, trabajando dentro de los puntos suspensivos establecidos en el bloque de código anterior.

Estamos usando dos pestañas aquí, pero puede agregar tantas como necesite:

$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 agregará muchas propiedades al $authors objeto:

$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 una matriz de $user objetos seleccionados por los parámetros especificados. los who forzará a WordPress a consultar la base de datos para los usuarios que tienen privilegios de escritura.

También el $admins array almacenará una serie de autores, mientras que $removed_args almacenará una lista de variables de consulta que se eliminarán.

Ahora puede imprimir el marcado de metabox. Para hacer eso, construyamos las etiquetas y los enlaces de las pestañas.

<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="https://kinsta.com/blog/wordpress-custom-menu/<?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="https://kinsta.com/blog/wordpress-custom-menu/<?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>

Recuerde asignar los nombres de clase, las ID y los atributos de datos correctos a los elementos del metabox; de lo contrario, el menú no funcionará como se esperaba.

Ambos add_query_arg y remove_query_arg funciones establecen valores específicos de la pestaña para el authorarchive-tabs variable y elimine las variables innecesarias.

En este punto, tenemos un cuadro meta con pestañas definidas:

Nuestro siguiente paso es crear el contenido HTML de las pestañas.

Creación del contenido HTML para las pestañas de Meta Box

Querrá seguir el código de la sección anterior dentro del custom_menu_meta_box() función. Para crear el contenido, utilice lo siguiente dentro del <div> etiqueta 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 usando tres argumentos: $items, $depth, y $r – todo requerido.

los $items array almacena una serie de usuarios administradores. los array_map() La función aplica la función wp_setup_nav_menu_item () a $admins y agrega propiedades de elementos de menú a los elementos de la matriz.

A partir de aquí, podemos agregar los toques finales.

Agregar un botón Enviar

La mayor parte del metabox personalizado está completo, aunque todavía necesitamos agregar un Enviar y un icono de «ruleta» de procesamiento.

Aquí hay un pequeño fragmento de código que puede colocar inmediatamente después del bloque anterior:

<p class="button-controls wp-clearfix">
	<span class="list-controls">
		<a href="https://kinsta.com/blog/wordpress-custom-menu/<?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, puede agregar casi cualquier funcionalidad a sus menús! Tenga en cuenta que también hay una esencia pública del complemento en GitHub que está disponible para descargar de forma gratuita.

Resumen

Un menú de WordPress es un aspecto crucial de su sitio. Debido a esto, la plataforma ofrece un panel nativo y poderoso que le permitirá personalizar todos los menús de su sitio. De todos modos, eso no proporcionará todo lo que necesita de forma predeterminada.

Varias opciones de pantalla lo ayudan a agregar etiquetas CSS y más. Además, la instalación de un complemento le permitirá convertir sus menús nativos en mega menús y trabajar con una funcionalidad mejorada para que el suyo sea más receptivo (entre otras facetas). La codificación también es una posibilidad, y aunque es una tarea desafiante para un codificador novato, es algo que puede armar en el espacio de una tarde.

¿Desea personalizar su menú de WordPress y, de ser así, qué enfoque está eligiendo? ¡Comparta sus pensamientos y opiniones en la sección de comentarios a continuación!