存在一个问题。。。Wordpress有内置的页面检测功能,可以为菜单中的当前页面提供CSS类。。。如果缓存,那么您的导航菜单项将永远不会获得“当前页面”类或其他。。
但是,有两种解决方案:
解决方案1在缓存之前,将类添加到<a>
项目:
function add_menu_atts( $atts, $item, $args ) {
$atts[\'class\'] = $item->type.\'-\'.$item->ID; return $atts;
}
add_filter( \'nav_menu_link_attributes\', \'add_menu_atts\', 8, 3 );
然后缓存菜单。。。它将具有以下输出:
<ul class="..." id="...">
<li class="........"><a class="post_type-312" href="......">Post titleee (it\'s id is 312)</a></li>
<li class="........"><a class="taxonomy-42" href="....">Category titleee (it\'s id is 42)</a></li>
</ul>
所以,从javascript中附加“current item”类(在页面正文中,您应该将变量传递给javascript,以了解您是否在帖子、页面、类别等上)。。。i、 e.:
<script>
var CurrentPageType="post_type"; //or "taxonomy"(for categories); or author or etc...
var CurrentItemId=612;
var element = document.getElementsByClassName(CurrentPageType +\'-\'+ CurrentItemId)[0]; element.className +=" current-menu-item";
</script>
典型的非wp站点的解决方案2。我尝试编写一个JS脚本,这可能会解决问题。。因此,如果您缓存菜单,并希望获得“当前菜单项”类,则将此函数放在页面源代码/缓存中(最好放在正文末尾):
<script> Highlight_Current_Menu_link("current_item__from_JS", "parent_div_id" ); </script>
or
<script> Highlight_Current_Menu_link("current_item__from_JS"); </script>
首先,在头文件中添加此代码(最好在.js文件中):
<script>
function Highlight_Current_Menu_link(Added_class_name, Ancestor_to_search_in, link_to_find){
var Added_class_name = Added_class_name || "current_item__from_JS";
var link_to_find = link_to_find || window.location.pathname;
var Ancestor_to_search_in = typeof Ancestor_to_search_in === "undefined" ? document.body : getElementById(Ancestor_to_search_in);
var A_elements = Ancestor_to_search_in.getElementsByTagName("a");
for(var i=0; i<A_elements.length; i++){
var condition=false;
var href=A_elements[i].href.replace(window.location.origin,"");
if(href.indexOf(\'#\')>-1 && href==link_to_find) {condition=true;}
else if( RemoveHashString(link_to_find).indexOf(RemoveHashString(href)) >- 1 &&
href.substring(0, href.lastIndexOf("/")).trim() == link_to_find.substring(0, link_to_find.lastIndexOf("/")).trim()
) {
condition= true;
}
if (condition) { A_elements[i].className += " "+Added_class_name; }
}
}
function RemoveHashString(str){ var hash=str.split("#")[1]; return str.replace("#"+hash,\'\'); }
</script>
并确定所附类的所需样式
<style>
.current_item__from_JS{background:red;}
</style>