如何在 Wordpress 中使用图像作为导航按钮？答案

【问题标题】：How to use images as nav buttons in Wordpress?如何在 Wordpress 中使用图像作为导航按钮？
【发布时间】：2010-01-16 18:45:31
【问题描述】：

这是我在 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 -->

如何让每个按钮转到受尊重的页面？如果我通过仪表板添加一个类别，它会添加一个基于文本的链接。我只是想让图像代表不同的类别，有什么想法吗？

【问题讨论】：

标签： php wordpress

【解决方案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()?

【讨论】：

【解决方案2】：

每个硬链接都需要去某个地方：

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

【讨论】：