Tutorial de WordPress: gestión de eventos con la extensión ACF

Para dar seguimiento a muy buen tutorial de Lycia Diaz, Te sugiero que descubras otro uso de la extensión ACF : gestión sencilla de eventos. esto le permitirá descubrir el uso de fechas y automatizar los comportamientos de visualización.

Por supuesto, muchas extensiones ofrecen este tipo de servicio, pero a veces son complejas de configurar, requieren muchos recursos y suelen ser de pago. Además, puede ser interesante componer funciones usted mismo para dominar todos los elementos (incluido el visual). Al mismo tiempo, aprendemos pequeñas cosas en torno a la creación-modificación de temas.

Vamos a crear un pequeño controlador que te permitirá crear eventos con fechas de inicio y finalización. En ‘front end’, mostraremos los próximos eventos, eventos actuales y eventos pasados ​​…

Creación del post tipo ‘evento’

En primer lugar, crearemos un tipo de publicación de ‘evento’ con la extensión ‘IU de publicación personalizada’, ya que se explica muy bien en la opción 2 del tutorial de Lycia Diaz:

3 formas de utilizar campos personalizados avanzados para WordPress

Solo vamos a agregar un ‘ícono’ específico. Para la persona que va a publicar en el sitio, siempre es divertido personalizar cada tipo de publicación con una imagen. Puede elegir un ‘icono de tablero’ de WordPress. Hay suficiente para que pueda encontrar el adecuado para usted.

Dashicons

Aquí, tomaremos ‘calendar-alt’ y lo indicaremos en el formulario de creación del tipo de publicación.
cptui_extension_form

back-office-wp-post-type-event

Creación de controles

Posteriormente, crearemos un grupo de controles de ‘eventos’. Una vez más, para la creación de los campos, os remito al tutorial de Lycia.
Vamos a crear dos campos de tipo ‘fecha y hora’. Para ser original, el primero se llamará ‘Principio’ y el otro ‘Fin’. La elección del formato de fecha es importante para el resto y para que nuestra gestión de eventos funcione correctamente.
acf_plugin_backoffice

Y vamos a afiliar nuestro grupo de controles al tipo de publicación ‘evento’.
acf_plugin_backoffice

Crear una plantilla de página

Ahora vamos a trabajar en mostrar nuestros eventos. Si está trabajando en un tema preexistente, primero es necesario crear un tema hijo. Te remito al tutorial de Benoit H. para saber cómo hacerlo:

Crea un tema hijo para WordPress

Para mostrar nuestros eventos, el + simple es crear una página personalizada. Nuevamente, este aspecto se explica en el tutorial de Lycia Diaz. En su tema hijo, crea ‘page-events.php’ y en la función ‘get_template_part ()’, se refiere al archivo ‘content-events.php’.
En ‘content-event.php’, escribiremos algunas líneas de código para administrar la visualización de eventos. Primero, agrega tres títulos de nivel h2 con eventos próximos, eventos actuales y eventos pasados ​​como este:
vs_code_wp_template

Ver eventos

Para la visualización de eventos según su temporalidad, el principio es bastante simple. Compararemos las fechas de los eventos ‘Inicio’ y ‘Finalización’ con la ‘fecha y hora’ actual. Y para eso, el doc de ACF, nos ayuda mucho. En la sección ‘Selector de fecha y hora’, encontramos un ‘fragmento’ que permite mostrar los eventos actuales.

Selector de fechas

Simplemente adáptelo y obtendremos este código para pegarlo en nuestro archivo ‘content-events.php’.

<?php
// date actuelle
$date_maintenant = date('Y-m-d H:i:s');

