Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
Adding a Responsive jQuery Slider to Your WordPress ThemeHoy te voy a guiar a través del proceso de integración de un slider jQuery responsivo en tu tema WordPress o sitio. No es un tutorial a fondo, pero es uno que raramente se realiza correctamente, así que me gustaría intentar solucionar esto. En este tutorial vamos a cubrir cada paso, desde la creación de un tipo de entrada personalizada que aloje tus diapositivas, al uso real del slider en tu sitio.
Vamos a estar usando el encantador FlexSlider 2 creado por WooThemes, ya que es un slider muy bien codificado y resposivo bajo licencia GPLv2. Si estás interesado, puedes echar un vistazo al código de FlexSlider en su Repositorio de GitHub.
Antes de hacer nada, vamos a dar un paso atrás y pensar sobre lo siguiente:
- Qué archivos necesita el slider
- Qué archivos necesitamos nosotros
Lo primero que vamos a hacer es descargar FlexSlider
Una lo hayas hecho, continúa y descomprímelo.
Existen ahí algunas líneas en las que estamos interesados, principalmente:
- flexslider.css
- images/bg_direction_nav.png
- jquery.flexslider-min.js
Son todo lo que necesitamos de la descarga de FlexSlider.
Paso 1 Configurar los archivos
Movamos ahora esos tres archivos de arriba dentro del directorio de nuestro tema. Dependiendo de tu tema o configuración, puedes colocar los archivos allí donde prefieras, ten en cuenta simplemente desde dónde son obtenido/referenciados y ajustar el código de manera que se corresponda con la nueva ubicación.
Para este tutorial, estaremos usando el tema predeterminado Twenty Eleven. En el directorio inc/, crea una nueva carpeta denominada slider. Allí, vamos a crear algunas carpetas:
- css
- images
- js
Coloquemos el archivo flexslider.css en la carpeta css, bg_direction_nav.png en la carpeta imágenes y jquery.flexslider-min.js en, lo adivinaste, la carpeta js.
Nota: Normalmente colocaría estos en las carpetas css/images/js a través del directorio del tema junto con otros archivos pero hacer que este tutorial sea “universal”, vamos a organizar nuestros archivos de esta manera. Si tienes experiencia con el desarrollo de temas de WordPress es posible que quieras organizar tus archivos manualmente.
Ahora vamos a crear dos archivos más en la carpeta del slider:
- slider.php - crea la plantilla del slider y carga los archivos del mismo
- slider_post_type.php - crea el tipo de entrada del slider
Ahora deberías tener una carpeta del slider con un aspecto similar al siguiente:
Antes de continuar, abre tu archivo functions.php y añade allí las dos siguientes líneas, las cuales cargarán los dos archivos .php que acabamos de crear:
1 |
// Create Slider Post Type
|
2 |
require( get_template_directory() . '/inc/slider/slider_post_type.php' ); |
3 |
// Create Slider
|
4 |
require( get_template_directory() . '/inc/slider/slider.php' ); |
Ahora… ¡empecemos a codificar!
Paso 2 Tipo de entrada del slider
Lo primero que vamos a hacer es crear un tipo de entrada personalizada que contendrá todos nuestros slides. Los tipos de entradas personalizadas se introdujeron en WordPress 3.0 y probablemente sean lo más genial que haya nunca ocurrido en el mundo (¿excesivo? A mí sencillamente me encantan).
Abre slider_post_type.php y añade el siguiente código para crear el tipo de entrada personalizada para el slider:
1 |
<?php
|
2 |
|
3 |
// Create Custom Post Type
|
4 |
|
5 |
function register_slides_posttype() { |
6 |
$labels = array( |
7 |
'name' => _x( 'Slides', 'post type general name' ), |
8 |
'singular_name' => _x( 'Slide', 'post type singular name' ), |
9 |
'add_new' => __( 'Add New Slide' ), |
10 |
'add_new_item' => __( 'Add New Slide' ), |
11 |
'edit_item' => __( 'Edit Slide' ), |
12 |
'new_item' => __( 'New Slide' ), |
13 |
'view_item' => __( 'View Slide' ), |
14 |
'search_items' => __( 'Search Slides' ), |
15 |
'not_found' => __( 'Slide' ), |
16 |
'not_found_in_trash'=> __( 'Slide' ), |
17 |
'parent_item_colon' => __( 'Slide' ), |
18 |
'menu_name' => __( 'Slides' ) |
19 |
);
|
20 |
|
21 |
$taxonomies = array(); |
22 |
|
23 |
$supports = array('title','thumbnail'); |
24 |
|
25 |
$post_type_args = array( |
26 |
'labels' => $labels, |
27 |
'singular_label' => __('Slide'), |
28 |
'public' => true, |
29 |
'show_ui' => true, |
30 |
'publicly_queryable'=> true, |
31 |
'query_var' => true, |
32 |
'capability_type' => 'post', |
33 |
'has_archive' => false, |
34 |
'hierarchical' => false, |
35 |
'rewrite' => array( 'slug' => 'slides', 'with_front' => false ), |
36 |
'supports' => $supports, |
37 |
'menu_position' => 27, // Where it is in the menu. Change to 6 and it's below posts. 11 and it's below media, etc. |
38 |
'menu_icon' => get_template_directory_uri() . '/inc/slider/images/icon.png', |
39 |
'taxonomies' => $taxonomies |
40 |
);
|
41 |
register_post_type('slides',$post_type_args); |
42 |
}
|
43 |
add_action('init', 'register_slides_posttype'); |
¡Tipo de entrada personalizada añadida! Debajo de eso añadiremos una caja meta en donde abrá un campo para la URL a la que debería enlazar la diapositiva. Ahora vamos a copiar el siguiente gran bloque de código:
1 |
// Meta Box for Slider URL
|
2 |
|
3 |
$slidelink_2_metabox = array( |
4 |
'id' => 'slidelink', |
5 |
'title' => 'Slide Link', |
6 |
'page' => array('slides'), |
7 |
'context' => 'normal', |
8 |
'priority' => 'default', |
9 |
'fields' => array( |
10 |
|
11 |
|
12 |
array( |
13 |
'name' => 'Slide URL', |
14 |
'desc' => '', |
15 |
'id' => 'wptuts_slideurl', |
16 |
'class' => 'wptuts_slideurl', |
17 |
'type' => 'text', |
18 |
'rich_editor' => 0, |
19 |
'max' => 0 |
20 |
),
|
21 |
)
|
22 |
);
|
23 |
|
24 |
add_action('admin_menu', 'wptuts_add_slidelink_2_meta_box'); |
25 |
function wptuts_add_slidelink_2_meta_box() { |
26 |
|
27 |
global $slidelink_2_metabox; |
28 |
|
29 |
foreach($slidelink_2_metabox['page'] as $page) { |
30 |
add_meta_box($slidelink_2_metabox['id'], $slidelink_2_metabox['title'], 'wptuts_show_slidelink_2_box', $page, 'normal', 'default', $slidelink_2_metabox); |
31 |
}
|
32 |
}
|
33 |
|
34 |
// function to show meta boxes
|
35 |
function wptuts_show_slidelink_2_box() { |
36 |
global $post; |
37 |
global $slidelink_2_metabox; |
38 |
global $wptuts_prefix; |
39 |
global $wp_version; |
40 |
|
41 |
// Use nonce for verification
|
42 |
echo '<input type="hidden" name="wptuts_slidelink_2_meta_box_nonce" value="', wp_create_nonce(basename(__FILE__)), '" />'; |
43 |
|
44 |
echo '<table class="form-table">'; |
45 |
|
46 |
foreach ($slidelink_2_metabox['fields'] as $field) { |
47 |
// get current post meta data
|
48 |
|
49 |
$meta = get_post_meta($post->ID, $field['id'], true); |
50 |
|
51 |
echo '<tr>', |
52 |
'<th style="width:20%"><label for="', $field['id'], '">', stripslashes($field['name']), '</label></th>', |
53 |
'<td class="wptuts_field_type_' . str_replace(' ', '_', $field['type']) . '">'; |
54 |
switch ($field['type']) { |
55 |
case 'text': |
56 |
echo '<input type="text" name="', $field['id'], '" id="', $field['id'], '" value="', $meta ? $meta : $field['std'], '" size="30" style="width:97%" /><br/>', '', stripslashes($field['desc']); |
57 |
break; |
58 |
}
|
59 |
echo '<td>', |
60 |
'</tr>'; |
61 |
}
|
62 |
|
63 |
echo '</table>'; |
64 |
}
|
65 |
|
66 |
// Save data from meta box
|
67 |
add_action('save_post', 'wptuts_slidelink_2_save'); |
68 |
function wptuts_slidelink_2_save($post_id) { |
69 |
global $post; |
70 |
global $slidelink_2_metabox; |
71 |
|
72 |
// verify nonce
|
73 |
if (!wp_verify_nonce($_POST['wptuts_slidelink_2_meta_box_nonce'], basename(__FILE__))) { |
74 |
return $post_id; |
75 |
}
|
76 |
|
77 |
// check autosave
|
78 |
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { |
79 |
return $post_id; |
80 |
}
|
81 |
|
82 |
// check permissions
|
83 |
if ('page' == $_POST['post_type']) { |
84 |
if (!current_user_can('edit_page', $post_id)) { |
85 |
return $post_id; |
86 |
}
|
87 |
} elseif (!current_user_can('edit_post', $post_id)) { |
88 |
return $post_id; |
89 |
}
|
90 |
|
91 |
foreach ($slidelink_2_metabox['fields'] as $field) { |
92 |
|
93 |
$old = get_post_meta($post_id, $field['id'], true); |
94 |
$new = $_POST[$field['id']]; |
95 |
|
96 |
if ($new && $new != $old) { |
97 |
if($field['type'] == 'date') { |
98 |
$new = wptuts_format_date($new); |
99 |
update_post_meta($post_id, $field['id'], $new); |
100 |
} else { |
101 |
if(is_string($new)) { |
102 |
$new = $new; |
103 |
}
|
104 |
update_post_meta($post_id, $field['id'], $new); |
105 |
|
106 |
|
107 |
}
|
108 |
} elseif ('' == $new && $old) { |
109 |
delete_post_meta($post_id, $field['id'], $old); |
110 |
}
|
111 |
}
|
112 |
}
|
Guau. Se acabó. Dirígete a tu Escritorio y verás un nuevo y brillante tipo de entrada denominado 'Slides'.
Paso 3 Cargar los archivos del slider
Open up slider.php. Now we're going to enqueue jQuery, the FlexSlider jQuery script and the FlexSlider stylesheet. Alternatively you could copy the code from flexslider.css to your style.css file if desired.
1 |
<?php
|
2 |
|
3 |
// Enqueue Flexslider Files
|
4 |
|
5 |
function wptuts_slider_scripts() { |
6 |
wp_enqueue_script( 'jquery' ); |
7 |
|
8 |
wp_enqueue_style( 'flex-style', get_template_directory_uri() . '/inc/slider/css/flexslider.css' ); |
9 |
|
10 |
wp_enqueue_script( 'flex-script', get_template_directory_uri() . '/inc/slider/js/jquery.flexslider-min.js', array( 'jquery' ), false, true ); |
11 |
}
|
12 |
add_action( 'wp_enqueue_scripts', 'wptuts_slider_scripts' ); |
Mientras hacemos esto, hay algo que debes hacer. Debido a la estructura de nuestros archivos, flexslider.css debe ser editado de manera que sea consciente de dónde encontrar la imagen de la flecha. Ábrelo y haz una búsqueda y reemplazo de:
-
imagescon../images
Paso 4 Inicializar el slider
Ahora tenemos que añadir algo de jQuery a nuestro <head> para inicializar el slider. ¡Añadamos las siguientes líneas a slider.php justo bajo el código que acabamos de añadir!
1 |
// Initialize Slider |
2 |
|
3 |
function wptuts_slider_initialize() { ?>
|
4 |
<script type="text/javascript" charset="utf-8"> |
5 |
jQuery(window).load(function() { |
6 |
jQuery('.flexslider').flexslider({ |
7 |
animation: "fade", |
8 |
direction: "horizontal", |
9 |
slideshowSpeed: 7000, |
10 |
animationSpeed: 600 |
11 |
});
|
12 |
});
|
13 |
</script>
|
14 |
<?php } |
15 |
add_action( 'wp_head', 'wptuts_slider_initialize' ); |
Una de las razones por las que he elegido usar FlexSlider es por su flexibilidad. Existen unos cuantos parámetros con los que puedes jugar, pero yo acabo de incluir arriba cuatro importantes. Intenta cambiar slide a fade u horizoltal a vertical. Puedes echar un vistazo a todos los parámetros aquí.
Nota: Ten en cuenta que otra forma de hacer lo anterior consiste en usar la función wp_localize_script (consúltala en el Códice) pero esto es un poco avanzado para este tutorial. No obstante, Pippin Williamson (otro autor de Tuts+) ha escrito un excelente tutorial justo sobre el tema, por si estás interesado.
Paso 5 Creación del slider
Ahora vamos a crear realmente la plantilla para el slider. Primero, haremos una consulta WP_Query para extraer las “entradas” del tipo de entrada personalizada Slides. A continuación, comprobaremos la existencia de diapositivas o “slides” y si existen, empezaremos el slider. Después empezaremos el bucle. Después, cada 'slide' comprobará si se ha establecido una URL de diapositiva y, si es así, creará un enlace para ella. La imagen de la diapositiva se mostrará después y el bucle se cerrará.
1 |
// Create Slider
|
2 |
|
3 |
function wptuts_slider_template() { |
4 |
|
5 |
// Query Arguments
|
6 |
$args = array( |
7 |
'post_type' => 'slides', |
8 |
'posts_per_page' => 5 |
9 |
);
|
10 |
|
11 |
// The Query
|
12 |
$the_query = new WP_Query( $args ); |
13 |
|
14 |
// Check if the Query returns any posts
|
15 |
if ( $the_query->have_posts() ) { |
16 |
|
17 |
// Start the Slider ?>
|
18 |
<div class="flexslider"> |
19 |
<ul class="slides"> |
20 |
|
21 |
<?php |
22 |
// The Loop
|
23 |
while ( $the_query->have_posts() ) : $the_query->the_post(); ?> |
24 |
<li>
|
25 |
|
26 |
<?php // Check if there's a Slide URL given and if so let's a link to it |
27 |
if ( get_post_meta( get_the_id(), 'wptuts_slideurl', true) != '' ) { ?> |
28 |
<a href="<?php echo esc_url( get_post_meta( get_the_id(), 'wptuts_slideurl', true) ); ?>"> |
29 |
<?php } |
30 |
|
31 |
// The Slide's Image
|
32 |
echo the_post_thumbnail(); |
33 |
|
34 |
// Close off the Slide's Link if there is one
|
35 |
if ( get_post_meta( get_the_id(), 'wptuts_slideurl', true) != '' ) { ?> |
36 |
</a>
|
37 |
<?php } ?> |
38 |
|
39 |
</li>
|
40 |
<?php endwhile; ?> |
41 |
|
42 |
</ul><!-- .slides --> |
43 |
</div><!-- .flexslider --> |
44 |
|
45 |
<?php } |
46 |
|
47 |
// Reset Post Data
|
48 |
wp_reset_postdata(); |
49 |
}
|
Paso 6 Usar el slider
Bien, ¡hemos creado finalmente el slider! Ahora es el momento de usarlo realmente. Puedes abrir cualquier archivo de plantilla, por ejemplo index.php, y hacer eco de la función wptuts_slider_template para mostrar el slider.
Así que si queremos mostrar el slider en Twenty Eleven justo después de la cabecera en la página de inicio, abriríamos index.php y justo bajo get_header(); ?>, añadiríamos lo siguiente:
1 |
<?php echo wptuts_slider_template(); ?> |
Pero, ¿qué ocurriría si estuvieses haciendo esto para un cliente o alguien que simplemente no quiere tocar los archivos de plantilla ni PHP? Entonces, probablemente tendríamos que crear un shortcode para ellos, de forma que puedan usar el slider simplemente usando el shortcode [slider].
Añade esto al final del archivo slider.php:
1 |
// Slider Shortcode
|
2 |
|
3 |
function wptuts_slider_shortcode() { |
4 |
ob_start(); |
5 |
wptuts_slider_template(); |
6 |
$slider = ob_get_clean(); |
7 |
return $slider; |
8 |
}
|
9 |
add_shortcode( 'slider', 'wptuts_slider_shortcode' ); |
¡Ahora se puede usar el slider dentro de las entradas, las páginas o en cualquier otro sitio que acepte shortcodes!
Descarga
Si quieres, puedes descargar la carpeta slider, la cual contiene todo lo que hemos visto en este tutorial. Solo tienes que soltarla en la carpeta inc de tu tema (o en cualquier otro sitio está bien, pero asegúrate de ajustar el siguiente código) y añade lo siguiente a tu archivo functions.php:
1 |
// Create Slider Post Type
|
2 |
require( get_template_directory() . '/inc/slider/slider_post_type.php' ); |
3 |
// Create Slider
|
4 |
require( get_template_directory() . '/inc/slider/slider.php' ); |
Nota: Para este tutorial, se ha usado el namespace/texto de dominio wptuts. Deberías realizar una búsqueda y sustitución en todo el código si estás solo copiándolo/pegándolo y sustituyéndolo:
-
wptuts_conyourname_ -
'wptuts'con'yourname'
Si te gustó este tutorial, ¡házmelo saber y continuaré con un tutorial sobre la personalización de nuestro slider! Después echaremos un vistazo al uso de las miniaturas para la navegación, integrando diapositivas de vídeo y añadiendo subtítulos.
By
