Ajouter une date d'expiration aux articles Wordpress

() translation by (you can also view the original English article)

Je gère plusieurs sites qui incluent des notifications et des messages d'information importants sous forme de bannière sur la page d'accueil. J'ai tendance à utiliser un type de contenu personnalisé pour ça afin d'ajouter mes bannières et de les afficher où j'en ai besoin dans mon thème. (Si vous souhaitez faire quelque chose de similaire, c'est expliqué dans ce tutoriel)

Invariablement, mes bannières ont une date d'expiration. Elles peuvent contenir des informations sur un événement à venir ou un poste vacant par exemple. Une fois l'événement passé ou le poste pourvu, je dois aller sur le site et supprimer manuellement l'article.

Ce serait beaucoup plus simple, lorsque je crée ce type d'articles, de pouvoir spécifier une date d'expiration après laquelle ils ne seraient plus visible sur mon site.

Dans ce tutoriel, je vais vous montrer comment faire ça. Il y a trois étapes :

Créer une boîte de champ personnalisé pour la date d'expiration sur la page d'édition d'article.
Ajouter le sélecteur de date de jQuery UI sur ce champ afin d'améliorer l'interface.
Et enfin, utiliser le hook pre_get_posts pour s'assurer que les articles ne soient pas affichés après leurs dates d'expiration.

Ce dont vous aurez besoin

Pour accomplir ce tutoriel vous aurez besoin :

d'une installation de Wordpress pour le développement
d'un éditeur de code

Vous allez créer une extension avec tout le code nécessaire pour gérer une date d'expiration et l'activer sur votre site. C'est parti !

Mettre en place l'extension

Premièrement, vous devez créer votre plugin. Dans le répertoire "plugins" de votre répertoire wp-content, créez un fichier vide nommé tutsplus-post-expiry-date.php

Ouvrez le fichier dans votre éditeur de code et ajoutez-y le code suivant :

<?php
/*
Plugin Name: Add an Expiry Date to Posts
Plugin URI: https://.tutsplus.com/tutorials/add-an-expiry-date-to-wordpress-posts--cms-22665
Description: Adds an expiry date to posts, using a the jQuery UI datepicker
Author: Rachel McCollin
Version: 1.0
 */

Vous allez devoir éditer ce fichier pour utiliser votre propre nom et URL d'extension. Vous en avez besoin pour indiquer à Wordpress que c'est une extension et ce qu'elle fait.

Maintenant allez dans la partie Extensions dans l'administration Wordpress et activez l'extension.

Créer le champ personnalisé

Dans un premier temps, nous allons créer la boîte de champ personnalisé pour la date d'expiration.

En utilisant add_meta_box() pour afficher une boîte de champ personnalisé.

La première étape consiste à créer la fonction qui va ajouter la boîte de champ personnalisé à l'écran d'édition d'article. Ajouter ceci à votre fichier d'extension :

function tutsplus_add_expiry_date_metabox() {
    add_meta_box( 
        'tutsplus_expiry_date_metabox', 
        __( 'Expiry Date', 'tutsplus'), 
        'tutsplus_expiry_date_metabox_callback', 
        'post', 
        'side', 
        'high' 
    );
}
add_action( 'add_meta_boxes', 'tutsplus_add_expiry_date_metabox' );

On utilise la fonction add_meta_box qui a six paramètres :

'tutsplus_expiry_date_metabox' : l'identifant unique de cette boîte de champ personnalisé
__( 'Expiry Date', 'tutsplus') : c'est ce qui est affiché comme titre de la boîte de champ personnalisé
'tutsplus_expiry_date_metabox_callback' : la fonction de rappel qui rempli la boîte de champ personnalisé (nous allons créer ça après)
'post' : le type de contenu sur lequel cette boîte de champ personnalisé apparaîtra lors de l'édition
'side' : dans quel partie de l'écran apparaîtra la boîte de champ personnalisé
'high' : à quelle position la boîte de champ personnalisé aparaîtra

La fonction est attachée par la suite au hook add_meta_boxes pour l'appeller au bon moment.

Créer la fonction de rappel

Si vous enregistrez votre extension et affichez votre écran d'édition maintenant, vous verrez une erreur parce que la fonction de rappel n'a pas été définie. C'est donc ce que nous allons faire.

Ajouter ceci à votre fichier d'extension :

