Menú Cerrar

Zonas de widget personalizados WordPress

zonas de widget plugin

Unos de los elementos más comunes en el diseño web son las zonas de widgets personalizados tanto en WordPress con en otros CMS’s.

Los widgets son pequeñas cajitas reutilizables con contenido, y es un elemento muy utilizado.
En el caso de esta web si miras a tu derecha 👉 verás una zona de widget con el banner de contrata ya tu página web, el cuadro de búsqueda, entradas mas vistas etc.

Muchas veces durante el desarrollo de una web nos podemos encontrar con la necesidad de crear nuestras propios widgets personalizados,
para poder poner un elemento en concreto en otro sitio de nuestra web donde por defecto no lo hay.

DISEÑA TU PÁGINA WEB A MEDIDA Y TRIUNFA EN INTERNET.

Consúltame sin compromiso y consigue la página web que siempre has querido para tu negocio.

Bien para mostrar productos en una tienda online, galerías de imágenes, datos de contacto,
o cualquier otra cosa que necesitemos.

En WordPress podemos acceder a los widget desde nuestro panel de administración en Apariencia>Widget

En WordPress el número de zonas de widget esta definidos por el tema que estemos utilizando.
Sin embargo en muchas ocasiones las zonas de widget por defecto se nos pueden quedar cortas y podemos necesitar crearlas 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 y a hacer zonas de widget personalizadas con código.

Un ejemplo muy común del uso de estas sidebar personalizadas sería para mostrar en el encabezado de nuestra web la dirección y el teléfono y los iconos a nuestras redes sociales.

Para ello vamos a añadir código en el archivo functions.php para definir  una nueva sidebar 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.
También lo podemos hacer desde el propio editor de código de WordPress para más cómodidad.

<?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 ahí podremos añadir y configurar los widgets que queramos mostrar en ella,
una vez configurada, aún tendremos que añadir una llamada en la plantilla para que sea visible para nuestros visitantes. 

Para ello vamos a usar 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
o con su editor interno añadimos:

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

Una vez hecho y refresquemos la página, ya deberíamos ver correctamente la nueva zona de widget que hemos creado.

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

zonas de widget custom

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

Espero que este tutorial te haya ayudado a saber como añadir ese elemento que faltaba en tu web.

Si necesitas renovar tu web o tienda online o crear una nueva ponte en contacto conmigo. Y pide tu presupuesto sin compromiso.
Estaré encantado de ayudarte.

Deja un comentario

WhatsApp Chatear
A %d blogueros les gusta esto: