Menú Cerrar

widgets personalizados en WordPress

Unos de los elementos más  comunes en el diseño web tanto con WordPress como con otros CMS, son los widgets,

Pequeñas cajitas reutilizables con contenido

Muchas veces durante el desarrollo de una página web nos podemos encontrar con la necesidad de crear nuestras propios widgets personalizados.

Los 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 mi web si miras a tu derecha en verás una zona de widget con el banner contrata ya tu página web, el cuadro de búsqueda, entradas mas vistas, categorías etc.

En esta zona también podríamos mostrar productos en una tienda online, galerías de imágenes, datos de contacto…

Estos elementos se llaman Widget, y podemos acceder a ellos desde nuestro panel de administración en Apariencia>Widget

En WordPress el número de zonas de widget esta definidos por el tema que vayamos a utilizar. También es habitual tener zonas disponibles en el footer de nuestra página web.

Sin embargo en muchas ocasiones las zonas de widget por defecto se nos pueden quedar cortas y podemos necesitar crear widget en otras zonas de nuestra plantilla.

Como siempre para añadir cualquier cosa que en WordPress tenemos dos opciones, 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

WhatsApp Chatear
A %d blogueros les gusta esto: