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 !
Ajouter la bibliothèque Hover.css dans WordPress
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
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
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
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>
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”.
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 :
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.
