Question

我正在尝试获取下面的代码，以便始终突出显示我正在处理的主题的当前页面，但它什么也没做。 HTML部分如下所示。修复的任何建议或解决方案。

<script type="text/javascript">
    var url = window.location.href;
    url = url.substr(url.lastIndexOf("/") + 1);
    $("#navbar").find("a[href='" + url + "']").addClass("current");
</script>

<div id="navbar">
    <ul>
        <li><a href="index.php">home</a></li>
        <li><a href="services/">services</a></li>
        <li><a href="procedure/">procedure</a></li>
        <li><a href="about-us/">about</a></li>
        <li><a href="contact-us/">contact</a></li>
    </ul>
</div>

Answer 1

您需要查看WP Nav Menu。

我猜这是你正在开发的主题？如果是，请在functions.php文件中Register a Nav Menu。这样做是允许您在Wordpress仪表板（外观 - ＆gt;菜单）中定义菜单，并根据需要自定义它。

我建议这样做的原因是，它不仅可以让您以非常直观的方式完全控制您的菜单，而且还可以自动定义样式表可能需要的所有类（包括当前类）物品和血统。）

这是您可以随意使用的最干净的选择。您还可以查看WP List Pages类似（尽管更有限）的解决方案。

否则，你将不得不做这样的脏事：

<?php
$id = get_the_ID();
$class = ' class="current"';
?>
<ul>
    <li<?php echo is_home() ? $class : ''; ?>><a href="<?php echo home_url(); ?>">home</a></li>
    <li<?php echo $id==$serives_ID ? $class : ''; ?>><a href="<?php echo get_permalink($serives_ID); ?>">services</a></li>
    <li<?php echo $id==$procedure_ID ? $class : ''; ?>><a href="<?php echo get_permalink($procedure_ID ); ?>">procedure</a></li>
    <li<?php echo $id==$about_ID ? $class : ''; ?>><a href="<?php echo get_permalink($about_ID); ?>">about</a></li>
    <li<?php echo $id==$contact_ID ? $class : ''; ?>><a href="<?php echo get_permalink($contact_ID); ?>">contact</a></li>
</ul>

将$ services_ID，$ procedure_ID等替换为各自的页面ID，如果当前ID与其中任何一个匹配，则该项目将应用一个“当前”类，然后您可以在其中定位样式表。

我建议使用任何类型的jQuery的服务器端解决方案的主要原因是，这不是专门适用于jQuery本身的任务。

虽然jQuery库是一个功能强大的工具，但Wordpress具有检测此实例中要检测的所有内容所需的所有内置功能。让服务器在让客户端的浏览器接管之前尽可能多地工作。否则，你会看到一些严重的加载时间。

<强>更新根据您的上一条评论，如果您打算采用凌乱的方式，并且您不想为找到您网页的ID而烦恼，您也可以这样做：

<?php
$slugs = array('services', 'procedure', 'about-us', 'contact-us');
?>
<ul>
    <li<?php echo is_home() ? ' class="current"' : ''; ?>><a href="<?php echo home_url(); ?>">home</a></li>
    <?php
    foreach($slugs as $slug)
    {
        $page = get_page_by_path($slug);
        $class = is_page($slug) ? ' class="current"' : '';
        echo '<li'.$class.'><a href="'.get_permalink($page->ID).'">'.str_replace('-us','',$slug).'</a></li>';
    }
    ?>
</ul>

根据最后评论进行更新：

现在您正在使用wp_nav_menu，您可以使用CSS定位当前菜单项。这是一个将当前项目的背景变为红色的示例：

<style type="text/css">
.current-menu-item{background:#F00;}
</style>

将这些规则应用于标题中，或者最好应用于主style.css文件中。祝你好运！

Answer 2

您的substr正在使用/ +1的lastindex。 html中显示的链接有/最后。我想这两个是互斥的，因为以＃结尾的字符串总是返回带有该子字符串的空字符串。

动态当前页面突出显示wordpress中的问题

2 个答案: