Añadir una fecha de vencimiento a las entradas de WordPress
() translation by (you can also view the original English article)
Administro algunos sitios web que incluyen notificaciones e información importante en un banner de sus páginas de inicio. Para esto suelo usar un tipo de entrada personalizada, añado mis banners y luego los muestro en mi tema allí donde sea necesario. (Si deseas hacer algo similar, se explica en este tutorial.)
Pero invariablemente mis banners tienen una fecha de caducidad. Estos pueden contener, por ejemplo, información sobre un próximo evento o una vacante. Una vez haya pasado el evento o la vacante haya sido cubierta, tengo que ir al sitio y eliminar manualmente la entrada.
Sería mucho más fácil si, al crear entradas de este tipo, pudiese asignarles una fecha de caducidad después de las cuales ya no fuesen visibles en mi sitio.
En este tutorial te mostraré cómo hacer exactamente eso. Hay tres pasos:
- Crear un metabox en la pantalla de edición de la entrada para la fecha de caducidad.
- Aplicar la interfaz de usuario del selector de fechas jQuery al campo del metabox para mejorar la interfaz.
- Por último, usar el gancho
pre_get_posts
para asegurarnos de que no se muestren las entradas después de su fecha de caducidad.
Lo que necesitarás
Para completar este tutorial necesitarás lo siguiente:
- una instalación de desarrollo de WordPress
- un editor de código
Crearás un plugin con todo el código necesario para la fecha de caducidad, y lo activarás en tu sitio. ¡Así que empecemos!
Configurar el plugin
Primero necesitas crear tu plugin. En la carpeta plugins de tu directorio wp-content
, crea un archivo vacío denominado tutsplus-post-expiry-date-php
.
Abre el archivo en el editor de código y añáde lo siguiente:
1 |
<?php
|
2 |
/*
|
3 |
Plugin Name: Add an Expiry Date to Posts
|
4 |
Plugin URI: https://.tutsplus.com/tutorials/add-an-expiry-date-to-wordpress-posts--cms-22665
|
5 |
Description: Adds an expiry date to posts, using a the jQuery UI datepicker
|
6 |
Author: Rachel McCollin
|
7 |
Version: 1.0
|
8 |
*/
|
Tendrás que editar el archivo para usar tu propio nombre y la URL del plugin, pero básicamente, esto es lo que necesitarás para indicarle a WordPress que se trata de un plugin y lo que hace.
Ahora dirígete a tu pantalla de Plugins en el escritorio de WordPress y activa el plugin.
Crear el metabox
Primero vamos a crear el metabox para la fecha de caducidad.
Usar add_meta_box() para mostrar una metabox
El primer paso es crear la función que añadirá el metabox a la pantalla de edición de la entrada. Añade esto al archivo de tu plugin:
1 |
function tutsplus_add_expiry_date_metabox() { |
2 |
add_meta_box( |
3 |
'tutsplus_expiry_date_metabox', |
4 |
__( 'Expiry Date', 'tutsplus'), |
5 |
'tutsplus_expiry_date_metabox_callback', |
6 |
'post', |
7 |
'side', |
8 |
'high'
|
9 |
);
|
10 |
}
|
11 |
add_action( 'add_meta_boxes', 'tutsplus_add_expiry_date_metabox' ); |
Esto utiliza la función add_meta_box()
, que tiene seis parámetros:
-
'tutsplus_expiry_date_metabox'
: el ID único de este metabox -
__( 'Expiry Date', 'tutsplus')
: esto se mostrará como el título del metabox
-
'tutsplus_expiry_date_metabox_callback'
: la función de devolución de llamada que rellenará el metabox (vamos a crear esto a continuación)
-
'post'
: el tipo de entrada en cuya pantalla de edición aparecerá este metabox
-
'side'
: la parte de la pantalla en la que aparecerá el metabox
-
'high'
: en qué posición aparecerá el metabox
A continuación, la función se une al gancho add_meta_boxes
para que se dispare en el momento adecuado.
Crear la función de devolución de llamada
Si guardases el plugin y cargases ahora la pantalla de edición de la entrada, verías un error, porque la función de devolución de llamada no ha sido definida. Así que lo haremos a continuación.
Añade esto al archivo de tu plugin:
1 |
function tutsplus_expiry_date_metabox_callback( $post ) { ?> |
2 |
|
3 |
<form action="" method="post"> |
4 |
|
5 |
<?php
|
6 |
//retrieve metadata value if it exists
|
7 |
$tutsplus_expiry_date = get_post_meta( $post->ID, 'expires', true ); |
8 |
?>
|
9 |
|
10 |
<label for "tutsplus_expiry_date"><?php __('Expiry Date', 'tutsplus' ); ?></label> |
11 |
|
12 |
<input type="text" class="MyDate" name="tutsplus_expiry_date" value=<?php echo esc_attr( $tutsplus_expiry_date ); ?> / > |
13 |
|
14 |
</form>
|
15 |
|
16 |
<?php } |
Vamos a ir paso a paso a través de lo que hace esto:
- Define la función de devolución de llamada
tutsplus_expiry_date_metabox_callback()
, con$post
como su objeto. - Abre un elemento de formulario.
- Crea una variable denominada
$tutsplus_expiry_date
con el valor de la clave meta'expires'
como su valor. - Crea una etiqueta para el campo en el metabox.
- Crea un elemento de entrada con la clase
MyDate
necesaria para que el selector de fecha funcione, el nombretutsplus_expiry_date
que usaremos más adelante al guardar datos del campo y el valor$tutsplus_expiry_date
. - Cierra el formulario.
Así que ahora tenemos el formulario, pero en realidad no hará nada a menos que creemos otra función para guardar los datos que los usuarios añadan a él.
Guardar datos al guardar la entrada
Para guardar cualquier dato introducido en el formulario, tenemos que crear una función y luego adjuntarla al gancho save_post
.
En el archivo de tu plugin, añade esto:
1 |
function tutsplus_save_expiry_date_meta( $post_id ) { |
2 |
|
3 |
// Check if the current user has permission to edit the post. */
|
4 |
if ( !current_user_can( 'edit_post', $post->ID ) ) |
5 |
return; |
6 |
|
7 |
if ( isset( $_POST['tutsplus_expiry_date'] ) ) { |
8 |
$new_expiry_date = ( $_POST['tutsplus_expiry_date'] ); |
9 |
update_post_meta( $post_id, 'expires', $new_expiry_date ); |
10 |
}
|
11 |
|
12 |
}
|
13 |
add_action( 'save_post', 'tutsplus_save_expiry_date_meta' ); |
Esto hace lo siguiente:
- Comprueba si el usuario actual tiene la capacidad
edit_post
para editar la entrada actual. - Si es así, comprueba si se han añadido datos al campo del metabox mediante
isset
. - Si ese es el caso, crea una variable denominada
$new_expiry_date
y la define como el valor que ha sido introducido. - Por último, actualiza los metadatos de la entrada con ese valor.
Así que ahora tenemos un metabox que permitirá a los usuarios añadir texto y guardarlo en los metadatos de la entrada. Hagámoslo más seguro.
Añadir un valor único por seguridad
Para asegurarnos de que los metadatos de la entrada solo se editan a través de este formulario, añadiremos un valor único o "nonce".
En la función de devolución de llamada, antes del resto del contenido de la función, añade el siguiente código:
1 |
wp_nonce_field( 'tutsplus_expiry_date_metabox_nonce', 'tutsplus_nonce' ); |
A continuación, en la función tutsplus_save_expiry_date_meta()
para guardar los datos, añade esto al principio de la función:
1 |
if( !isset( $_POST['tutsplus_nonce'] ) || |
2 |
!wp_verify_nonce( $_POST['tutsplus_nonce'], |
3 |
'tutsplus_expiry_date_metabox_nonce'
|
4 |
) ) |
5 |
return; |
Ahora guarda tu plugin y echa un vistazo a la pantalla de edición de tu entrada. Verás tu metabox:



Este es un buen comienzo, pero el problema es que en este momento se trata de un campo de texto normal, por lo que no hay manera de asegurarnos de que los usuarios solo introducen en él fechas y en el formato correcto. Lo corregiremos añadiendo el selector de fechas de la interfaz de usuario de jQuery.
Añadir la interfaz de usuario del selector de fechas de JQuery
La buena noticia es que la interfaz de usuario del selector de fechas jQuery viene precargada con WordPress, por lo que no tienes que registrarla o instalarla: simplemente la pones en cola en una función.
En la parte superior del archivo de tu plugin, añade esto:
1 |
function tutsplus_load_jquery_datepicker() { |
2 |
wp_enqueue_script( 'jquery-ui-datepicker' ); |
3 |
wp_enqueue_style( 'jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css' ); |
4 |
}
|
5 |
add_action( 'admin_enqueue_scripts', 'tutsplus_load_jquery_datepicker' ); |
Esto pone en cola tanto el script en sí como su hoja de estilos, que se almacena en las APIs de Google. Ten en cuenta que debes engancharlo al gancho de acción admin_enqueue_scripts
y no a wp_enqueue_scripts
como lo harías si estuvieras usando el script en el front-end.
A continuación, debes añadir un script a la función de devolución de llamada que genera el formulario. Después del elemento de entrada y antes de la etiqueta de cierre </form>
, añade esto:
1 |
<script type="text/javascript"> |
2 |
jQuery(document).ready(function() { |
3 |
jQuery('.MyDate').datepicker({ |
4 |
dateFormat : 'dd-mm-yy' |
5 |
});
|
6 |
});
|
7 |
</script> |
Esto hace referencia a la clase myDate
que ya has añadido al elemento de entrada y añade en él el script datepicker.
La función de devolución de llamada ahora tendrá el siguiente aspecto:
1 |
function tutsplus_expiry_date_metabox_callback( $post ) { ?> |
2 |
|
3 |
<form action="" method="post"> |
4 |
|
5 |
<?php
|
6 |
// add nonce for security
|
7 |
wp_nonce_field( 'tutsplus_expiry_date_metabox_nonce', 'tutsplus_nonce' ); |
8 |
|
9 |
//retrieve metadata value if it exists
|
10 |
$tutsplus_expiry_date = get_post_meta( $post->ID, 'expires', true ); |
11 |
?>
|
12 |
|
13 |
<label for "tutsplus_expiry_date"><?php __('Expiry Date', 'tutsplus' ); ?></label> |
14 |
|
15 |
<input type="text" class="MyDate" name="tutsplus_expiry_date" value=<?php echo esc_attr( $tutsplus_expiry_date ); ?> / > |
16 |
|
17 |
<script type="text/javascript"> |
18 |
jQuery(document).ready(function() { |
19 |
jQuery('.MyDate').datepicker({ |
20 |
dateFormat : 'dd-mm-yy' |
21 |
});
|
22 |
});
|
23 |
</script>
|
24 |
|
25 |
</form>
|
26 |
|
27 |
<?php } |
Echemos ahora un vistazo a cómo se ve el metabox después de guardar el archivo de mi plugin:



