Jueves, 7 de febrero de 2019

sidebar

Las plantillas nos suelen ofrecer diversas áreas de widgtet que van más allá de la barra lateral (sidebar) propiamente dichas (figura superior izquierda) y que pueden colocarse a la izquierda, derecha o incluso en la parte inferior. Hay ocasiones en que nuestra barra lateral contiene solo uno o dos elementos y nos gustaría que el texto fluyera por debajo de aquélla, tal y como podemos ver en la figura superior (derecha). Aunque puede haber otros motivos, lo importante es ver cómo insertar uno o varios widgets o un área completa de widgets (barra lateral) en una página o entrada utilizando un shortcode.

Para ello vamos a utilizar the widget, add_shortcode, register_widget, register_sidebar, dynamic_sidebar, ob_start y ob_get_clean.

1) Insertar uno o varios widgtes

Si el widgtet no dispone de opciones, el método es sencillo. Añadimos el siguiente código en nuestro plugin de funciones o en el archivo functions.php del tema:

function show_custom_widget( $atts, $content = null ) {
extract(shortcode_atts(array('name' => ''), $atts));
ob_start();
the_widget( $name );
$content = ob_get_clean();
return $content;
}
add_shortcode( 'widget-fluido', 'show_custom_widget' );

Después, en nuestra entrada o página simplemente escribimos el shortcode: [widget-fluido name=WP_Widget_Archives]. Como podéis ver, tenemos que indicar el nombre de clase PHP del widget (The widget's PHP class name). Si se trata de un widget incluido por defecto en WordPress, tenemos ese valor en el codex. En caso contrario, buscaremos en los archivos del plugin que ha añadido el widgtet la función register_widget ya que esta función necesita indicar el valor que nosotros buscamos.

En caso de que el widget disponga de opciones, habría que añadir los argumentos justo antes de the_widget( $name ):

$args = array(
	'opcion-1' => 'opcion',
	'opcion-2' => 'opcion'
);

y después sustituir the_widget( $name ); por the_widget( $name, $args );

Ahora bien, en la mayoría de las ocasiones será difícil determinar sus opciones y sus correspondientes valores. Por ese motivo, cuando se trate de widgtes con posibilidad de configurar, es preferible utilizar el método que explicamos a continuación.

2) Insertar área completa de widgets (barra lateral)

El primer paso consiste en crear una nueva área de widgets en nuestro plugin de funciones o archivo functions.php del tema. El ejemplo que aparece es válido para cualquiera. Tan solo cambiar name, descripction e ID (tened cuidado de no usar uno que ya utilice el tema). Los campos relacionados con los estilos también podéis cambiarlos a vuestro gusto.

Ahora bien, muchos temas usan funciones especiales para realizar esta tarea. El registro de estas áreas suele estar en el archivo functions.php del tema. Buscad register_sidebar o register_sidebars. Podemos aprovechar para añadir nuestra área de la misma forma y así asegurarnos la compatibilidad del tema.

En la plantilla que yo uso, por ejemplo, definen primero la función function hybrid_register_sidebar( $args ) en el archivo functions-sidebars.php y luego la utilizan en el archivo functions.php para registrar las áreas. Yo solo he tenido que añadir dentro de la función el siguiente código:

hybrid_register_sidebar(
array(
	'id' => 'sidebar-personalizado',
	'name' => _x( 'Sidebar personalizado', 'sidebar', 'stargazer' ),
	'description' => __( 'Sidebar para shortcode', 'stargazer' ),
)
);

Además, de esta forma podremos tomar nota del ID de todas las áreas (sidebar) que crea el tema por si luego las queremos usar con nuestro shortcode.

El segundo paso será ir a Apariencia > Widgets e introducir en nuestra nueva área "Sidebar personalizado" los widgtes que queramos y por supuesto configurarlos.

El tercer paso es añadir el siguiente código en nuestro plugin de funciones o en el archivo functions.php del tema:

function sidebar_shortcode( $atts, $content = null ) {
	extract(shortcode_atts(array('id' => ''), $atts));
	ob_start();
	// echo '<div class="widget sidebar-fluido">';
	dynamic_sidebar( 'sidebar-personalizado' );
	// echo '<div>';
	$content = ob_get_clean();
	return $content;
}
add_shortcode('sidebar-fluido', 'sidebar_shortcode');
// Nota: descomentar los dos "echo" para añadir estilos propios. Para ello crear un nueva DIV llamada "sidebar-fluido" y darle los estilos que queráis.

Ahora nuestro shortcode queda así: [sidebar-fluido].