Advertisement
  1. Code
  2. WordPress
Code

Crear un Banner de 'Conversación' con Texto Rotativo en WordPress: parte 1

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Create a 'Conversation' Banner With Revolving Text Using a Custom Post Type.
Create a 'Conversation' Banner With Revolving Text in WordPress: Part 2

Spanish (Español) translation by Oscar Abad Folgueira (you can also view the original English article)

Los sliders pueden ser conflictivos - todos hemos tenido clientes que insistían en ellos independientemente si mejoran o no el sitio. Pero tienen su lugar. Pueden ayudarte para resaltar contenido, mostrar imágenes en un sitio en el que sin importantes los elementos visuales, y dar vida a un sitio web.

En la mayoría de los casos, probablemente utilizarás sliders para mostrar imágenes, puedes o no asociarlos con contenido de tu web. Pero también puedes utilizar un slider para mostrar texto en tu web.

En este conjunto de dos tutoriales, te mostraré cómo crear un slider de texto con un efecto interesante: utilizará un tipo de post personalizado para ponerlo en un solo elemento de texto después de otro en dos bloques, creando el efecto de una conversación en la parte superior de la página. Esto se sobrepondrá sobre una foto de dos personas, para que el efecto sea que los dos están hablando entre sí.

Qué Vas a Necesitar

Para seguir el tutorial, necesitarás:

  • Una instalación en desarrollo de WordPress
  • un editor de código
  • un tema responsivo gratuito instalado

En este ejemplo trabajaremos sobre una web real que estoy desarrollando para un cliente, que está funcionando con un tema hijo del tema Responsive. Voy a ir creando un tema hijo del tema Responsive y añadiendo estilo personalizado así como funciones en el fichero functions.php del tema. Podrías añadir esto a tu propio tema o crear un tema hijo del tema Responsive como yo.

En este tutorial, vamos a crear el slider usando un tipo de post personalizado. Específicamente vamos a:

  • crear un tema hijo del tema Responsive
  • registra un tipo de contenido personalizado
  • crear entradas usando nuestro tipo de contenido personalizado
  • instalar y configurar un plugin para mostrar el slider de texto
  • añadir nuestro slider al encabezado de la web usando un action hook

En la siguiente parte, añadiremos CSS a nuestro tema para posicionar correctamente el texto, creando un efecto de conversación y para darle estilo.

¡Empecemos!

Crear el Tema Hijo

Primero vamos a crear el tema hijo del tema Responsive. Hago esto porque no quiero editar el tema Responsive: si haces esto, perderás tu trabajo cuando realices la próxima actualización del tema. Alternativamente puedes crear un plugin que haga esto.

En tu directorio wp-content/themes, crea un nuevo directorio vacío. Yo le llamaré tutsplus-conversation-banner

En este directorio crea un fichero llamado style.css y añade esto:

Edita el código de arriba para hacer tu mismo el autor y añade tu propia URI.

Ahora guarda este fichero y activa tu nuevo tema.

Añadir Estilo Personalizado

Debido a que es una web real, le he añadido estilo personalizado que está en la hoja de estilo del tema hijo. No voy a detallar esto mucho porque se escapa de la finalidad de este tutorial pero puedes ver el estilo en el código de este tutorial.

Así es como se ve mi web antes de añadir el slider:

site with header image before slider added

La imagen en el encabezado tiene espacio a cada lado de las dos personas, y yo le he dado estilo a mi slider para que muestre texto a cada lado de la gente, dando el efecto que está apuntando a sus palabras.

Registrar el Tipo de Contenido

El siguiente paso es registrar un tipo de contenido llamado quote. En el directorio de tu tema hijo, crea un nuevo fichero con el nombre functions.php

Nota: Es una buena práctica usar un plugin para registrar un tipo de contenido en lugar de añadirlo al fichero functions de tu tema. Estoy usando el fichero functions para dejar todo en un mismo sitio así lo tienes en el código para descargar.

Abre tu fichero functions.php y añade este código:

