如何在WordPress中使用图像作为导航按钮？

Question

这是我在导航栏的header.php

<!-- NAV --> 
    <div id="nav"> 
     <ul> 
      <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/home.png" alt="Ad image" /></a></li> 
      <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav2.png" alt="Ad image" /></a></li> 
      <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav3.png" alt="Ad image" /></a></li> 
      <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav4.png" alt="Ad image" /></a></li> 
      <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav5.png" alt="Ad image" /></a></li> 
      <li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/navbar/nav6.png" alt="Ad image" /></a></li> 
      <?php wp_list_categories('title_li='); ?> 
     </ul> 
    </div> 
<!-- END NAV --> 

如何让每个按钮去那里推崇网页？如果我通过仪表板添加一个类别，它会添加一个基于文本的链接。我只想让图像代表不同的类别，任何想法？

Answer 1

我认为你有两个选择：

• 操纵wp_list_categories（）函数来显示图像

• 操纵通过CSS文本链接隐藏文本，并显示一个背景图像，而不是（ color: transparent; display: block; height: xyz; width: xyz; background-image: url(...)），这强烈依赖于如何呈现列表以及是否有任何特征来标识每个列表项。

最清洁的方法肯定是重写wp_list_categories（）或使用提供替换的插件。看到这个WordPress的论坛条目：How to customize wp_list_categories()?

Answer 2

每个硬链接需要去的地方：

<a href="<?php bloginfo('url'); ?>/categoryname/">