Tutorial de temas de WordPress para principiantes – Parte 9: Menús y áreas de widgets
Esta lección cubre cómo agregar dos funciones principales de WordPress a nuestro tema; menús y áreas de widgets. Aprendemos cómo registrar una ubicación para el menú de navegación principal de un sitio y generar el menú en nuestras plantillas, además de permitir agregar widgets en nuestra barra lateral y área de pie de página.
Los entusiastas de ustedes pueden haber notado que ni los "Menús" ni los "Widgets" son accesibles desde el menú "Apariencia" en el panel de administración. Esto se debe a que nuestro tema aún no los admite. Lo arreglaremos en esta lección, comenzando con los menús. .
Hay dos partes en la adición de menús en su tema. Primero debe definir una o más ubicaciones de menú en su archivo functions.php. Un ejemplo es un menú principal que estará en el encabezado de todas las páginas. La segunda parte es agregar algo de código en el lugar donde desea que aparezca el menú. Por ejemplo en header.phpel lugar en el que desea colocar el menú principal.
En este tutorial, agregaremos una ubicación de menú para la navegación principal del sitio y colocaremos su salida en nuestro archivo header.php. Comencemos registrando la ubicación en functions.php, lo cual se hace usando la función register_nav_menu :
add_action('init', 'wptutorial_register_menu');
function wptutorial_register_menu() {
register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));
}Necesitamos engancharnos al gancho init, que WordPress ha decidido que es un buen "punto de control" para registrar las ubicaciones del menú. Dentro de nuestra función llamamos a register_nav_menu()la que acepta un mínimo de dos parámetros; el identificador del menú, que es un slug único que utilizará como identificador al representar el menú, y el nombre visible del menú que aparece en el panel de administración. Tenga en cuenta que envolví el nombre dentro __()para hacerlo traducible, como aprendimos en el paso anterior.
Si actualiza su panel de administración, ahora debería ver un nuevo elemento de submenú en "Apariencia"; “Menús". ¡Felicitaciones, su tema ahora admite la creación de menús!
Si no está familiarizado con la creación y administración de menús en WordPress, esta es una buena guía para usted.
Cree un nuevo menú en "Apariencia> Menús": puede contener lo que desee, solo agregué las publicaciones ficticias que había creado en mi WordPress.
Después de guardar su primer menú, aparecerá una nueva sección llamada "Configuración del menú" debajo del área de edición del menú, que le permite elegir una ubicación para este menú. Debería enumerar una ubicación disponible, que es la que creamos; "Navegación Principal".
Coloque una marca en "Navegación principal" y presione Guardar. Ahora su menú recién creado está conectado a la ubicación y se mostrará automáticamente dondequiera que agregue el código para generar esta ubicación de menú. Hagamos eso ahora.
Abra header.phpy donde quiera que esté la salida del menú, agregue una llamada a wp_nav_menu(). Esta función acepta un montón de argumentos en una matriz para personalizar realmente la salida del menú. Lo más importante es que necesitamos el parámetro que le indica que busque la ubicación de "Navegación principal". Para hacer eso, agregamos el argumento ‘ theme_location‘ y lo configuramos como el identificador de nuestro menú; ‘ main-nav‘.
Agregué la salida del menú justo después del inicio de la <body>etiqueta, pero si ha desarrollado sus plantillas con HTML, decida usted mismo dónde desea que aparezca el menú.
Actualice su interfaz y debería ver el menú que creó en el administrador como una lista desordenada al comienzo de la plantilla.
Como de costumbre, lo animo a profundizar un poco más en los parámetros de la documentación del Codex wp_nav_menude WordPress 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ú solo a ciertos niveles (para evitar submenús) y más.
Si tiene curiosidad sobre la parte de estilo; eche un vistazo a las clases que WordPress agrega automáticamente a cada elemento del menú. Podrá agregar fácilmente estilos para el elemento de menú activo, elementos que tienen elementos secundarios, elemento principal de un elemento secundario activo, etc.
Nota: cualquier usuario de tema siempre puede crear varios menús y optar por mostrarlos fuera de las ubicaciones registradas de un tema mediante widgets. Sin embargo, para hacer esto, su tema necesita definir algunas áreas de widgets. Hagamos eso a continuación.
Áreas de widgets
Las áreas de widgets funcionan de manera bastante similar en cuanto a cómo funcionan los menús. Usted registra una ubicación (para los widgets, define un área donde el usuario del tema puede colocar los widgets), y donde quiera que aparezca la ubicación/área en sus plantillas, agrega un poco de código que se refiere a la identificación del identificador que proporcionó en su código de registro.
Definamos un área de widgets en nuestra barra lateral y otra en el pie de página. Es común que los temas brinden múltiples áreas de widgets en el pie de página para dividirlas bien en columnas, pero en este tutorial solo agregaremos una al pie de página.
Las áreas de widgets se denominan "barras laterales" en el código de WordPress, pero no son exclusivamente para la barra lateral derecha de los sitios web de antaño. Parece que algún nombre heredado se quedó en una época en la que los sitios web generalmente solo tenían un área de widgets en la barra lateral. No piense que las "barras laterales" solo pueden referirse a las barras laterales reales.
Registrar áreas de widgets
Comenzamos registrando dos áreas de widgets en nuestro archivo functions.php. Usamos la función register_sidebarpara registrar nuestras barras laterales, enganchadas al widgets_initgancho, que WordPress ha definido como el mejor gancho para registrar áreas de widgets (y widgets personalizados).
La register_sidebar()función acepta bastantes argumentos, como mínimo necesita el argumento ‘id’ y ‘name’. Hay parámetros disponibles para definir cómo desea que se generen los envoltorios HTML del widget.
Actualice su panel de administración, y ahora debería ver el elemento de menú "Widgets" que aparece en "Apariencia". En el panel de administración de "Widgets", puede ver dos áreas de widgets disponibles en el área derecha; que es nuestra "Área de widgets de barra lateral" y "Área de widgets de pie de página".
Coloque un widget aleatorio en nuestra barra lateral o área de widgets de pie de página, solo para que pueda verlo en acción.
Salida de un área de widget en una plantilla
La última parte es enviar las áreas de los widgets a nuestras plantillas. Para ello utilizamos la función dynamic_sidebar()y proporcionamos el identificador como parámetro. Abre sidebar.phpy agrega lo siguiente dentro de las <aside>etiquetas:
Observe que lo envolví dentro de una etiqueta de lista desordenada (<ul>). Esto se debe a que, de forma predeterminada, dynamic_sidebargenera todos los widgets envueltos en <li>elementos. Te animo a que juegues con los parámetros de salida si no te gusta que los widgets sean una lista.
En cuanto al pie de página, lo agregamos al comienzo de footer.php, envuelto dentro de una <footer>etiqueta (si lo desea).
Eso es todo para los menús y las áreas de widgets. Su tema ahora tiene la flexibilidad del usuario para crear un nuevo menú y usar un widget para mostrarlo en la barra lateral o en el pie de página. En la siguiente lección de esta serie de tutoriales, crearemos más plantillas para nuestro tema.