La anatom\u00eda de un men\u00fa de WordPress<\/h2>\n
Para los no iniciados, un men\u00fa de WordPress suele ser una colecci\u00f3n de enlaces (incluidos los desplegables<\/a>). Es una pieza sencilla de funcionalidad que no es m\u00e1s que una \u00abv\u00e9rtebra\u00bb en la columna vertebral de tu sitio web.<\/p>\n En la pr\u00f3xima secci\u00f3n hablaremos con m\u00e1s detalle de d\u00f3nde se ven los men\u00fas 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 \u00e1reas de widgets). Sin embargo, en un sentido t\u00e9cnico, un men\u00fa puede ir en cualquier lugar.<\/p>\n Por supuesto, un men\u00fa de WordPress es primordial para navegar por un sitio web. Si tienes un men\u00fa de navegaci\u00f3n claro y definido, esto ayudar\u00e1 a los usuarios a moverse por tu sitio, y mantendr\u00e1 tu tasa de rebote<\/a> baja.<\/p>\n Tambi\u00e9n sirven para otro prop\u00f3sito: tus men\u00fas ayudan a la optimizaci\u00f3n de los motores de b\u00fasqueda (SEO)<\/a>. La optimizaci\u00f3n de un men\u00fa de WordPress para el SEO tiene que ver m\u00e1s 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\u00famero de enlaces que incluyes.<\/p>\n Aunque Google permite a\u00f1adir hasta 250 enlaces en una p\u00e1gina, es esencial mantener un \u00abvalor de enlace<\/a>\u00bb alto. Por ello, reducir el n\u00famero de enlaces externos te ser\u00e1 \u00fatil a largo plazo.<\/p>\n\n Como ya debes saber, dependiendo de las necesidades de tu aplicaci\u00f3n, puedes optar por diferentes estructuras de men\u00fa de WordPress.<\/p>\n Los men\u00fas de cabecera, por ejemplo, son los m\u00e1s comunes porque se ocupan de la navegaci\u00f3n principal del sitio<\/a>. A menudo tambi\u00e9n ver\u00e1s men\u00fas m\u00e1s peque\u00f1os encima de la navegaci\u00f3n principal, ya que es un lugar excelente para los iconos de las redes sociales, las barras de b\u00fasqueda, etc.<\/p>\n El sitio web de SAU\/CAL, socio de Kinsta,<\/a> tiene un men\u00fa \u00abfly-in\u00bb que incluye navegaci\u00f3n y enlaces sociales:<\/p>\n Este men\u00fa muestra que hay m\u00e1s casos de uso para un men\u00fa de WordPress que la navegaci\u00f3n de un sitio. Utilizando la funcionalidad incorporada de WordPress (m\u00e1s adelante), puedes crear un men\u00fa para casi cualquier cosa que necesites.<\/p>\n Tan popular como la navegaci\u00f3n en la cabecera es el pie de p\u00e1gina. A menudo se utiliza esta zona para repetir la navegaci\u00f3n principal para los usuarios que se desplazan hacia abajo. Adem\u00e1s, es un lugar excelente para ofrecer m\u00e1s enlaces basados en el contexto de tus productos y servicios:<\/p>\n Tambi\u00e9n ver\u00e1s men\u00fas dentro de una barra lateral si el sitio la utiliza:<\/p>\n Aunque en muchos casos no ver\u00e1s aqu\u00ed la navegaci\u00f3n principal, es un lugar tradicional para los enlaces sociales<\/a>, los archivos de las entradas del blog y mucho m\u00e1s.<\/p>\n Crear un men\u00fa 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\u00f3digo.<\/p>\n A continuaci\u00f3n, te mostraremos c\u00f3mo crear un men\u00fa de WordPress utilizando los tres enfoques.<\/p>\n WordPress tiene herramientas integradas para ayudarte a crear un men\u00fa. Una pantalla dedicada dentro de la administraci\u00f3n de WordPress ser\u00e1 familiar para todos los usuarios, excepto los m\u00e1s nuevos.<\/p>\n Por supuesto, utilizar la funcionalidad nativa para crear tu men\u00fa de WordPress tiene numerosas ventajas. Para empezar, tiene una compatibilidad total con tu sitio. Adem\u00e1s, puedes construir tus men\u00fas usando una interfaz familiar y herramientas nativas.<\/p>\n Para ello, dir\u00edgete a la p\u00e1gina Apariencia > Men\u00fas <\/strong>dentro de WordPress:<\/p>\n Esta pantalla se divide en varias secciones diferentes. En la parte superior, encontrar\u00e1s la opci\u00f3n de seleccionar un men\u00fa actual o crear uno nuevo:<\/p>\n Si decides crear un nuevo men\u00fa, dale un nombre y revisa la secci\u00f3n Configuraci\u00f3n del men\u00fa<\/strong>:<\/p>\n Hay muchas casillas de verificaci\u00f3n aqu\u00ed, pero tienes que tomar dos decisiones principales:<\/p>\n Una vez que est\u00e9s listo, haz clic en el bot\u00f3n Crear men\u00fa<\/strong>. La pantalla se actualizar\u00e1 y mostrar\u00e1 que est\u00e1s en tu nuevo men\u00fa. A continuaci\u00f3n, echa un vistazo a la parte izquierda de la pantalla:<\/p>\n Esta pantalla enumera todas las entradas, p\u00e1ginas, taxonom\u00edas y otros activos enlazables de tu sitio. Construye tu men\u00fa marcando las casillas de la izquierda y haciendo clic en el bot\u00f3n A\u00f1adir al men\u00fa<\/strong>.<\/p>\n Eso los mover\u00e1 a la secci\u00f3n central de la pantalla de Men\u00fas<\/strong>:<\/p>\n Aqu\u00ed puedes arrastrar y soltar los elementos del men\u00fa en su lugar. Si haces clic en la flecha de expansi\u00f3n junto a cada elemento, tambi\u00e9n puede establecer una etiqueta para tu elemento de men\u00fa o eliminarla:<\/p>\n Una vez que hagas clic en Guardar men\u00fa<\/strong>, ya est\u00e1s listo. Sin embargo, si expandes el men\u00fa de Opciones de Pantalla en la parte superior de la pantalla, hay m\u00e1s cosas que puedes hacer con tu men\u00fa de WordPress:<\/p>\n El grupo Elementos de pantalla <\/strong>permite mostrar los meta-cuadros del men\u00fa en la barra lateral izquierda. En cambio, el grupo Mostrar propiedades avanzadas del men\u00fa <\/strong>muestra los destinos de los enlaces, las descripciones y las clases CSS de los elementos de la lista.<\/p>\n Hay otro aspecto de la pantalla de men\u00fas <\/strong>que merece la pena destacar. El cuadro de enlaces personalizados <\/strong>te permite establecer un enlace de tu elecci\u00f3n, en lugar de una p\u00e1gina predefinida en tu sitio:<\/p>\n Con esta opci\u00f3n puedes a\u00f1adir enlaces de redes sociales a tu men\u00fa de WordPress. La plataforma te sacar\u00e1 el icono correcto en funci\u00f3n del sitio que selecciones, d\u00e1ndote la oportunidad de que los logotipos de los sitios que elijas se muestren bien.<\/p>\n La soluci\u00f3n inmediata para a\u00f1adir funcionalidad a WordPress es a trav\u00e9s de los plugins<\/a>. La secci\u00f3n anterior ha cubierto por qu\u00e9 la opci\u00f3n nativa de WordPress es casi todo lo que necesitas, pero los plugins pueden ampliar esa funcionalidad.<\/p>\n Existe la duda de si es necesario un plugin dedicado (y adicional) para crear un men\u00fa en WordPress, aunque hay muchas buenas razones para hacerlo. Para empezar, a menudo har\u00e1s un men\u00fa basado en un estilo al que no puedes acceder bajo la configuraci\u00f3n por defecto. Dise\u00f1os responsivos espec\u00edficos, \u00abmega men\u00fas\u00bb y m\u00e1s est\u00e1n disponibles para ti a trav\u00e9s de plugins.<\/p>\n Es m\u00e1s, puedes construir men\u00fas usando un editor dedicado y elegir entre plantillas preestablecidas en muchos casos. Junto con las amplias opciones de personalizaci\u00f3n, tienes una soluci\u00f3n \u00absin c\u00f3digo\u00bb que proporcionar\u00e1 un men\u00fa de WordPress que funciona para tu sitio.<\/p>\n Por ejemplo, el plugin Max Mega Menu<\/a> no ofrece sorpresas en cuanto a lo que puedes lograr:<\/p>\n Una vez instalado y activado<\/a>, encontrar\u00e1s un nuevo panel de Mega Menu <\/strong>dentro de WordPress:<\/p>\n Si miras la pantalla de Ubicaciones del Men\u00fa<\/strong>, notar\u00e1s que hay m\u00e1s personalizaciones disponibles para ti:<\/p>\n Tambi\u00e9n puedes aplicar temas de men\u00fa y editarlos con un alcance similar al de algunos de los mejores constructores de p\u00e1ginas del mercado:<\/p>\n Podr\u00edamos profundizar mucho m\u00e1s aqu\u00ed, aunque nos estar\u00edamos repitiendo. Te animamos a que eches un vistazo a nuestro post anterior sobre los plugins de men\u00fa de WordPress<\/a>. Entramos en detalles sobre c\u00f3mo elegir el plugin adecuado para ti y c\u00f3mo utilizarlo.<\/p>\n Codificar tu propio men\u00fa de WordPress es una forma fiable de lograr tu objetivo para los valientes (o si eres un desarrollador que est\u00e1 creando un nuevo tema de WordPress). Por supuesto, no vas a abrir un editor de c\u00f3digo en el d\u00eda a d\u00eda para a\u00f1adir un men\u00fa. Para eso, utilizar\u00e1s las herramientas nativas de WordPress (o quiz\u00e1s un plugin).<\/p>\n Dicho esto, aprender a codificar un men\u00fa de WordPress es un requisito vital si quieres desarrollar temas. Existen cuatro puntos<\/a> para el \u00e9xito:<\/p>\n Asumiremos que eres h\u00e1bil con un editor de c\u00f3digo<\/a>, que tienes un entorno de desarrollo<\/a> en el que trabajar y que tus habilidades son buenas<\/a>. Si todav\u00eda 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\u00e1s r\u00e1pidos<\/a>.<\/p>\n Cuando est\u00e9s listo, querr\u00e1s abrir el archivo functions.php <\/strong>del tema. Ten en cuenta que este es diferente del archivo general de WordPress del mismo nombre. Aqu\u00ed, necesitas registrar tu men\u00fa. En otras palabras, tienes que decirle a WordPress qu\u00e9 mostrar en la p\u00e1gina Apariencia > Men\u00fas<\/strong>. Para ello, se utiliza la funci\u00f3n register_nav_menus()<\/a>:<\/p>\n Este c\u00f3digo indica a la pesta\u00f1a de Gesti\u00f3n de Ubicaciones <\/strong>dentro de WordPress que muestre dos men\u00fas: Men\u00fa de Cabecera <\/strong>y Otro Men\u00fa<\/strong>:<\/p>\n A continuaci\u00f3n, tienes que mostrar tu men\u00fa utilizando la funci\u00f3n wp_nav_menu()<\/a>. A\u00f1adir\u00e1s esto en el archivo de la plantilla que corresponda con el lugar donde quieras mostrar el men\u00fa. En nuestro caso, vamos a ir con la cabecera, por lo que vamos a a\u00f1adir el siguiente c\u00f3digo al archivo header.php <\/strong>de nuestro tema:<\/p>\n Puede ser que este c\u00f3digo est\u00e9 envuelto en una sentencia En este punto, puedes trabajar con el men\u00fa en WordPress como cualquier otro. Sin embargo, tambi\u00e9n puedes considerar a\u00f1adir contenido adicional a tus elementos de men\u00fa. Por ejemplo, puedes ampliar la matriz definida para incluir etiquetas HTML que se renderizar\u00e1n en la salida:<\/p>\n Tu tarea final aqu\u00ed es definir un callback. Por defecto, WordPress muestra un men\u00fa poblado cuando no se encuentra el especificado. Como alternativa, WordPress mostrar\u00e1 un men\u00fa de p\u00e1ginas cuando no se seleccione un men\u00fa personalizado. Si esta no es tu acci\u00f3n deseada, puedes establecer un par\u00e1metro diferente para el argumento Una vez que entiendas c\u00f3mo crear un men\u00fa en WordPress, puedes empezar a mejorar su funcionalidad. Veremos esto en nuestra secci\u00f3n final para crear un meta box de men\u00fa personalizado para WordPress.<\/p>\n\n Como esta secci\u00f3n es avanzada, haremos algunas suposiciones antes de continuar:<\/p>\n Est\u00e1s m\u00e1s all\u00e1 del alcance de este art\u00edculo, pero puedes utilizar el generador de plantillas de plugins de WordPress<\/a> para crear una nueva plantilla de plugin estandarizada.<\/p>\n Cuando est\u00e9s listo, crea y sube tu plugin a WordPress:<\/p>\n A continuaci\u00f3n, navega hasta la carpeta del plugin y abre el archivo principal. Aqu\u00ed, a\u00f1ade el siguiente c\u00f3digo:<\/p>\n La funci\u00f3n add_meta_box()<\/a> de WordPress registrar\u00e1 un meta box dentro del admin de WordPress. Hay algunos argumentos que querr\u00e1s consultar en la documentaci\u00f3n oficial. Tambi\u00e9n usamos el filtro nav_menu_meta_box_object()<\/a> porque no hay ninguna acci\u00f3n dentro del archivo nav-menus.php <\/strong>a la que engancharse. Esta sentencia determina si la funci\u00f3n a\u00f1ade la meta caja de un elemento de men\u00fa para un tipo de objeto. Cuando el filtro se ejecuta, A continuaci\u00f3n, podemos definir una funci\u00f3n de devoluci\u00f3n de llamada para producir el contenido HTML para la caja meta:<\/p>\n La variable global recuerda el ID del men\u00fa actual, mientras que A partir de aqu\u00ed, tenemos que determinar la pesta\u00f1a activa en el meta box personalizado. Para ello, establecemos el valor de Aqu\u00ed estamos usando dos pesta\u00f1as, pero puedes a\u00f1adir tantas como necesites:<\/p>\n La siguiente l\u00ednea obtendr\u00e1 todos los usuarios con privilegios de escritura y a\u00f1adir\u00e1 muchas propiedades al objeto Aqu\u00ed, Adem\u00e1s, el array Ahora puedes imprimir el marcado de la meta caja. Para ello, vamos a construir las etiquetas de las pesta\u00f1as y los enlaces.<\/p>\n Recuerda asignar los nombres de clase, IDs y atributos de datos correctos a los elementos de la meta caja; de lo contrario, el men\u00fa no funcionar\u00e1 como se espera.<\/p>\n Las funciones En este punto, tenemos una meta caja con pesta\u00f1as definidas:<\/p>\n Nuestro siguiente paso es construir el contenido HTML de las pesta\u00f1as.<\/p>\n Querr\u00e1s seguir el c\u00f3digo de la secci\u00f3n anterior dentro de la funci\u00f3n En resumen, cada pesta\u00f1a contiene una lista de casillas de verificaci\u00f3n. La funci\u00f3n walk_nav_menu_tree()<\/a> imprime la lista utilizando tres argumentos: El array A partir de aqu\u00ed, podemos a\u00f1adir los toques finales.<\/p>\n La mayor parte de la caja meta personalizada est\u00e1 completa, aunque todav\u00eda tenemos que a\u00f1adir un bot\u00f3n de env\u00edo <\/strong>y un icono de procesamiento \u00abspinner\u00bb.<\/p>\n Aqu\u00ed hay un peque\u00f1o trozo de c\u00f3digo que puedes colocar justo despu\u00e9s del bloque anterior:<\/p>\n Con este conocimiento, puedes a\u00f1adir casi cualquier funcionalidad a tus men\u00fas. Ten en cuenta que tambi\u00e9n hay un Gist p\u00fablico<\/a> del plugin en GitHub que est\u00e1 disponible para descargar de forma gratuita.<\/p>\n El men\u00fa de WordPress es un aspecto esencial de tu sitio. Por ello, la plataforma ofrece un panel nativo y potente que te permitir\u00e1 personalizar cada men\u00fa de tu sitio. Sin embargo, no te proporcionar\u00e1 todo lo que necesitas por defecto.<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-menu.png\")
Los diferentes tipos de estructuras de men\u00fa de WordPress<\/h2>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/fly-in-menu.png\")
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/kinsta-footer-menu.png\")
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/sidebar-navigation.png\")
C\u00f3mo crear un men\u00fa personalizado en WordPress (3 m\u00e9todos)<\/h2>\n
1. Utiliza la funcionalidad integrada de WordPress para crear tu men\u00fa<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/The-WordPress-Menu-Screen.png\")
<\/a>![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menus-page.png\")
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/create-new-wordpress-menu.png\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-settings.png\")
\n
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-menu-assets.png\")
![\"Arrastrar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-drag-and-drop.png\")
![\"Desplegar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-item-expand.png\")
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/screen-options.png\")
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/custom-links-box.png\")
2. Utiliza un plugin para crear tu men\u00fa personalizado de WordPress<\/h3>\n
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/max-mega-menu.png\")
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/mega-menu-panel.png\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/mega-menu-locations.png\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-themes.png\")
3. Escribe el c\u00f3digo para crear tu men\u00fa personalizado de WordPress<\/h3>\n
\n
function register_my_menus() {\n register_nav_menus(\n array(\n 'header' => __( 'Header Menu' ),\n 'other' => __( 'Other Menu' )\n )\n );\n }\n add_action( 'init', 'register_my_menus' );\n<\/code><\/pre>\n![\"Registro](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/register-menus.png\")
wp_nav_menu( array( 'theme_location' => 'header' ) );\n<\/code><\/pre>\nif<\/code>, junto con algunos de sus otros men\u00fas, as\u00ed que querr\u00e1 seguir las convenciones que encuentres.<\/p>\nwp_nav_menu(\n array(\n 'menu' => 'primary',\n 'link_before' => '',\n 'link_after' => '<\/span>',\n )\n);\n<\/code><\/pre>\ntheme-location<\/code> y tambi\u00e9n a\u00f1adir un argumento fallback_cb<\/code>:<\/p>\nwp_nav_menu(\n array(\n 'menu' => 'primary',\n \/\/ do not fall back to first non-empty menu\n 'theme_location' => '__no_such_location',\n \/\/ do not fall back to wp_page_menu()\n 'fallback_cb' => false\n )\n);\n<\/code><\/pre>\nC\u00f3mo mejorar tu men\u00fa de WordPress<\/h2>\n
\n
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/plugin-boilerplate-generator.png\")
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/install-plugin.png\")
\/**\n * Add menu meta box\n *\n * @param object $object The meta box object\n * @link https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\n *\/\nfunction custom_add_menu_meta_box( $object ) {\n add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );\n return $object;\n}\nadd_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);\n<\/code><\/pre>\nadd_meta_box<\/code> registra el meta box personalizado.<\/p>\nDefinici\u00f3n de una funci\u00f3n de devoluci\u00f3n de llamada<\/h4>\n
\/**\n * Displays a metabox for an author menu item.\n *\n * @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu\n *\/\nfunction custom_menu_meta_box(){\n global $nav_menu_selected_id;\n $walker = new Walker_Nav_Menu_Checklist();\n ...\n}\n<\/code><\/pre>\n$walker<\/code> almacena una nueva instancia del objeto Walker_Nav_Menu_Checklist<\/code>. Eso construir\u00e1 la lista HTML de los elementos del men\u00fa.<\/p>\n$current_tab<\/code>, trabajando dentro de la elipsis establecida en el bloque de c\u00f3digo anterior.<\/p>\n$current_tab = 'all';\nif ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {\n $current_tab = 'admins';\n} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {\n $current_tab = 'all';\n}\n<\/code><\/pre>\n$authors<\/code>:<\/p>\n$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );\n$admins = array();\n\n\/* set values to required item properties *\/\nforeach ( $authors as &$author ) {\n $author->classes = array();\n $author->type = 'custom';\n $author->object_id = $author->nickname;\n $author->title = $author->nickname . ' - ' . implode(', ', $author->roles);\n $author->object = 'custom';\n $author->url = get_author_posts_url( $author->ID ); \n $author->attr_title = $author->displayname;\n if( $author->has_cap( 'edit_users' ) ){\n $admins[] = $author;\n }\n}\n$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' );\n?>\n<\/code><\/pre>\nget_users<\/code> devuelve un array de objetos $user<\/code> seleccionados por los par\u00e1metros especificados. El par\u00e1metro who<\/code> forzar\u00e1 a WordPress a consultar la base de datos para los usuarios que tienen privilegios de escritura.<\/p>\n$admins<\/code> almacenar\u00e1 un array de autores, mientras que $removed_args<\/code> almacenar\u00e1 una lista de variables de consulta a eliminar.<\/p>\n<div id=\"authorarchive\" class=\"categorydiv\">\n\t<ul id=\"authorarchive-tabs\" class=\"authorarchive-tabs add-menu-item-tabs\">\n\t\t<li <?php echo ( 'all' == $current_tab ? ' class=\"tabs\"' : '' ); ?>>\n\t\t\t<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\">\n\t\t\t\t<?php _e( 'View All' ); ?>\n\t\t\t<\/a>\n\t\t<\/li>\n\n\t\t<li <?php echo ( 'admins' == $current_tab ? ' class=\"tabs\"' : '' ); ?>>\n\t\t\t<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\">\n\t\t\t\t<?php _e( 'Admins' ); ?>\n\t\t\t<\/a>\n\t\t<\/li>\n\t<\/ul><\/code><\/pre>\nadd_query_arg<\/code> y remove_query_arg<\/code> establecen valores espec\u00edficos para la variable authorarchive-tabs<\/code> y eliminan variables innecesarias.<\/p>\n![\"Pesta\u00f1as](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/authors-empty-meta-box.png\")
Construir el contenido HTML para las pesta\u00f1as del Meta Box<\/h4>\n
custom_menu_meta_box()<\/code>. Para construir el contenido, utiliza lo siguiente dentro de la etiqueta <div><\/code> que escribiste en la \u00faltima secci\u00f3n:<\/p>\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' ); ?>\">\n\t<ul id=\"authorarchive-checklist-all\" class=\"categorychecklist form-no-clear\">\n\t<?php\n\t\techo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) );\n\t?>\n\t<\/ul>\n<\/div>\n\n<div id=\"tabs-panel-authorarchive-admins\" class=\"tabs-panel tabs-panel-view-admins <?php echo ( 'admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>\">\n\t<ul id=\"authorarchive-checklist-admins\" class=\"categorychecklist form-no-clear\">\n\t<?php\n\t\techo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) );\n\t?>\n\t<\/ul>\n<\/div><\/code><\/pre>\n$items<\/code>, $depth<\/code>, y $r<\/code> – todos requeridos.<\/p>\n$items<\/code> almacena un array de usuarios administradores. La funci\u00f3n array_map() aplica la funci\u00f3n wp_setup_nav_menu_item()<\/a> a $admins<\/code> y a\u00f1ade las propiedades de los elementos del men\u00fa a los elementos del array.<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/authors-meta-box-populated.png\")
A\u00f1adir un bot\u00f3n de env\u00edo<\/h4>\n
<p class=\"button-controls wp-clearfix\">\n\t<span class=\"list-controls\">\n\t\t<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>\n\t<\/span>\n\t<span class=\"add-to-menu\">\n\t\t<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\" \/>\n\t\t<span class=\"spinner\"><\/span>\n\t<\/span>\n<\/p>\n\n<\/div>\n<?php\n}<\/code><\/pre>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/complete-meta-box.png\")
Resumen<\/h2>\n