Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding

Usar un tipo de entrada personalizada para crear un banner de página de inicio

by
Read Time:6 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En ocasiones es útil contar con un banner obvio en la página de inicio de tu sitio, piensa, por ejemplo, en algo como anunciaciones y/o fragmentos que no tengan la longitud suficiente como para constituir una entrada de blog, o enlaces que dirijan a nuevo contenido dentro del sitio. No querrás estar editando el contenido de tu página de inicio cada vez que añadas una nueva pieza de contenido, ni querrás adentrarte en el código para añadir contenido.

Existen unas cuantas funciones para conseguir esto. Una sencilla es usar un widget que añades registrando un área de widget en el lugar correcto en los archivos de plantilla de tu tema. Pero un enfoque que a mí me gusta usar, el cual te proporciona más flexibilidad, consiste en crear un tipo de entrada denominada “banner” y usarla para mostrar uno o más banners. Puedes incluso usarla para mostrar banners pertenecientes a una cierta categoría de forma distinta a otras, si tienes múltiples banners, pero quieres destacar uno de ellos.

En este tutorial…

  • Te mostraré cómo registrar un tipo de entrada para tus banners.
  • Te enseñaré cómo crear una función en el archivo de funciones de tu tema para mostrar los banners.
  • Te enseñaré cómo añadir dicha función al archivo de cabecera de tu tema de manera que solo se ejecute en la página de inicio.
  • Por último, te mostraré cómo a plicar estilo a tus banners.

Lo que vas a necesitar

Para completar este tutorial necesitarás lo siguiente:

  • Una instalación de WordPress para el desarrollo
  • Acceso a los archivos de plantilla de tu tema

Voy a crear un tema hijo del tema twentytwelve por conveniencia, pero puedes añadir este código fácilmente a tu propio tema.

Alternativamente, un mejor enfoque es escribir un plugin para registrar el tipo de entrada personalizada y crear la función que muestre banners, lo que significa que si el tema del sitio cambia, no perderás tu trabajo. Aquí, usaré uno de forma que todo el código esté en un sitio para que lo puedas descargar.

Registrar el tipo de entrada del banner

El primer paso consiste en registrar un nuevo tipo de entrada.  Crea un archivo functions.php para tu tema, o añade el siguiente código a tu actual archivo de funciones:

Esto crea un nuevo tipo de entrada denominada “banner”.

Habiendo creado un nuevo tipo de entrada, crea un nuevo banner usando el administrador de WordPress.  El mío se muestra en la siguiente captura de pantalla:

using-a-custom-post-type-to-create-a-home-page-banner-adminusing-a-custom-post-type-to-create-a-home-page-banner-adminusing-a-custom-post-type-to-create-a-home-page-banner-admin

 Crear una función para mostrar banners

El siguiente paso consiste en crear una función usando WP_Query que consultará el tipo de entrada banner y mostrará todos los banners. Después añadirás esta función en cualquier sitio de tu tema en el que quieras mostrar tus banners.

De nuevo en tu archivo functions.php (o en el archivo de tu plugin si estás usando este enfoque), añade lo siguiente:

Esto ejecuta una consulta en el tipo de entrada banner y, a continuación, genera el contenido de cada banner si se encuentra alguna entrada. Ten en cuenta que solo estoy generando el contenido, no el título, si quieres incluir títulos en tus banners, podrías hacerlo fácilmente añadiendo the_title() a tu función.

Añadir la función al archivo de tu plantilla

En este momento, los banners todavía no se mostrarán en ningún lugar de tu sitio, tendrás que añadir tu recientemente creada función a un archivo de tu plantilla para que esto ocurra.

Voy a añadir mi función a mi archivo header.php, pero podrías añadirlo en cualquier sitio que desees, por ejemplo en tu pie de página o en tu barra lateral, en el archivo page.php o en un archivo front-page.php especial.

Como solo quiero mostrar banners en mi página de inicio, envolveré mi función en la etiqueta condicional if( is_home_page() ). Esto comprobará la página de inicio con independencia de que tengas configurada la página de inicio de tu sitio como tu blog principal o una página estática.

En mi archivo header.php, añado lo siguiente justo dentro de la etiqueta de apertura <div id="main">. Dado que estoy trabajando con un tema hijo, he creado un nuevo archivo header.php en mi tema hijo el cual es un duplicado del archivo header de mi tema padre a excepción del nuevo código.

El banner que creé anteriormente ahora se muestra en mi página de inicio:

using-a-custom-post-type-to-create-a-home-page-banner-unstyled-bannerusing-a-custom-post-type-to-create-a-home-page-banner-unstyled-bannerusing-a-custom-post-type-to-create-a-home-page-banner-unstyled-banner

Aplicar estilo al banner

Por el momento mi banner no es muy llamativo o prominente. Lo cambiaré con un poco de estilo.

En la hoja de estilos del tema, añade lo siguiente:

Esto pondrá el banner en una caja roja, no demasiado sutil, pero sin duda llama la atención!

using-a-custom-post-type-to-create-a-home-page-banner-styled-bannerusing-a-custom-post-type-to-create-a-home-page-banner-styled-bannerusing-a-custom-post-type-to-create-a-home-page-banner-styled-banner

Si tienes más de un banner que mostrar a la vez y quieres resaltar uno de ellos, puedes hacerlo con un poco de estilo. Crearé otro banner y le asignaré la categoría 'highlight', luego añadiré algunos estilos para banners su la categoría a mi hoja de estilos:

Esto hace que el banner destacado sea incluso más prominente:

using-a-custom-post-type-to-create-a-home-page-banner-highlighted-bannerusing-a-custom-post-type-to-create-a-home-page-banner-highlighted-bannerusing-a-custom-post-type-to-create-a-home-page-banner-highlighted-banner

No tiene un aspecto demasiado sutil o atractivo, pero esto te muestra cómo puedes alcanzar esta técnica.

Por defecto, los banners se muestran en orden cronológico descendente. Puedes cambiar esto si quieres añadiendo argumentos a la consulta que creaste en el segundo paso de arriba.

Resumen

Los banners de la página de inicio pueden ser una herramienta útil para mostrar mensajes temporales o para dirigir tráfico a otras partes de tu sitio. En este tutorial, te he mostrado cómo crear un sencillo banner de la página de inicio usando un tipo de entrada personalizada, el cual puedes usar en cualquier lugar del tema de tu sitio.

Recursos

Funciones, etiquetas y clases de este tutorial:

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.