Bonjour à tous
J’ai pu mettre en place des ancres automatiques sur tout mes titres H2 via ce petit morceau de code dans functions.php :
// Ancres autos
function replace_ca($matches){
return '<h'.$matches[1].$matches[2].' id="'.sanitize_title($matches[3]).'">'.$matches[3].'</h'.$matches[4].'>';
}
//Ajout d'un filtre sur le contenu
add_filter('the_content', 'add_anchor_to_title', 12);
function add_anchor_to_title($content){
if(is_singular('page')){ // s'il s'agit d'une page
global $page;
$pattern = "/<h([2-4])(.*?)>(.*?)<\/h([2-4])>/i";
$content = preg_replace_callback($pattern, 'replace_ca', $content);
return $content;
}else{
return $content;
}
}
Cela correspond parfaitement à mon besoin et me crée donc ces ancres automatiquement selon le titre du h2 selon ce format :
<h2 id= »notre-equipe »>Notre équipe</h2>
Par ayant un menu fixe quand je scroll, je souhaiterais décaler ces ancres de façon fluide (CSS ou JS même si je patine dans ce dernier)
J’avais bricolé ceci qui marchait « a peu prés » sur un autre site en JS :
//Pouvoir se déplacer verticalement de façon fluide dans la page
jQuery(document).ready(function($){
$(document).on('click','#item-sommaire a',function(){
var h = $(this).attr('href');
$('body,html').animate({
scrollTop:$(h).offset().top - 150
}, 200);
return false;
});
});
Mais qui marchait bien sur tout mes titres ayant l’id « item-sommaire » ce qui bien sur en correspond pas à mon cas d’aujourd’hui !
Pour info le lien pour accéder à l’ancre se trouve dans un menu sous la forme suivante url.fr/#ancre (lien personnalisé de WordPress)
Des pistes pour m’aider ? Merci d’avance !