WordPress开发中自定义菜单的相关PHP函数使用简介
<p><strong>函数意义</strong><br>
wp_nav_menu ()<br>
自定义菜单显示函数</p>
<p>
register_nav_menu ()<br>
自定义菜单注册函数 – 单数</p>
<p>
register_nav_menus ()<br>
自定义菜单注册函数 – 复数 （很蛋疼的一个复数形式）</p>
<p>
以下举例均用 register_nav_menus () 这个复数形式，以免混淆。</p>
<p>
<strong>使用位置</strong><br>
register_nav_menus ()<br>
function.php 文件中，用于注册自定义菜单在后台的代码调用名称和后台显示名称。</p>
<p>
wp_nav_menu ()<br>
主题任意你想调用自定义菜单的位置。</p>
<p>
<strong>使用方法</strong><br>
注册4个菜单更正：3个菜单（困了，老出错。）</p>
<div>
<div>
<div id="highlighter_765589">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
</td>
<td>
<div>
<div>
<code>register_nav_menus( </code><code>array</code><code>( </code>
</div>
<div>
<code> </code><code>'nav1'</code> <code>=> </code><code>'n1'</code><code>,</code>
</div>
<div>
<code>//nav1 为菜单名称（调用的时候用）</code>
</div>
<div>
<code>//n1 为显示名称 , 后台选菜单的时候用</code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code>'nav2'</code> <code>=> </code><code>'n2'</code><code>,</code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code>'nav3'</code> <code>=> </code><code>'n3'</code>
</div>
<div>
<code> </code>
</div>
<div>
<code> </code><code>));</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
然后去你的后台 =》 外观 =》 菜单 里面看下，<br>
基本上你就明白了，<br>
要是不明白，<br>
那你就再看一下，嘿嘿~</p>
<p>
主题你想要显示自定义导航的位置添加以下代码。</p>
<p>
</p>
<div>
<div>
<div id="highlighter_153048">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
</td>
<td>
<div>
<div>
<code>//调用 nav1 的菜单</code>
</div>
<div>
<code><?php wp_nav_menu( </code><code>array</code><code>( </code><code>'theme_location'</code> <code>=> </code><code>'nav1'</code> <code>) ); ?></code>
</div>
<div>
<code> </code>
</div>
<div>
<code>//调用 nav2 的菜单</code>
</div>
<div>
<code><?php wp_nav_menu( </code><code>array</code><code>( </code><code>'theme_location'</code> <code>=> </code><code>'nav2'</code> <code>) ); ?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
然后就可以到后台去添加一个菜单了，（名称最好是名称或中文。更正：最好是英文。）<br>
你可以设定这个菜单里面显示什么，不显示什么，甚至可以设置导航的层级内容，很方便的说。</p>
<p>
<strong>过滤掉自定义菜单中无用的CLASS值</strong><br>
在 WordPress 的自定义菜单的输出中，菜单中每一个子元素都有一个很长的 class 值，虽然从外观上看不出什么异样来，但从代码上看确实让人心里很难受，其实要过滤掉这些 class 值有很多方法，今天来讲一下通过挂载过滤器 （filter），去除那些我们不想要的class。<br>
在 WordPress 3.5.0 以后的版本中将取消友情链接功能，并以自定义菜单功能实现，这个是后话。<br>
我们在输出自定义菜单的时候，为了让我们更好的控制自定义样式， WordPress 会默认给我们菜单的子元素输出很多个 class 的值，就像下面这样。</p>
<div>
<div>
<div id="highlighter_827194">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
<td>
<div>
<div>
<code><</code><code>li</code> <code>id</code><code>=</code><code>"menu-item-19"</code> <code>class</code><code>=</code><code>"menu-item menu-item-type-post_type menu-item-object-page menu-item-19"</code><code>></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
如何过滤之，让我们的网页源代码变得简洁、易读呢？</p>
<p>
在你的functions.php里面加入</p>
<div>
<div>
<div id="highlighter_668383">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
</td>
<td>
<div>
<div>
<code>function</code> <code>filter_nav_menu_css_class (</code><code>$classes</code><code>){</code>
</div>
<div>
<code>//想要通过的class值</code>
</div>
<div>
<code> </code><code>$do_class_name</code> <code>= </code><code>array</code><code>(</code><code>'current-menu-item'</code><code>);</code>
</div>
<div>
<code> </code><code>$outPut</code> <code>= </code><code>array_intersect</code><code>(</code><code>$do_class_name</code><code>,</code><code>$classes</code><code>);</code>
</div>
<div>
<code> </code><code>array_filter</code><code>( </code><code>$classes</code> <code>);</code>
</div>
<div>
<code> </code><code>return</code> <code>$outPut</code><code>;</code>
</div>
<div>
<code>};</code>
</div>
<div>
<code>add_filter(</code><code>'nav_menu_css_class'</code><code>,</code><code>'filter_nav_menu_css_class'</code><code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
这里将 current-menu-item 这个值保留主要是为了辨别当前页面。</p>
<p>
其实，<br>
还有其他方法去过滤输出的 class 值的，<br>
比如说控制 Walker_Nav_Menu 这个类来精确控制自定义菜单的输出，<br>
但因为比较麻烦所以在这里先不提，其实 Walker_Nav_Menu 这个类可以完成更多我们需要的功能。</p>
<p>
<strong>总结 – 需注意</strong><br>
自定义菜单式在 WordPress 3.0 后才引入的一个功能概念，有点类似于之前的小工具，不过自定义菜单更倾向于导航用途，但因为新功能的中文翻译、流传较慢，再加上这个功能只要是主题成型的爱折腾的博主一般不会在导航方面折腾，所以大家还一直不了解，甚至都出现了错误教程满天飞得局面，在这里希望有的博主在发表博文的时候不要以转载为主，就算是转载一些主要功能请具体测试一下，以免误导新人。</p>
<p>
需注意：<br>
后台设置中如果没有给自定义导航里面设定菜单的话，那wp会为没有设定菜单的导航里自动添加所有页面为导航，这是一个蛋疼的缺省，所以如果这个导航我们不想显示的话，你最好能在后天设定一个空的菜单，然后给不想显示的导航添加这个菜单，这样自定义导航就不会显示了。</p>
頁:
[1]