带有图片和课程选择的WordPress菜单链接

时间:2013-02-27 作者:Nishant

    <ul>
        <li class="selected">Link 1<img src="images/slash.png" /></li>
        <li>Link 2<img src="images/slash.png" /></li>
        <li>Link 3<img src="images/slash.png" /></li>
        <li>Link 4<img src="images/slash.png" /></li>
        <li>Link 5<img src="images/slash.png" /></li>
        <li>Link 6<img src="images/slash.png" /></li>
        <li>Link 7<img src="images/slash.png" /></li>
        <li>Link 8</li>
    </ul>
图像的斜杠。png’需要在每个链接的末尾,而不是最后一个链接,我如何在wordpress中实现这种菜单?选择相应页面的链接时,如何应用“selected”类?

2 个回复
SO网友:Sunyatasattva

如果您的slash.png 只是表面上的,我建议您使用CSS::after 伪元素,它与所讨论元素的虚拟最后一个子元素相匹配。然后使用:last-child 选择器,以避免其显示在最后一项中。应该是这样的:

ul.nav li::after {
    background: url(\'images/slash.png\') bottom no-repeat;
    content:    \'\';
    display:    inline-block;
    width:      20px; // Set this to the width of your slash image 
    height:     20px; // Set this to the height of your slash image
}

ul.nav li:last-child::after {

    background: none;

}
然而,请注意:after 受IE8+支持,:last-child 仅受IE9+支持,因此您可能需要解决这些兼容性问题。

要完全按照您的要求执行,您应该通过扩展Walker_Nav_Menu, 或者你可以试试wp_nav_menu_objects 钩但就你而言,我认为这根本没有必要。

SO网友:Amit Sharma

如果这是您正在谈论的wp\\u nav\\u菜单,那么您应该查看函数的link\\u after属性

例如:。

<?php

$defaults = array(
\'link_after\'      => \'<img src="images/slash.png" />\',
\'items_wrap\'      => \'<ul id="%1$s" class="%2$s">%3$s</ul>\',
\'depth\'           => 0,
\'walker\'          => \'\'
);

wp_nav_menu( $defaults );

?>
但是,这并不排除附加img标记时的最后一个链接。

Wordpress自动为当前活动链接提供“current\\u page\\u item”类。也许您希望相应地修改CSS/Javascript。

结束

相关推荐

如何在将php文件附加到任意插件的同时仍能访问wp-core函数?

根据找到的示例here 还有其他一些,我试图从特定URL加载非wordpress页面,同时访问wordpress核心。我有以下代码(看起来像预期的那样工作)连接到template_redirect 措施:function templateRedirect() { global $wp; if ( $wp->query_vars[\'pagename\'] == \'nlm-admin-thumbnail\' ) { global $wp_que