WordPress : ajoutez une classe personnalisée si le message a été publié aujourd’hui

Je reçois constamment des demandes de nos clients pour des personnalisations que je n’avais même jamais envisagées. Récemment, nous avons eu un client qui voulait un style personnalisé pour ses messages publiés aujourd’hui afin qu’ils puissent être mis en évidence à l’aide d’une classe CSS personnalisée. Ils voulaient incorporer la classe sur les pages d’archives, les résultats de recherche et les modèles de page de publication unique de leur thème enfant.

Pour personnaliser le <div> classer dans un modèle WordPress selon que le message a été écrit aujourd’hui, vous pouvez utiliser PHP et WordPress balises de modèle dans votre fichier de modèle. Voici un exemple de la façon dont vous pouvez y parvenir :

<?php
// Get the current post's date
$post_date = get_the_date('Y-m-d');

// Get today's date
$current_date = date('Y-m-d');

// Check if the post was written today
if ($post_date === $current_date) {
    $today_class = 'custom-today';
} else {
    $today_class = '';
}
?>

<div class="your-existing-classes <?php echo $today_class; ?>">
    <!-- Your post content goes here -->
</div>

Dans cet extrait de code, nous comparons la date de publication ($post_date) avec la date actuelle ($current_date). S’ils correspondent, nous attribuons une classe personnalisée (custom-today) au $custom_class variable; sinon, il reste vide. Remplacer 'your-existing-classes' avec les classes existantes que vous souhaitez conserver sur le <div>. Ajoutez toutes les classes supplémentaires que vous désirez et enregistrez le fichier modèle.

Maintenant, lorsque vous visitez un message qui a été écrit aujourd’hui, le <div> l’élément aura la classe supplémentaire custom-today, vous permettant de le styliser différemment à l’aide de CSS. Voici un exemple :

.custom-today {
background-color: yellow;
}

Plusieurs instances dans votre thème

Si vous souhaitez utiliser cette approche sur plusieurs fichiers de thème, vous pouvez ajouter une fonction personnalisée au fichier functions.php de votre thème enfant :

function add_custom_class_based_on_date($classes) {
    // Get the current post's date
    $post_date = get_the_date('Y-m-d');

    // Get today's date
    $current_date = date('Y-m-d');

    // Check if the post was written today
    if ($post_date === $current_date) {
        $classes[] = 'custom-today';
    }

    return $classes;
}
add_filter('post_class', 'add_custom_class_based_on_date');

Ensuite, dans chaque modèle, vous pouvez simplement ajouter post_class:

<div <?php post_class(); ?>>
    <!-- Your post content goes here -->
</div>

Intégration des fuseaux horaires

L’exemple ci-dessus ajoute la classe en fonction de l’heure et du fuseau horaire de votre serveur WordPress, et non de l’heure et du fuseau horaire du visiteur. Si vous vouliez que le fuseau horaire de l’utilisateur soit inclus… c’est parti :

<?php
// Get the current post's date and convert it to the visitor's timezone
$post_date = get_the_date('Y-m-d');
$post_date_timezone = get_post_time('O');
$post_date_timezone_offset = substr($post_date_timezone, 0, 3) * 3600 + substr($post_date_timezone, 3, 2) * 60;

$current_date = date('Y-m-d', current_time('timestamp', false));
$current_date_timezone = get_option('timezone_string');
$current_date_timezone_offset = get_option('gmt_offset') * 3600;

// Calculate the offset between the post date and the current date based on timezones
$timezone_offset = $current_date_timezone_offset - $post_date_timezone_offset;

// Adjust the post date by the timezone offset
$post_date_adjusted = date('Y-m-d', strtotime($post_date) + $timezone_offset);

// Check if the post was written today
if ($post_date_adjusted === $current_date) {
    $today_class = 'custom-today';
} else {
    $today_class = '';
}
?>

<div class="your-existing-classes <?php echo $today_class; ?>">
    <!-- Your post content goes here -->
</div>

La mise en cache peut avoir un impact sur le comportement attendu lors de la mise en œuvre de fonctionnalités dynamiques telles que la personnalisation d’éléments en fonction de la date actuelle ou du fuseau horaire du visiteur. La mise en cache permet d’améliorer les performances du site Web en stockant des versions statiques des pages Web ou du contenu pour les servir plus rapidement. Cependant, cela peut entraîner des problèmes lorsque le contenu doit être mis à jour dynamiquement.