WordPress菜单描述中的Html代码

时间:2018-02-28 作者:Maan

我试图在WordPress菜单描述中放置HTML代码,它显示的是内联代码<i class="fa fa-cloud"></i> 而不是图标。

已经试过了,但仍然不起作用

// Allow HTML descriptions in WordPress Menu
remove_filter( \'nav_menu_description\', \'strip_tags\' );
add_filter( \'wp_setup_nav_menu_item\', \'cus_wp_setup_nav_menu_item\' );
function cus_wp_setup_nav_menu_item( $menu_item ) {
    $menu_item->description = apply_filters( \'nav_menu_description\',  $menu_item->post_content );
    return $menu_item;
}

2 个回复
最合适的回答,由SO网友:Md. Amanur Rahman 整理而成

输入下面的完整代码,应该可以。。

<?php class Description_Walker extends Walker_Nav_Menu {

    function start_el(&$output, $item, $depth, $args)
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            \' \'
        ,   apply_filters(
                \'nav_menu_css_class\'
            ,   array_filter( $classes ), $item
            )
        );

        ! empty ( $class_names )
            and $class_names = \' class="\'. esc_attr( $class_names ) . \'"\';

        // Build default menu items
        $output .= "<li id=\'menu-item-$item->ID\' $class_names>";

        $attributes  = \'\';

        ! empty( $item->attr_title )
            and $attributes .= \' title="\'  . esc_attr( $item->attr_title ) .\'"\';
        ! empty( $item->target )
            and $attributes .= \' target="\' . esc_attr( $item->target     ) .\'"\';
        ! empty( $item->xfn )
            and $attributes .= \' rel="\'    . esc_attr( $item->xfn        ) .\'"\';
        ! empty( $item->url )
            and $attributes .= \' href="\'   . esc_attr( $item->url        ) .\'"\';

        // Build the description (you may need to change the depth to 0, 1, or 2)
        $description = ( ! empty ( $item->description ) and 1 == $depth )
            ? \'<span class="nav_desc">\'.  $item->description . \'</span>\' : \'\';

        $title = apply_filters( \'the_title\', $item->title, $item->ID );

        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . \'</a> \'
            . $args->link_after
            . $description
            . $args->after;

        // Since $output is called by reference we don\'t need to return anything.
        $output .= apply_filters(
            \'walker_nav_menu_start_el\'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }
}

// Allow HTML descriptions in WordPress Menu
remove_filter( \'nav_menu_description\', \'strip_tags\' );
add_filter( \'wp_setup_nav_menu_item\', \'cus_wp_setup_nav_menu_item\' );
function cus_wp_setup_nav_menu_item( $menu_item ) {
     $menu_item->description = apply_filters( \'nav_menu_description\', $menu_item->post_content );
     return $menu_item;
} ?>
然后在模板中使用:

<?php wp_nav_menu( array( \'walker\' => new Description_Walker )); ?>

SO网友:thosetinydreams

这并不能直接解决HTML问题,但您也可以通过CSS在:before 伪元素。

以下内容:

.description:before {
  content: \'\\f0c2\';
  font-family: FontAwesome;
  position: absolute;
  ...
}
如果每个项目的描述需要不同的图标,可以使用:nth-child(n) 选择器或菜单项的ID(例如。#menu-item-85 .description).

结束

相关推荐

Get Image Description

我想把帖子分成两列。第一个和左边的是帖子里的任何图片,第二个和右边的是the_content() (不包括图像)。所以到目前为止,我没有问题拉所有的图像。然而,我似乎无法获得图像标题或标题或描述。这是我的密码:<?php if ( $images = get_posts(array( \'post_parent\' => $post->ID, \'post_type\' => \'attachment\', \