Utilidades

Cómo crear una nueva zona de Widget en tu Plantilla WordPress

16/04/2018

Cuando estamos diseñando nuestra página web en ocasiones nos encontramos con la necesidad de añadir un nuevo widget en nuestro WordPress en una zona en la que por defecto nuestra plantilla no nos permite la opción.

A pesar de parecer un impedimento grande para conseguir la apariencia que buscamos en nuestro diseño, su solución no es nada complicada y podemos crear nuevas zonas de widget añadiendo unas pocas líneas a nuestro código.

Mi consejo antes de empezar a modificar archivos es crear un tema hijo o child theme. De esta manera mantenemos la plantilla original sin cambios, con lo que nos ahorramos posibles problemas al hacer una actualización del tema ya que los cambios de código que hayamos realizado se perderían.

Paso 1: crear una nueva Zona de Widget tu Administración WordPress

Abrimos el fichero functions.php de la raíz de la plantilla

/wp-content/themes/mi_tema/functions.php

Si estamos trabajando con un tema hijo

/wp-content/themes/mi_tema-child/functions.php

Añadimos el siguiente código al final del documento:

function nuevas_zonas_widgets() {
register_sidebar( array(
'name' => 'Nueva Zona Widget',
'id' => 'idNuevaZona',
'description' => 'Descripción de la nueva Zona de Widgets',
'before_widget' => '<section class="widget-class">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'nueva_zona_widgets' );

¿Qué hay que saber del código anterior?

Si no eres muy diestro con el código de WordPress no te preocupes mucho, simplemente lo que hacemos es crear una función llamada nuevas_zonas_widgets() y dentro de está podremos crear tantas zonas como necesitemos, copiando y pegando el register_sidebar() y sus valores:

name: Es el nombre que le daremos a la nueva zona, por ejemplo: Footer.

id: Identificador de la nueva zona, para que no te lies te recomiendo que utilices el mismo valor que en el campo anterior pero utilizando minúsculas, por ejemplo: footer

description: Puedes añadir un pequeño texto desciptivo del estilo “Los widgets de esta zona se mostrarán en el footer”

before_widget /after_widget: Puedes envolver los widgets de esta zona en una etiqueta HTML como un div o section y añadirles las clases o los id que necesites.

before_title/after_title: Esta será la etiqueta que envuelva al titulo de tu widget, en el ejemplo los títulos estarán envueltos por una etiqueta h2 pero puedes poner la que necesites.

Zona Widget WordPress

Una vez añadido el código anterior , ya nos aparecerá nuestra zona de Widget WordPress en el apartado Apariencia>Widgets

2, Mostar la nueva Zona de Widget en tu Plantilla WordPress

Una vez registradas la zona o zonas que necesitamos tenemos que hacer que aparezcan en nuestro diseño. Tenemos que tener un poco claro como está estructurada nuestra plantilla para saber qué fichero debemos modificar. Por ejemplo, si lo que queremos en ess que nuestro widget se carguen en el footer debemos modificar el fichero footer.php y añadir el siguiente código en la parte que queremos que aparezca:

<?php if ( is_active_sidebar( 'id-widget' ) ) : ?>
<div id="id-widget">
<?php dynamic_sidebar( 'id-widget' ); ?>
</div>
<?php endif; ?>

Recuerda cambiar 'id-widget' por el valor que tu hayas elegido.

Ya podemos ir al panel de administración de WordPress y desde ahí colocar los widgets dentro de la nueva zona que hemos creado para que se carguen en nuestro footer o cualquier parte que hayamos modificado en el paso anterior. Con esto y personalizando un poco tu css podremos conseguir el diseño que andábamos buscando.

¿Nos ayudas a mejorar la calidad del blog?
Déjanos una valoración sobre este post para poder seguir mejorando
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando...

Deja una respuesta

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


* Campo obligatorio.