Personnalisez votre site WordPress, ajoutez du Javascript a une page spécifique ou ajoutez Google Analytics à votre site.
Placez le code HTML suivant à l'endroit où vous souhaitez ajouter la souris :
<div class="scroll-downs">
<a href="#top">
<div class="mousey">
<div class="scroller"></div>
</div>
</a>
</div>
Dans le fichier style.css de votre thème enfant ou dans l'onglet Personnalisation WordPress, ajoutez le code CSS ci-dessous :
.scroll-downs {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width :34px;
height: 55px;
}
.mousey {
width: 3px;
padding: 10px 15px;
height: 35px;
border: 2px solid #fff;
border-radius: 25px;
opacity: 0.75;
box-sizing: content-box;
}
.scroller {
width: 3px;
height: 10px;
border-radius: 25%;
background-color: #fff;
animation-name: scroll;
animation-duration: 2.2s;
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
animation-iteration-count: infinite;
}
@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
Dans le fichier functions.php du thème enfant, ajoutez la fonction ci-dessous.
is_page()
pour cibler l'ID d'une page. Ex : is_page( 42 )
Pour cibler 2 pages avec la même fonction : is_search() || is_category()
is_search()
cible la page de résultats de recherche
is_category()
cible les pages de catégories.
/* Ajoute du JS à une page spécifique */
function wpb_hook_javascript() {
if ( is_page( ID ) ) {
?>
// Ma fonction JS
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
<aside> 💡 Pensez à remplacer l'ID de votre page.
</aside>