Trabajando con un slider en nuestra web desarrollada sobre wordpress

Trabajando con un slider en nuestra web desarrollada sobre wordpress

Cuando estamos programando en nuestra página web sobre el CMS wordpress, resultará conveniente que, nuestro cliente, pueda cambiar las etiquetas o las imagenes del slider de la página principal sin que por ello conocimientos de programación en php, html5 o css.

Los slider son elementos web que se colocan generalmente en la página de llegada, home o inicio y que consisten en un pase de diapositivas, que pueden estar animadas o ser imágenes fijas, a modo de valla publicitaria móvil.

Por éste motivo, el objetivo de éste artículo será el de facilitar la manera de que pueda cambiar las imágenes o los textos de una forma rápida, o añadir elementos nuevos, según sus necesidades. Este objetivo lo vamos a conseguir por medio de los custom post. Para tratar de aclarar términos para mis lectores, éstos elementos pueden ser definidos de la manera siguiente:

Los custom types son tipos de contenido como publicaciones y páginas. Dado que WordPress evolucionó de una simple plataforma de blogs a un CMS robusto, el término publicación se mantuvo firme. Sin embargo, un tipo de publicación puede ser cualquier tipo de contenido.

Se puede hacer de dos formas: mediante código php o bien auxiliándose con plugin. En ésta ocasión trabajaré con la segunda opción.

Los plugin que vamos a utilizar

Serán dos los plugin de wordpress que nos auxiliarán en nuestro propósito de que nuestro slider sea personalizable por nuestro cliente de una manera sencilla y sin que deba tener conocimientos previos de programación.

Ambos plugin tienen versiones gratuitas -serán las que vamos a emplear-; las instalaremos y activaremos primero de todo para poder trabajar con ellas.

La primera de ellas se llama custom field advanced, y la puedes encontrar en ésta dirección web.

pagina de custom field advanced

El segundo plugin se llama custom post type ui, y lo puedes descargar en el siguiente enlace.

pagina principal de custom post types ui

Supongo que ya sabemos instalar plugin en nuestro CMS wordpress, por lo que pasaré directamente al tema que nos interesa.

Slider que queremos personalizar

Esta sección, realmente, es un requisito que también supondré y en el que no me voy a detener demasiado. Parto de la base de que, en el diseño de web que estamos desarrollando, ya tenemos nuestro slider funcionando en nuestra página web. Bien lo hayamos descargado de alguno de los muchos repositorios que hay en Internet, bien lo hayamos desarrollado nosotros mismos, lo que es importante es que ya hemos enconlado nuestros ficheros css y javascript/jquery, y ya tenemos en nuestro index.php o en nuestro front-page.php -según como estemos haciendo la web el código del slider.

Para simplificar un poco el tema, supondré que nuestro slider tiene una serie de imágenes que van rotando, y sobre ellas se sobre imprime un titulo, una descripción y un boton con un enlace a otra página.

Con estas premisas, pasamos a la siguiente cuestión.

Nuestro objetivo: conseguir un slider personalizable para nuestra web

Lo que trato de conseguir es un menu en la barra lateral de nuestro panel de administración de wordpress en el que nos permita personalizar el slider de nuestra página, bien cambiando los textos, la descripción, el enlace o la imagen de fondo de cada una de éstas diapositivas.

Lo primero que voy a hacer es crear el post type. Para ello me voy al plugin custom post type ui que instalé, y tal y como se muestra en la pantalla:

 

Nombre el slug de tipo de contenido y el nombre de la etiqueta en singular y plural, respectivamente. Luego te darás cuenta de porqué es esto así. Ya tenemos creado nuestro custom post type sin una línea de código.

Te darás cuenta, curioseando un poco en la pantalla del plugin que tienen un montón de opciones, de las que ahora no vamos a hablar, pero te invito a que por tu cuenta indages un poco. Lo que si es importante, ya al final de la página es desactivar la opción editor, dejando sólo activadas las opciones: titulo e imagen destacada. A poco que pienses, te darás cuenta de para que nos van a servir éstas opciones.

Ya te habrás dado cuenta que en el menu lateral aparece una nueva opción denominada Sliders.

Si entras en esta opción comprobarás que nos hacen falta los campos descripción y enlace. Esto se consigue con el segundo plugin que instalamos: custom field advanced.

Aqui crearemos los campos que nos hagan falta, en nuestro caso dos: descripcion y enlace. Acuerdate antes de pulsar el botón publicar que en la sección de ubicación, el post type sea igual a slider. Si estas opciones no aparecen de esta manera, el slider no funcionará.

Nuestro siguiente paso será separar del front-page.php ( o del index.php, según estemos trabajando ) el código de nuestro slider. Crearemos un nuevo fichero que llamaremos slider.php, y copiaremos allí todo el código html de nuestro slider. Una cuestión importante es que sólo necesitaremos una etiqueta <li> puesto que vamos a usar un bucle while.

Para que siga apareciendo nuestro slider en la página principal sustituiremos el código anterior en el front-page.php ( o index.php ) por la siguiente línea de código:

<php get_template_part ( 'slider' ); ?>

Al inicio de nuestro fichero slider -sobre el código html- escribiremos el siguiente código php:

<php

$slider = array (
   'post_type' => 'sliders'
);
$loop = WP_Query ( $slider );

?>

Delante de la etiqueta <li> del slider escribiremos nuestro bucle while, tal y como muestro a continuación:

<?php while ( $loop->have_posts () ) : $loop->the_post () ?>
<!-- codigo de slider entre la etiqueta <li> y </li> -->
<?php endwhile; ?>

Donde vaya el rótulo principal del slider escribiremos:

<?php $loop->the_title (); ?>

Donde esté el código de la descripción del slider ( el texto bajo el rótulo principal  de nuestras diapositivas ):

<?php $loop->the_field ( 'descripcion' ); ?>

El argumento de ésta funcion es el nombre dle campo que creastes en el plugin, como recordarás. De igual manera trabajaremos para el enlace del botón:

<php $loop->the_field ( 'enlace' ); ?>

La cuestión de la imagen de la diapositiva es un poco más complicada. Es necesario escribir en nuestro fichero function una pequeña función que nos devuelva el enlace de la imagen que estamos poniendo y que hemos subido a nuestra sección de medios de wordpress previamente.

Para no alargar demasiado éste articulo, transcribiré la función directamente:

function getUrlDestacado () {
    global $post;

    $imgId = get_post_thumbnail_id ( $post->ID );
    $imagen = wp_get_attachment_image_src ( $imgId, 'full' );
    $ruta_imagen = $imagen[0];

    echo $ruta_imagen;

}

Tan sólo nos queda escribir en la opción src de nuestra etiqueta html img el siguiente código php:

<?php getUrlDestacado (); ?>

Si no te has equivocado en ninguno de los pasos, ya tendrás la primera diapositiva de tu slider. Para incluir la segunda tan sólo tendrás ya que ir a la opción Sliders del menu lateral de tu panel de administración de wordpress y añadir una nueva entrada.

Espero que éste pequeño tutorial os sea útil. Espero en mi blog o en mi página de facebook o mi página de twitter vuestros comentarios y aportaciones. Os imvito, también, a que os unáis a mis redes sociales y sigais mis publicaciones.

No Comments

Post a Comment