使用图像进行WordPress导航

Question

我目前在一个WordPress网站上工作。一切都很好，除了我的导航。我不想使用标准的文本和基于css的导航WordPress使用，但插入我自己的导航与图形图像(PNG文件，但如果需要的话，可以改变文件类型)。

有没有人知道任何类型的WordPress插件，允许您在导航中使用图像而不是文本？

打招呼，纳德

Answer 1

你想有你自己的css文件吗？如果是，你可以用这句话告诉wordpress使用你自己的css文件：

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

示例：

<?php

    /*
     * This example will work with WordPress 2.7
     */

    /*
     * register with hook 'wp_print_styles'
     */
    add_action('wp_print_styles', 'add_my_stylesheet');

    /*
     * Enqueue style-file, if it exists.
     */

    function add_my_stylesheet() {
        $myStyleUrl = plugins_url('style.css', __FILE__); // Respects SSL, Style.css is relative to the current file
        $myStyleFile = WP_PLUGIN_DIR . '/myPlugin/style.css';
        if ( file_exists($myStyleFile) ) {
            wp_register_style('myStyleSheets', $myStyleUrl);
            wp_enqueue_style( 'myStyleSheets');
        }
    }

?>

Answer 2

更改导航栏的输出需要对wp_navmenu()函数的输出设置样式。您可以使用firebug查看该输出。这看起来像这样：

<li id="menu-item-689" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-689">
    <a href="#">Categories</a>
</li>

将id或类作为背景图像的目标，并可选择隐藏菜单文本。推荐的方法是使用子主题中的style.css文件。根本不要弄乱父母的文件。只需将它们导入到一个新的style.css文件中。请查看making child themes上的codex。

尝试如下所示：

#menu-item-689{
    background-image: url('whatever.img');
    margin: -999em;
    font-size: 0;
}

不要使用display:none，因为您希望屏幕阅读器读取它。另一种方法包括将整个列表的定位设置为绝对，并设置left: -999em。