5 façons d'ajouter un widget de date et d'heure à votre site Web WordPress

L'affichage d'un widget de date et d'heure est quelque chose qui a commencé avec les sites Web de journaux. Obtenir la date d'aujourd'hui de leur journal juste quelque chose qui avait toujours fait partie de la vie des gens. Lorsque le journalisme imprimé est passé au Web, cela n'allait pas changer.

Cependant, l'affichage de la date et de l'heure actuelles n'est pas réservé aux sites Web d'actualités. Il existe de nombreuses raisons pour lesquelles d'autres sites devraient penser à faire de même :

• Vous pouvez afficher l'heure actuelle dans votre fuseau horaire pour indiquer aux clients quand ils peuvent contacter le service client
• Cela donne à votre site un aspect vivant et pertinent, même si votre contenu est un peu plus ancien. Ceci est important car la plupart d'entre nous sont à la recherche des dernières informations à jour.
• S'il y a des événements à venir sur votre page, l'heure et la date actuelles aident les visiteurs à comprendre combien de temps ils doivent les attendre (autrement, utilisez un module de compte à rebours tel que celui inclus dans le thème Divi)

En bref, l'affichage d'un widget de date et d'heure aide à lier votre audience, rend votre site plus attrayant et vous positionne en tant que fournisseur d'actualités et d'informations à jour. Raison suffisante pour apprendre à en implémenter un sur votre site WordPress.

Dans l'article suivant, nous vous montrerons plusieurs façons de créer un widget de date et d'heure pour votre site Web. Tout d'abord, nous verrons comment le faire manuellement, puis nous parlerons de certaines solutions de plugins qui vous permettent de faire la même chose sans aucun codage.

Ça a l'air bien? Alors ne soyons pas idiots mais allons droit au but.

Comment créer manuellement un widget de date et d'heure dans WordPress

Une façon d'inclure l'heure et la date actuelles sur votre site est de coder une solution vous-même. C'est ce que nous allons faire en premier. Nous créerons un shortcode simple qui, s'il est saisi n'importe où sur votre site, affichera l'heure et la date à vos visiteurs.

Créer le shortcode

Notre première étape consiste à configurer le shortcode réel. Pour cela, nous allons d'abord ouvrir les fonctions.php de notre thème actuel. Nous vous recommandons fortement d'utiliser un thème enfant pour cela afin de ne perdre aucune modification lors de la mise à jour de votre thème parent.

Une fois le fichier ouvert, collez ce bout de code à la fin :

function current_time_date(){
return date('F jS, Y, H:i:s');
}

add_shortcode( 'time_date', 'current_time_date' );

Quelques informations à ce sujet : Le code ci-dessus est une fonction qui crache la date et l'heure actuelles, puis les attribue à un shortcode appelé [time_date] . Si vous entrez le shortcode sur votre site, il appellera alors la fonction en action.

Dans le format que nous avons utilisé ci-dessus, l'heure et la date sont sorties dans ce format : 6 juillet 2017, 12:35:41. Cependant, vous pouvez utiliser différents formats que vous pouvez découvrir ici.

Maintenant, pour tester le code, copiez simplement le shortcode quelque part sur votre site. Sachez toutefois que, par défaut, les codes courts ne fonctionnent pas dans les widgets. Pour les utiliser, vous devez soit installer le plugin Shortcode Widget, soit ajouter cette ligne à functions.php .

add_filter('widget_text','do_shortcode');

Après cela, voici le résultat :

Passer à JavaScript

Ça a l'air bien jusqu'à présent, n'est-ce pas ? Cependant, si vous suivez les étapes ci-dessus, vous remarquerez rapidement que l'horloge ne se met pas à jour. Au lieu de cela, il ne crache l'heure actuelle qu'une seule fois, lorsque la page est chargée. Après ça reste statique, ce qui va à l'encontre du but un peu, n'est-ce pas ?

C'est parce que PHP est un langage côté serveur, ce qui signifie que vous devez faire des appels supplémentaires au serveur pour mettre à jour les informations. Pour cette raison, nous ferions mieux de travailler avec un langage côté client comme JavaScript.

Heureusement, il existe de nombreuses horloges JavaScript disponibles sur le net. Une courte recherche sur Google affichera de nombreux exemples. J'ai utilisé ce service pour générer le code JavaScript pour mon format souhaité. Après cela, j'ai entré le code dans un fichier appelé clock.js que j'ai copié dans mon dossier de thème.

Le script appelle un div du nom clockbox . Pour cette raison, j'ai changé ma fonction précédente comme suit :

function current_time_date(){

echo '<div id="clockbox"></div>';

}

add_shortcode( 'time_date', 'current_time_date' );

