Como Construir Un Sitio Web de Venta de Tickets con WordPress y TicketTailor, Dia Dos: Construyendo

En la primera parte de este tutorial analizamos el tipo de cosas que debe tener en cuenta antes de comenzar a trabajar y crear su plantilla de sitio web de tickets. Ahora, vamos a agregar todas las funciones que desearía de un sitio web de venta de boletos.

Nos sumergiremos directamente en la plantilla creada a partir de la instalación de WordPress predeterminada de Twenty Eleven y crearemos una consulta elegante que use datos de campos personalizados. Luego vamos a registrarnos en TicketTailor y aprenderemos cómo crear llamadas a la acción para asegurarnos de que nuestros usuarios puedan comprar fácilmente.

Paso 1 preguntas sobre consultas

Una de las cosas que me sorprenden constantemente al escribir código para usar con WordPress es la cantidad de tareas avanzadas que se pueden realizar con un fragmento de código relativamente simple y un poco de pensamiento lateral. He perdido la cuenta de la cantidad de veces que he usado una solución demasiado complicada a un problema solo para descubrir que cambiar una línea de código en una fecha posterior elimina la necesidad de 100 líneas que escribí cuando entregué el proyecto a mi cliente.

El sitio web de venta de entradas es uno de esos ejemplos. Mi cliente quería un sitio que hiciera una separación entre eventos futuros y pasados. Resolví el problema con un complemento que cambiaba automáticamente la categoría de un evento de "futuro" a "pasado" en un momento determinado en un día determinado. Esto no era en absoluto necesario.

Las consultas de mensajes de WordPress nos permiten consultar por campo personalizado. Eso significa que podemos establecer un campo personalizado en nuestras publicaciones llamado 'Fecha', por ejemplo, y luego organizar nuestras publicaciones según eso. Como probablemente pueda ver, eso significa que también podemos hacer que las publicaciones desaparezcan o hacer cualquier otra cosa que queramos simplemente escribiendo una buena consulta y luego utilizando nuestros campos personalizados con cuidado.

Sigamos adelante y escribamos una consulta para nuestra página de índice. Queremos hacer las siguientes cosas:

1. Mostrar los proximos 4 conciertos
2. Esconde cualquiera que ya haya pasado
3. Organícelas por la fecha en que van a ocurrir en lugar de la fecha en que creamos la publicación

Aquí está la consulta que vamos a utilizar para hacer eso:

1

2

query_posts(

3

  array (

4

		'post_type' => 'post',

5

		'posts_per_page' => 4,

6

		'meta_key' => 'Date',

7

		'meta_value' => date("Y/m/d"),

8

		'meta_compare' => '>=',

9

		'orderby' => 'meta_value',

10

		'order' => 'ASC',

11

		'paged' => get_query_var('paged')

12

	)

13

);

Eso tiene muchos símbolos y letras, así que vamos a desglosarlo:

• post_type: esto solo le dice a WordPress que queremos usar publicaciones en lugar de páginas u otro tipo de publicación
• posts_per_página: establezca el número de publicaciones que desea mostrar. Hemos usado 4 para el ejemplo, pero puede establecer cualquier número que sea 1 o mayor
• meta_key - ¿Recuerdas que podemos consultar publicaciones por un campo personalizado? Esto le dice a WordPress como se llama el campo que estamos usando
• meta_value: como estamos usando una fecha como nuestra consulta, esto le dice a WordPress qué formato de fecha debe esperar
• meta_compare: hace exactamente lo que dice: compara los valores meta de todas las publicaciones en el bucle. Aquí, los compara con la fecha establecida en su servidor web y se asegura de que solo muestre publicaciones que tengan una fecha actual o futura.
• order_by - Le dice a WordPress que queremos que nuestras publicaciones se muestren en orden de meta_valor en lugar de la fecha de publicación estándar
• orden: esto le permite a WordPress saber que vamos a mostrar las publicaciones en orden ascendente: la muestra más cercana primero, la fecha más lejana más abajo en la página
• paginado: si la paginación está habilitada en tu tema, necesitarás esto. Si no lo es, no afectará tu plantilla.