function tutsplus_expiry_date_metabox_callback( $post ) { ?>
    
  <form action="" method="post">
		
		<?php 		
		//retrieve metadata value if it exists
		$tutsplus_expiry_date = get_post_meta( $post->ID, 'expires', true );
		?>
		
		<label for "tutsplus_expiry_date"><?php __('Expiry Date', 'tutsplus' ); ?></label>
				
		<input type="text" class="MyDate" name="tutsplus_expiry_date" value=<?php echo esc_attr( $tutsplus_expiry_date ); ?> / >			
	
	</form>
	
<?php }

Regardons ce que ça fait :

On définit la fonction de rappel tutsplus_expiry_date_metabox_callback() avec $post en paramètre.
On ouvre un élément de formulaire.
On créé une variable appelée $tutsplus_expiry_date avec comme valeur la valeur de la clé 'expires'.
On crée un label pour le champ dans la boîte de champ personnalisé.
On crée un élément de formulaire avec la classe MyDate pour faire fonctionner le sélecteur de date, le nom tutsplus_expiry_date que nous utiliserons plus tard lors de l'enregistrement de la valeur du champ et la valeur $tutsplus_expiry_date.
On ferme l'élément de formulaire.

Maintenant nous avons le formulaire mais qui ne fera rien tant que nous ne créons par une fonction pour enregistrer les données que l'utilisateur ajoutera.

Sauvegarder les données lors de l'enregitsrement de l'article

Pour sauvegarder les données du formulaire, nous avons besoin de créer une fonction et ensuite de l'attacher au hook save_post.

Dans votre fichier d'extension, ajoutez ceci :

function tutsplus_save_expiry_date_meta( $post_id ) {
    
	// Check if the current user has permission to edit the post. */
	if ( !current_user_can( 'edit_post', $post->ID ) )
    return;
	
	if ( isset( $_POST['tutsplus_expiry_date'] ) ) {		
		$new_expiry_date = ( $_POST['tutsplus_expiry_date'] );
		update_post_meta( $post_id, 'expires', $new_expiry_date );		
	}
	
}
add_action( 'save_post', 'tutsplus_save_expiry_date_meta' );

On effectue les choses suivantes :

On vérifie sur l'utilisateur actuel à la capacité edit_post pour l'article actuel.
Si oui, on verifie si des données ont été entrée dans la boîte de champ personnalisé en utilisant isset.
Si c'est le cas, on crée une variable nommée $new_expiry_date et on lui donne la valeur qui a été entrée.
Enfin, on met à jour les métadonnées de l'article avec cette valeur.

Nous avons donc une boîte de champ personnalisé qui laisse nos utilisateurs ajouter du texte et l'enregister dans les métadonnées de l'article. Rendons ça plus sécurisé.

Ajouter un nonce pour la securité

Pour s'assurer que les métadonnées d'article sont bien éditée par ce formulaire nous allons ajouter un nonce.

Dans la fonction de rappel, avant le contenu de la fonction, ajoutons le code suivant :

1	wp_nonce_field( 'tutsplus_expiry_date_metabox_nonce', 'tutsplus_nonce' );

Ensuite, dans la fonction tutsplus_save_expiry_date_meta() qui enregistre les données, ajoutons ceci au début de la fonction :

if( !isset( $_POST['tutsplus_nonce'] ) ||
    !wp_verify_nonce( $_POST['tutsplus_nonce'],
	'tutsplus_expiry_date_metabox_nonce'
	) ) 
return;

Enregistrez maintenant votre extension et jettez un oeil à la page d'édition d'article. Vous verrez la boîte de champ personnalisé :

C'est un bon début mais le problème est que, pour le moment, c'est simplement un champ de texte normal et qu'il n'y aucun moyen de s'assurer que vos utilisateurs y entrent des dates dans un format correct. Nous allons corriger ça en ajoutant le sélécteur de date jQuery UI.

Ajouter le sélecteur de date jQuery UI

La bonne nouvelle c'est que le sélecteur de date jQuery UI est déjà chargé avec Wordpress donc vous n'aurez pas à l'ajouter ou l'installer: il suffit juste de l'empiler dans une fonction.

Au début de votre fichier d'extension, ajoutez :

function tutsplus_load_jquery_datepicker() {    
	wp_enqueue_script( 'jquery-ui-datepicker' );
	wp_enqueue_style( 'jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css' );
}
add_action( 'admin_enqueue_scripts', 'tutsplus_load_jquery_datepicker' );

