He estado esta tarde trabajando en la página de un cliente y una de las cosas que he hecho ha sido crear un «Área de Widgets» para que su página pueda contar con Widgets distintos dependiendo de si se está en una página «estándar» o en una de blog y he pensado que este podría ser un tema interesante para el post de hoy.
Por si no está del todo claro a qué me refiero exactamente con «Área de Widgets«, me refiero a lo que en inglés se denomina como «Widget Area», que es básicamente las distintas zonas en las que podemos añadir widgets a una página de WordPress al entrar en Apariencia > Widgets. Pondré una foto aquí abajo por si no queda claro:
¡Consulta nuestros servicios!
Cada uno de los elementos de la parte de la derecha de la foto sería un Área de Widgets: Sidebar Blog, Barra lateral derecha, Barra lateral izquierda… Como seguramente sepas, ahí es donde podemos arrastrar los Widgets que tengamos disponible en nuestro WordPress para que aparezcan donde luego le indiquemos mediante la plantilla del sitio.
Por suerte verás que crearlos es algo muy sencillo.
Crear el Área de Widgets con register_sidebar()
Para crearla simplemente tendrás que usar la función «register_sibebar()», una función de WordPress que es bastante sencilla de utilizar.
Antes de nada, aclararte que aunque el nombre de la función pueda llevarte a pensar que esta función sirve únicamente para crear Áreas de Widgets para una barra lateral o Sidebar, en realidad se usa para crear cualquier tipo de Área de Widgets (como si quieres crear áreas para el <header> o el <footer>, da la mismo).
¡Vamos con el código de la función y te explico cómo puedes personalizarlo!
/* onicode.com */
function register_post_widgets() {
register_sidebar( array(
'name' => esc_html__( 'Nombre de tu Sidebar', 'tu-tema' ),
'id' => 'sidebar-id',
'description' => esc_html__( 'Descripción del Área de Widgets', 'tu-tema' ),
/* Usa una clase si así lo requieres, no es necesario */
/* 'class' => 'sidebar-class', */
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'register_post_widgets' );
Ahora te explico un poco:
- name: El nombre de tu Área de Widgets, aparecerá en el apartado de Apariencia > Widgets, abajo te muestro dónde en una foto. Como ves, estamos usando la función «esc_html__()» en la que debes introducir el nombre de tu tema (lo mejor para atinar bien el nombre es mirar el nombre de la carpeta contenedora del tema en los ficheros de la página), esto no es necesario, pero te vendrá bien si traduces la página, así que te recomiendo que lo hagas. Un ejemplo de nombre podría ser Custom Sidebar o Sidebar Blog.
- id: El ID que quieres que tenga el Área de Widgets, recuerda que debe ser único y no debes usar mayúsculas, tildes ni caracteres raros en general. Un ejemplo de id podría ser custom-sidebar, sidebar-blog o el nombre que consideres idóneo según la zona donde quieras añadir el área.
- description: La descripción del área, es puramente informativa. Un ejemplo podría ser «Sidebar que se muestra en el blog».
- class: Lo he comentado porque es muy opcional, por si quieres añadir una clase. Recuerda que las clases sirven para aplicar estilos que pretendes usar en varios sitios distintos. Imagínate que por ejemplo quieres agregarle una clase que ya tienes definida que le aplica cierto color y background a dicho Sidebar para ahorrarte código.
- Lo demás: Te recomiendo que lo dejes como está, pero si necesitas cambiarlo ya ves cómo puedes hacerlo en el código de arriba. Con esos parámetros defines cuáles serán las etiquetas del título de los Widgets y del contenedor principal de los mismos.
Tal y como te comentaba un poco más arriba, aquí es donde se mostrarán el name y description que hemos definido en el código. Name es el nombre que aparece en la parte superior del desplegable (en este caso «Sidebar Blog») y description es el texto informativo de abajo (en este caso «Esta área de widgets se mostrará en las entradas del blog.»).
El nombre de la función principal (register_post_widgets) puedes cambiarlo si quieres, pero si lo haces recuerda que también tendrás que cambiar el nombre en el segundo parámetro de la función «add-action()» (el primer parámetro no puedes cambiarlo) que tienes abajo del todo en el código.
Este código debes añadirlo en el functions.php de tu sitio, aunque la verdad es que yo te recomiendo que lo añadas usando el plugin Code Snippets (sirve para crear códigos personalizados que puedes ordenar mejor y demás, lo uso siempre, más adelante haré un post hablando sobre él para explicarte mejor).
Cómo Mostrar el Área de Widgets en la Página
Ten en cuenta que con el código que te he mostrado arriba simplemente estás creando el Área de Widgets, pero esta no aparecerá en tu página a no ser que añadas el siguiente código en el lugar donde quieras que aparezca en tu tema o plantilla.
<?php if ( is_active_sidebar( 'sidebar-id' ) ) { ?>
<ul id="sidebar-container">
<?php dynamic_sidebar('sidebar-id'); ?>
</ul>
<?php } ?>
Aquí lo realmente importante es la función dynamic_sidebar(), que es con la que imprimes el sidebar como tal, lo demás es un poco de HTML que puedes personalizar como quieras y la función que engloba todo con el «if» es simplemente un condicional para mostrar el Área de Widgets únicamente cuando este esté activo (que tenga algún Widget asignado); puedes quitarlo si quieres, pero son buenas prácticas hacer este tipo de cosas para que no tengas problemas en el caso de que quites todos los Widgets de tu área.
Y eso sería todo por hoy, ¡espero que te haya gustado esta guía sobre la creación de Áreas de Widgets y que te sirva para crear las tuyas propias! Ya sabes, si hay algo que no se entienda bien o que crees que podría mejorar o ampliar, no dudes en dejarme un comentario. ¡Hasta otra!
Más información aquí.
