Zonas de widgets personalizados en WordPress

Zonas de widgets personalizados en WordPress

Unos de los elementos más  comunes en el desarrollo web tanto con WordPress como con otros CMS, son las sidebar y los widgets, y muchas veces durante el desarrollo de una página web nos podemos encontrar con la necesidad de crear nuestras propias zonas de widgets personalizadas.

Las sidebar o zonas de widgets son los contenedores que vemos generalmente ubicados a la izquierda o a la derecha de nuestro contenido y que nos permiten mostrar diferentes elementos a nuestros visitantes, en el caso de nuestra web si miras a tu derecha en nuestra sección de blog verás una zona de widget con un cuadro de búsqueda, nuestras entradas mas vistas, las categorías, nuestro muro de Facebook, suscríbete a nuestro blog etc.

En esta zona también podríamos mostrar productos de nuestra tienda online, una galería de imágenes, nuestros datos de contacto… a estos elementos los llamamos Widget a los cuales podemos acceder desde nuestro panel de administración de WordPress en Apariencia>Widget

En WordPress el número de zonas de widget del que disponemos esta definidos por el tema que vayamos a utilizar siendo el más común el ya nombrado con nuestras categorías, últimas entradas etc. También es habitual tener zonas disponibles en el footer de nuestra página web.

Sin embargo en muchas ocasiones las sidebar disponibles por defecto se nos pueden quedar cortas y podemos necesitar crear y mostrar sidebars y widget en otras zonas de nuestra plantilla que no vienen habilitadas por defecto
o widget y elementos muy concretos que no dispongan de ningún shortcode con el que mostrarlos.

Como siempre para añadir cualquier cosa que necesitemos en nuestra página web WordPress nos da dos opciones para ello, por medio de código o de plugins.

Vamos a empezar por la parte difícil: Un ejemplo muy común del uso de estas sidebar personalizadas sería utilizar una para mostrar en el encabezado de nuestra web la dirección y el teléfono de nuestra empresa y los iconos a nuestras redes sociales, para ello vamos a añadir código personalizando para definir  una nueva sidebar en el archivo functions.php de Wordpres por medio de la función register_sidebar.

Descargamos nuestro archivo fuctions.php de nuestro servidor y con un editor de texto añadimos el siguiente código modificándolo según nuestras necesidades.

<?php
//We hook our action on widgets_init
add_action(‘widgets_init’,’custom_widgets_init’);
function custom_widgets_init(){
$args = array(
‘name’ => ‘header widget’,
‘id’ => ‘header­widget­’,
‘description’ => ”,
‘before_widget’ => ‘<div class=”side­nav header­widget­”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2 class=”widgettitle”>’,
‘after_title’ => ‘</h2>’ );
register_sidebar($args);
}
?>

 

 

Una vez definida ya deberíamos poder ver nuestra nueva zona en Apariencia > Widgets.
Desde donde podremos añadir y configurar los widgets que queramos mostrar en ella, una vez configurada, tendremos que añadir una llamada en nuestra plantilla para que sea visible para nuestros visitantes, usando para ello la función dynamic_sidebar que añadiremos en este caso a nuestro archivo header.php.

Descargamos de nuestra instalación de WordPress el archivo header.php y nuevamente con el editor de texto añadimos:

<?php if ( ! dynamic_sidebar( ‘header­widget­’ ) ) {} ?>

Una vez refresquemos deberíamos ver correctamente la nueva zona personalizada de widget que hemos creado.

Bien, ahora que hemos visto que sabemos picar código vamos a la forma sencilla, por medio de plugins.

Custom-Sidebars-Widgets-PageComo para cualquier cosa que queramos añadir en nuestra web, WordPress cuenta con su ingente cantidad de plugin para echarnos una mano.

Al igual que hemos hecho antes por medio de código, estos plugins nos permitirán añadir de forma rápida y sencilla sidebar adicionales a nuestra página web.

Custom Sidebars

WooSidebars

WP Custom Widget area

En este caso simplemente tendremos que buscar e instalar los plugins desde el panel de búsqueda de WordPress y una vez activados buscar en el menú de nuestro panel de administración su pestaña, desde la cual podremos añadir y modificar todas las zonas de widget que necesitemos para nuestro diseño web.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: