Insertar Widgets con shortcodes en WordPress

Widgets que pueden ser agregados con Shortcodes

La capacidad de uso de shortcodes en WordPress es muy subestimada. Shortcode permite al usuario final crear elementos complejos, con sólo pulsar unas teclas y al mismo tiempo modularizar las tareas de edición.

Este tutorial es para usuarios mas bien experimentados de WordPress, vamos a ver widgets y shortcodes sin entrar en demasiados detalles acerca de cómo y por qué funcionan. Si estas buscando más información, le sugiero la lectura de shortcodes en Mastering WordPress y el artículo Widgets API.
  Tomando un widget al azar

Lo primero que miraba era en cómo dar salida a cualquier widget sin shortcodes. Una vez hecho esto, que la aplicación de un shortcode es un asunto relativamente trivial. Escabando en el Codex, encontré la función the_widget() que hace exactamente lo que quiero.

Se necesitan tres parámetros:

El nombre de la clase del widget.
Configuración de instancia del widget,
Los argumentos de la barra lateral de widgets.

Con esto no sólo se puede emitir un widget en cualquier lugar, ademas puedo pasar argumentos diferentes a cualquier barra lateral de widgets. Esto es muy bueno porque puedo especificar parámetros como before_widget y after_widget.

Esto también abre la posibilidad de cambiar fácilmente el estilo del widget dentro del código corto, pero eso lo vemos luego.

Luego de aplicar ciertos CSS, el widget calendario se puede agregar en cualquier lugar

Haciendo el "Output Buffering"

Al agregar un Shortcode, tendrías que buscar en el texto una cadena en particular, haces algo con ese texto y retornar el resultado que queremos ver. Es obvio que vamos a utilizar the_widget(), pero esta función sólo se hace eco de contenido. Para solucionar este problema vamos a utilizar los búferes de salida.

Me explico mejor, mira los dos ejemplos siguientes, el resultado es exactamente el mismo.

1- the_widget( 'WP_Widget_Archives' );

1- ob_start();

2- the_widget( 'WP_Widget_Archives' );

3- $contents = ob_get_clean();

4- echo $contents;

Primero empezamos nuestro buffer. Mediante el uso de ob_get_clean (), que puede tirar el contenido de la memoria intermedia en una variable (y también borrar la memoria intermedia). Una vez hecho esto podemos hacer eco de esa variable.
 
Creando el Shortcode.

Ahora ya sabemos todo lo que necesitamos, así que vamos a crear el esqueleto de nuestro shortcode. Primero tenemos que averiguar cuáles son los argumentos que tenemos que pasar, y qué argumentos queremos permitir al usuario pasar a través de la etiqueta de shortcode

    Widget type- El widget es lo que queremos mostrar;
     Title - El título del widget (usado en el parámetro de instancia);
     Otros parámetros de instancia;
     Otros argumentos de barra lateral.

Admito que esto es un poco escasovago. La razón de esto es que en cada widget se necesita un conjunto separado de los argumentos posibles debido a la funcionalidad tan variada que tienen. Por un widget de categoría, también puede especificar el atributo jerárquico, esto no se aplica en otros por ejemplo.

La solución de este problema requiere un shortcode flexible, y una buena documentación de usuario final.


La base del shortcode

add_shortcode( 'widget', 'my_widget_shortcode' );
function my_widget_shortcode( $atts ) {

// Configure defaults and extract the attributes into variables
extract( shortcode_atts( 
 array( 
  'type'  => '',
  'title' => '',
 ), 
 $atts 
));

$args = array(
 'before_widget' => '<div class="box widget">',
 'after_widget'  => '</div>',
 'before_title'  => '<div class="widget-title">',
 'after_title'   => '</div>',
);

ob_start();
the_widget( $type, $atts, $args ); 
$output = ob_get_clean();

return $output;

Hay dos atributos en común en todos los shortcodes. El type es donde el usuario especificará el tipo de widget, y el title es donde el usuario especifica el título.

Una vez que tenemos nuestra $atts, calculamos los $args - Parámetros del widget sidebar. Dado que este sería un theme comercial, no es necesario dar al usuario control sobre estos argumentos, por lo que ahora no esta mas que harcodeado.

En la última sección vamos a poner todo junto para crear el widget de final.

Extendiendo el shortcode.

Una vez hecho esto, podemos volver con los parámetros de nuestro shortcode. Un ejemplo es el que permite al usuario elegir un esquema. Para nuestro ejemplo, esto es oscuro o claro, pero fácilmente se podría especificar un color exacto.

Todo lo que necesitas hacer es agregar un argumento al shortcode, añadir una clase CSS a nuestro widget basada en este argumento y dejar que nuestra hoja de estilos haga el resto.

add_shortcode( 'widget', 'my_widget_shortcode' );

function my_widget_shortcode( $atts ) {

// Configure defaults and extract the attributes into variables
extract( shortcode_atts( 
 array( 
  'type'   => '',
  'title'  => '',
  'scheme' => 'light'
 ), 
 $atts 
));

$args = array(
 'before_widget' => '<div class="box widget scheme-' . $scheme . ' ">',
 'after_widget'  => '</div>',
 'before_title'  => '<div class="widget-title">',
 'after_title'   => '</div>',
);

ob_start();
the_widget( $type, $atts, $args ); 
$output = ob_get_clean();

return $output;

Si queremos que sea aún más flexible, podemos permitir que un color de fondo sea pueda asignar, podemos agregar los $args utilizando los parámetros del shortcode, y mucho más.

Esta solución funciona perfectamente con widgets personalizados. Todo lo que necesitamos hacer es agregar el nombre de la clase como el type y adaptar los ajustes específicos de la instancia.