// événements en cours
// requêtes des événements en cours avec la fonction wp get_posts
$past_posts = get_posts(array(
  ‘posts_per_page’ => -1,
  ‘post_type’ => ‘evenement’,
  // comparaison des dates
  ‘meta_query’ => array(
    ‘relation’ => ‘AND’,
    array(
      ‘key’ => ‘debut’,
      ‘compare’ => ‘<=’,
      ‘value’ => $date_maintenant,
      ‘type’ => ‘DATETIME’
    ),
    array(
      ‘key’ => ‘fin’,
      ‘compare’ => ‘>=’,
      ‘value’ => $date_maintenant,
      ‘type’ => ‘DATETIME’
    )
  ),
  // ordre d’affichage
  ‘order’ => ‘ASC’,
  ‘orderby’ => ‘meta_value’,
  ‘meta_key’ => ‘debut’,
  ‘meta_type’ => ‘DATE’
));
if( $past_posts ): ?>
  <h2>Evenements en cours</h2>
  <ul id=”events”>
    <?php foreach( $past_posts as $p ): ?>
    <li>
      <h3><a href=”<?php the_permalink($p->ID); ?>”><?php echo $p->post_title; ?></h3></a>
      <?php echo $p->post_content; ?>
    </li>
   <?php endforeach; ?>
 </ul>
<?php endif; ?>

Algunas explicaciones:

  • instanciamos una variable ‘$ date_maintenant’ con la función date () de php e indicamos el formato en los argumentos.
  • para filtrar las publicaciones que queremos mostrar (los eventos actuales), usamos la función ‘get_posts ()’ con múltiples argumentos
  • ‘posts_per_page’ => -1, esto permite indicar que queremos mostrar todas las publicaciones correspondientes
  • indicamos el tipo de publicación, aquí los ‘eventos’
  • En ‘array’ indicamos que debemos mostrar todas las publicaciones con un campo ‘Inicio’ + grande o igual a la fecha actual y al mismo tiempo con un campo ‘Fin’ + pequeño o igual a la fecha actual. Este es el corazón de nuestro filtro aquí. Buscaremos en la base de datos publicaciones de ‘eventos’ que coincidan con estos criterios de temporalidad.
  • Indicamos el orden de visualización. Aquí en el orden cronológico de las fechas indicadas en el campo ‘Inicio’.
  • Luego, si alguna publicación coincide con nuestro filtro, recorremos la variable ‘$ posts’ y la mostramos en etiquetas html. Aquí elegí mostrar el título de la publicación en una etiqueta ‘

    ‘ y el contenido. También hacemos un enlace a la publicación con la etiqueta ‘‘ para mostrar el evento que el usuario ha seleccionado. Veremos este aspecto con más detalle en un último capítulo.

Para los próximos eventos, hay otro ‘fragmento’. Al adaptarlo, da esto:

//événements à venir
// requêtes des événements en cours avec la fonction wp get_posts
$upcoming_posts = get_posts(array(
  ‘posts_per_page’ => -1,
  ‘post_type’ => ‘event’,
  // comparaison des dates
  ‘meta_query’ => array(
    array(
     ‘key’ => ‘debut’,
     ‘compare’ => ‘>’,
     ‘value’ => $date_maintenant,
     ‘type’ => ‘DATETIME’
    )
  ),
  // ordre d’affichage
  ‘order’ => ‘ASC’,
  ‘orderby’ => ‘meta_value’,
  ‘meta_key’ => ‘debut’,
  ‘meta_type’ => ‘DATETIME’
));
if( $upcoming_posts ): ?>
  <h2>Evenements à venir</h2>
  <ul id=”events”>
  <?php foreach( $upcoming_posts as $p ): ?>
    <li>
      <h3><a href=”<?php the_permalink($p->ID); ?>”><?php echo $p->post_title; ?></h3></a>
      <?php echo $p->post_content; ?>
    </li>
  <?php endforeach; ?>
  </ul>
<?php endif; ?>

Aquí hacemos una comparación simple: el campo ‘Inicio’ debe ser estrictamente mayor que la fecha actual

Y para los eventos pasados, es casi lo mismo excepto que la comparación está en el campo ‘Fin’, que debe ser más pequeño que la fecha actual.

Ahora podemos ir al back office de WordPress y vamos a publicar tres eventos (pasado, actual y próximo). Un ejemplo:

wp_acf_example_fields_dates

y al final con nuestros ejemplos de publicación, esto da:

wp_list_events_frontend

Nuestro pequeño sistema está funcionando. El administrador del sitio solo tendrá que ingresar dos fechas para cada evento y la visualización se hará automáticamente. Por supuesto, tendrías que hacer un poco de diseño cambiando el html, agregando un poco de CSS. Por ejemplo, se podrían destacar los próximos eventos. También es recomendable agregar imágenes … No haremos CSS en este tutorial y hay tantas posibilidades …

