{"id":233816,"date":"2023-02-23T10:00:00","date_gmt":"2023-02-23T07:00:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233816"},"modified":"2022-11-11T12:35:39","modified_gmt":"2022-11-11T09:35:39","slug":"tutorial-de-temas-de-wordpress-para-principiantes-parte-9-menus-y-areas-de-widgets","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/tutorial-de-temas-de-wordpress-para-principiantes-parte-9-menus-y-areas-de-widgets\/","title":{"rendered":"Tutorial de temas de WordPress para principiantes \u2013 Parte 9: Men\u00fas y \u00e1reas de widgets"},"content":{"rendered":"\n

Esta lecci\u00f3n cubre c\u00f3mo agregar dos funciones principales de WordPress a nuestro tema; men\u00fas y \u00e1reas de widgets. Aprendemos c\u00f3mo registrar una ubicaci\u00f3n para el men\u00fa de navegaci\u00f3n principal de un sitio y generar el men\u00fa en nuestras plantillas, adem\u00e1s de permitir agregar widgets en nuestra barra lateral y \u00e1rea de pie de p\u00e1gina.<\/p>\n

Los entusiastas de ustedes pueden haber notado que ni los "Men\u00fas" ni los "Widgets" son accesibles desde el men\u00fa "Apariencia" en el panel de administraci\u00f3n. Esto se debe a que nuestro tema a\u00fan no los admite. Lo arreglaremos en esta lecci\u00f3n, comenzando con los men\u00fas. .<\/p>\n

men\u00fas de WordPress<\/h2>\n

Hay dos partes en la adici\u00f3n de men\u00fas en su tema. Primero debe definir una o m\u00e1s ubicaciones de men\u00fa en su archivo functions.php<\/code>. Un ejemplo es un men\u00fa principal que estar\u00e1 en el encabezado de todas las p\u00e1ginas. La segunda parte es agregar algo de c\u00f3digo en el lugar donde desea que aparezca el men\u00fa. Por ejemplo en header.php<\/code>el lugar en el que desea colocar el men\u00fa principal.<\/p>\n

Registro de una ubicaci\u00f3n de men\u00fa<\/h3>\n

En este tutorial, agregaremos una ubicaci\u00f3n de men\u00fa para la navegaci\u00f3n principal del sitio y colocaremos su salida en nuestro archivo header.php<\/code>. Comencemos registrando la ubicaci\u00f3n en functions.php<\/code>, lo cual se hace usando la funci\u00f3n register_nav_menu<\/a> :<\/p>\n

add_action('init', 'wptutorial_register_menu');\nfunction wptutorial_register_menu() {\n    register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));\n}<\/code><\/pre>\n
Necesitamos engancharnos al gancho init<\/code>, que WordPress ha decidido que es un buen "punto de control" para registrar las ubicaciones del men\u00fa. Dentro de nuestra funci\u00f3n llamamos a register_nav_menu()<\/code>la que acepta un m\u00ednimo de dos par\u00e1metros; el identificador del men\u00fa, que es un slug \u00fanico que utilizar\u00e1 como identificador al representar el men\u00fa, y el nombre visible del men\u00fa que aparece en el panel de administraci\u00f3n. Tenga en cuenta que envolv\u00ed el nombre dentro __()<\/code>para hacerlo traducible, como aprendimos en el paso anterior<\/a>.<\/p>\n
\"Tutorial<\/a><\/p>\n
Si actualiza su panel de administraci\u00f3n, ahora deber\u00eda ver un nuevo elemento de submen\u00fa en "Apariencia"; \u00abMen\u00fas". \u00a1Felicitaciones, su tema ahora admite la creaci\u00f3n de men\u00fas!<\/p>\n
Si no est\u00e1 familiarizado con la creaci\u00f3n y administraci\u00f3n de men\u00fas en WordPress, esta es una buena gu\u00eda<\/a> para usted.<\/p>\n
Cree un nuevo men\u00fa en "Apariencia> Men\u00fas": puede contener lo que desee, solo agregu\u00e9 las publicaciones ficticias que hab\u00eda creado en mi WordPress.<\/p>\n
Despu\u00e9s de guardar su primer men\u00fa, aparecer\u00e1 una nueva secci\u00f3n llamada "Configuraci\u00f3n del men\u00fa" debajo del \u00e1rea de edici\u00f3n del men\u00fa, que le permite elegir una ubicaci\u00f3n para este men\u00fa. Deber\u00eda enumerar una ubicaci\u00f3n disponible, que es la que creamos; "Navegaci\u00f3n Principal".<\/p>\n
\"Tutorial<\/a><\/p>\n
Coloque una marca en "Navegaci\u00f3n principal" y presione Guardar. Ahora su men\u00fa reci\u00e9n creado est\u00e1 conectado a la ubicaci\u00f3n y se mostrar\u00e1 autom\u00e1ticamente dondequiera que agregue el c\u00f3digo para generar esta ubicaci\u00f3n de men\u00fa. Hagamos eso ahora.<\/p>\n
Salida de una ubicaci\u00f3n de men\u00fa en una plantilla<\/h3>\n
Abra header.php<\/code>y donde quiera que est\u00e9 la salida del men\u00fa, agregue una llamada a wp_nav_menu()<\/code>. Esta funci\u00f3n acepta un mont\u00f3n de argumentos en una matriz para personalizar realmente la salida del men\u00fa. Lo m\u00e1s importante es que necesitamos el par\u00e1metro que le indica que busque la ubicaci\u00f3n de "Navegaci\u00f3n principal". Para hacer eso, agregamos el argumento ‘ theme_location<\/code>‘ y lo configuramos como el identificador de nuestro men\u00fa; ‘ main-nav<\/code>‘.<\/p>\n
Agregu\u00e9 la salida del men\u00fa justo despu\u00e9s del inicio de la <body><\/code>etiqueta, pero si ha desarrollado sus plantillas con HTML, decida usted mismo d\u00f3nde desea que aparezca el men\u00fa.<\/p>\n
...\n<body <?php body_class(); ?>>\n    <nav class=\"main-nav\"><?php wp_nav_menu(['theme_location' => 'main-nav']); ?><\/nav><\/code><\/pre>\n
Actualice su interfaz y deber\u00eda ver el men\u00fa que cre\u00f3 en el administrador como una lista desordenada al comienzo de la plantilla.<\/p>\n
\"Tutorial<\/a><\/p>\n
Como de costumbre, lo animo a profundizar un poco m\u00e1s en los par\u00e1metros de la documentaci\u00f3n del Codex wp_nav_menu<\/code>de WordPress<\/a> y jugar con la forma en que desea que sea el resultado. Por ejemplo: puede hacer que no se muestre en una lista HTML, puede limitar los elementos del men\u00fa solo a ciertos niveles (para evitar submen\u00fas) y m\u00e1s.<\/p>\n
Si tiene curiosidad sobre la parte de estilo; eche un vistazo a las clases que WordPress agrega autom\u00e1ticamente a cada elemento del men\u00fa. Podr\u00e1 agregar f\u00e1cilmente estilos para el elemento de men\u00fa activo, elementos que tienen elementos secundarios, elemento principal de un elemento secundario activo, etc.<\/p>\n
Nota: cualquier usuario de tema siempre puede crear varios men\u00fas y optar por mostrarlos fuera de las ubicaciones registradas de un tema mediante widgets. Sin embargo, para hacer esto, su tema necesita definir algunas \u00e1reas de widgets. Hagamos eso a continuaci\u00f3n.<\/p>\n
\u00c1reas de widgets<\/h2>\n
Las \u00e1reas de widgets funcionan de manera bastante similar en cuanto a c\u00f3mo funcionan los men\u00fas. Usted registra una ubicaci\u00f3n (para los widgets, define un \u00e1rea donde el usuario del tema puede colocar los widgets), y donde quiera que aparezca la ubicaci\u00f3n\/\u00e1rea en sus plantillas, agrega un poco de c\u00f3digo que se refiere a la identificaci\u00f3n del identificador que proporcion\u00f3 en su c\u00f3digo de registro.<\/p>\n
Definamos un \u00e1rea de widgets en nuestra barra lateral y otra en el pie de p\u00e1gina. Es com\u00fan que los temas brinden m\u00faltiples \u00e1reas de widgets en el pie de p\u00e1gina para dividirlas bien en columnas, pero en este tutorial solo agregaremos una al pie de p\u00e1gina.<\/p>\n
Las \u00e1reas de widgets se denominan "barras laterales" en el c\u00f3digo de WordPress, pero no son exclusivamente para la barra lateral derecha de los sitios web de anta\u00f1o. Parece que alg\u00fan nombre heredado se qued\u00f3 en una \u00e9poca en la que los sitios web generalmente solo ten\u00edan un \u00e1rea de widgets en la barra lateral. No piense que las "barras laterales" solo pueden referirse a las barras laterales reales.<\/p>\n
Registrar \u00e1reas de widgets<\/h3>\n
Comenzamos registrando dos \u00e1reas de widgets en nuestro archivo functions.php<\/code>. Usamos la funci\u00f3n register_sidebar<\/code>para registrar nuestras barras laterales, enganchadas al widgets_init<\/code>gancho, que WordPress ha definido como el mejor gancho para registrar \u00e1reas de widgets (y widgets personalizados).<\/p>\n
add_action('widgets_init', 'wptutorial_register_sidebar');\nfunction wptutorial_register_sidebar() {\n    register_sidebar([\n        'name' => __('Sidebar Widget Area', 'wptutorial'),\n        'id' => 'sidebar-area'\n    ]);\n    register_sidebar([\n        'name' => __('Footer Widget Area', 'wptutorial'),\n        'id' => 'footer-area'\n    ]);\n}<\/code><\/pre>\n
La register_sidebar()<\/code>funci\u00f3n acepta bastantes argumentos, como m\u00ednimo necesita el argumento ‘id’ y ‘name’. Hay par\u00e1metros disponibles para definir c\u00f3mo desea que se generen los envoltorios HTML del widget.<\/p>\n
Actualice su panel de administraci\u00f3n, y ahora deber\u00eda ver el elemento de men\u00fa "Widgets" que aparece en "Apariencia". En el panel de administraci\u00f3n de "Widgets", puede ver dos \u00e1reas de widgets disponibles en el \u00e1rea derecha; que es nuestra "\u00c1rea de widgets de barra lateral" y "\u00c1rea de widgets de pie de p\u00e1gina".<\/p>\n
\"Tutorial<\/a><\/p>\n
Coloque un widget aleatorio en nuestra barra lateral o \u00e1rea de widgets de pie de p\u00e1gina, solo para que pueda verlo en acci\u00f3n.<\/p>\n
Salida de un \u00e1rea de widget en una plantilla<\/h3>\n
La \u00faltima parte es enviar las \u00e1reas de los widgets a nuestras plantillas. Para ello utilizamos la funci\u00f3n dynamic_sidebar()<\/code>y proporcionamos el identificador como par\u00e1metro. Abre sidebar.php<\/code>y agrega lo siguiente dentro de las <aside><\/code>etiquetas:<\/p>\n
<aside class=\"sidebar\">\n    <ul><?php dynamic_sidebar('sidebar-area'); ?><\/ul>\n<\/aside><\/code><\/pre>\n
Observe que lo envolv\u00ed dentro de una etiqueta de lista desordenada (<ul><\/code>). Esto se debe a que, de forma predeterminada, dynamic_sidebar<\/code>genera todos los widgets envueltos en <li><\/code>elementos. Te animo a que juegues con los par\u00e1metros de salida si no te gusta que los widgets sean una lista.<\/p>\n
En cuanto al pie de p\u00e1gina, lo agregamos al comienzo de footer.php<\/code>, envuelto dentro de una <footer><\/code>etiqueta (si lo desea).<\/p>\n
    <footer>\n        <ul><?php dynamic_sidebar('footer-area'); ?><\/ul>\n    <\/footer>\n    <?php wp_footer(); ?>\n...<\/code><\/pre>\n
Eso es todo para los men\u00fas y las \u00e1reas de widgets. Su tema ahora tiene la flexibilidad del usuario para crear un nuevo men\u00fa y usar un widget para mostrarlo en la barra lateral o en el pie de p\u00e1gina. En la siguiente lecci\u00f3n<\/a> de esta serie de tutoriales, crearemos m\u00e1s plantillas para nuestro tema.<\/p>\n
Documentaci\u00f3n sobre los m\u00e9todos utilizados<\/h2>\n