Kamil Nowak - Frontend Development & RWD

Rozwiązanie opiera się na:

1. Dodanie klasy dla pozycji Menu.

Z menu kontekstowego przy tworzeniu pozycji menu uaktywniamy opcje "Klasy CSS" (Appearance > Menus, Screen Options: Css Classes).

Dodajemy dla każdej pozycji menu klasę wg. tego jaki obrazek ma być dodany (Lista wszystkich ikon).

2. Kodu do "functions.php"

Modyfikuje wyświetlanie menu o dodatkowy tak ikony.

class recherry_icon_walker extends Walker_Nav_Menu {

    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

        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));
        $output .= $indent . '<li id="menu-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) . '"' : '';

        if ($depth == 0) {
            $description = !empty($item->description) ? '<em>' . esc_attr($item->description) . '</em>' : '';
        } else {
            $description = "";
        }

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= '<i class="fa fa-' .  esc_attr($class_names) . '" aria-hidden="true"></i> ';
        $item_output .= $args->link_before . '<span class="icon-title">'. apply_filters('the_title', $item->title, $item->ID).'</span>';
        $item_output .= '</a>';
        $item_output .= $args->after;

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

}

3. Włączenie generowania dla konkretnego menu.

Dodajemy opcje walker dla danego kodu menu.

<?php wp_nav_menu( array(
    'theme_location' => 'social',
    'menu_id'        => 'social-top',
    'menu_class'     => 'social-links-menu menu-icons',
    'depth'          => 1,
    'walker'         => new recherry_icon_walker()
) ); ?>

Font Awesome w menu Wordpress-a