自定义沃克菜单和菜单图标

时间:2015-08-14 15:58:02

标签: wordpress plugins menu icons

目前我正在为我的Wordpress主题构建一个自定义菜单,但我在一件事情上有点困难。我使用了一个walkerclass,所以我可以为我的不同菜单元素添加更多细节。除此之外,我使用自定义图标,我用一个名为menu-icons(https://github.com/kucrut/wp-menu-icons)的插件显示

但我现在对我的元素控制不够。我使用当前代码获得以下HTML导出:

<div class="menuwrapper">
     <ul class="menu">
          <li class="menuitem>
               <a class="page" href="#">
                    <div class="menu-title">
                         <h3>
                         <span>Menu Title here</span>
                         <img src="homeicon.svg" />
                         </h3>
                    </div>
               </a>
          </li>
     </ul>
</div>

我真正想要的是以下导出:

<div class="menuwrapper">
     <ul class="menu">
          <li class="menuitem>
               <a class="page" href="#">
                    <div class="menu-title">
                         <h3>Menu Title here</h3>
                    </div>
                    <div class="menu-icon">
                         <img src="homeicon.svg" />
                    </div>
               </a>
          </li>
     </ul>
</div>

要完成第一个结果,请使用以下助行器类:

<?php
    class Description_Walker extends Walker_Nav_Menu{
        function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $indent = str_repeat("\t", $depth);
            $attributes  = '';

            ! empty ( $item->attr_title )
            and $item->attr_title !== $item->title
            and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"';

            ! empty ( $item->url )
            and $attributes .= ' href="' . esc_attr( $item->url ) .'"';

            $attributes  = trim( $attributes );
            $title       = apply_filters( 'the_title', $item->title, $item->ID );
            $item_output = "$args->before<a class=\"page\" $attributes><div><h3>$args->link_before$title</h3></div></a>"
                         . "$args->link_after$args->after";

            $output .= $indent . "<li class=\"menuitem\">";

            $output .= apply_filters(
                    'walker_nav_menu_start_el',
                    $item_output,
                    $item,
                    $depth,
                    $args
            );
        }
    }
?>

我现在想的是该插件正在菜单的$ title中添加图标。这就是为什么我无法将它们分开的原因。我已经浏览了插件文件以查看是否可以覆盖某些内容。但我还没能找到解决方案。如果有人能指出我正确的方向,那将是非常好的。也许有人已经对插件有过一些经验了!

亲切的问候,

的Wouter

0 个答案:

没有答案