1

首先，我不是开发人员，我只是在自学。我对php和javascript还没有深入的了解。

我正在开发自己的 WordPress 网站作为测试对象和学习场所。我在我的自定义子主题中使用了 twitter bootstrap，它有一个名为 320Press WP-Bootstrap 的父主题。我在这方面没有问题。只在它的php方面。

我现在面临关于顶部导航栏菜单的问题。我无法为我想要的菜单项触发 .active 类。

菜单是使用添加菜单小部件从管理面板创建的。菜单的父项称为 BLOG，其子项是 BLOG 的类别。基本上，博客菜单是我的顶部导航栏菜单的子项。我的顶部导航栏菜单包含主页、博客和信息菜单。点击 BLOG 菜单将触发主题的下拉菜单功能，并显示可用的博客类别。我已经将我的永久链接设置设置为这样的自定义结构， http: //mysite.com//blog/%postname%/

我创建了一个静态页面并将其设置为我的主页，活动类正在处理该 url，即我的根域。我的主题的 function.php 通过定位当前菜单项类在其上添加一个 .active 类。但是当我导航到我的博客部分（也是一个自定义页面）时，活动类不会添加到导航菜单“博客”中。菜单“博客”是通过管理员菜单小部件添加的。

一位用户建议在服务器端解决这个问题，所以我认为他的意思是添加一些 php 代码。

但是我还没有那个技能。但是 wordpress 提供了 codex，我可能只需要复制粘贴一些代码并对其进行调整。但为了调整它，我仍然需要一些 php 技能。我在网上搜索了一些类似的问题并找到了一些可行的解决方案，但我不知道如何实施它来解决我的具体问题。

我在这里发现了一些类似的问题：

基于当前url的jquery活动类到菜单项

根据 URL 设置活动链接

如何根据当前 url 添加类

但我对如何实现它一无所知。

我也从 wordpress 论坛找到了这个，我用我的值替换了这些值，但它不起作用。

这是我的 WordPress 导航菜单的外观：

<div class="nav-collapse collapse">
    <ul class="nav">
        <li class="cateogry-1">Home</a></li>
        <li class="this-shall-become-active"><a data-toggle="dropdown" class="dropdown-toggle" title="blog">Blog<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li class="category-1"><a href="../blog/cat1">Blog Category 1</a></li>
                <li class="category-2"><a href="../blog/cat2">Blog Category 2</a></li>
            </ul>
        </li>
        <li class="somelink1"><a href="#">Some Link 1</a></li>
        <li class="somelink2" ><a href="#">Some Link 2</a></li>
    </ul>                           
</div>

主要目标，当用户浏览 mysite.com/blog 和 /blog 路径下的所有其他页面时，将 .active 类添加到博客菜单的第二<li>个ul#nav

更新 1

我在导航中找不到任何 current_page_parent 或 current_page_ancestor。

更新 2

从wordpress codex网站阅读，我发现了这个

add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
function add_menu_parent_class( $items ) {

$parents = array();
foreach ( $items as $item ) {
    if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
        $parents[] = $item->menu_item_parent;
    }
}

foreach ( $items as $item ) {
    if ( in_array( $item->ID, $parents ) ) {
        $item->classes[] = 'menu-parent-item'; 
    }
}

return $items;    
 }

它将类名添加到 parent <li>，我现在可以进一步定位它并添加 .active 类名。

现在，我需要将 .active 类添加到菜单父项的代码。

4

2 回答 2

1

您应该能够使用 location.pathname 在加载时操作 DOM，即

$(document).ready(function(){
   var currentLocation = location.pathname;
   if (currentLocation == "/test/1"){
      $("#page1").addClass("active");
   }
});

希望能帮助到你。

于 2013-07-03T22:02:32.937 回答
0

经过深入的反复试验和研究。我终于找到了解决我的具体问题的方法。

该解决方案适用于我的情况。我将以下代码粘贴在我的子主题的 function.php 中

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
         if( in_array('current-menu-parent', $classes) ){
                         $classes[] = 'active ';
         }
         return $classes;
}

上面的代码取自这个wordpress 主题。

我已经对其进行了一些修改以满足我的需要。

这是工作结果的屏幕截图。

在此处输入图像描述

于 2013-07-05T00:26:24.840 回答