Cómo crear widgets en Genesis Framework
¿Ya vieron el slider de la portada de Cyberia.MX?
Está construido con un excelente plugin llamado Genesis Slider, que puede descargarse desde el sitio de StudioPress o instalarse directamente desde el repositorio de extensiones de WordPress.
Al estar desarrollado específicamente para Genesis Framework, la integración con el tema es completamente transparente y no requiere bibliotecas adicionales ni configuraciones especiales.
Nota
Cyberia.MX fue un blog que ya no se encuentra activo. Poco a poco su contenido ha sido migrado a namespace.mx.
Todo parecía muy sencillo: instalar el plugin, configurar el slider y arrastrar el widget al lugar correspondiente desde Apariencia → Widgets.
El problema era que ese lugar no existía.
Quería mostrar el slider antes del contenido principal de la portada y mi tema simplemente no tenía un área de widgets en esa posición.
Así que decidí crearla.
En realidad, lo que Genesis registra no es un widget, sino una sidebar o widget area. Aunque el nombre sugiera una barra lateral, puede colocarse en cualquier parte del tema. Después, dentro de esa área podremos arrastrar uno o varios widgets desde el administrador de WordPress.
Registrar la nueva sidebar
El primer paso consiste en registrar una nueva área de widgets dentro del archivo functions.php.
/*
* Registro de la Sidebar
********************************************************** */
genesis_register_sidebar(
array(
'id' => 'slider_sidebar',
'name' => 'Espacio para el Slider',
'description' => 'Crea un espacio para colocar el slider en la homepage.',
)
);
La función recibe un arreglo con la información de la nueva área.
Los parámetros más importantes son:
id, el identificador interno de la sidebar. Debe ser único para evitar conflictos con otras áreas de widgets.name, el nombre que aparecerá en el administrador de WordPress.description, una breve descripción de su finalidad. Aunque es opcional, resulta muy útil cuando el tema comienza a tener varias áreas de widgets.
Una vez registrado este bloque ya aparecerá una nueva área dentro del administrador de WordPress. Sin embargo, todavía no será visible en el sitio.
Insertar la sidebar dentro del tema
Registrar una sidebar únicamente la hace disponible para WordPress.
Ahora debemos indicar en qué parte del tema queremos mostrarla.
En mi caso quería que apareciera únicamente en la portada y antes del contenido principal, por lo que el hook adecuado era genesis_before_loop.
/*
* Agregar la sidebar a la portada
********************************************************** */
add_action('genesis_before_loop', 'cyberia_slider_sidebar');
function cyberia_slider_sidebar() {
if ( is_home() ) {
echo '<div class="slider_sidebar">';
dynamic_sidebar('slider_sidebar');
echo '</div>';
}
}
La función hace dos cosas muy sencillas.
Primero verifica que nos encontremos en la portada mediante is_home().
Si la condición se cumple, llama a dynamic_sidebar(), que imprime todos los widgets contenidos en la sidebar que acabamos de registrar.
Gracias a esa condición el slider únicamente aparece en la página principal y no en el resto de los artículos o páginas del sitio.
Agregar un poco de estilo
Finalmente agregué una pequeña regla CSS para separar visualmente el slider del resto del contenido.
/*
* 42=. Slider Sidebar
********************************************************** */
.slider_sidebar {
margin: 0 auto 25px;
}
En mi caso eso fue suficiente, aunque naturalmente puedes agregar cualquier otro estilo según el diseño de tu tema.
El resultado
Después de estos tres pasos aparece una nueva área de widgets dentro del administrador de WordPress.
A partir de ese momento basta con arrastrar cualquier widget hacia ella.
En mi caso coloqué Genesis Slider, pero exactamente la misma técnica sirve para mostrar banners, formularios de búsqueda, anuncios, widgets HTML o cualquier otro elemento que necesites colocar en una posición específica del tema.
Ésta es una de las ventajas más interesantes de Genesis Framework.
No es necesario modificar las plantillas cada vez que queremos agregar un nuevo bloque de contenido. Creamos una nueva área de widgets, la colocamos mediante un hook y, desde ese momento, toda la administración del contenido puede hacerse directamente desde el escritorio de WordPress.
Usa Genesis Framework
Genesis proporciona una base sólida para construir temas sobre WordPress. Gracias a su sistema de hooks, filtros y áreas de widgets es posible personalizar prácticamente cualquier parte del sitio sin modificar el núcleo del framework.