Décaler des ancres sur des titres H2 (Créer un compte)

  • WordPress :4.7
  • Statut : non résolu
  • Ce sujet contient 3 réponses, 2 participants et a été mis à jour pour la dernière fois par JohnPEWEB, le il y a 8 années.
4 sujets de 1 à 4 (sur un total de 4)
  • Auteur
    Messages
  • #1612857
    JohnPEWEB
    Participant
    Chevalier WordPress
    125 contributions

    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 !

    #1612871
    jackinthebox
    Participant
    Padawan WordPress
    53 contributions

    Bonjour,

    a priori ça marche comme ça : (c’est en tout cas le cas chez moi)

    <a style="padding-top: 90px;" name="ancre1">

    #1612896
    JohnPEWEB
    Participant
    Chevalier WordPress
    125 contributions

    Merci mais ce n’est pas une bonne solution, l’id des ancres sont générés automatiquement et il y en a plusieurs, de plus cela me fait de gros espaces entre mes paragraphes du moment ou j’utilise des titres de niveau 2 à nouveau.

    D’autres idées ?

    #1613311
    JohnPEWEB
    Participant
    Chevalier WordPress
    125 contributions

    Un petit up ?

4 sujets de 1 à 4 (sur un total de 4)
  • Vous devez être connecté pour répondre à ce sujet.