Cách tạo WordPress Mega Menu - Phần 5 (Code Mega Menu Frontend Display)

Tiếp tục với series bài viết hướng dẫn tạo WordPress Mega Menu phần trước. Hôm nay chúng ta sẽ tiếp tục với phần 5 là code hiển thị frontend cho WordPress Mega Menu sau khi đã code các field (settings) hiển thị ở phần Admin. Project URL: https://github.com/MiloTheme/WordPressMegaMenu Do sẽ hướng dẫn chi tiết cách code nên bài viết sẽ được chia thành nhiều phần khác nhau. Các bạn có thể xem các phần khác theo link dưới đây: Phần 1: Cấu trúc file và thư viện Phần 2: Các field cần thiết cho Mega Menu Phần 3: Code Setting Field Mega Menu Phần 4: Code Setting Field Mega Menu Admin Display Phần 5: Code Mega Menu Frontend Display Updating... Ở phần 5 này sẽ hướng dẫn code file chính của menu là: custom_walker.php Có thể xem phần 1 và 3 để hiểu chi tiết hơn về file này.

5.1. Class Milo_MegaMenu_Walker

Để hiển thị các setting fields của Menu ở Frontend chúng ta cần tạo class Milo_MegaMenu_Walker:

<?php
/**
 * Custom Walker
 *
 * @access      public
 * @since       1.0 
 * @return      void
*/

class Milo_MegaMenu_Walker extends Walker_Nav_Menu {

public function start_lvl( &$output, $depth = 0, $args = array() ) {

}

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

}

5.2. Function start_lvl

Trong function này chúng ta sẽ thêm các hiệu hứng cho sub-menu khi hover:

// Menu item animate
$sub_menu_animate = 'animated ' . milo_get_option('menu_animation');

$indent = str_repeat("\t", $depth);
// Don't animate on mobile menu
if (property_exists( $args, 'is_mobile_menu' ) && $args->is_mobile_menu == true) {
    $output .= "\n$indent<ul class=\"sub-menu\" style=\"". $args->background ."\">\n";
} else {
    $output .= "\n$indent<ul class=\"sub-menu " . $sub_menu_animate . "\" style=\"". $args->background . "\">\n";
}

5.3. Function start_el

5.3.1. Mega Menu and Sub menu style

Như ở phần 4 code setting fields ở phần admin chúng ta cần xử lý 3 loại mega menu ở đây là: Dropdown, Columns và Tabs

$megamenu = ! empty( $item->megamenu ) ? 'milo-menu milo_megamenu' : 'milo-menu';

// Sub menu style
$sub_menu_style = '';
if( ! empty( $item->megamenu ) ) {
    if ( isset($item->megamenu_style) && !empty($item->megamenu_style) ) {
        $sub_menu_style = $item->megamenu_style;
    }

    if( $sub_menu_style == 'menu_style_column' || $sub_menu_style == 'menu_style_tab' ) {
        $sub_menu_style .= ' mega-col-'. esc_attr( $item->megamenu_col );
        if( ! empty( $item->megamenu_width ) ) {
            $sub_menu_style .= ' mega-fullwidth';
        }
    }   
} else {
    $sub_menu_style = 'menu_style_dropdown';
}
      
$megamenu_background_image = !empty($item->megamenu_background_image) ? 'background-image:url(' . str_replace(array('http://', 'https://'), array('//', '//'), $item->megamenu_background_image) . ');' : '';

5.3.2. Mobile Menu and Setting fields

Mobile Menu Mega Menu trên website có thể dùng 1 menu cho cả desktop và mobile, tuy nhiên nếu bạn muốn sử dụng 1 menu riêng cho desktop và 1 menu riêng cho mobile thì có thể xử lý thêm

// Process menu-mobile-id
$menu_id_prefix = '';
if (property_exists( $args, 'is_mobile_menu' ) && $args->is_mobile_menu == true) {
    $menu_id_prefix = 'mobile-';
}

Settings Fields Tương tự như phần code admin settings field chúng ta cần xử lý các field như Icon, Label:

// Megamenu icon
if ( !empty ( $item->megamenu_icon_color ) ) {
    $style .= "color: {$item->megamenu_icon_color};";
}
        
// Check size icon
if ( !empty ( $item->megamenu_icon_size ) ) 
    $style .= "font-size: {$item->megamenu_icon_size}px;";
        
// Check alignment icon
$icon_class = "";
if ( !empty ( $item->megamenu_icon_alignment ) ) 
    $icon_class .= $item->megamenu_icon_alignment;

// Megamenu icon
if( !empty ( $item->megamenu_icon ) ) {
    $prepend .= '<i class="fa ' . esc_attr( $item->megamenu_icon ). " " . $icon_class .'" style="' . $style . '"></i>';
}
        
// Megamenu sub label
if( !empty ( $item->megamenu_sublabel ) ) {
    $prepend .= '<span class="milo_sub_label ' . esc_attr( $item->megamenu_sublabel ) .'" style="background: ' . $item->megamenu_sublabel_color . '">' . $item->megamenu_sublabel . '</span>';
}

Menu Widget Trong một số trường hợp cần hiển thị các nội dung đặc biệt như slideshow, list sản phẩm với hình ảnh, bản đồ,... chúng ta có thể sử dụng wigdet để hiển thị:

// Add this only for tab style
if( isset($args->before) ) :
    $item_output = $args->before; 
endif;
            
$item_output .= '<a'. $attributes .'>';
            
if( isset($args->link_before) ) {
    $item_output .= $args->link_before. apply_filters( 'the_title', $item->title, $item->ID ). $prepend . $append;
}

if( isset($args->link_after) ) {
    $item_output .= $description.$args->link_after;
}
                    
$item_output .= '</a>';

// With widget don't have caret :)

if( isset($args->before) ) {
    $item_output .= $args->after;
}
// End add for tab style

$item_output .= '<div class="milo_megamenu_widget_area '. $item->megamenu_col_tab .'">';
ob_start();
    dynamic_sidebar( $item->megamenu_widgetarea );
$item_output .= ob_get_clean() . '</div>';

5.4. Kết luận

Như vậy ở phần 5 của Series bài viết về Cách tạo WordPress Mega Menu chúng ta code được phần hiển thị các setting field đã thêm cho WordPress Mega Menu ở Frontend. Với cấu trúc hiển thị như trên chúng ta đã có thể tạo ra 3 style menu trong WordPress đó là Dropdown, Columns và Tabs. Trong phần tiếp theo của Series bài viết này chúng ta sẽ tìm hiểu về cách viết CSS hiển thị cũng như JS để menu hoạt động tốt.