image - 带图像的 WordPress 导航

Question

我目前正在开发一个 WordPress 网站。一切都很好，除了我的导航。我不想使用 WordPress 使用的标准文本和基于 css 的导航，而是插入我自己的带有图形图像的导航（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 文件即可。检查有关制作儿童主题的法典。

尝试这样的事情：

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

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