Cela rajoute à la file d'attente à la fois le script lui-même et la feuille de style pour le script stockée sur Google APIs. Notez que vous devez connecter ce hook avec le hook admin_enqueue_scripts et non pas avec wp_enqueue_scripts ce qui l'ajouterez sinon à la liste des scripts chargés côté visiteurs.

Ensuite, vous avez à ajouter un script à la fonction de rappel qui génère votre formulaire. Après l'élément de formulaire et avant la balise fermante </form>, ajoutez ceci :

<script type="text/javascript">
    jQuery(document).ready(function() {
		jQuery('.MyDate').datepicker({
			dateFormat : 'dd-mm-yy'
		});
	});
</script>			

On attache à l’élément ayant la classe MyDate le script du sélecteur de date.

Votre fonction de rappel va désormais ressembler à ça :

function tutsplus_expiry_date_metabox_callback( $post ) { ?>
    
	<form action="" method="post">
		
		<?php 		
		// add nonce for security
		wp_nonce_field( 'tutsplus_expiry_date_metabox_nonce', 'tutsplus_nonce' );
		
		//retrieve metadata value if it exists
		$tutsplus_expiry_date = get_post_meta( $post->ID, 'expires', true );
		?>
		
		<label for "tutsplus_expiry_date"><?php __('Expiry Date', 'tutsplus' ); ?></label>
				
		<input type="text" class="MyDate" name="tutsplus_expiry_date" value=<?php echo esc_attr( $tutsplus_expiry_date ); ?> / >
		
		<script type="text/javascript">
			jQuery(document).ready(function() {
				jQuery('.MyDate').datepicker({
					dateFormat : 'dd-mm-yy'
				});
			});
		</script>			
	
	</form>
	
<?php }

Maintenant, regardons à quoi ressemble la boîte de champ personnalisé après que j'ai enregistré mon fichier d'extension :

C'est beaucoup mieux ! Mais bien que vous puissiez désormais ajouter une date d'expiration à vos articles, cela ne change pas le fait qu'ils soient affichés ou non sur votre site. Changeons cela dès maintenant.

Changer la requête pour exclure les articles expirés

L'étape finale consiste à modifier la requête principale en utilisant le hook pre_get_posts.

Toujours dans votre fichier d'extension, ajoutez ce code :

function tutsplus_filter_expired_posts( $query ) {
    
    // doesn't affect admin screens
    if ( is_admin() )
        return;
    // check for main query	
	if ( $query->is_main_query() ) {

    	//filter out expired posts
        $today = date('d-m-Y');
        $metaquery = array(
            array(
                 'key' => 'expires',
                 'value' => $today,
                 'type' => 'DATE',
                 'compare' => '<'
			)
        );
        $query->set( 'meta_query', $metaquery );
	}
}
add_action( 'pre_get_posts', 'tutsplus_filter_expired_posts' );

On fait six choses :

Premièrement, on définit la fonction tutsplus_filter_expired_posts() avec $query en paramètre.
On vérifie si nous sommes dans une des pages d’administration puisque nous ne voulons pas exclure les articles expirés de celles-ci.
Ensuite, on vérifie si la requête principale est en cours.
Si c'est le cas, on définit la variable $today à la date d'aujourd'hui en utilisant le même format de date que le sélecteur de date utilise.
On définit $metaquery pour exclure les articles dont la date d'expiration est avant aujourd'hui en utilisant l'opérateur compare.
Enfin, on remet la requête à zéro en utilisant la variable $metaquery.

La fonction est rattachée au hook pre_get_posts qui va l'exécuter à chaque requête qui récupère des articles.

Sauvegardez votre fichier d'extension et testez le. Créez un article avec une date de publication d'il y a quelques jours et une date d'expiration à hier. Sauvegardez-le et allez sur la page principale de votre blog. Vous pourrez constater que l'article que vous venez juste de créer n'est pas là !

Résumé

Avoir la possibilité d'avoir des articles expirants automatiquement à une date donnée peut être très utile. Si le contenu d'un article n'est plus d'actualité ou que vous ne souhaitez pas que des personnes le voit après une date donnée, ajouter une date d'expiration vous permet de ne pas avoir à vous souvenir de le mettre à jour ou de l'effacer.

En ajoutant le sélecteur de date de jQuery, vous créez une boîte de champ personnalisé conviviale qui vous fait gagner du temps et évite de créer de la confusion.