web-dev-qa-db-fra.com

Ajouter un #hash aux liens dans mon menu personnalisé

J'ai créé une page d'accueil statique dans laquelle je charge le contenu de toutes mes pages. Maintenant, j'ai un menu personnalisé normal, mais les liens renvoient aux pages, par exemple: http://example.com/about

Maintenant, je veux que le lien soit dirigé vers la page elle-même avec http://example.com/#about .

J'ai un walker personnalisé que j'utilise et j'ai essayé le code suivant:

$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( get_bloginfo('url').'#'.$item->title ) .'"' : '';

Maintenant, cela fonctionne, sauf pour le lien de rattachement lui-même. La page d'accueil contient des liens vers http://example.com/#home , mais il suffit de créer un lien vers http://example.com/#

Y a-t-il autre chose que je pourrais utiliser alors $item->title pour ajouter.

-

Si vous voulez connaître la méthode que j'utilise pour créer la page unique:
Création de la mise en page html5 css3 moderne 'page unique' dans wordpress

Mise à jour

Je voulais juste vous dire ce que j'ai fait, peut-être que ça aide quelqu'un.

Les pages sont structurées comme ceci:

Home      (public)  -> cutom menu item -> [link:#][label:home]
portfolio (private) -> cutom menu item -> [link:#portfolio][label:portfolio]
contact   (private) -> cutom menu item -> [link:#contact][label:contact]
blog      (public)  -> page menu item  -> [link:blog][label:blog]

Accueil et blog seront indexés et visibles. portfolio et contact sont chargés à la maison qui est un front_page.php.

Notez que j'utilise liens relatifs , et non absolu, la sortie HTML sera href = "# contact".

Ayant maintenant comme cela sera en conflit sur la page du blog, les liens deviendront
http://example.com/blog/#contact

Nous ne voulons pas cela, nous voulons juste
http://example.com/#contact

Dans mon marcheur par défaut, je vais éditer éditer dans le chemin absolu. Je le fais ici juste pour rendre le modèle un peu plus dynamique.

if($item->object == 'custom'){
    $attributes .= ! empty( $item->url ) ? ' href="' .
    esc_attr(get_bloginfo('url').'/'.$item->url ) .'"' : '';
}else{
    $attributes .= ! empty( $item->url ) ? ' href="' . 
    esc_attr( $item->url ) .'"' : '';
}

La source de l’ensemble du marcheur peut être trouvée ici: Description du menu? Walker personnalisé pour wp_nav_menu ()

Maintenant, la chose suivante est:

  1. Pour avoir un effet de défilement sympa (jquery scrollto) lorsque les liens sont cliqués sur la page d'accueil
  2. Redirection vers le blog lorsque l'utilisateur clique sur le lien du blog
  3. Redirection vers la section droite lorsqu'un clic sur un hashlink est effectué sur la page du blog.

jQuery Script (faites défiler jusqu'à Anchor):

$(document).ready(function() {
  $('.menu-item-object-custom a').bind('click', function(e) {
    e.preventDefault();
    var parts = ($(this).attr("href")).split("#");
    var target = '#' + parts[1];

    if($('body.home').length){
      var moveto = $(target).length ? $(target).offset().top : 0;
      $('html, body').stop().animate({ scrollTop: moveto }, 1500, function() {
        location.hash = target;
      });
      return false;
    }else{
        window.location = $(this).attr("href");
    }
  });
});

Notez que l'URL dans le navigateur a également été modifiée, de sorte que le bouton Précédent fonctionne également et que les signets sont faciles.

Merci pour toutes les suggestions et l'inspiration ci-dessous !! Et j'espère que quelqu'un pourra l'utiliser.

theme-developmentmenustemplates
3
Saif Bechan

Aller à

Apparence -> Menus -> Créer un nouveau menu -> Ajouter votre lien en tant que lien personnalisé

1
Giri

Vous pouvez le faire avec JavaScript en retenant les clics dans votre menu et en faisant défiler la page. Voici un exemple d'utilisation de jQuery qui fait correspondre le titre du lien au contenu d'un h1 et lui fait défiler la page.

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('ul#main-menu a').click(function(){
        thisTitle = $(this).attr('title');
        $('html,body').animate({
            scrollTop: $("h1:contains('"+ thisTitle +"')").offset().top
        },'slow');
        return false;                                  
    });
});
</script>

votre menu ...

<ul id="main-menu">
    <li><a href="/about/" title="About">About</a></li>
</ul>

et ensuite votre titre quelque part sur la page ...

<h1>About</h1>

bien sûr, cela nécessite l'activation de JavaScript, mais vous pouvez configurer votre thème avec un modèle de secours pour rendre vos pages individuelles dans les rares cas où vos visiteurs ne disposent pas de js activé et accèdent directement à la page. Assurez-vous simplement que ces pages ne sont pas indexées par les moteurs de recherche.

0
Milo

La page d'administration du menu de navigation personnalisé vous permet de définir quatre propriétés supplémentaires (accessibles en les activant sous "Options d'écran" en haut de la page):

  • Lien cible
  • Classes CSS
  • Relation de lien (XFN)
  • La description

Mais si vous devez uniquement utiliser la page de couverture en tant qu'exception, n'est-il pas plus simple de vérifier le lien et, s'il s'agit de la page de couverture, de ne pas utiliser le titre?

0
Jan Fabry