Añadir Basic jQuery Slider a una plantilla WordPress

El objetivo principal de este artículo es observar la posibilidad que existe de añadir scripts jQuery a tu WordPress sin necesidad de añadir plugins extras que pueden hacer que tu página vaya más lenta y que admás la mayoría no te acaban de satisfacer. Además, vamos a ver como añadir un slider en la página principal de una plantilla WordPress utilizando esta metodología.

Desde que conocí el plugin jQuery Basic Slider no he dejado de utilizarlo por su facilidad de instalación, por su simplicidad de adaptación y porque jamás me ha generado problemas con otros plugins jQuery.

Antes de leer este tutorial es necesario que estés familiarizado con el plugin jQuery Basic Slider. Te darás cuenta que no es más que un simple slider como su nombre indica.

Lo primero que tendremos que hacer es editar el archivo «functions.php» añadiéndole la librería jQuery de la siguiente forma:

function my_init_method() {
    if (!is_admin()) {
         wp_deregister_script('jquery');
         wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
         wp_enqueue_script( 'jquery' );
     }
}
add_action('init', 'my_init_method');

En este caso estamos registrando una librería minimizada de jQuery obtenida desde el servidor de google.

Estamos condicionando la inclusión por el simple hecho de que en la administración ya se utiliza jQuery y podría dar conflicto.

Ahora en el footer.php vamos a añadir el plugin jQuery Basic Slider junto con su llamada, justo antes del cierre de la etiqueta </body>, como por ejemplo:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/basic-jquery-slider.js"></script>
<script type="text/javascript">
$(document).ready(function(){    
    $('#slider').bjqs({
        'animation' : 'fade',
        'showControls': false,
        'showMarkers' : false,
        'centerMarkers' : false,
        'useCaptions': true,
        'rotationSpeed': 5000,
        'width' : 940,
        'height' : 350
    });
}); 
</script>

Ahora deberíamos volver a editar el archivo functions.php estableciendo las dimensiones del slider, en este caso le vamos a asignar 940px de ancho y 350px de alto para ocupar todo el ancho de la página.

add_theme_support('post-thumbnails');
add_image_size('homeslider', 940, 350, true);

Ahora para añadirle un efecto más profesional ofreciendo más facilidades al cliente vamos a crear un nuevo item de menú en el panel de administración mostrando el siguiente aspecto:

Este efecto lo podemos conseguir añadiendo en el archivo «functions.php» de la plantilla la siguiente función:

function ts_post_type_slider() {
    register_post_type( 'slider',
                array( 
                'label' => __('Slider', 'templatesquare'), 
                'public' => true, 
                'show_ui' => true,
                'show_in_nav_menus' => true,
                'rewrite' => true,
                'hierarchical' => true,
                'menu_position' => 5,
                'exclude_from_search' =>true,
                'supports' => array(
                                     'title',
                                     'editor',
                                     'thumbnail',
                                     'excerpt',
                                     'revisions')
                    ) 
                );
    register_taxonomy('category_slider', __('slider', 'templatesquare'),array('hierarchical' => true, 'label' =>  __('Slider Categories', 'templatesquare'), 'slidercat' => __('Category', 'templatesquare'))
    );
}

Ahora podemos acceder a este nuevo apartado de administración de sliders y podemos crear categorías de sliders y entradas (que representarán items del slider) con su respectivo título, contenido y una imagen que tenga como mínimo 940px de ancho por 350px alto. Esta imagen la deberemos marcar como destacada, no será necesario que las insertemos en la entrada.

Ahora tan solo tienes que maquetar en el index.php de la plantilla el slider. En el caso del ejemplo lo vamos a hacer de la siguiente forma:

<div id="slider">
    <!-- start Basic Jquery Slider -->
    <ul class="bjqs">
        <?php query_posts('post_type=slider&category_slider=Home');
         while (have_posts()): the_post(); ?>
            <li>
                <?php the_post_thumbnail('homeslider'); ?>
                <div class="bjqs-info">
                    <div class="bjqs-html-caption">
                        <span class="bjqs-heading"><?php the_title(); ?></span>
                        <span class="bjqs-linea">&nbsp;</span>
                        <span class="bjqs-description"><?php the_content(); ?></span>
                    </div>
                </div>
            </li>
        <?php endwhile; wp_reset_query(); ?>
    </ul>
    <!-- end Basic jQuery Slider -->
</div>

Como puedes observar estamos utilizando la estructura de la maquetación que trae el plugin Basic jQuery Slider pero iterando dinámicamente los elementos de la lista desordenada obteniendo de la base de datos los posts de tipo slider que están asignados a la categoría que hemos creado previamente llamada «home».

Cada post estará compuesto por su imagen destacada teniendo las dimensiones que le hemos asignado 940x350px y hemos creado un contenedor dentro que estará posicionado por encima de la imagen flotando a la izquierda con posición absoluta. Si te fijas con más detalle, dentro del contenedor estamos mostrando también el título del post y el contenido.

Ahora solo falta ver los estilos de esta maquetación que podríamos incluir dentro de la hoja de estilos de la plantilla.

.bjqs-info {
    background-image: url("/wp-content/themes/YOUR_THEME/images/fondo_azul.png");
    height: 290px;
    padding: 30px;
    position: absolute;
    top: 0;
    width: 290px;
}
.bjqs-html-caption {
    border: 1px solid #FFFFFF;
    float: left;
    height: 100%;
    width: 100%;
}
.bjqs-heading {
    clear: both;
    color: #FFFFFF;
    float: left;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 40px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
    width: 290px;
}
.bjqs-linea {
    background-color: #FFFFFF;
    clear: both;
    display: block;
    height: 2px;
    margin: 10px auto;
    width: 100px;
}
.bjqs-description {
    clear: both;
    color: #B1B0B1;
    float: left;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    padding: 0 15px;
    width: 260px;
}

Igual que hemos podido incluir Basic jQuery Slider en una plantilla de WordPress, también podríamos añadir cualquier plugin jQuery existente dando una potencialidad increible a tu plantilla WordPress.