Hace poco hice un tutorial sobre cómo añadir nuevas ubicaciones de menú en WordPress. Siguiendo el mismo método y utilizando la genial herramienta GenerateWP, vamos a ver cómo añadir un nuevo área de widgets personalizado en WordPress.
El método es muy similar, y nos permitirá insertar áreas de widget en zonas que nuestra plantilla no trae por defecto.
Para el ejemplo, voy a utilizar la plantilla Twenty Twelve y vamos a insertar el widget de buscar en el header, localización que no aparece por defecto en ese tema.
Las ubicaciones de widgets que nos trae la plantilla por defecto son las siguientes:
Vamos a crear un nuevo área widget, colocarlo en el header y ya nos quedará listo para insertar cualquier widget que queramos.
1. Añadir nueva ubicación de widgets
Entramos en https://generatewp.com/generator/ y elegimos la opción “Sidebar Generator”
En la pestaña “General” tenemos 3 opciones:
- Function Name: ponemos el nombre de la función, un nombre descriptivo.
- Child Themes: elegimos la opción “Yes” para dar soporte para temas hijos.
- Text Domain: esto tiene que ver con las traducciones. Podemos poner el mismo nombre de la función.
Pasamos a la pestaña “Sidebar 1“:
- ID: Ponemos un nombre identificativo.
- Name: Es el nombre del Area Widget que nos aparecerá en el panel de control de WordPress
- Description: Es la descripción que nos aparecerá.
Le damos a “Update Code” y nos genera el siguiente código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | if ( ! function_exists( 'nueva_widget_area' ) ) { // Register Sidebars function nueva_widget_area() { $args = array( 'id' => 'widget_area_header', 'name' => __( 'Widget Area del Header', 'nueva_widget_area' ), 'description' => __( 'Estos widgets aparecerán en el header', 'nueva_widget_area' ), ); register_sidebar( $args ); } add_action( 'widgets_init', 'nueva_widget_area' ); } |
Pegamos éste código en el archivo functions.php de nuestro tema.
Ahora, si vamos a Apariencia>Widgets vemos que la nueva ubicación de widgets se ha creado correctamente.
Tenemos la ubicación creada, pero si insertamos un widget no nos aparecerá, porque no sabrá dónde colocarlo.
Ahora tenemos que “decirle” en qué parte de la plantilla queremos que aparezcan los widgets que insertemos ahí.
2. Elegir la localización de los widgets.
Para el ejemplo, vamos a hacer que aparezcan en la cabecera de la web, así que el archivo que vamos a editar es el header.php
Pegamos el siguiente código en el archivo header.php de nuestro tema:
<?php dynamic_sidebar(‘widget_area_header’); ?>
Acordaos de cambiar ‘widget_area_header’ por el ID que hayáis puesto.
Yo lo he colocado justo antes de la etiqueta <nav>, que es donde empieza el menú.
Ahora sí, si insertamos el widget “Buscar”, ya nos aparece en la cabecera de la web.
Ahora quedaría darle estilos CSS para que quede como nosotros queramos. Vamos a darle un par de estilos básicos para que se posicione a la derecha:
1 2 3 4 5 | .widget_search { float: right; list-style: none; margin-bottom: 30px; } |
Y nos quedaría de la siguiente manera:
Ahora vemos que sí nos queda a la derecha. Podríamos darle más estilos para que quede mejor, pero eso ya es otra historia 😉
Pues ya está, con éste sencillo método podremos añadir ubicaciones de widgets donde queramos.
¿Necesitas más ayuda?
Si quieres seguir aprendiendo o necesitas mi ayuda, puedes:
- Contactar para ver cómo puedo ayudarte.
- Suscribirte para no perderte ninguna de mis publicaciones.
- Si quieres comentar, adelante, te responderé encantado.
Muchas gracias por leerme 😉
Puede usarse este mismo metodo para poner un area de widgets en el area de administracion????
No entiendo muy bien tu pregunta, me puedes poner un ejemplo, por favor?.
Un saludo!.