在自定义导航栏 wordpress 中突出显示当前页面

Posted 2023-04-13

【中文标题】在自定义导航栏 wordpress 中突出显示当前页面

【英文标题】：highlight current page in custome nav bar wordpress

【发布时间】：2019-10-19 15:02:16

【问题描述】：

我正在尝试突出显示我所在的页面，这就是我目前拥有的页面

<ul class="navigation list-unstyled components">
    <li class="active">
        <a href="<?php echo site_url(); ?>">Home</a>
    </li>
    <li>
        <a href="<?php echo site_url(); ?>/contacts">Contacts</a>
    </li>
    <li>
        <a href="<?php echo site_url(); ?>/aboutus">aboutus</a>
    </li>
    <li>
        <a href="<?php echo site_url(); ?>/aboutyou">aboutyou</a>
    </li>
</ul>

这是迄今为止我尝试过的唯一一个 jquery，但它似乎不起作用：

$(".navigation a").on("click", function () 
    $(".navigation ").find(".active").removeClass("active");
    $(this).parent().addClass("active");
);

【参考方案1】：

如果您正在构建一个标准的 WordPress 网站，那么当您单击导航链接时，您的页面将重新加载，因此即使您使用 jQuery 设置类，它也会在页面加载时重置。

你应该做的是在PHP中设置导航元素的类。

此代码只是一个模型，请根据您的需要进行调整：

$home = is_front_page();
# Checks if it's the site front page

$contacts = is_page('contacts');
# Checks if the current page is a page called 'contacts'

$aboutus = is_page('aboutus');
# Checks if the current page is a page called 'aboutus'

$aboutyou = is_page('aboutyou');
# Checks if the current page is a page called 'aboutyou'

    <ul class="navigation list-unstyled components">
                <li <?php if ($home) echo 'class="active"'; ?>>
                    <a href="<?php echo site_url(); ?>">Home</a>
                </li>
                <li <?php if ($contacts) echo 'class="active"'; ?>>
                    <a href="<?php echo site_url(); ?>/contacts">Contacts</a>
                </li>
                <li <?php if ($aboutus) echo 'class="active"'; ?>>
                    <a href="<?php echo site_url(); ?>/aboutus">aboutus</a>
                </li>
                <li <?php if ($aboutyou) echo 'class="active"'; ?>>
                    <a href="<?php echo site_url(); ?>/aboutyou">aboutyou</a>
                </li>
            </ul>