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/">

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

2 个答案: