将#散列添加到我的自定义菜单中的链接

时间:2011-08-14 作者:Saif Bechan

我创建了一个静态frontpage,在其中加载所有页面的内容。现在我有了一个普通的自定义菜单,但链接指的是页面,例如:http://example.com/about

现在我想让链接指向页面本身http://example.com/#about.

我有一个使用的自定义助行器,我尝试了以下代码:

$attributes .= ! empty( $item->url ) ? \' href="\' . esc_attr( get_bloginfo(\'url\').\'#\'.$item->title ) .\'"\' : \'\';
现在,除了主链接本身,一切正常。主页链接到http://example.com/#home, 但那只需要链接到http://example.com/#

有什么不同的东西我可以用吗$item->title 添加。

--

如果您想知道我用来创建单个页面的方法:
Creating the modern 'single page' html5 css3 layout in wordpress

更新

我只是想告诉你们我做了什么,也许这对别人有帮助。

页面的结构如下:

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]
主页和博客将被索引并可见。公文包和联系人加载在首页。php。

请注意,我使用的是相对链接,而不是绝对链接,html输出将是href=“#contact”。

现在这样会在博客页面上发生冲突,链接会变成http://example.com/blog/#contact<我们不想那样,我们只想http://example.com/#contact

在我的默认walker中,我将在绝对路径中编辑edit。我在这里这样做只是为了使模板更具动态性。

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 ) .\'"\' : \'\';
}
完整walker的来源如下:Menu items description? Custom Walker for wp_nav_menu()

现在,下一件事是:

  1. 在frontpage上单击链接时要有一个很好的滚动效果(jquery scrollto)
  2. 在单击博客链接时重定向到博客当在博客页面上单击哈希链接时重定向回右侧部分

jQuery脚本(滚动到锚定):

$(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");
    }
  });
});
请注意,浏览器中的URL也会更改,因此“后退”按钮也可以使用,并且可以轻松地添加书签。

感谢下面所有的建议和灵感!!我希望有人能用这个。

3 个回复
最合适的回答,由SO网友:PrivateUser 整理而成

转到

外观->菜单->创建新菜单->将链接添加为自定义链接

SO网友:Milo

您可以通过捕获菜单上的任何点击并滚动页面来使用JavaScript实现这一点。下面是一个使用jQuery的示例,它将链接的标题与h1的内容相匹配,并将页面滚动到h1。

<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>
您的菜单。。。

<ul id="main-menu">
    <li><a href="/about/" title="About">About</a></li>
</ul>
然后你的标题在页面的某个地方。。。

<h1>About</h1>
当然,这需要启用JavaScript,但您可以使用回退模板设置主题,以呈现您的单个页面,在极少数情况下,您的访问者没有启用js并直接转到页面。只要确保这些页面不会被搜索引擎编入索引。

SO网友:Jan Fabry

自定义导航菜单管理页面允许您设置四个额外属性(可通过在页面顶部的“屏幕选项”下启用它们来访问):

链接目标(Link Target)CSS类(Link-Relationship,XFN)链接关系(Link-Relationship,XFN)描述(Link-Relationship,XFN),但如果您只需要将首页作为例外使用,那么只检查链接是否更容易,如果它是首页,则不使用标题?

结束

相关推荐

Menu API not switching menus?

我正在使用菜单API,我想切换到其他菜单,但出于某种原因,它保留了第一个菜单这是我的密码在函数中。php add_action( \'init\', \'register_my_menus\',10 ); function register_my_menus() { register_nav_menu(\'main-navigation\', \'Main Navigation\'); } 下面是我的主题文件(header.ph