创建将图像作为每个链接的自定义菜单

时间:2012-01-23 作者:Anders Kitson

在我当前的模板中,我的主导航是通过一个简单的wp\\u nav\\u菜单功能输出的。现在我正在考虑用css中带有背景图像的无序列表替换它。假设我这样做了,我需要加入到页面的直接链接,包括它的id#,是否有一个wordpress函数,允许我分别获取每个页面位置,并将其放置在我正在创建的主导航的相应列表项中。

something like

<ul>
<li class="nav1"><a href="**wordpress function for 1st nav**"></a></li>
<li class="nav2"><a href="**wordpress function for 2nd nav**"></a></li>
</ul>

1 个回复
最合适的回答,由SO网友:Jeremy Jared 整理而成

有几种方法可以将图像作为菜单链接。既然你已经有了wp\\u导航功能,我建议你用它来添加你的图像。下面是一个快速的方法:

第一步

Add a new custom nav menu:

The WordPress Menu Screen

第2步

Add a temporary page and upload the image for the menu:

Adding the image to the page editor

步骤3

Switch to HTML view select the text and link it to the page it will represent in the menu

Select the html for the imageNote: 您不必使用编辑器,但对于大多数用户来说,如果他们不懂html,则更容易使用。如果您觉得更舒适,可以使用此格式:

<a href="http://the-page-it-represents.com/"><img src="http://your-website.com/wp-content/uploads/2012/01/Profile.png" alt="" title="Profile" width="48" height="48" /></a>

步骤4

Add a custom menu 项将文本粘贴到自定义菜单项的标签文本框中。你可以使用# 作为URL。然后单击添加菜单项按钮,您就得到了第一张图像。

Add the image to the menu

第5步菜单定位我建议使用FirefoxFirebug 或者Web Developer Plugin. 以下是没有用于查找ID的样式和web developer插件的项目:

Use Firebug to get the menu items ID

继续添加它们,直到完成。这将允许您稍后对其进行添加,并可与下拉导航一起使用。有其他方法可以做到这一点,但这一种效果很好。

结束

相关推荐

Thesis -style Navigation

我正在研究一个主题,我希望用户能够像论文一样选择要在主题选项页面中显示的页面。我已经在谷歌上搜索了几个小时的逆向工程论文,但还没有找到一个很好的解决方案。我想知道是否有人做过这件事或看过教程。