{"id":1867,"date":"2024-08-03T08:50:14","date_gmt":"2024-08-03T06:50:14","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1867"},"modified":"2024-08-03T08:50:16","modified_gmt":"2024-08-03T06:50:16","slug":"18-menus-wordpress","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/cmss-frameworks\/wordpress-2\/wordpress-avanzado\/18-menus-wordpress\/","title":{"rendered":"18. Men\u00fas WordPress"},"content":{"rendered":"\n<p>Para activas los <strong>men\u00fas<\/strong> necesitamos utilizar una funci\u00f3n que se llama&nbsp;<strong><em>register_nav_menus()<\/em><\/strong>. que lo que hace es que en el momento que yo active esta funci\u00f3n, me aparecer\u00e1 en la zona de administraci\u00f3n. Me va a permitir agregar la opci\u00f3n de men\u00fa en mi <strong>WP.<\/strong> Recibe un par\u00e1metro <strong><em>locations<\/em><\/strong> que recibe un <strong>arreglo asociativo.<\/strong><\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Hay que evitar dejar ejecuciones directas en el archivo&nbsp;<strong><em>functions.php<\/em><\/strong>. Toda acci\u00f3n debe ejecutarse en un <strong>evento,<\/strong> en una <strong>acci\u00f3n.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pasos para la ejecuci\u00f3n de un men\u00fa<\/h2>\n\n\n\n<p>Son 3 los pasos para la ejecuci\u00f3n de un men\u00fa:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El primero el que hemos hecho antes. Inicializarlo en el archivo de funciones (<em>functions.php<\/em>)<\/li>\n\n\n\n<li>Configurar nuestro men\u00fa desde el administrador.<\/li>\n\n\n\n<li>En los archivos del tema decir donde va a estar el men\u00fa. Para ello vamos a utilizar la funci\u00f3n\u00a0<strong><em>wp_nav_menu()<\/em><\/strong>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Enlaces de inter\u00e9s<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/\">https:\/\/developer.wordpress.org\/reference\/<\/a><\/li>\n<\/ul>\n\n\n\n<p>Para generar <strong>men\u00fas<\/strong> y <strong>submen\u00fas<\/strong> vamos a utilizar <strong>jQuery Mobile,<\/strong> el cual necesita ciertas clases.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota:<\/strong> cada men\u00fa tiene que tener una ubicaci\u00f3n distinta.<\/p>\n<\/blockquote>\n\n\n\n<p>El c\u00f3digo que incluiremos e&nbsp;<strong><em>functions.php<\/em><\/strong>&nbsp;es el siguiente:<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function custom_theme_setup(){\n&nbsp; &nbsp; add_theme_support( 'post-thumbnails' );\n&nbsp; &nbsp;\n\n&nbsp; &nbsp; $locations = array(\n&nbsp; &nbsp; &nbsp; &nbsp; 'main_nav' =&gt; 'Navegaci\u00f3n principal',\n&nbsp; &nbsp; &nbsp; &nbsp; 'social_nav' =&gt; 'Navegaci\u00f3n social media'\n&nbsp; &nbsp; );\n\n&nbsp; &nbsp; register_nav_menus($locations);\n};\n\nadd_action('after_setup_theme','custom_theme_setup');<\/pre>\n\n\n\n<p>Y el c\u00f3digo que incluiremos en nuestro&nbsp;<strong><em>header.php<\/em><\/strong>&nbsp;donde va el men\u00fa principal es el siguiente:<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;?php\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $args = array(\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'theme_location' =&gt; 'main_nav',\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'container' =&gt; 'nav',\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'container_class' =&gt; 'item i-b w-70 nav',\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'container_id' =&gt; 'nav-main'\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );\n\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wp_nav_menu( $args );\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?&gt;<\/pre>\n\n\n\n<p>Ese mismo c\u00f3digo ir\u00e1 en nuestro&nbsp;<em>footer.php<\/em>&nbsp;para el men\u00fa secundario, apuntando l\u00f3gicamente al men\u00fa secundario.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para activas los men\u00fas necesitamos utilizar una funci\u00f3n que se llama&nbsp;register_nav_menus(). que lo que hace es que en el momento [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1809,"menu_order":17,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1867","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Para activas los men\u00fas necesitamos utilizar una funci\u00f3n que se llama&nbsp;register_nav_menus(). que lo que hace es que en el momento [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1867","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1867"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1867\/revisions"}],"predecessor-version":[{"id":1869,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1867\/revisions\/1869"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1809"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}