web-dev-qa-db-ja.com

Wordpress Navメニューウォーカーの編集

T5_Nav_Menu_WalkerをWP Webサイトに接続しました。 https://Gist.github.com/thefuxia/1053467

そしてFontAwesomeクラスを通してwp-adminからアイコンを追加できるように私のWPメニューをカスタマイズしたいです。スクリーンショット： 表示

しかし、私がt5_nav_walkerを使用しているので、CSSクラスをメニューに追加するとHTMLコードで何も出力しません。どのように私はこのワードプレスウォーカーにアイコンを追加することができますか？このウォーカーのPHPコード：

<?php # -*- coding: utf-8 -*-
/**
 * Create a nav menu with very basic markup.
 *
 * @author Thomas Scholz http://toscho.de
 * @version 1.0
 */
class menu_walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array $args    Additional strings.
     * @return void
     */
    public function start_el( &$output, $item, $depth, $args )
    {
        $output     .= '<li>';
        // $output .= '<li'.($item->current ? ' class="current"':'').'>';
        $attributes  = 'class="app-menu__item"';

        ! empty ( $item->attr_title )
            // Avoid redundant titles
            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 $attributes>$args->link_before$title</a>"
                        . "$args->link_after$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
        );
    }

    /**
     * @see Walker::start_lvl()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    public function start_lvl( &$output )
    {
        $output .= '<ul class="treeview-menu">';
    }

    /**
     * @see Walker::end_lvl()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    public function end_lvl( &$output )
    {
        $output .= '</ul>';
    }

    /**
     * @see Walker::end_el()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    function end_el( &$output )
    {
        $output .= '</li>';
    }
}
menuscsswalker
1
Orkhan Hasanli

メニュー項目用の追加フィールドを作成する必要があります。なぜならあなたがクラスフィールドを使うのであれば - あなたはリンクにクラスを追加することをブロックするでしょう。しかし、問題なければ、リンクのタイトルの前に<i class="$your_class"></i>を作成してください。そして@Dilip Guptaがあなたに解決策を与えました。

1
Maxim Sarandi

$item_output変数を更新する必要があります。 fontawesomeはアイコンをこのフォーマット<i class="fa fa-angle-right"></i>で出力します。

このようにあなたの<i>内にこの<a>を追加する必要があります。

$item_output = "$args->before"
    . "<a $attributes>"
        . "$args->link_before"
        . "<i class='$variable_which_stores_fontawesomme_value'></i>"
        . "$title"
    . "</a>"
    . "$args->link_after"
    . "$args->after";

$variable_which_stores_fontawesomme_valueはfa fa-angle-rightと等しくなければなりません。

1
Dilip Gupta