Cómo añadir una nueva zona de widgets a un tema de WordPress

Como añadir una zona de widgets a un tema de WordPress

Cómo añadir una nueva zona de widgets a un tema de WordPress

En el anterior articulo vimos como añadir un nuevo menú a cualquier tema de WordPress. Hoy veremos que añadir una nueva zona de widgets a un tema de WordPress es igual de sencillo.

Cómo registrar una nueva zona de widgets en WordPress

El procedimiento es muy similar al que ya realizamos para añadir un nuevo menú. Lo primero que debemos de hacer es registrar la nueva zona usando el archivo functions.php. Este archivo debería de estar en una ruta tipo wp-content/themes/mi-tema/ siendo mi-tema el nombre de vuestro tema. Obviamente, antes de tocar dicho archivo, deberíamos de sacar una copia por si rompemos algo.

En mi caso, quiero crear dicha zona en el pie de página.

Para añadirla, vamos al final del archivo functions.phpantes del simbolo ?>,  añadiremos lo siguiente:

add_action( 'widgets_init', 'register_new_sidebars' );
function register_new_sidebars() {
 register_sidebar(array(
 'name' => __('Pie de página'),
 'id' => 'sidebar-footer',
 'before_widget' => '<div class="widget-footer">',
 'after_widget' => '</div>',
 'before_title' => '<h4>',
 'after_title' => '</h4>'
 ));
}

Es importante que lo pongamos antes del símbolo ?>, si no existe dicho símbolo al final del archivo no es problema, pero si existe debemos de colocar nuestro código antes, y no después. De lo contrario es posible que nuestro sitio Web deje de funcionar correctamente.

A esta nueva posición le tenemos que dar un nombre y un id. En este caso he usado ‘Pie de página’ para el nombre y ‘sidebar-footer’ para el id, pero podéis ponerle otro nombre y otro id. También le podemos indicar que código HTML ha de añadir antes y después de cada uno de los widgets que añadamos a dicha zona (before_widget y after_widget) y que código HTML queremos añadir antes y después de cada título de cada widget (before_title y after_title). Si queremos añadir algún código antes o después de la nueva zona de widgets, lo haremos en el siguiente paso.

La operación de registro propiamente dicha la realiza la función de WordPress register_sidebar.

Nuestra nueva zona de widgets

Cómo añadir una nueva zona de widgets en WordPress

Una vez registrada la nueva zona, hemos de determinar donde la vamos a colocar en nuestro tema. Este paso puede resultar un poco difícil y requiere tener claro como esta organizado un tema en WordPress. En el caso que nos ocupa, es bastante fácil, ya que tal y como hemos dicho, vamos a añadir una zona en el pie de página, por lo que el archivo de nuestro tema que tenemos que modificar es el archivo footer.php que se encuentra en la carpeta wp-content/themes/mi-tema/.

En dicho archivo añadiremos, en el sitio que creamos más adecuado, el siguiente código;

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

Obviamente, tendréis que cambiar ‘sidebar-footer’ por el id que habéis usado en el paso anterior al registrar la zona. El elemento div que hay en este código es totalmente opcional, es simplemente el código HTML que habrá antes y después de nuestra zona de widgets. Igual que hemos puesto un div, podemos colocar cualquier otro código HTML o no poner ninguno.

Ya tenemos nuestra nueva zona para Widgets casi lista. Tan solo nos faltaría colocar unos widgets dentro de ella y añadir el código CSS necesario al archivo style.css para darle el aspecto deseado.

Nueva zona de widgets en el footer.

Hay que tener en cuenta que la modificación que hemos hecho la perderemos si actualizamos el tema. Para no perderla lo suyo sería usar un tema hijo en WordPress.

Y bueno, nada más, espero que el artículo de hoy, y el de como añadir un menú, os hayan resultado de interés y os permitan mejorar un tema al que le echéis en falta alguno de estos elementos.

4Comentarios

  • Luisma
    02/08/2020

    Gracias por este estupendo widget, pero me haría falta poner un widget al lado y así hasta 3, como podría hacerlo?

    Gracias.

  • Jaime
    16/01/2018

    Excelente. Mil gracias

  • Muchas gracias hermano, me sirvió muchísimo, personalizando widget, saludos y que Dios te bendiga por aportar tus conocimientos.

Escribe un comentario