当前位置：文江博客话题详情

WordPress 图像导航

发布于 2024-12-20 18:49:56 字数 186 浏览 2 评论 0原文

我现在正在开发一个 WordPress 网站。除了我的导航之外，一切都很好。我不想使用 WordPress 使用的标准文本和基于 css 的导航，而是插入我自己的带有图形图像的导航（PNG 文件，但可以根据需要更改文件类型）。

有谁知道有什么类型的 WordPress 插件可以让您在导航中使用图像而不是文本吗？

问候，纳德

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦屿孤独相伴 2024-12-27 18:49:56

你想拥有自己的 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');
        }
    }

?>

do you want to have your own css file ?
if it is you can just use this to say to wordpress use your own css file :

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

example :

<?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');
        }
    }

?>

回复收藏 0 原文

简美 2024-12-27 18:49:56

更改导航栏的输出需要对 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。

Changing the output of the nav bar requires styling the output of the wp_navmenu() function. You can see that output with firebug. This will look something like:

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

Target the id or class with a background image and optionally hide the menu text. The recommended way to do that is with the style.css file in a child theme. Don't mess with the parent's files at all. Just import them in a new style.css file. Check the codex on making child themes.

Try something like this:

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

don't use display:none because you want screen readers to read it. Another method involves setting the positioning to absolute for the list as a whole and setting the left: -999em.

回复收藏 0 原文

~没有更多了~