Comment intégrer Hover.css dans WordPress

Cet article vous propose d'ajouter facilement la bibliothèque Hover.css créée par Ian Lunn au sein de votre thème WordPress. Quelques étapes vont suffire à rendre votre site interactif !

Qu'est-ce que Hover.css ?

Un "hover" est une sorte d'effet qui anime un contenu lorsque la souris survole l'élément. Il est généralement appliqué sur un lien, un texte, un bouton ou une image. Cela permet ainsi au visiteur de comprendre que quelque chose va se produire s'il clique sur cet élément, rendant ainsi votre site plus "friendly".

Il existe de très nombreuses possibilités d'effets offertes par CSS3 et le développeur Ian Lunn les a répertorié (plus de 4300 lignes de codes) dans un fichier permettant ainsi de les utiliser très facilement sans avoir à perdre du temps pour les intégrer. Il propose près de 100 effets différents !

 

Comment ajouter la bibliothèque Hover.css ?

De très nombreux thèmes WordPress possèdent déjà des "animations au hover", toutefois vous pourriez décider d'en ajouter. Voici les quelques étapes afin d'y parvenir :

Étape 1 : obtenir la bibliothèque Hover.css

CSS de Hover.css à copier

Pour cela, il faudra vous rendre sur le profil de Ian Lunn sur Github et copier la totalité du contenu du fichier hover.css.

Étape 2 : créer un fichier hover.css

Créer la feuille de style Hover.css

Ensuite, à l'aide d'un éditeur de texte tel que Sublim Text, il vous faudra créer un nouveau fichier nommé "hover.css" afin d'y coller les 4350 lignes de codes (copiées précédemment à l'étape 1). Enregistrez ensuite ce fichier sur le bureau de votre ordinateur.

Étape 3 : envoyer le fichier hover.css dans votre thème enfant

Comme toutes modifications à apporter dans un thème, il est fortement recommandé d'utiliser un thème enfant. Il faudra donc passer par cette étape avant de continuer. Si vous n'avez pas encore de thème enfant, lisez cet article qui vous aidera à en créer un. Ensuite, il vous suffira d'envoyer le fichier hover.css, via une interface FTP (comme FileZilla par exemple), au sein de votre dossier de thème situé chez votre hébergeur. Le chemin à suivre devrait ressembler à : www > wp-content > theme > votre-child-theme > placer "hover.css" ici

Étape 4 : indiquer au Child Theme la présence du nouveau CSS

Code à ajouter au fichier functions.php

En effet, une fois le fichier hover.css ajouté, il va falloir que le thème le prenne en compte grâce à la fonction wp_enqueue_style proposée par le Codex de WordPress... Pour cela, éditez votre fichier functions.php (toujours avec un éditeur de texte ou bien directement depuis l'administration de WordPress dans l'onglet  Apparence > Éditeur) en ajoutant cette simple ligne :

 wp_enqueue_style( 'hover-style-css', get_stylesheet_directory_uri() . '/hover.css' );

... juste en dessous de cette ligne déjà présente dans votre thème enfant :

 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

Le rendu final devrait ressembler à cela :

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'hover-style-css', get_stylesheet_directory_uri() . '/hover.css' );
}

Étape 5 : utiliser Hover.css

À présent, tout est prêt ! Vous n'avez plus qu'à appliquer des animations de style "hover" à vos contenus... Pour cela, il vous suffira d'ajouter des "classes" à vos balises HTML.

Tout d'abord, vous devrez choisir votre effet préféré et pour cela je vous donne rendez-vous à la galerie. Une fois que vous aurez trouvé votre "bonheur", il faudra transformer le nom de l'effet en classe de la manière suivante : si l'effet choisit se nomme "Bounce To Left", la classe à appliquer sera "hvr-bounce-to-left", de même que si votre effet se nomme "Float", la classe à appliquer sera "hvr-float".

 

Quels sont les différents types d'utilisation ?

=> sur une image :

Insérez une image dans l'éditeur visuel de votre article puis passer en version "texte" pour ajouter, à la balise <img/>, la classe souhaitée comme dans l'exemple ci-dessous :

<img class="hvr-float aligncenter size-full" src="https://url-de-votre-image.png" alt="texte-alternatif" width="largeur" height="hauteur" />

=> sur un titre :

Pour cela, vous pouvez procéder de la même manière mais en ajoutant la classe sur la balise <h1>, <h2>, <h3> etc... :

<h4 class="hvr-underline-from-left">Mon titre avec hover</h4>

=> sur une navigation (menu) :

Vous pouvez appliquer des hovers à la totalité de votre navigation, pour cela, rendez-vous dans l'onglet Apparence > Menu. Ensuite ouvrez la fenêtre des options de l'écran (tout en haut à droite) puis cochez "Classes CSS".

Ajouter l'option de classes CSS au menu

Enfin, un nouveau champ apparaît dans chaque élément de votre menu, il s'agit de "Classes CSS (facultatives)" . À cet endroit précis vous pourrez insérer votre classe Hover.css ! N'oubliez pas d'enregistrer votre menu.

=> avec ajout d'un icône :

Linker FontAwesome

La bibliothèque Hover.css fait appel aux icônes proposés par FontAwesome. Pour en bénéficier, vous n'aurez qu'à rajouter cette ligne de code entre les balises <head> et </head> que vous trouverez dans votre fichier header.php :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

Dans ce cas là, aussi, il vous faudra dupliquer le fichier header.php et le rajouter à votre dossier du thème enfant. Ensuite, vous pourrez facilement rajouter des icônes à vos éléments à l'aide de classes telles que .hvr-icon-forward.hvr-icon-forward ou .hvr-icon-up. Vous pouvez facilement changer d'icône en le choisissant dans la liste complète des icônes de FontAwesome puis en le déclarant dans le fichier style.css de votre thème enfant, comme ci-dessous :

.hvr-icon-forward:before {
    content: "\f024";
}

Pour plus d'information, n'hésitez pas à consulter la notice.

 

Quelles sont les alternatives ?

  • Vous n'êtes pas obligé de créer un fichier hover.css, vous pouvez simplement utiliser une ou deux classes proposées dans cette bibliothèque et l'ajouter dans votre propre fichier style.css
  • Hover.css fait appel à du CSS3 ce qui signifie que vous n'avez pas besoin de cela pour créer vos propres effets
  • Vous pouvez facilement modifier les effets : couleurs, taille etc... en modifiant le code proposé par Ian Lunn et contenu dans le fichier
  • Vous pouvez faire appel à des plugins tels que Hover Effects Pack (21$), Hover Effects Builder (23$) ou le Add-On gratuit pour Visual Composer (Image Hover Effect for VC).

 

En conclusion...

Vous l'aurez compris, ce n'est pas bien sorcier d'ajouter quelques effets CSS grâce à la bibliothèque Hover.css et cela rendra votre site WordPress bien plus interactif ! Pas besoin d'en mettre partout ! Quelques liens ou quelques boutons suffisent !

NB : Pour de plus amples explications, je vous invite à suivre le tutoriel proposé par le créateur de Hover.css.

A propos de l'auteur...

Lycia Diaz

Freelance WordPress, Rédactrice Web et Webdesigner, je suis passionnée par le monde du web et de l'environnement Apple... Je tiens également un blog qui traite de ces sujets. J'adore découvrir, tester et partager mes expériences mais aussi créer et réaliser de nouveaux projets ! Je suis auteure d'un guide complet sur WordPress.

Et si vous donniez votre avis ?

78 Partages
Tweetez32
Partagez28
Partagez4
Buffer14