Visualización de la fecha

Bueno, eso está muy bien, pero ahora hay que mostrar las fechas para que podamos ver cuándo comienza y termina el evento.

Con este fragmento de código que también encontramos en el doc de ACF, hace el trabajo.

<p>Debut de l’événement: <?php the_field(‘debut’, $p->ID); ?></p>
<p>Fin de l’événement: <?php the_field(‘fin’, $p->ID); ?></p>

Pero la visualización de la fecha no es genial: /

wp_acf_display_date_frontend

Para eso, creé este pequeño código que pegaremos en nuestro archivo ‘functions.php’

function display_french_date($date) {
  $dateformatstring_day = "l ";
  $dateformatstring_date = "d ";
  $dateformatstring_month = " F Y";
  $unixtimestamp = strtotime($date);
  echo date_i18n($dateformatstring_day, $unixtimestamp);
  echo intval(date_i18n($dateformatstring_date, $unixtimestamp));
  echo date_i18n($dateformatstring_month, $unixtimestamp);
}

Esta función se basa en la función nativa de WordPress ‘date_i18n ()’. Le permite mostrar las fechas en el idioma seleccionado en el back-office desde la ‘marca de tiempo’. Puede encontrar toda la información sobre esta función aquí:

https://codex.wordpress.org/date_i18n

Entonces, al final, queremos una linda cita en francés como “Domingo 28 de julio de 2019”. Entonces, dividiremos nuestra fecha en varios formatos: uno para el día de la semana, uno para el día del mes y otro para el mes seguido del año. Es por eso que nuestra función realiza tres visualizaciones diferentes.

Regresamos a nuestro archivo ‘content-events.php’ y agregamos la llamada a la función ‘display_french_date ()’ agregando nuestro campo en los argumentos

<p>Debut de l’événement: <?php display_french_date(get_field(‘debut’, $p->ID)); ?></p>
<p>Fin de l’événement: <?php display_french_date(get_field(‘fin’, $p->ID)); ?></p>

Aquí es importante aportar precisión: usamos otra función de ACF: ‘get_field ()’ y no ‘the_field ()’ como antes. Que diferencia ? ‘the_field ()’ muestra directamente el campo en nuestra plantilla. ‘get_field ()’ llama al contenido del campo pero no lo muestra. Y es por eso que aquí usamos ‘get_field ()’, queremos enviar el contenido del campo en el parámetro de función, pero no queremos mostrarlo en la plantilla. Lo que queremos mostrar es el resultado obtenido por la función ‘display_french_date ()’.

y da esto:

wp_acf_display_dates_french

Ya está mejor pero ahora faltan las horas. No hay problemas ! También los agregaremos a través de una función. Este es mucho más simple que el anterior porque no necesitamos traducir a un idioma. Es principalmente una cuestión de formato. Vamos a utilizar la función ‘date ()’ de PHP. Por defecto, la función muestra la fecha actual en el formato sugerido en los parámetros. Si agregamos la ‘marca de tiempo’ deseada como segundo parámetro, podemos formatear cualquier fecha. Entonces, tenemos la siguiente función que podemos pegar en ‘functions.php’:

function display_time($time) {
  echo date(“H:i”, strtotime($time));
}

y en nuestro archivo ‘content-events.php’ ahora tenemos:

<p>Debut de l’événement: <?php display_french_date(get_field(‘debut’, $p->ID)); ?> à <?php display_time(get_field(‘debut’, $p->ID)); ?></p>
<p>Fin de l’événement: <?php display_french_date(get_field(‘fin’, $p->ID)); ?> à <?php display_time(get_field(‘fin’, $p->ID)); ?></p>

y nuestra pantalla ahora:

wp_acf_display_date_and_time

Pero la exhibición no ha terminado porque tenemos que pensar en los eventos que tendrán lugar en un solo día. En este caso, no mostraremos de la misma forma. Por lo tanto, vamos a establecer una condición para saber si la fecha del campo ‘Inicio’ es la misma que la del campo ‘Fin’. La dificultad aquí es comparar solo la fecha sin tener en cuenta las horas. Y para eso, tenemos que usar una función que se parezca a la anterior:

