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

Question

我想突出显示我所在的页面，这就是我到目前为止所拥有的

<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");
});

标签： phpjquerywordpressnavigation

Answer 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>