将数据图标输入添加到WordPress自定义菜单链接

时间:2013-12-04 作者:Tom Oakley

我需要添加一个data-icon="" 输入到我的Wordpress自定义菜单输入框中。这样我就可以使用图标字体并键入特定图标的代码,在CSS中使用伪元素将其匹配并显示图标。

我找到了大量教程,介绍了如何扩展Walker_Nav_Menu 类,以便我可以添加属性,但没有一个扩展到在Wordpress自定义菜单屏幕上添加新的输入框(http://cl.ly/Sn0C) 然后将其值显示在HTML中。

我用过this code 在自定义菜单管理屏幕上添加数据图标输入框(http://cl.ly/SmqM) 但我的PHP不够好,无法将其与Walker_Nav_Menu 扩展类以在HTML中显示数据图标值。有人能帮我吗?谢谢:)

我希望这可以在函数中完成。php和/或不使用插件。谢谢

顺便说一句,这是我的Walker_Nav_Menu 扩展类代码:

class data_type_walker extends Walker_Nav_Menu {
      function start_el(&$output, $item, $depth, $args) {
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';

           $class_names = $value = \'\';

           $classes = empty( $item->classes ) ? array() : (array) $item->classes;

           $class_names = join( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item ) );
           $class_names = \' class="\'. esc_attr( $class_names ) . \'"\';

           $output .= $indent . \'<li id="menu-item-\'. $item->ID . \'"\' . $value . $class_names .\'>\';

           $attributes  = ! empty( $item->attr_title ) ? \' title="\'     . esc_attr( $item->attr_title       ) .\'"\' : \'\';
           $attributes .= ! empty( $item->target )     ? \' target="\'    . esc_attr( $item->target           ) .\'"\' : \'\';
           $attributes .= ! empty( $item->xfn )        ? \' rel="\'       . esc_attr( $item->xfn              ) .\'"\' : \'\';
           $attributes .= ! empty( $item->url )        ? \' href="\'      . esc_attr( $item->url              ) .\'"\' : \'\';
           $attributes .= ! empty( $item->data_icon )  ? \' data-icon="\' . esc_attr( $item->data_icon        ) .\'"\' : \'\';

           $prepend = \'\';
           $append = \'\';

           if($depth != 0) {
                 $description = $append = $prepend = "";
           }

            $item_output = $args->before;
            $item_output .= \'<a\'. $attributes .\' aria-hidden="true">\';
            $item_output .= $args->link_before .$prepend.apply_filters( \'the_title\', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;
            $item_output .= \'</a>\';
            $item_output .= $args->after;

            $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
        }
}
编辑:Chittaranjan向我询问了更多信息,下面是:

我打这个新分机(data_type_walker) 在课堂上Walker_Nav_Menu 在我的标题中。我的导航菜单所在的php文件。如下所示:

<?php wp_nav_menu( array( \'theme_location\' => \'primary\', \'container\' => false, \'menu_class\'=> \'nav-menu\', \'walker\' => new data_type_walker() ) ); ?>
输出应如下所示:

<li class="all the various wordpress menu classes"><a href="url" data-icon="whatever input I choose in the Custom Menu Admin section" aria-hidden="true">navigation text link</a></li>

1 个回复
SO网友:Mr Rethman

另一个选项是切换屏幕选项、WP Admin>外观>菜单下的CSS类复选框,并将图标附加到CSS类。

并使用psuedo选择器将图标添加到CSS类中。

enter image description here

enter image description here

结束

相关推荐

Wordpress Navigation

我的菜单html代码如下:<div class=\"menu\"> <ul> <li><a href=\"index.php\" >Home</a></li> <li><a href=\"aboutus.php\" >About Us</a></li> <li><a href=\