Tutorial de WordPress: menú personalizado para publicaciones o páginas en la barra lateral
Esta publicación es para usted que administra un sitio de WordPress que tiene mucho contenido, posiblemente muchas páginas estructuradas en jerarquía, y desea una mejor navegación fuera del menú principal. Para ayudar a navegar por el sitio, un menú personalizado relacionado con la publicación actual será de gran ayuda. El problema de colocar un widget de menú en la barra lateral (o donde quieras) es que la barra lateral es común. En esta publicación, aprenderemos cómo mostrar un menú personalizado adicional en la barra lateral, al permitir que las publicaciones, páginas o tipos de publicaciones personalizadas elijan un menú.
Agregue el código a continuación en su tema functions.phpo dentro de su código de complemento.
Crear menús en WordPress es fácil y puede usar el widget Menú para mostrar un menú en la barra lateral. El problema es que la barra lateral es global y se mostrará el mismo menú en todas partes. ¿Qué sucede si desea que se muestren menús específicos en páginas específicas? También aprenderá cómo puede asegurarse de que las páginas secundarias hereden el menú elegido. De esa manera, solo necesita seleccionar el menú en la página principal. Todas las subpáginas también mostrarán el mismo menú sin necesidad de editarlas todas.
El primer paso es crear un metabox en publicaciones o páginas donde tengamos la opción de elegir un menú. Usamos la función add_meta_box()y decidimos para qué tipos de publicaciones queremos mostrarla.
add_action('add_meta_boxes', function() {
add_meta_box('metabox-sidebar-menu', __('Sidebar Menu', 'txtdomain'), 'awp_sidebar_menu_metabox_callback', ['post', 'page']);
});Ajuste el código anterior al título y los tipos de publicación que desee. El ejemplo anterior agregará el metabox tanto a las publicaciones como a las páginas. El tercer parámetro, lo que he llamado awp_sidebar_menu_metabox_callback, es la función responsable de representar el contenido del metabox. Vamos a definir eso a continuación. Esto es lo que tendremos que hacer en nuestro metabox:
function awp_sidebar_menu_metabox_callback($post) {
// Get all menus
// Get the current saved menu, if set
// Output HTML with a select showing all menus, and mark the currently saved one as selected
}Podemos obtener una matriz con todos los menús guardados en WordPress con wp_get_nav_menus(). En cuanto a obtener el menú elegido actual, almacenamos el menú elegido como una publicación meta awp_sidebar_menu(llámelo como quiera), y simplemente buscaremos el valor en función de la corriente $postque se nos proporciona en la función metabox. Guardaremos los ID de menú porque eso es todo lo que necesitamos para mostrar un menú. Y luego generamos HTML para una selección que recorre los menús. La salida HTML del metabox realmente depende de usted, el siguiente es un ejemplo. También he incluido la funcionalidad nonce por seguridad.
En la salida HTML estoy imprimiendo una etiqueta. Si no hay menús guardados en WordPress, simplemente mostrará un párrafo. De lo contrario, se genera una selección con ID de menú como valores y nombres de menú como etiqueta. También estoy agregando una opción vacía para permitir que las publicaciones no muestren un menú. Estoy usando la función de ayuda de WordPress [selected](https://developer.wordpress.org/reference/functions/selected/)()para manejar el marcado de la opción guardada actual como seleccionada.
Si edita una publicación o página, debería ver el metabox en la parte inferior, mostrando su selección. ¡Impresionante! Sin embargo, en este punto, actualmente no guardará su elección de menú cuando guarde la publicación. Ese es el siguiente paso.
Usamos el gancho save_postpara crear una función que guarde cualquier elección que hayamos agregado en nuestro metabox. El save_postgancho se activa cada vez que se guarda o actualiza una publicación. Primero revisaremos los nonces (si no está seguro de qué son los nonces, consulte esta guía de WordPress sobre los nonces ). Luego verificamos dos veces si el usuario puede actualizar las publicaciones y actualizamos nuestra meta de publicación con la opción.
add_action('save_post', function($post_id) {
if (!isset($_POST['awp_sidebar_menu_nonce']) || !wp_verify_nonce($_POST['awp_sidebar_menu_nonce'], 'awp_sidebar_menu_metabox_nonce')) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
update_post_meta($post_id, 'awp_sidebar_menu', $_POST['awp-sidebar-menu']);
});Ahora, cuando actualice las publicaciones, también guardará su elección de menú.
Y eso es todo por la parte de elección de puesto. El siguiente paso es generar el menú si se seleccionó un menú.
Estoy agregando la salida en la barra lateral, pero puede generarla en cualquier parte de las plantillas de su tema. Solo necesitamos un gancho predefinido o definir el nuestro. Como ejemplo, estoy agregando un gancho personalizado en la parte superior de la barra lateral, para poder crear una función enganchada a esto.
Simplemente puede llamar wp_nav_menu()directamente a la plantilla, pero recomiendo crear un enlace personalizado en su lugar porque agregaremos bastante código y puede parecer desordenado.
En mi tema, edito sidebar.phpy justo antes dynamic_sidebar()de que se llame a la barra lateral (donde se agregan los widgets), agrego mi enlace personalizado con do_action()un nombre de pila. Puedes llamarlo como quieras, pero debe ser único dentro de WordPress. Así que al menos antepóngalo con algo único para usted.
Ahora podemos volver a functions.php, definir una función vinculada awp_before_sidebary su salida se mostrará en la barra lateral antes de los widgets. La función utilizará etiquetas condicionales de WordPress para verificar si actualmente estamos mostrando una sola publicación o página. Y si es así, buscaré nuestra publicación meta. Si se configuró el meta de la publicación, generamos el menú llamando [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()y proporcionando el ID del menú guardado como su menuparámetro.
Debe ajustar el HTML alrededor del menú para que encaje con el resto del contenido. En el código anterior, envuelvo el menú en el mismo HTML en el que se envuelven todos los widgets en la barra lateral para que el estilo del widget del tema se aplique a nuestro menú personalizado.
¡Eso es todo! Cada vez que elija un menú en una publicación o página, el menú aparecerá encima de la barra lateral cuando vea esa publicación o página.
Sin embargo, podemos dar un paso más. Si desea que las páginas secundarias muestren el mismo menú de la barra lateral establecido en cualquiera de los principales, siga leyendo.
Esta función adicional tiene sentido si tiene muchas páginas en una jerarquía o un tipo de publicación personalizada con la jerarquía activada. Sería demasiado engorroso editar cada página secundaria y elegir el mismo menú. En ese caso, sería mejor elegir el menú en la página principal y dejar automáticamente que todas las subpáginas "hereden" esa opción de menú. Si alguna subpágina elige otro menú, ese menú se mostrará en lugar del "heredado" una vez.
Dentro de nuestra función vinculada a awp_before_sidebar, agregaremos un fragmento de código, dentro de la verificación si estamos viendo una sola publicación o página:
Lo que hace el código anterior si no se encontró ningún menú en la página actual es buscar a todos los padres con [get_post_ancestors](https://developer.wordpress.org/reference/functions/get_post_ancestors/)(). Esta función devuelve una matriz de ID de publicaciones principales ordenadas primero por el elemento principal más cercano. Si la página no tiene padres (por ejemplo, si es una publicación), se devuelve una matriz vacía. Y si hay algún padre, revisamos a cada padre uno por uno y verificamos si han configurado nuestro meta de publicación. Si se encuentra uno, saldremos del recorrido de los padres y $sidebar_menuse establecerá y el menú se mostrará más adelante con wp_nav_menu().
¡Y eso es todo por la funcionalidad de "herencia"!