Uso de un tipo de publicación personalizada para crear un banner de página de inicio

A veces es útil tener un buen banner obvio en la página de inicio de su sitio; piense, por ejemplo, en algo como anuncios y / o fragmentos de código que no son lo suficientemente largos como para merecer una publicación de blog, o enlaces a contenido nuevo dentro del sitio. No desea editar el contenido de su página de inicio cada vez que agregue una nueva parte del contenido, ni tampoco desea profundizar en el código para agregar contenido..

Hay algunas opciones para hacer esto. Una simple es usar un widget que agregue al registrar un área de widgets en el lugar correcto en los archivos de plantilla de su tema. Pero un enfoque que me gusta usar, que te da más flexibilidad, es crear un tipo de publicación llamado 'banner' y usarlo para mostrar uno o más banners. Incluso puede usarlo para mostrar pancartas de una determinada categoría de manera diferente a otras, si tiene varias pancartas pero desea resaltar una de ellas.

En este tutorial ...

•  Te mostraré cómo registrar un tipo de publicación personalizada para tus banners..
•  Te mostraré cómo crear una función en el archivo de funciones de tu tema para mostrar los banners.
• Le mostraré cómo agregar dicha función al archivo de encabezado de su tema para que solo se ejecute en la página de inicio.
• Finalmente, te mostraré cómo estilizar tus banners..

Que necesitarás

Para completar este tutorial necesitarás:

• una instalación de desarrollo de WordPress
• Accede a los archivos de plantillas de tu tema.

Voy a crear un tema infantil de la dos mil doce tema para su conveniencia, pero puede agregar este código a su propio tema con la misma facilidad.

Alternativamente, un mejor enfoque es escribir un complemento para registrar el tipo de publicación personalizada y crear la función para mostrar pancartas, lo que significa que si el tema de su sitio cambia, no perderá su trabajo. Aquí, los usaré para que todo el código esté en un solo lugar para que los descargues..

Registro del tipo de publicación de banner

El primer paso es registrar un nuevo tipo de publicación. Crear un funciones.php archivo para su tema, o agregue el siguiente código a su archivo de funciones existente:

// registrar un tipo de publicación personalizada llamada función 'banner' wptutsplus_create_post_type () $ labels = array ('name' => __ ('Banners'), 'singular_name' => __ ('banner'), 'add_new' => __ ('Nuevo banner'), 'add_new_item' => __ ('Agregar nuevo banner'), 'edit_item' => __ ('Editar banner'), 'new_item' => __ ('Nuevo banner'), 'view_item '=> __ (' Ver banner '),' search_items '=> __ (' Buscar banners '),' not_found '=> __ (' No se encontraron banners '),' not_found_in_trash '=> __ (' No se encontraron banners en Basura '),); $ args = array ('labels' => $ labels, 'has_archive' => true, 'public' => true, 'hierarchical' => false, 'support' => array ('title', 'editor', ' extracto ',' campos personalizados ',' miniatura ',' atributos de página '),' taxonomías '=> array (' post_tag ',' categoría '),); register_post_type ('banner', $ args);  add_action ('init', 'wptutsplus_create_post_type');

Esto crea un nuevo tipo de mensaje llamado 'banner'.

Una vez creado el tipo de publicación, cree un nuevo banner con el administrador de WordPress. El mío se muestra en la captura de pantalla:

Creando una función para mostrar banners

El siguiente paso es crear una función usando WP_Query que consultará el tipo de publicación de banner y mostrará todos los banners. A continuación, agregue esta función en cualquier lugar del tema en el que desee mostrar sus banners..

De nuevo en tu funciones.php archivo (o en su archivo de complemento si está utilizando ese enfoque), agregue lo siguiente:

// función para mostrar el banner de la página de inicio mediante la consulta de la función de tipo de publicación de banner wptutsplus_home_page_banner () // comience por configurar la consulta $ query = new WP_Query (array ('post_type' => 'banner',)); // ahora compruebe si la consulta tiene publicaciones y, si es así, genere su contenido en un buzón de cuadro de encabezado si ($ consulta-> have_posts ()) ?> 
 have_posts ()): $ query-> the_post (); ?> 
>
  
  
Esto ejecuta una consulta en el tipo de publicación de banner y luego genera el contenido de cada banner si se encuentran publicaciones. Tenga en cuenta que solo estoy emitiendo el contenido, no el título; si desea incluir títulos en sus pancartas, puede hacerlo fácilmente agregando el título() a tu función.
 
Agregando la función a su archivo de plantilla
 
En este momento, los banners aún no se mostrarán en ninguna parte de su sitio, tendrá que agregar su función recién creada a un archivo de plantilla para que esto suceda..
 
Voy a añadir mi función a mi header.php archivo, pero puede agregarlo en cualquier lugar que desee, por ejemplo, en su pie de página o barra lateral, en la page.php archivo o en un especial front-page.php expediente.
 
Como solo quiero mostrar banners en mi página de inicio, envolveré mi función en el if (is_home_page ()) etiqueta condicional. Esto comprobará si hay una página de blog principal o una página estática configurada como página de inicio de su página de inicio..
 
En mi header.php archivo, agrego lo siguiente justo dentro de la apertura 
 etiqueta. Como estoy trabajando con un tema infantil, he creado un nuevo header.php archivo en el tema de mi hijo, que es un duplicado del archivo de encabezado del tema principal, excepto este nuevo código.
 
 
El banner que creé anteriormente ahora se muestra en mi página de inicio:
  
Estilizando el Banner
 
En este momento mi banner no es muy llamativo o prominente. Voy a cambiar eso con un poco de estilo.
 
En la hoja de estilo de su tema, agregue lo siguiente:
 
.casa .banner-box text-align: center; color rojo; tamaño de letra: 1.2em; borde: 1px rojo sólido; relleno: 1em; 
 
Esto colocará la pancarta en una gran caja roja sucia, no demasiado sutil, pero ciertamente llama la atención!
  
Si tiene más de un banner para mostrar a la vez y desea resaltar uno de ellos, puede hacerlo con un poco de estilo. Crearé otro banner y le asignaré la categoría 'resaltar', luego agregaré un poco de estilo para los banners en su categoría a mi hoja de estilo:
 
.Inicio .banner-box .category-highlight background: red; color: #fff; margen: 0; relleno: 0.5em; 
 
Esto hace que el banner resaltado sea aún más prominente:
  
No parece demasiado sutil o atractivo, pero esto muestra cómo se puede lograr esta técnica..
 
Por defecto, los banners se muestran en orden cronológico descendente. Puede cambiar esto si lo desea, agregando argumentos a la consulta que creó en el segundo paso anterior.
 
Resumen
 
Los banners de la página de inicio pueden ser una herramienta útil para mostrar mensajes temporales o dirigir el tráfico a otras partes de su sitio. En este tutorial, le mostré cómo crear un simple banner de página de inicio utilizando un tipo de publicación personalizada, que puede usar en cualquier parte del tema de su sitio..
 
Recursos
 
Funciones, etiquetas y clases usadas en este tutorial:
 
 
register_post_type ()
 
WP_Query
 
if (is_front_page ())
 



		
			
	   
	




Código