Maintenant, il ne reste plus qu'à appeler mon nouveau fichier JavaScript :

wp_enqueue_script( 'clock', get_theme_file_uri('/clock.js'));

Et voila :

Ajouter un style

Enfin, vous souhaiterez probablement pouvoir styliser votre widget d'heure et de date afin qu'il corresponde à votre image de marque globale. Heureusement, puisque la fonction que nous avons utilisée a créé un identifiant CSS, nous pouvons ajouter notre propre style au widget de date et d'heure comme suit :

#clockbox {
font-size: 22px;
font-style: italic;
color: #999;
}

Voici le résultat :

Ce n'était plus si difficile maintenant, n'est-ce pas ? Je t'avais dit que ce serait facile. Cependant, ce n'est qu'une façon de créer votre propre widget de date et d'heure. Avec des côtelettes de codage supplémentaires, vous pouvez faire beaucoup plus.

Cependant, si vous n'êtes pas du genre à utiliser l'itinéraire manuel, vous pouvez également obtenir des résultats similaires à l'aide de plugins WordPress.

Plugins pour créer des widgets d'heure et de date pour votre site Web

Bien que le nombre de plugins disponibles dans le répertoire WordPress ne soit pas écrasant, il existe quelques spécimens qui font un assez bon travail.

Date de l'horloge en direct

Notre premier concurrent est ce plugin. Comme son nom l'indique, il vous permet d'ajouter une horloge et la date à votre site WordPress.

Leur widget d'heure et de date offre de nombreuses options de personnalisation. Vous pouvez choisir entre un cycle de 12 ou 24 heures, mettre à jour l'horloge toutes les minutes ou toutes les secondes, afficher ou masquer la date et déterminer leur ordre. Le widget a même une section pour le CSS personnalisé afin que vous puissiez utiliser la même police que votre site Web et plus encore.

Malheureusement, les options de formatage sont par ailleurs quelque peu limitées. Par exemple, il n'est pas possible de supprimer le jour de la semaine de la date. Cependant, à part cela, le plugin fait ce qu'il est censé faire.

Widget de date et d'heure

Tout d'abord, un petit avertissement. Ce plugin est un peu ancien et a été mis à jour pour la dernière fois il y a deux ans. En conséquence, il n'y a aucune garantie qu'il fonctionnera avec tous les thèmes modernes et la dernière version de WordPress. Cependant, comme cela a bien fonctionné dans mon test avec WordPress 4.8 et offre un bel ensemble d'options, j'ai pensé que cela valait la peine de l'inclure.

Après l'installation, le plugin ajoute un nouveau widget Date et heure au menu des widgets. Lorsque vous l'ajoutez à une zone widgetisée, cela vous offre de nombreuses façons de le personnaliser.

Comme vous pouvez le voir, vous pouvez configurer le format de l'heure et de la date (ou le désactiver complètement), modifier la famille et la taille de la police ainsi que la couleur du texte et la couleur d'arrière-plan (y compris les codes hexadécimaux). De cette façon, il est facile d'adapter le widget à votre thème. Si cela ne suffit pas, le widget dispose de suffisamment de classes HTML pour que vous puissiez facilement implémenter vos propres règles CSS personnalisées.

Date et heure actuelles

Le dernier plugin de cette liste est assez simple. Installez, activez et vous obtenez un nouveau widget appelé Date et heure actuelles que vous pouvez faire glisser vers n'importe quelle zone de widget. Terminé.

Le résultat est correct et s'adapte automatiquement au style de votre thème. Il est également réactif pour les mobiles, ce qui est un must de nos jours. D'un autre côté, il n'offre aucune option pour ajuster quoi que ce soit. Un seul format est disponible, pour plus vous devez acheter la version pro.

Conclusion

Il existe de nombreuses raisons d'afficher un widget d'heure et de date sur votre site WordPress. C'est un bon moyen de faire savoir à vos clients quand ils peuvent vous joindre, à quel point votre contenu est à jour et plus encore.

Comme vous l'avez vu ci-dessus, il existe plusieurs façons de l'implémenter dans WordPress. La première consiste à configurer votre propre shortcode pour implémenter le widget où vous le souhaitez. Bien sûr, il existe également des plugins qui peuvent faire la même chose pour vous. Bien qu'il ne soit pas écrasant, il existe de solides concurrents.

Maintenant à vous. Avez-vous déjà utilisé un widget d'heure et de date sur votre site ? Si oui, pour quoi en aviez-vous besoin et comment l'avez-vous mis en œuvre ? Faites-nous savoir dans la section commentaires ci-dessous.

Image miniature de l'article par Jane Kelly / shutterstock.com