¡Guauu! Respiracion profunda. Acabamos de escribir el código que va a impulsar la mayor parte de nuestro trabajo de ahora en adelante: ¡buen trabajo! Ahora vamos a colocarlo en nuestro archivo index.php. Aquí es cómo debería verse el archivo index.php después de eso:

1

2

<?php

3

/**

4

 * The main template file.

5

 *

6

 * This is the most generic template file in a WordPress theme

7

 * and one of the two required files for a theme (the other being style.css).

8

 * It is used to display a page when nothing more specific matches a query.

9

 * E.g., it puts together the home page when no home.php file exists.

10

 * Learn more: https://codex.wordpress.org/Template_Hierarchy

11

 *

12

 * @package WordPress

13

 * @subpackage Twenty_Eleven

14

 */

15

16

get_header(); ?>

17

18

		<div id="primary">

19

			<div id="content" role="main">

20

21

22

				<?php twentyeleven_content_nav( 'nav-above' ); ?>

23

24

				<?php if (have_posts()) : ?>

25

26

 <?php 

27

            query_posts( array ( 

28

                'post_type' => 'post',

29

                'posts_per_page' => 4,

30

                'meta_key' => 'Date',

31

                'meta_value' => date("Y/m/d"),

32

                'meta_compare' => '>=',

33

                'orderby' => 'meta_value',

34

                'order' => 'ASC',

35

                'paged' => get_query_var('paged')

36

                ) ); 

37

38

               ?>	

39

 <?php while (have_posts()) : the_post(); ?>

40

41

					<?php get_template_part( 'content', get_post_format() ); ?>

42

43

				<?php endwhile; ?>

44

45

				<?php twentyeleven_content_nav( 'nav-below' ); ?>

46

47

			<?php else : ?>

48

49

				<article id="post-0" class="post no-results not-found">

50

					<header class="entry-header">

51

						<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>

52

					</header><!-- .entry-header -->

53

54

					<div class="entry-content">

55

						<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>

56

						<?php get_search_form(); ?>

57

					</div><!-- .entry-content -->

58

				</article><!-- #post-0 -->

59

60

			<?php endif; ?>

61

62

			</div><!-- #content -->

63

		</div><!-- #primary -->

64

65

<?php get_footer(); ?>

Haga clic en guardar y luego cargar su sitio. Algo se ve mal aquí, ¿verdad? Todas tus publicaciones han desaparecido:

¿Dónde han ido mis mensajes?

¡No es para preocuparse! Eso significa que nuestra consulta ha funcionado. ¿Recuerda que le dijo a WordPress que usara el campo personalizado "Fecha" para mostrar sus publicaciones? Bueno, por más inteligente que sea WordPress, si no establece un campo personalizado de "Fecha" en sus publicaciones, ¡no mostrará sus publicaciones! Ahora tenemos que remediar nuestro problema.

Paso 2 Agregando el campo 'Fecha' personalizado

Carga tu panel de WordPress y navega a una de tus publicaciones. Haga clic en 'editar'. Si nunca ha usado campos personalizados en su sitio antes, es probable que los campos queden ocultos en su panel de edición posterior. Para habilitarlas, haga clic en 'Opciones de pantalla' en la esquina superior derecha de su ventana y luego marque la casilla junto a 'Campos personalizados'. Eso debería darle la opción de agregar campos personalizados desplazándose a la parte inferior de la ventana a partir de ahora. Agrega un nuevo campo personalizado con el nombre 'Fecha'

El campo personalizado distingue entre mayúsculas y minúsculas. No importa lo que escriba siempre que coincida con el nombre del campo personalizado en su consulta.

Ahora también debe agregar una fecha en el formato correcto. Anteriormente, especificamos en nuestra consulta que íbamos a usar el formato de fecha: YYYY / MM / DD: debe atenerse a este formato para este tutorial. Si no lo haces, tu código no funcionará. Eso se debe a que WordPress es increíblemente eficiente en la comparación de fechas y, a partir del primer año, se asegura de que solo las publicaciones de este año y en el futuro se mostrarán. Luego hace lo mismo durante meses. Luego por días.

Si bien este formato de fecha probablemente no le parezca natural, le ahorrará muchos problemas. Deberías tener algo que se vea así:

Agregue fechas a todas sus publicaciones usando el campo personalizado 'Fecha' ahora. Luego, vuelva a cargar su archivo index.php y verá que tiene los cuatro conciertos (publicaciones) con la 'Fecha' más cercana mostrada. Cuatro también habrán desaparecido (asumiendo que usaste el archivo XML que te di en la primera parte). Hay una razón para eso y lo veremos en un momento.

Paso 3 Registrarse en TicketTailor

TicketTailor es un gran sitio que ofrece un servicio de venta y emisión de entradas para promotores de conciertos. Además de tener un increíble servicio al cliente, también tienen una extensa plataforma de servicios de fondo que ofrece estadísticas de venta de boletos, capacidades de enlace de afiliados, capacidades avanzadas de emisión de boletos, como diferentes niveles de precios, y también la capacidad de imprimir listas de invitados fáciles de usar para conciertos.

Si bien es posible que pueda obtener esas capacidades en otros lugares, lo que no puede obtener en ningún otro lugar es la ayuda de personalización del personal de TicketTailor. Con los tres planes principales en su plan de precios, el equipo detrás de TicketTail o personalice su página de ventas en su servidor para que se parezca exactamente a su sitio de WordPress, independientemente de lo que le haya hecho. Eso es bastante inteligente.

Esto no está incluido con los paquetes Básico o Promotor, pero si no quiere pagar, también puede usar esos servicios.

Regístrate en TicketTailor y configura un evento para que tengas una URL de venta de entradas para enviar a las personas y usarlas en este tutorial.

Paso 4 Agregar un enlace para el ticket

Si omitió el paso 3, no se habrá registrado en TicketTailor y ahora se perderá. Deberías volver y hacerlo ahora.

Así que tienes tu evento de prueba configurado en TicketTailor y puedes acceder a tu 'tienda' usando el enlace en el panel de administración de TicketTailor. Ahora conectemos nuestro sitio de WordPress y nuestro sitio de TicketTailor. Haremos esto utilizando los botones de llamada a la acción que se activan dinámicamente.

Un campo personalizado para enlaces de entradas

¿Recuerdas cómo agregamos un campo personalizado para 'Fecha' en el Paso 2? Ahora vamos a hacer lo mismo para nuestro enlace de entrada. Excepto que esta vez no necesitamos escribir una consulta.

Abra el editor de publicaciones y agregue el campo personalizado 'Ticket' y luego ingrese la URL del evento de prueba que configuró en TicketTailor para que su panel de publicaciones tenga este aspecto:

Necesitamos utilizar el campo personalizado 'Boleto' para generar un botón debajo del póster para el concierto, pero solo queremos que muestre el botón si hay un campo personalizado 'Boleto' para la publicación. Abra el archivo content.php y coloque el siguiente código justo debajo de la línea 14 (que llama al contenido de la publicación)

1

2

<!-- Display a ticket link only if it exists -->

3

4

<?php $Ticket = get_post_meta($post->ID, 'Ticket', true);

5

6

	if($Ticket) : ?>

7

8

		<a href="<?php echo $Ticket; ?>">Get Tickets</a>

9

10

	<?php endif; ?>

Ahora actualice su página de índice y siempre que su evento sea:

• No en el pasado,
• Uno de los proximos cuatro eventos,

Deberias ver algo asi:

Paso 5 Convirtiendo Eso en un Llamado a la Accion

Internet está lleno de palabras de moda: ningún campo está más lleno de palabras de moda que el mundo del diseño web. Una de las grandes tendencias en diseño es la idea de usar un botón para lograr que alguien haga algo. Esto se denomina "llamada a la acción" y realmente funcionan, por lo que vamos a convertir ese simple enlace de ticket en una llamada a la acción usando un par de líneas de CSS y una etiqueta de clase en nuestro HTML. Usé el siguiente CSS como ejemplo, pero podrías usar lo que quieras. Solo agrega lo siguiente a tu archivo style.css:

1

2

a.btn {

3

  width: 100px;

4

  padding: 10px 10px 10px 10px;

5

  margin-bottom: 10px;

6

  font-size: 16px;

7

  text-decoration: none;

8

  color: white;

9

  text-shadow: -1px -1px 2px #fff;

10

  background: #ff00cc;

11

  border: 1px solid #ccc;

12

  border-radius: 3px;

13

  -moz-border-radius: 3px;

14

  -webkit-border-radius: 3px;

15

}

16

17

a.btn:hover {

18

  text-shadow: -1px -1px 2px #fff;

19

  background: #00bafb;

20

  border: 1px solid #ccc;

21

}

Y luego actualice su archivo content.php para acomodar esos nuevos estilos cambiando su enlace a esto:

1

2

<a class="btn" href="<?php echo $Ticket; ?>">Get Tickets</a>

Actualice eso y obtendrá un archivo de plantilla con buen aspecto que se enlaza con una página de TicketTailor que usa un botón de llamada a la acción que tiene un aspecto encantador, un bucle inteligente y un poco de pensamiento lateral para obtener un sitio web de boletos realmente agradable que se ve así:

Pasos adicionales añadiendo algunos Flourishes

Si bien podemos detenernos allí y tener un sitio web realmente funcional, hay algunas cosas más que podemos hacer.

Hay algunas cosas que a todos los que asisten a conciertos de música en vivo les gusta:

• Reviviendo los recuerdos de sus conciertos favoritos.
• Comprando Mercancia

Viendo que ya tiene la mayoría de las herramientas al alcance de la mano para hacer que sus clientes sean aún más felices, ¿por qué no ir dos pasos más allá? Es más probable que les guste asistir a sus shows si los hace un poco más felices que otros promotores .

Ayudalos a Revivir Sus Memorias

¿Recuerdas que eliminamos la mitad de nuestros carteles de conciertos de nuestra consulta al establecer el número de conciertos que se mostrarán como '4' en el Paso 1? Ahora hemos llegado a la razón de eso. ¿No sería un buen toque permitir que sus clientes vean todos los programas que ha presentado junto a todos los programas que se presentan? Claro que lo haría!

Para hacerlo, abra su archivo index.php y modifíquelo a lo siguiente:

1

2

<?php

3

/**

4

 * The main template file.

5

 *

6

 * This is the most generic template file in a WordPress theme

7

 * and one of the two required files for a theme (the other being style.css).

8

 * It is used to display a page when nothing more specific matches a query.

9

 * E.g., it puts together the home page when no home.php file exists.

10

 * Learn more: http://codex.wordpress.org/Template_Hierarchy

11

 *

12

 * @package WordPress

13

 * @subpackage Twenty_Eleven

14

 */

15

16

get_header(); ?>

17

18

		<div id="primary">

19

			<div id="content" role="main">

20

21

22

				<?php twentyeleven_content_nav( 'nav-above' ); ?>

23

24

				<?php if (have_posts()) : ?>

25

26

 <?php 

27

            query_posts( array ( 

28

                'post_type' => 'post',

29

                'posts_per_page' => -1,

30

                'meta_key' => 'Date',

31

                'meta_value' => date("Y/m/d"),

32

                'meta_compare' => '>=',

33

                'orderby' => 'meta_value',

34

                'order' => 'ASC',

35

                ) ); 

36

37

               ?>	

38

 <?php while (have_posts()) : the_post(); ?>

39

40

					<?php get_template_part( 'content', get_post_format() ); ?>

41

42

				<?php endwhile; ?>

43

44

				<?php twentyeleven_content_nav( 'nav-below' ); ?>

45

46

			<?php else : ?>

47

48

				<article id="post-0" class="post no-results not-found">

49

					<header class="entry-header">

50

						<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>

51

					</header><!-- .entry-header -->

52

53

					<div class="entry-content">

54

						<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>

55

						<?php get_search_form(); ?>

56

					</div><!-- .entry-content -->

57

				</article><!-- #post-0 -->

58

59

			<?php endif; ?>

60

61

			<h2>Past Events</h2>

62

<div id="container_division">

63

<?php if (have_posts()) : ?>

64

65

     <?php 

66

            query_posts( array ( 

67

                'post_type' => 'post',

68

                'posts_per_page' => -1,

69

                'meta_key' => 'Date',

70

                'meta_value' => date("Y/m/d"),

71

                'meta_compare' => '<',

72

                'orderby' => 'meta_value',

73

                'order' => 'DESC',

74

                'paged' => get_query_var('paged')

75

                ) ); 

76

                ?>	

77

78

    <?php while (have_posts()) : the_post(); ?>

79

80

<?--Use a new template for the content-->

81

<?php get_template_part( 'content-past', get_post_format() ); ?>

82

83

84

<?php endwhile; else: ?>

85

<?php endif; ?>

86

87

			</div><!-- #content -->

88

		</div><!-- #primary -->

89

90

<?php get_footer(); ?>

Esa es una gran sección de código, así que dividámosla en partes manejables.

La primera parte que ya reconocerá porque es la consulta que usamos anteriormente. La única diferencia es que he establecido el argumento posts_per_page en -1, lo que significa que la primera página nunca paginará.

La segunda consulta, la segunda mitad del código, también debería parecerle muy familiar, ya que es casi exactamente el mismo que el código que escribimos anteriormente con dos excepciones:

• 'meta_compare' se establece en '<' para que WordPress sepa que queremos mostrar las publicaciones que están en el pasado.
• 'orden' se establece en descendente para que los eventos pasados más recientes se muestren primero. Si desea mostrar primero los eventos más antiguos, puede establecer esto en ASC en lugar de DESC.

La otra diferencia en el código es que hemos llamado una nueva parte de plantilla para los eventos pasados porque las entradas para eventos pasados ya no están a la venta. Podríamos escribir algunas declaraciones condicionales y solo usar el content.php estándar, pero eso es innecesariamente difícil, así que simplemente duplique el archivo content.php y elimine las líneas que muestran el botón "Obtener boletos":

1

2

<!-- Display a ticket link only if it exists -->

3

4

<?php $Ticket = get_post_meta($post->ID, 'Ticket', true);

5

6

	if($Ticket) : ?>

7

8

	<a class="btn" href="<?php echo $Ticket; ?>">Get Tickets</a>

9

10

	<?php endif; ?>

¿Y qué tal vender una mercancía?

Ya sabe cómo hacerlo porque ya ha configurado los enlaces de tickets y los campos personalizados para ellos anteriormente. Vender carteles o camisetas a través de BigCartel o un servicio equivalente es exactamente lo mismo. Simplemente configure un campo personalizado llamado 'Merch', por ejemplo, ingrese la URL de su producto y presione actualizar. Luego, agregue una línea de código justo debajo del código de 'Obtener boletos' que se ve así:

1

2

<!-- Display a merch link only if it exists -->

3

4

<?php $Merch = get_post_meta($post->ID, 'Merch', true);

5

6

	if($Merch) : ?>

7

8

	<a class="btn" href="<?php echo $Merch; ?>">Get Merch</a>

9

10

	<?php endif; ?>

También puede agregar este fragmento a su archivo de eventos pasados (content-past.php) para que los clientes siempre puedan comprar sus productos.

Conclusion

¡Eso es eso! Ahora tienes un sitio web de tickets que integra WordPress con un fantástico proveedor de tickets, muestra los botones de llamada a la acción y organiza tu contenido sin que uses una categoría, tipo de publicación personalizada o taxonomía.

Hay tantas cosas para las que podrías usar esta idea. Deja un comentario para hacernos saber qué haces con el código en este tutorial. ¡Que te diviertas!