[et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n
En lo que respecta al mundo de WordPress, la personalizaci\u00f3n es la clave para que un sitio web destaque y ofrezca una experiencia \u00fanica a sus visitantes. Uno de los elementos m\u00e1s cruciales de cualquier sitio web es su men\u00fa de navegaci\u00f3n. Aunque WordPress ofrece herramientas intuitivas para dise\u00f1ar men\u00fas, hay momentos en los que necesitamos ir m\u00e1s all\u00e1 de lo b\u00e1sico y adaptarlos a nuestras necesidades espec\u00edficas.<\/p>\n
Aqu\u00ed es donde entra en juego wp_nav_menu, una funci\u00f3n poderosa que nos permite llevar la personalizaci\u00f3n de nuestros men\u00fas a un nuevo nivel de personalizaci\u00f3n. En esta gu\u00eda, exploraremos c\u00f3mo podemos aprovechar al m\u00e1ximo esta funci\u00f3n, brind\u00e1ndonos el control y la flexibilidad que siempre quisimos para nuestro men\u00fa. \u00a1Prep\u00e1rate para sumergirte en el arte de la personalizaci\u00f3n de men\u00fas en WordPress!<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n
En el coraz\u00f3n de cualquier sitio web exitoso se encuentra una navegaci\u00f3n clara y efectiva. Imaginemos que nuestro sitio web es como un centro comercial: si no hay se\u00f1alizaciones claras, los visitantes se sentir\u00e1n perdidos y frustrados. En WordPress, los men\u00fas personalizados son esas \u00abse\u00f1alizaciones\u00bb que gu\u00edan a los visitantes a trav\u00e9s de nuestro contenido, permiti\u00e9ndoles encontrar lo que buscan de manera r\u00e1pida y sencilla.<\/p>\n
Un men\u00fa personalizado en WordPress no es solo una lista de enlaces. Es una herramienta poderosa que nos permite definir y organizar nuestras p\u00e1ginas, categor\u00edas, enlaces personalizados y m\u00e1s, todo en una estructura que tiene sentido para el sitio y nuestra audiencia. Adem\u00e1s, gracias a las capacidades de WordPress, podemos dise\u00f1ar y estructurar estos men\u00fas de acuerdo con la est\u00e9tica y funcionalidad que deseemos.<\/p>\n
[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/08\/Muestra-de-menu.gif\u00bb title_text=\u00bbMuestra de menu\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n
Imaginemos que tenemos un blog de recetas. Un men\u00fa b\u00e1sico podr\u00eda tener enlaces a Inicio<\/strong>, Acerca de m\u00ed<\/strong>\u00a0y Contacto<\/strong>. Pero, al crecer tu contenido, decides crear un men\u00fa personalizado que categoriza tus recetas en Desayunos<\/strong>, Almuerzos<\/strong>, Cenas<\/strong> y Postres<\/strong>. Adem\u00e1s, bajo Postres<\/strong>, puedes tener submen\u00fas como Tartas<\/strong>, Helados<\/strong>\u00a0y Galletas<\/strong>. Este nivel de organizaci\u00f3n no solo mejora la experiencia del usuario, sino que tambi\u00e9n refleja tu profesionalismo y atenci\u00f3n al detalle. Con los men\u00fas personalizados de WordPress, esta organizaci\u00f3n detallada es no solo posible, sino tambi\u00e9n f\u00e1cil de implementar.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n En lo que respecta al c\u00f3digo de WordPress, cada detalle cuenta para brindar una experiencia \u00fanica a los visitantes, hay herramientas que, aunque no siempre visibles, juegan un papel crucial en la estructura y dise\u00f1o de un sitio web. Una de esas herramientas es wp_nav_menu.<\/p>\n La funci\u00f3n wp_nav_menu es como el director de orquesta de los men\u00fas en tu sitio WordPress. Se encarga de mostrar y gestionar los men\u00fas de navegaci\u00f3n que tengamos creados en nuestro panel de administraci\u00f3n, permitiendo presentarlos de manera ordenada y estilizada a los visitantes. Pero su magia no termina ah\u00ed. Esta funci\u00f3n es bastante personalizable, ofreciendo una variedad de argumentos y par\u00e1metros que nos dan el control total sobre c\u00f3mo se despliegan los men\u00fas, su apariencia, estructura y comportamiento.<\/p>\n Pensemos en wp_nav_menu como el artista detr\u00e1s del tel\u00f3n, que, con destreza y precisi\u00f3n, coloca cada elemento del men\u00fa en su lugar correcto, garantizando que cada vez que un visitante desee explorar nuestro sitio, tenga a su disposici\u00f3n un men\u00fa claro, funcional y agradable. Es, sin duda, una de esas funciones que, aunque no siempre se vea, su impacto en la experiencia del usuario es innegable.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n Dentro de WordPress cada funci\u00f3n cuenta, y cada funci\u00f3n tiene su prop\u00f3sito y magia, los par\u00e1metros son como las especias en una receta: pueden transformar algo bueno en algo excepcional. Cuando hablamos de wp_nav_menu, sus par\u00e1metros son los encargados de darle ese toque especial a los men\u00fas de tu sitio web.<\/p>\n La funci\u00f3n wp_nav_menu viene con una serie de par\u00e1metros que te permiten personalizar y ajustar c\u00f3mo se muestra y funciona el men\u00fa en nuestro sitio. Estos par\u00e1metros, o argumentos, nos dan el control sobre aspectos como la estructura del men\u00fa, su dise\u00f1o, la profundidad de los elementos y mucho m\u00e1s.<\/p>\n Algunos de los par\u00e1metros m\u00e1s destacados incluyen:<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n Estos par\u00e1metros, nos brindan un control completo sobre c\u00f3mo se muestra y se comporta nuestro men\u00fa en WordPress. Al combinarlos y ajustarlos seg\u00fan las necesidades, podemos crear men\u00fas que se integren a la perfeccion con el dise\u00f1o de nuestro sitio y proporcionen una experiencia de usuario excepcional.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n Cuando se trata de men\u00fas, wp_nav_menu es una de nuestras herramientas estelares. Esta funci\u00f3n nos permite no solo mostrar un men\u00fa, sino tambi\u00e9n personalizarlo a nuestro gusto. Tal como hemos visto en los puntos anteriores contamos con elementos para poder personalizarlo a nuestro gusto. Por lo que ahora \u00a1Vamos a sumergirnos en el proceso!<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n La funci\u00f3n de wp_nav_menu no est\u00e1 dise\u00f1ada para crear men\u00fas desde cero, sino, por el contrario, nos permite mostrarlos y modificarlos. Esto implica que primero tenemos que crear nuestro dise\u00f1o para el men\u00fa de forma manual antes de aprovechar esta funci\u00f3n.<\/p>\n La herramienta wp_nav_register te brinda la capacidad de establecer o \u00abregistrar\u00bb men\u00fas para un tema en particular. Para hacerlo, es necesario modificar el archivo functions.php de tu tema.<\/p>\n Antes de sumergirnos en el proceso, si a\u00fan no lo hemos hecho, podemos crear un tema hijo en WordPress, esto nos evitar\u00e1 cualquier perdida innecesaria. Usar un tema hijo garantiza que los cambios que realicemos en el c\u00f3digo no se pierdan con futuras actualizaciones del tema. Y, por supuesto, siempre es prudente tener una copia de seguridad de nuestro sitio antes de realizar cambios significativos.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/08\/localizacion-archivo-functions.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb title_text=\u00bblocalizacion archivo functions\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n Para acceder al archivo functions.php, podemos hacerlo por medio de nuestro wepanel o Cpanel, o mediante nuestro dashboard WordPress, para ello entramos en Apariencias > Editor de archivos de temas y seleccionamos de nuestro tema activo o tema hijo el archivo functions.php.<\/p>\n Otra opci\u00f3n es acceder a functions.php a trav\u00e9s de un prgrama de FTP. Si somos de los que preferimos trabajar con un editor de texto m\u00e1s robusto, este m\u00e9todo es ideal. Aunque, para el prop\u00f3sito actual, el editor incorporado de WordPress deber\u00eda ser m\u00e1s que suficiente.<\/p>\n Nos movemos hasta el final de todo el archivo y agregamos lo siguiente:<\/p>\n [\/et_pb_text][et_pb_code _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]function menu_personalizado_nuevo() { register_nav_menu(‘menu-personalizado’,__( ‘Menu Personalizado’ ));}add_action( ‘init’, ‘menu_personalizado_nuevo’ );[\/et_pb_code][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n Recordemos personalizar el slug del men\u00fa y el nombre, en este caso, \u00abMen\u00fa Personalizado\u00bb. Sin embargo, podemos elegir el nombre que mejor se adapte a nuestras necesidades.<\/p>\n Una vez hecho esto, guardamos los cambios en functions.php. Luego de esto podemos proceder con los siguientes pasos.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n El proceso de creaci\u00f3n del men\u00fa ser\u00e1 igual que cualquier otro men\u00fa personalizado que creemos, dentro del mismo WordPress, para ello debemos ingresar al panel lateral de Apariencias > men\u00fa<\/strong>.<\/p>\n Es aqu\u00ed donde vamos a ir creando nuestro nuevo men\u00fa con los elementos que necesitamos que se visualicen. Cada elemento que tiene este men\u00fa poseer\u00e1 un t\u00edtulo visible y un enlace asociado a \u00e9l.<\/p>\n Una vez que tengamos todo configurado a gusto debemos asegurarnos de que el nombre men\u00fa personalizado esta escrito en la parte superior, ya que es el nombre que le dimos a este men\u00fa.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/08\/menu-personalizado.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb title_text=\u00bbmenu personalizado\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n Ahora que tenemos creado nuestro men\u00fa personalizado viene la parte donde lo insertamos en nuestro sitio, este men\u00fa no se mostrara en nuestro sitio hasta que insertemos en el archivo functions correspondiente el c\u00f3digo de wp_nav_menu para indicarle al tema donde lo insertara.<\/p>\n Debemos insertar una funci\u00f3n personalizada a nuestro archivo functions.php, el que hemos visto en puntos anteriores. La ubicaci\u00f3n siempre ser\u00e1 dentro de nuestro tema para ello recordamos que est\u00e1n en Wepanel > administrador de archivos > public_html > dominio > wp-content > temas > tema que estamos utilizando > archivo functions.php<\/strong>.<\/p>\n Incluso de la misma forma podemos utilizar tambi\u00e9n nuestro editor en el dashboard de WordPress, para ello ingresamos en Apariencias > editor de temas<\/strong>. Aqu\u00ed veremos varios archivos en el que vamos a fijarnos es en el archivo functions.php. Recordando que es mejor trabajar estos ajustes en un tema hijo.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/08\/functions-en-tema.gif\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″ title_text=\u00bbfunctions en tema\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n Una vez nos encontramos en este archivo el codigo que debemos agregar es el siguiente:<\/p>\n [\/et_pb_text][et_pb_code _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″] <\/code>[\/et_pb_code][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n Antes de guardar cualquier modificaci\u00f3n en la plantilla, recordemos que el c\u00f3digo que hemos a\u00f1adido se refiere al nombre menu-personalizado<\/strong>. As\u00ed es como este c\u00f3digo se identifica. Sin embargo, es posible cambiar este nombre y agregar m\u00e1s par\u00e1metros, como los que hemos visto en puntos anteriores. Esto nos permitir\u00e1 personalizar a\u00fan m\u00e1s nuestro men\u00fa seg\u00fan nuestras preferencias y necesidades.<\/p>\n De la misma forma no es obligatorio que agreguemos m\u00e1s par\u00e1metros, de hecho si lo deseamos incluso podemos dejar solo el c\u00f3digo con nuestro men\u00fa, lo que conseguir\u00edamos ser\u00eda un c\u00f3digo similar a este:<\/p>\n [\/et_pb_text][et_pb_code _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″] <\/code>[\/et_pb_code][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n Mantengamos en mente que la ubicaci\u00f3n de este c\u00f3digo ser\u00e1 proporcional al espacio en el que se mostrar\u00e1 en nuestra p\u00e1gina. Si no estamos seguros de c\u00f3mo funciona esto, podemos experimentar coloc\u00e1ndolo en diferentes partes de nuestra plantilla para encontrar la posici\u00f3n ideal. De esta manera, lograremos que el men\u00fa personalizado se integre con el dise\u00f1o de nuestra p\u00e1gina.<\/p>\n Despu\u00e9s de agregar este c\u00f3digo podemos comprobar si el men\u00fa se carga de forma correcta en nuestras p\u00e1ginas, s\u00ed, por el contrario, este no se visualizar\u00e1 de forma correcta es posible que tengamos un error con el slug en el par\u00e1metro theme_location<\/strong>, recordando que el nombre debe ser el mismo que agregamos en el paso anterior.<\/p>\n [\/et_pb_text][et_pb_code _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_code][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n En lo que respecta a WordPress, la personalizaci\u00f3n es la clave para destacar y ofrecer una experiencia \u00fanica a nuestros visitantes. La funci\u00f3n wp_nav_menu no es solo una herramienta; es un puente que conecta tu creatividad con la funcionalidad, permiti\u00e9ndote dise\u00f1ar men\u00fas que reflejen la esencia de tu sitio web.<\/p>\n Aunque al principio puede parecer un desaf\u00edo t\u00e9cnico, con la gu\u00eda adecuada y un poco de pr\u00e1ctica, cualquier persona puede dominar este arte. No olvidemos que, al igual que cualquier otra herramienta de WordPress, es esencial mantener una copia de seguridad y trabajar con precauci\u00f3n.<\/p>\n As\u00ed, garantizamos que nuestros esfuerzos en personalizaci\u00f3n no solo sean efectivos, sino tambi\u00e9n seguros. \u00a1Adelante, explora, experimenta y transforma tu sitio web en una obra maestra de navegaci\u00f3n!<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb hover_enabled=\u00bb0″ sticky_enabled=\u00bb0″]<\/p>\n Tambi\u00e9n te puede interesar:<\/p>\n <\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" En lo que respecta al mundo de WordPress, la personalizaci\u00f3n es la clave para que un sitio web destaque y ofrezca una experiencia \u00fanica a sus visitantes. Uno de los elementos m\u00e1s cruciales de cualquier sitio web es su men\u00fa de navegaci\u00f3n. Aunque WordPress ofrece herramientas intuitivas para dise\u00f1ar men\u00fas, hay momentos en los que […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/955"}],"collection":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/comments?post=955"}],"version-history":[{"count":11,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/955\/revisions"}],"predecessor-version":[{"id":1025,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/955\/revisions\/1025"}],"wp:attachment":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/media?parent=955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/categories?post=955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/tags?post=955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\u00bfQu\u00e9 es wp_nav_menu en WordPress?<\/h2>\n
Par\u00e1metros wp_nav_menu en WordPress<\/h2>\n
\n
\u00bfC\u00f3mo personalizar un men\u00fa en WordPress usando wp_nav_menu?<\/h3>\n
Creaci\u00f3n de un men\u00fa personalizado con la funci\u00f3n wp_nav_register<\/h3>\n
Editar nuestro men\u00fa personalizado de WordPress<\/h3>\n
Mostrar el nuevo men\u00fa mediante la funci\u00f3n wp_nav_menu<\/h3>\n
<\/p>\nwp_nav_menu( array( 'theme_location' => 'menu-personalizado', 'container_class' => 'menu-class' 'fallback_cb' => \u2018wp_page_menu\u2019 ) ); <\/pre>\n
<\/p>\nwp_nav_menu( array( 'theme_location' => 'menu-personalizado' ) );<\/pre>\n
\u00a0\u00a0Conclusiones<\/h2>\n
\n