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.
Average Rating