更改菜单导航中的列表项内容以添加具有特定类的子元素

时间:2015-05-28 作者:JetXS

我离开wordpress有一段时间了,从来没有练习过那么多。我有一些问题,即使我在网上寻找答案。。。关于wp\\U nav\\U菜单行为。

希望你们能帮助并理解我的英语。

问题如下:简短版本:我正在尝试重写<li> 将在HTML中从PHP输出。现在,这是Wordpress输出导航的默认方式。有一个nav -> ul -> li -> a. 我正在尝试用过滤器对li进行返工<li><a href="#\' . $url . \'"><span>\' . $title . \'</span><i class="fa \' . $list_ico_class . \'"/></a></li> 您可以在筛选器末尾看到最后一行:)

长版本:我有一个主导航,显示自定义帖子类型“项目”的类别(制作我的公文包的新版本)。我可能有3个类别:设计、前端、应用程序。然后,菜单项将是这3个类别+一个博客链接。

我正试图根据项目的标题为每个列表项目添加一个自定义类。在浏览完互联网后,解决方案似乎是创建一个过滤内容的功能。

我根据不同的来源写了以下内容:

add_filter( \'wp_nav_menu_items\', \'my_custom_menu_item\', 10, 2 );
function my_custom_menu_item ( $items, $args ) {
    if (is_single() && $args->theme_location == \'primary\') {
        foreach ( (array) $menu_items as $key => $menu_item ) {
            $title = $menu_item->title;
            $url = $menu_item->url;

            if ($title == \'Design\') {
                $list_ico_class = \'fa-pencil\';
            }
            else if ($title == \'Frontend\') {
                $list_ico_class = \'fa-desktop\';
            }
            else if ($title == \'Applications\') {
                $list_ico_class = \'fa-code\';
            }
            else if ($title == \'Blog\') {
                $list_ico_class = \'fa-user\';
            }
            else {
                $list_ico_class = \'fa-question\';
            }

            $menu_list .= \'<li><a href="#\' . $url . \'"><span>\' . $title . \'</span><i class="fa \' . $list_ico_class . \'"/></a></li>\';
        }
    }
    return $menu_items;
}
然后,在我的标题中。php模板,我以“常规”的方式制作菜单,因为我不知道如何继续。。

<nav class="site-navigation main-navigation">
                <span class="nav-info">Smoothly go to<i class="fa fa-long-arrow-right"></i></span>
                <?php

                    $main_nav_values = array(
                        \'theme_location\'  => \'primary\',
                        \'menu\'            => \'\',
                        \'container\'       => \'false\',
                        \'container_class\' => \'\',
                        \'container_id\'    => \'\',
                        \'menu_class\'      => \'main-navigation\', \'site-navigation\',
                        \'menu_id\'         => \'primary-menu\',
                        \'echo\'            => true,
                        \'fallback_cb\'     => \'wp_page_menu\',
                        \'before\'          => \'\',
                        \'after\'           => \'\',
                        \'link_before\'     => \'\',
                        \'link_after\'      => \'\',
                        \'items_wrap\'      => \'<ul id="%1$s">%3$s</ul>\',
                        \'depth\'           => 0,
                        \'walker\'          => \'\'
                    );

                    wp_nav_menu($main_nav_values);

                    ?>
            </nav> <!-- .site-navigation .main-navigation -->
很遗憾,当过滤器功能存在时,菜单不再显示。。。没有触发任何错误,可能只是一个空对象?

我尝试了以下建议:http://codex.wordpress.org/Plugin_API/Filter_Reference/nav_menu_css_class 还有那里Get menu item slug

所需输出如下:

<nav class="site-navigation main-navigation">
        <span class="nav-info">Smoothly go to<i class="fa fa-long-arrow-right"></i></span>
        <ul>
            <li><a href=""><span>Design</span><i class="fa fa-pencil"></i></a></li>
            <li><a href=""><span>Frontend development</span><i class="fa fa-desktop"></i></a></li>
            <li><a href=""><span>Application & Games</span><i class="fa fa-code"></i></a></li>
            <li><a href=""><span>Blog</span><i class="fa fa-user"></i></a></li>
        </ul>
    </nav> <!-- .site-navigation .main-navigation -->
你知道我会犯什么错误吗?提前感谢,请随时询问是否需要更多详细信息!

1 个回复
最合适的回答,由SO网友:JetXS 整理而成

找到了答案。

这可能不是最好的方法,但目前正在发挥作用。

我正在考虑使用过滤器,而解决方案似乎是使用自定义助行器。

class edited_menu_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        ) .\'"\' : \'\';

        //Store the span in a variable
        $prepend = \'<span>\';

        //Check the title of the item, deduct the class name needed for FontAwesome
        if ($item->title == \'Design\') {
            $theIcoName = \'fa-pencil\';
        } else if ($item->title == \'Frontend\') {
            $theIcoName = \'fa-desktop\';
        } else if ($item->title == \'Applications\') {
            $theIcoName = \'fa-code\';
        } else if ($item->title == \'Blog\') {
            $theIcoName = \'fa-user\';
        } else {
            $theIcoName = \'fa-question\';
        }

        //Create the FontAwesome ready <i> element
        $ico = \'<i class="fa \'.$theIcoName.\'"></i>\';

        //Close the span and add the calculated icon
        $append = \'</span>\'.$ico;

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

        $item_output = $args->before;
        $item_output .= \'<a\'. $attributes .\'>\';
        $item_output .= $args->link_before .$prepend.apply_filters( \'the_title\', $item->title, $item->ID ).$append; //add prepend to open the span storing the title, append to close this span and add the FontAwesome icon in an <i> element
        $item_output .= $args->link_after;
        $item_output .= \'</a>\';
        $item_output .= $args->after;

        $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
    }
}
您必须在函数中添加此代码。php文件。

代码的前半部分是“原始wordpress walker”。在下半场,代码有点注释,我做了一些“烹饪”。

为了存储菜单项的文本(项目标题),我创建了一个变量“$prepend”,打开span元素。

之后,我编写了一些条件,这些条件将根据项目的标题确定用于显示FontAwesome图标的“”元素的类。

如果在列表中找不到标题,默认情况下将显示一个带有“fa QUEST”类的问号。这是我的“安全网”,我注意到我的模板中出现了一些问题,我必须修改我的代码,最终生成一个新的图标/菜单项。

进行此扣减后,我们将创建“$append”变量,该变量将关闭“”,但也会在其后面添加正确类fa旁边的+。

最后,我们在末尾构造输出,在“”之间使用“$item\\u output=”。

我希望这足够清楚。。如果有人有更好的解决方案,欢迎分享。

结束

相关推荐

将javascript添加到unctions.php会导致模板出现问题

我想要一个“阅读”链接,点击后可以移动到页面的另一部分。I understand the HTML bit 和I have even used some nice scrolling.它起作用了。但当实施时,我的部分主题就被打破了。滑块图像消失,H1文本全部聚集到左侧。下面是我添加到子函数的内容。php,以便将javascript注入头部区域。/** * Smooth scroll */ add_action(\'wp_head\', \'wpse_43672_wp