Esto registra un nuevo tipo de contenido llamado quote.

Puedes ver el nuevo tipo de contenido en mi sitio, con algunos 'quotes' que he creado:

A listing of custom post types

Ten en cuenta que estos son solo 'quotes' de prueba - el hecho de utilizar tipos de contenido personalizado hace más fácil para mi cliente añadir sus propias 'quotes' una vez que la web esté lanzada. Cada uno de ellos sólo tiene un título y sin contenido, ya que si tuviera contenido, el plugin podría mostrar los dos.

Instalar y Configurar el Plugin de Slider

El siguiente paso es instalar y configurar el plugin de slider. Yo estoy usando el plugin Smooth Slider que te deja elegir que entradas se añadirán al slider y organizar manualmente tus entradas en la pantalla de configuración del slider.

Ve a Smooth Slider > Settings y configúralo así:

  • Texto de título por defecto: deja esto en blanco.
  • Imagen en miniatura: quita todos los checks de esta sección.
  • Contenido del Slider - Seleccionar el contenido de: selecciona Contenido.

Estoy añadiendo estilo en mi hoja de estilos porque quiero utilizar la fuentes de Google, por eso no me preocupa mucho la configuración de las fuentes, pero si tu lo prefieres, puedes elegirlas en la pantalla de configuración.

Configurar los Sliders

El siguiente paso es añadir los siders y poblarlos con entradas.

Crear los Sliders

Necesitamos añadir dos sliders: uno para cada una de las dos personas. Ve a Smooth Slider > Sliders y haz click en Crear Nuevo Slider. He llamado a mis dos sliders 'Heide' y 'lain' porque son los nombres de las personas.

Smooth slider - sliders added

Añadir Entradas a los Sliders

Añades entradas al slider desde la pantalla de edición de la entrada. Abre una de tus entradas y vete abajo para ver la opción para añadirla al slider:

Smooth slider - adding a post to the slider

Selecciona el slider que quieres añadir a la entrada y guárdalo. Repite esto para cada entrada, añadiéndolo al slider relevante.

Ordenar Entradas en el Slider

Puedes editar manualmente el orden en el que las entradas se verán en el slider. Vete a Smooth Slider > Sliders y selecciona el slider con el que quieras trabajar. Este es mi slider 'Heide':

Configuring a slider

Vete abajo para colocar las entradas en el orden correcto:

Viewing the slides in the proper order

Una vez hecho esto, guarda el slider.

Añadir los Sliders en el Encabezado de la Página

Ahora mismo tenemos dos sliders pero no aparecen en el sitio web. El plugin te facilita shortcodes que puedes utilizar para añadir sliders a tu sitio web: así como los añadiremos a los ficheros del tema, usaremos la función do_shortcode().

El tema Responsive nos facilita un hook llamado responsive_in_header que nos permite añadir código en el encabezado de la página. Esto se mostrará encima de la imagen pero en el encabezado: añadiremos CSS para posicionar los sliders correctamente en la siguiente parte de este tutorial.

Abre el fichero functions.php de tu tema y añade esta función:

Esto crea un div con la clase tutsplus-sliders, que usaremos más tarde para el posicionamiento, y usaremos los shortcodes para mostrar los dos sliders.

Guarda tu fichero functions.

El sitio web ahora se parecerá a esto:

sliders displayed at top of header above image

Los sliders están ahí, y ahora funcionan. Pero hay mucho espacio en la parte superior de la página, encima de la imagen. Necesitamos que se muestren encima de la imagen, al lado de las dos personas.

En la siguiente parte vamos a ver cómo corregir eso. Añadiremos CSS para posicionar los dos sliders y también para darles estilo. Registraremos una fuente de Google que usaremos para las 'quotes'.

Resumen

Los sliders no son solo para imágenes: también puedes usarlas para mostrar texto. En este tutorial has aprendido como configurar dos sliders usando un tipo de contenido personalizado. Después añadiremos el estilo para hacer que nuestro texto se muestre como queramos.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.