Creando un shortcode en WordPress para insertar una galería con NivoSlider

Esta vez necesitaba que un cliente añadiera imágenes a un post y se mostraran como un slider. Para facilitarle las cosas al cliente y que no tuviera que añadir código HTML en el post, se me ocurrió que la mejor forma era que wordpress detectara las imágenes subidas por el cliente en el post (sin insertarlas) y las convirtiera en un slider.
Por otra parte, podría ocurrir que en algun post, no quisiera que apareciera el slider, así que me pareció que la mejor forma era crear un shortcode que el cliente insertaría en aquellos posts donde quisiera que apareciera el slider…. y esto es lo que voy a comentar en este artículo.

Para crear el slider, me he decidido por Nivo Slider que es un plugin de jQuery, pero se podría hacer con cualquiera. Tenemos que bajarnos el plugin de jQuery Nivo Slider y copiar el archivo con el plugin (jquery.nivo.slider.pack.js) a una carpeta de nuestro tema, por ejemplo /wp-content/themes/mitema/scripts.

En principio tenemos que hacer dos cosas: insertar el script del plugin en la cabecera de wordpress y crear el shortcode que nos permita insertar el código de la galería en cualquier post.

1. Insertar el script de Nivo Slider en la cabecera de wordpress.

En el archivo functions.php

[codesyntax lang=»javascript»]

function mis_librerias() {
	//Recargar ultima versión de jQuery
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
	wp_enqueue_script( 'jquery' );

	// registrar el script javascript, dependencias y localización
	wp_register_script('nivo_slider_script',get_stylesheet_directory_uri() . '/scripts/jquery.nivo.slider.pack.js', array('jquery'), '1.0' );

	// Añadir el script a la cola de carga de scripts
	wp_enqueue_script('nivo_slider_script');
}
add_action('wp_enqueue_scripts', 'mis_librerias');

[/codesyntax]

Se pueden añadir todos los scripts que queramos y apareceran ordenados en el . Por ejemplo aquí tengo añadidos un script para hacer barras de scroll en divs, el fancybox para el efecto lightbox de las imágenes, las jQueryTools…. más vale que sobre que no que falte 😀

[codesyntax lang=»javascript»]

function mis_librerias() {
	//Recargar ultima versión de jQuery
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
	wp_enqueue_script( 'jquery' );

	// registrar el script javascript, dependencias y localización
	wp_register_script('jqueryTools_script','http://cdn.jquerytools.org/1.2.6/tiny/jquery.tools.min.js', array('jquery'), '1.0' );

	wp_register_script('jscrollpane_script',get_stylesheet_directory_uri() . '/scripts/jquery.jscrollpane.min.js', array('jquery'), '1.0' );

	wp_register_script('fancybox_script',get_stylesheet_directory_uri() . '/scripts/jquery.fancybox.pack.js', array('jquery'), '1.0' );

	wp_register_script('nivo_slider_script',get_stylesheet_directory_uri() . '/scripts/jquery.nivo.slider.pack.js', array('jquery'), '1.0' );

	// enqueue the script
	wp_enqueue_script('jqueryTools_script');
	wp_enqueue_script('jscrollpane_script');
	wp_enqueue_script('fancybox_script');
	wp_enqueue_script('nivo_slider_script');
	wp_enqueue_script('custom_script', get_stylesheet_directory_uri().'/scripts/custom.js', array('jquery', 'jscrollpane_script'), '1.0');
}

add_action('wp_enqueue_scripts', 'mis_librerias');

[/codesyntax]

2. Crear el shortcode que extraiga las imágenes del post y las inserte en la entrada con el formato que necesita Nivo Slider

El HTML que utiliza Nivo Slider es el siguiente:

[codesyntax lang=»html4strict»]

<div class="slider-wrapper theme-default">
	<div class="ribbon"></div>
	<div class="nivoSlider">
		<img title="" src="imagen01.jpg" alt="" width="600" height="300" />
		<img title="" src="imagen02.jpg" alt="" width="600" height="300" />
		<img title="" src="imagen02.jpg" alt="" width="600" height="300" />
	</div>
</div>

[/codesyntax]

En el archivo funcions.php vamos a crear una función que devuelva este código, pero extrayendo las imágenes del post.

[codesyntax lang=»javascript»]

function nivo_slider_func( $atts ){
	extract(shortcode_atts(array('gallery_name'=>''),$atts));
	$output= "<div class='slider-wrapper theme-default'>";
	$output.=  "<div class='ribbon'></div>";
	$output.=  "<div class='nivoSlider'>";
	$attachments = get_children(
		array(
			'post_parent' => get_the_ID(),
			'post_status' => 'inherit',
			'post_type' => 'attachment',
			'post_mime_type' => 'image',
			'order' => 'ASC',
			'orderby' => 'menu_order ID'
		)
	);
	foreach ($attachments as $thumb_id => $attachment) {
		$src = wp_get_attachment_image($thumb_id, 'full');
		$output.=  "<a href='".get_permalink()."' title='".esc_attr(get_the_title())."'>".$src."</a>";
	}
	$output.=  "</div></div>";
	return $output;
}

[/codesyntax]

A continuación añadimos la función al sistema de shortcodes de wordpress

[codesyntax lang=»php»]

add_shortcode( 'nivo-slider', 'nivo_slider_func' );

[/codesyntax]

A partir de este momento, podemos editar el post y añadir la galería escribiendo [nivo-slider] en el contenido del post.

Como decía mi abuela… “todo junto gloria”… aquí está todo el código en el mismo sitio

functions.php

[codesyntax lang=»php»]

function mi_libreria() {
	//Recargar ultima versión de jQuery
	wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
    wp_enqueue_script( 'jquery' );	

   // registrar la librería, dependencias y versión
   wp_register_script('nivo_slider_script',get_stylesheet_directory_uri() . '/scripts/jquery.nivo.slider.pack.js', array('jquery'), '1.0' );

   // enqueue the script
   wp_enqueue_script('nivo_slider_script');
}
add_action('wp_enqueue_scripts', 'mi_libreria');

//[foobar]
add_shortcode( 'nivo-slider', 'nivo_slider_func' );
function nivo_slider_func( $atts ){

	$output= "<div class='slider-wrapper theme-default'>";
	$output.=  "<div class='ribbon'></div>";
	$output.=  "<div class='nivoSlider'>";
	$attachments = get_children(
		array(
			'post_parent' => get_the_ID(),
			'post_status' => 'inherit',
			'post_type' => 'attachment',
			'post_mime_type' => 'image',
			'order' => 'ASC',
			'orderby' => 'menu_order ID'
		)
	);
	foreach ($attachments as $thumb_id => $attachment) {
		$src = wp_get_attachment_image($thumb_id, 'full');
		$output.=  "<a href='".get_permalink()."' title='".esc_attr(get_the_title())."'>".$src."</a>";
	}
	$output.=  "</div></div>";
	return $output;
}

[/codesyntax]

y con esto y un bizcocho… hasta mañana a las ocho.

About Post Author

pablocia

Lo mejor para observar la corriente es no estar en ella, así que toma distancia, piensa y verás la solución. <a href="https://es-es.facebook.com/visualxtudio">Facebook</a>
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Entrada anterior Obtener la categoría padre de la actual en WordPress
Entrada siguiente Google Analytics presenta Social Analytics