En este grupo de dos tutoriales, estamos creando un slider para mostrar entradas desde un tipo de contenido personalizado para crear un efecto de conversación entre dos personas de la imagen.

En la parte anterior, registramos el tipo de contenido, configuramos los sliders y los añadimos a la cabecera de nuestra web. Ahora necesitamos posicionar e texto y añadir estilo.

Qué Vas a Necesitar

Para seguir adelante, necesitarás:

• una instalación en desarrollo de WordPress
• un editor de código
• el tema gratuito Responsive instalado
• el tema hijo de Responsive de la parte anterior

El ejemplo en el que estoy trabajando es un sitio real que estoy desarrollando para un cliente, el cual está ejecutando un tema hijo del tema Responsive. He creado un tema hijo del tema Responsive y he añadido estilo personalizado así como funciones en el fichero functions.php. Puedes añadir esto a tu propio tema o crear un nuevo tema hijo del tema Responsive como yo.

Los Sliders Actuales

Así es como se ve el sitio web ahora mismo:

Están los sliders, y aunque no están en mal sitio, necesitan estilo.

En este tutorial haremos lo siguiente:

• Añadir y posicionar los sliders para ubicarlos cerca de la persona apropiada.
• Registrar una fuente usando las fuentes de Google y añadirla al texto.
• Añadir 'quotes' alrededor del texto.
• Añadir una media query para resolver cualquier problema de disposición en las pantallas pequeñas.

Para cada 'quote' solo he añadido un título de entrada como el texto que se mostrará. Si también añades contenido a la entrada, también se mostrará, por lo que asegúrate de que tus 'quotes' tienen sólo un título y no contenido.

Posicionar los Sliders

Vamos a añadir posición a los sliders para que los cubran por encima de la imagen.

Añadir Posicionamiento Absoluto

Abre el fichero style.css de tu tema hijo y añade esto:

.tutsplus-sliders {
    position: relative;
  max-width: 1000px;
	margin: 0px auto;
}
.smooth_slider {
	position: absolute;
}

Esto le da al div que hemos creado para contener nuestros sliders posición relativa y los sliders en si mismos tienen posicionamiento absoluto dentro de este div. También establece la anchura correcta para nuestro div para que quede centrado con la imagen.

Ahora los sliders están encima de la imagen:

El problema es que están superpuestos unos sobre otros, y que necesitan estar al lado de la persona. Vamos a arreglar eso.

Colocar los Sliders al Lado de las Personas

El plugin Smooth Slider da a cada slider un ID único. Así que el slider 'Heide' tiene el ID #smooth_slider_3 y el slider 'Iain' tiene el ID #smooth_slider_4. Nos lo podemos apuntar para posicionar correctamente cada slider.

Añadir esto a tu hoja de estilo:

#smooth_slider_3 {
    top: 70px;
	right: 90px;
	text-align: right;
	width: 250px;
}
#smooth_slider_4 {
	top: 10px;
	left: 90px;
	width: 250px;
}

Tendrás que comprobar el ID que le ha dado el plugin a cada uno de los sliders comprobando la marca de salida: pueden ser diferentes a las mías.

Ahora mis sliders están en el lugar correcto:

Está se ve mejor. Ahora para añadir algún estilo.

Estilo del Texto

Quiero cambiar la fuente y agregar comillas alrededor del texto.

Cambiar la Fuente y el Tamaño

En primer lugar, vamos a registrar una fuente con Google Fonts. Vuelve al archivo functions.php de tu tema y añade esto:

function tutsplus_add_google_fonts() {
    wp_register_style( 'googleFonts', 'http://fonts.googleapis.com/css?family=Droid+Serif');
	wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'tutsplus_add_google_fonts' );

Nota: en el código fuente hay dos fuentes encoladas porque he utilizado otra fuente de Google en otros lugares del sitio, pero no para los sliders.

Guardar tu fichero de funciones y vuelve a tu hoja de estilo. Añade esto:

.smooth_slider h2 {
    font-size: 19px !important;
	font-family: 'Droid Serif', serif  !important; 
	color: #666633 !important;
	line-height: 26px !important;
}

He tenido que agregar !important a cada línea porque de otra manera no sobreescribirá el estilo añadido por el plugin. Si quieres, podrías editar las fuentes utilizando la pantalla de configuración: no tengo ya que no me deja usar mi fuente de Google.

Nuestra fuente ahora se ve mucho mejor:

Añadir Comillas

Por último, quiero agregar comillas alrededor de cada trozo de texto, para enfatizar el hecho de que la gente en la imagen se supone que se habla. Para ello, utilizo los pseudo elementos before y after.

Añade esto en tu hoja de estilos:

.smooth_slider h2::before {
  content: open-quote;
}
.smooth_slider h2::after {
  content: close-quote;
}

Esto encerrará nuestros elementos h2 entre comillas dobles.

Nota: algunos navegadores antiguos no admiten esto puesto que no admiten elementos pseudo. Sin embargo no estoy preocupada por esto como los sliders no son esenciales para el contenido y el número de personas que utilizan los navegadores ahora es muy pequeño.

Ahora guarda tu hoja de estilos y comprueba la web:

¡Fantástico! Ahora tengo mi texto en el lugar correcto con comillas alrededor de él. Mi cliente ahora puede añadir muchas citas como quiera, asignarlas a los sliders apropiados, y seguir la conversación.

Añadir una Media Query

Debido que he usado posicionamiento absoluto, se romperá la posición de mi texto en pantallas de menor tamaño; los tamaños de fuente también tendría que ser tan pequeño como para hacer el texto ilegible. Así que voy a agregar una media query para ocultar los sliders en pantallas de menor tamaño.

Primero reviso el punto en el que se rompe la disposición: es a aproximadamente 900 px de ancho. Así que necesito agregar una media query para pantallas menores de 900 px de ancho.

En la parte inferior de tu hoja de estilos, añade la media query:

@media screen and (max-width: 900px) {
    .tutsplus-sliders {
		display: none;
	}
}

Ahora los sliders desaparecen en pantallas de menor tamaño:

Si quieres, puedes añadir estilo alternativo en tu media query para pantallas de tamaño medio, haciendo un poco más pequeño el tamaño de fuente y posicionar el texto para que entre.

Resumen

El uso de sliders para texto te puede ayudar a añadir efectos interesantes en tu web: aquí he añadido un efecto de conversación que se superpone sobre una imagen de dos personas.

En este conjunto de dos tutoriales, has aprendido cómo crear este efecto por:

• registrar un tipo de contenido
• instalar un plugin de slider y asignarle las entradas
• Mostrar sliders en la cabecera usando una función enganchada a un action hook proporcionado por el tema
• posicionar el texto junto a las dos personas
• dar estilo al texto y añadir marcas de expresión alrededor de él
• quitar el texto en pantallas de menor tamaño mediante una media query

Puedes utilizar esta técnica para crear texto emergente en cualquier lugar en tus páginas — sé creativo!