• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria
  • Ir al pie de página

Diseñador web WordPress Freelance

Diseño web, WordPress y Marketing Online

  • Inicio
  • Portfolio
  • Blog
  • Contacto

Wordpress · 22 julio, 2016

Añadir un nuevo área de widgets personalizado en WordPress

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:

Widgets por defecto

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.

Insertar area widgets en WordPress

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á.

Area widget

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.

Nueva ubicación de widgets en wordpress

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.

Nuevo widget wordpress

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:

Añadir ubicaciones de widget en WordPress

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 😉

 

Comparte si crees que le puede servir de ayuda alguien.

Archivado en:Wordpress

Diego Fresno

Diego Fresno López

Diseñador web freelance especializado en WordPress y Genesis.

Interacciones con los lectores

Comentarios

  1. oliverosM dice

    31 julio, 2016 en 9:14 pm

    Puede usarse este mismo metodo para poner un area de widgets en el area de administracion????

    Responder
    • Diego Fresno dice

      3 agosto, 2016 en 8:23 am

      No entiendo muy bien tu pregunta, me puedes poner un ejemplo, por favor?.

      Un saludo!.

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

diegofresno.com te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Diego Fresno López como responsable de esta web.
La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog.
Legitimación: Consentimiento del interesado.El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no atender pueda tu solicitud.

  • Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Raiola (proveedor de hosting de diegofresno.com) dentro de la UE. Ver política de privacidad de Raiola.
  • Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en hola@diegofresno.com así como el derecho a presentar una reclamación ante una autoridad de control.
    Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://diegofresno.com, así como consultar mi política de privacidad.

Barra lateral primaria

Últimas Entradas

Filtrar spam en Analytics

Cómo filtrar el spam de Analytics

Crear custom post types

Crear custom post types en WordPress

Pasar WordPress a SSL

Añadir áreas de widget personalizadas en WordPress

Añadir un nuevo área de widgets personalizado en WordPress

Importar y exportar widgets en WordPress

Importar y exportar widgets en WordPress

Suscríbete al blog

Footer

diegofresno.com Diseño web y Marketing Online Av. Argentina, 132. Oficina 239 33213 Gijón Asturias

  • Inicio
  • Portfolio
  • Blog
  • Contacto
  • Facebook
  • LinkedIn
  • Aviso Legal
  • Políticas de privacidad
Google ârtner Diego Fresno
DMCA.com Protection Status