WordPress中自定义导航菜单

任务：已知菜单样式，把该菜单样式搬移到WordPress的主题中

比如，我需要使用WordPress制作一个网站，类似damienhirst.com。首先看一下该网站的样子：

本文的目标，就是制作该网站的导航菜单部分，并把它放到我们自定义的WordPress主题中，供该主题使用。

我们不能直接把该网站的HTML，CSS代码写到WordPress的主题文件中。这样会导致无法使用Wp的函数来获取菜单对象。我们应该在后台创建菜单，然后在主题的header.php文件中使用wp内置函数来生成菜单的HTML代码

-----------------------------------------华丽分割------------------------------------

Step1.为主题注册菜单

进入后台，选择Appearance->Theme

可以看到，WordPress的默认主题Twenty Ten 是支持Menus的。（OPTIONS后面有Menus）

而如果你自定义一个主题，那我的例子来说：

可以看到，我的主题名字叫Damien，它和其他两个WP已有主题twentyten和twentyeleven位于同一目录下。我这个主题里面文件很少，几个文件夹全部是图片和Javascript文件，与wp主题相关的主要有：

index.phpstyle.css (注意文件头部的描述信息，否则WP后台无法识别加载)header.php(本例只演示头部，其他footer.php sidebar.php未添加)functions.php（空的，里面无代码）

上述文件中 index.php代码如下:<br><br><strong>可以看到，在Options中，我们看不到Menus条目。说明该主题目前还不支持导航菜单。。</strong><br><strong>为什么呢？</strong><strong>因为我们要为该主题注册菜单，否则无法使用。</strong><strong><br></strong><strong><br></strong><strong>具体方法是：</strong><strong>在functions.php中写如下代码：</strong><strong><br></strong><textarea readonly name="code" alt="WordPress中自定义领航菜单"><br><br>可以看到，现在支持菜单啦！！<img alt="WordPress中自定义领航菜单" style="max-width: 100%;height: auto;width: auto\9;" src="//img.reader8.net/uploadfile/jiaocheng/2014/0113/201401132318041586.gif">我们点击Menus，在里面创建一个菜单。<br>-----------------------------------------华丽分割------------------------------------<strong>Step2.添加菜单项</strong><br><br><br>在本文第一张图中，damienhirst网站的菜单有以下选项：Home，News...等，我们把它完善到新建的菜单里即可，如下图所示：<br><img style="max-width: 100%;height: auto;width: auto\9;" src="//img.reader8.net/uploadfile/jiaocheng/2014/0113/201401132318041587.png" alt="WordPress中自定义领航菜单"><br><br>OK，添加完成后，下面就是写主题的PHP代码了。<br><br>-----------------------------------------华丽分割------------------------------------<br><br><strong>Step3.编写PHP代码显示菜单</strong><br><br> 要学习如何写WordPress中的代码，我们可以拿默认的主题作为参考。首先，进入WordPress3.4的默认主题，我们只关注导航菜单部分。<br><img style="max-width: 100%;height: auto;width: auto\9;" src="//img.reader8.net/uploadfile/jiaocheng/2014/0113/201401132318041588.png" alt="WordPress中自定义领航菜单"><br><br><br>可以看到，该菜单有两项，分别是Home ，Sample Page。我们看一下它的源码：<br><textarea readonly name="code" alt="WordPress中自定义领航菜单"><br><br>它的HTML代码如下：<textarea readonly name="code" alt="WordPress中自定义领航菜单"><br><br><br><br>-----------------------------------------华丽分割------------------------------------<br><br>本来详细介绍了如何在WordPress中使用自定义菜单。感谢您的阅读。<br><p></p><p><br></p> </p></div><div style="margin:0 auto;width:300px;height:250px;position:relative;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 移动端全站正文 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6147101717324856" data-ad-slot="1958144088" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="subn-nav"><a href="//m.reader8.net">读书人网</a> ><a href="//m.reader8.net/jiaocheng/webqd/">Web前端</a></div><div class="sp-jctu"><h3><span> 热点推荐 </span></h3><ul><li><p><a href="//m.reader8.net/jiaocheng/20170204/2771721.html">当前web前端流行的图片压缩实用工具</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140427/2315850.html">惯用小技巧</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140427/2315849.html">bower相干</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140426/2314940.html">三列百分之比格局</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140426/2314939.html">给weblogic指定大小的内存储器</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140426/2314945.html">jQuery 垂直滑动快讯展示</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140426/2314938.html">jquery 有关特效demo</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140426/2314937.html">备忘简略的发布WebService 可能会</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140425/2313961.html">IE6 lt;Option/gt; selected属性设置有关问</a></p></li> <li><p><a href="//m.reader8.net/jiaocheng/20140425/2313960.html">浏览器兼容细节拾掇</a></p></li> </ul></div><div style="display:none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></div> <div class="footer"><p>触屏版 | <a href="//www.reader8.net/jiaocheng/20120624/1326766.html#fromapp">电脑版</a></p><p>读书人网 m.reader8.net</p></div> <script language="javascript"> function clickme(sad){ var divobjdiv = document.getElementById("divobjdiv" + sad); if(divobjdiv.style.display =="none"){ divobjdiv.style.display ="block"; }else{ divobjdiv.style.display ="none"; } var wenzi = document.getElementById('divobjimg' + sad); if(wenzi.innerText == "收起"){ wenzi.innerText = "查看更多"; }else{ wenzi.innerText = "收起"; } } </script> <div id="back-top"><a href="#top"><span></span></a></div> </body> </html>