WordPress使用临时API缓存菜单

时间:2014-01-14 作者:Foxsk8

我想简单地缓存一个页面菜单,该菜单在页面加载时需要大约50个查询。

目前我有缓存设置代码Transient API

$housemenu = get_transient(\'housemenu_key\');
    if (!$housemenu) {
        $housemenu = wp_nav_menu(
            array(
                \'menu\' => \'\',
                \'menu_class\' => \'sf-menu\',
                \'menu_id\' => \'nav\',
                \'walker\' => new description_walker()
            )
        );
        echo \'not-set\';
        set_transient(
            \'housemenu_key\',
            $housemenu,
            60*60*3
        );
    }
echo $housemenu;
$housemenu = get_transient(\'housemenu_key\'); 返回nothing。如果我这样设置:

$housemenu = \'return corrent\';
echo \'not-set\';
一切都很完美。为什么此菜单不起作用?菜单可以是walker瞬态吗?

使用:Wordpress 3.8

2 个回复
SO网友:Rarst

默认情况下wp_nav_menu() 回显结果,不返回任何内容。您需要设置\'echo\' => false 在其参数中翻转行为,并能够将结果赋给变量。

SO网友:T.Todua

存在一个问题。。。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>

结束