¡Eso está mucho mejor! Pero aunque ahora puedas añadir una fecha de caducidad a tus entradas, no generará ninguna diferencia en el hecho de si se muestran o no en tu sitio. Cambiemos eso ahora.
Modificar la consulta para excluir entradas caducadas
El último paso consiste modificar la consulta principal mediante el gancho pre_get_posts
.
Trabajando todavía en el archivo de tu plugin, añade este código:
1 |
function tutsplus_filter_expired_posts( $query ) { |
2 |
|
3 |
// doesn't affect admin screens
|
4 |
if ( is_admin() ) |
5 |
return; |
6 |
// check for main query
|
7 |
if ( $query->is_main_query() ) { |
8 |
|
9 |
//filter out expired posts
|
10 |
$today = date('d-m-Y'); |
11 |
$metaquery = array( |
12 |
array( |
13 |
'key' => 'expires', |
14 |
'value' => $today, |
15 |
'type' => 'DATE', |
16 |
'compare' => '<' |
17 |
)
|
18 |
);
|
19 |
$query->set( 'meta_query', $metaquery ); |
20 |
}
|
21 |
}
|
22 |
add_action( 'pre_get_posts', 'tutsplus_filter_expired_posts' ); |
Esto hace seis cosas:
- Primero define la función
tutsplus_filter_expired_posts()
con$query
como su objeto. - Comprueba si estamos en las pantallas de administración, ya que no queremos excluir de ellas las entradas caducadas.
- A continuación, comprueba si se está ejecutando la consulta principal.
- Si es así, define la variable
$today
como la fecha de hoy, utilizando el mismo formato de fecha que usa el selector de fecha. - A continuación, define
$metaquery
para excluir las entradas cuya fecha de caducidad sea anterior a la fecha actual, utilizando el operadorcompare
. - Por último, restablece la consulta mediante la variable
$metaquery
.
La función está enganchada a pre_get_posts
lo que hará que se ejecute a medida que la consulta captura entradas.
Guarda ahora el archivo de tu plugin y pruébalo. Crea una entrada con una fecha de publicación de unos días atrás en el pasado y, a continuación, asígnale una fecha de caducidad que se corresponda con fecha de un día antes. Guárdalo y cambia a la página principal de tu blog. ¡Descubrirás que la entrada que acabas de crear no está ahí!
Resumen
Ser capaz de que tus entrada caduquen automáticamente en una fecha determinada puede ser muy útil. Si el contenido de una entrada ya no es relevante o no quieres que las personas la vean después de una fecha concreta, añadir una fecha de caducidad te evitará tener que recordar que debes editar o eliminar la entrada una vez ya no sea necesaria.
Al usar el selector de fecha jQuery, has creado un metabox fácil de usar que puedes usar para ahorrarle tiempo y confusión a tus visitantes.