开发者

Wordpress Dynamic menu highlighting if page belongs to specific category

开发者 https://www.devze.com 2023-04-06 16:59 出处:网络
I\'m looking for a way to dynamically highlight a menu item anytime a user is viewing a page that is assigned to a given taxonomy or category. For example a nav bar at the top with items \"Products\"

I'm looking for a way to dynamically highlight a menu item anytime a user is viewing a page that is assigned to a given taxonomy or category. For example a nav bar at the top with items "Products" and "Strategy". Any page or post that is created and has the categ开发者_如何学运维ory or taxonomy "product" would cause the Products menu item to be highlighted when you are on the page for that product. I'm thinking if I could figure out a way to just apply a class to that item based on the criteria above, that would do it. Any ideas? I'm stumped on this one.


I would recommend a front end approach. Here's what I'm thinking:

1) You have 2 or more categories: Products and Strategy ...

2) Each post in Products will have a body class string that contains a class which is probably called products-taxonomy or something like that.

3) With jQuery you can check for products-taxonomy or strategy-taxonomy and highlight the specific menu-item. This can be done easily with jQuery selectors provided that you add a specific class to your products category when you create your menu.

It would be something like this:
add class for products menu item : 'productsMenu'
add class for strategy menu item : 'strategyMenu'
make sure you echo the body_class

var $body = $(body); // better select just once the body
if($body.hasClass('products-taxonomy')) {
    // highlighetMenuItem should be your highlighting class
    $(".productsMenu").addClass("highlighetMenuItem");  
} else if($body.hasClass('strategy-taxonomy')) {
    $(".strategyMenu").addClass("highlighetMenuItem");
}

And yeah... you need jQuery on the front end if you want this to work. Or you could use pure javaScript in almost as many lines of code. :)

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号