function get_date($date) {
  return date(“d m Y”, strtotime($date));
}

que, por supuesto, pegaremos en nuestro archivo ‘functions.php’.

y aquí está el código en nuestro archivo ‘content-event.php’:

if( $upcoming_posts ): ?>
  <h2>Evénements à venir</h2>
  <ul id=”events”>
    <?php foreach( $upcoming_posts as $p ): ?>
    <li>
      <h3><a href=”<?php the_permalink($p->ID); ?>”><?php echo $p->post_title; ?></h3></a>
      <?php echo $p->post_content; ?>
      <?php if(get_date(get_field(‘debut’, $p->ID)) === get_date(get_field(‘fin’, $p->ID))): ?>
      <p>Le <?php display_french_date(get_field(‘fin’, $p->ID));?> de <?php display_time(get_field(‘debut’, $p->ID)); ?> à <?php display_time(get_field(‘fin’, $p->ID)); ?></p>
<?php else: ?>
      <p>Debut de l’événement: <?php display_french_date(get_field(‘debut’, $p->ID)); ?> à <?php display_time(get_field(‘debut’, $p->ID)); ?></p>
      <p>Fin de l’événement: <?php display_french_date(get_field(‘fin’, $p->ID)); ?> à <?php display_time(get_field(‘fin’, $p->ID)); ?></p>
<?php endif; ?>
    </li>
<?php endforeach; ?>
  </ul>
<?php endif; ?>

Aquí comparamos las fechas de nuestro evento con la función ‘get_date ()’. Si es equivalente, solo mostramos «el … de … a …» y si son diferentes, mostramos como antes, lo que da:

wp_acf_display_date

Ver un evento seleccionado

Anteriormente, vimos cómo mostrar una lista de eventos y ordenarlos según sus fechas. El usuario probablemente querrá hacer clic en un evento para leer los detalles del contenido de la publicación. Pero por ahora, si hacemos clic en un evento, obtenemos esto:

Evento único

Esto no es genial, porque tenemos la fecha de publicación del evento y falta la fecha del evento que nos interesa aquí. En mi tema (‘twentynineteen’), hay un archivo single.php y este es el que WordPress usará para mostrar mi evento en el que hice clic (ver el jerarquía de plantillas WordPress).

En nuestro tema, tendremos que crear un archivo ‘single.php’ específico para nuestros eventos y este archivo tendrá el nombre: ‘single-the_nom_de_votre_post_type_slug.php’ así que aquí ‘single-event.php’. Copiaremos nuestro archivo ‘single.php’ del tema principal y lo copiaremos en nuestro tema secundario y le cambiaremos el nombre.

En este archivo, llamamos a otro archivo con la fuente ‘get_template_part ()’. En cuanto a la creación de ‘page-event.php’, crearemos un archivo ‘content-event.php’ (aquí en el singular del golpe). se parece a esto:

templates_wordpress

Ahora somos libres de modificar la visualización en esta nueva plantilla. Primero, me gustaría, por ejemplo, eliminar los metadatos de la publicación. Porque contienen la fecha de publicación y creo que mis visitantes no necesitarán esta información.

En nuestro archivo ‘content-event.php’, podemos eliminar la llamada del archivo ‘entry-header.php’ (que contiene los metadatos) y mostrar el título de la publicación de esta manera:

modif_template_wordpress

y en este encabezado de la publicación, podemos agregar nuestras líneas de código para la visualización de fechas:

vs_code_display_dates

y da esto:

display_date_frontend

Aquí está nuestro pequeño el sistema de gestión de eventos está operativo. Ahora el sitio está abierto y todavía quedan muchos aspectos en los que pensar y poner en marcha. Primero, necesita crear una interfaz visual y que se conecte con el resto de su sitio. A partir de ahí, podríamos imaginar mostrar el próximo evento en la página de inicio, podríamos mostrar los eventos por semana o por qué no crear un motor de búsqueda por fecha …

Diviértete y experimenta 😉

➤