Cách tạo WordPress Mega Menu - Phần 3 (Code Settings Field Mega Menu)

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 3 là code setting fields cho WordPress Mega Menu sau khi đã tìm hiểu về các field (settings) cần thiết. 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 Updating... Ở phần 3 này sẽ hướng dẫn code file chính của menu là: megamenu.php Có thể xem phần 1 để hiểu chi tiết hơn về file này.

3.1. Function Enqueue Script Admin (milo_mega_menu_enqueue_script_admin)

Load các file thư viện cần thiết cho Menu CSS:

wp_register_style( 'milo-megamenu-admin', get_template_directory_uri() . '/framework/core/megamenu/assets/css/megamenu-admin.css' );
wp_enqueue_style( 'milo-megamenu-admin' );

JS:

wp_register_script( 'milo-megamenu-admin-js', get_template_directory_uri() . '/framework/core/megamenu/assets/js/megamenu-admin.js', array( 'wp-color-picker' ), false, true );
wp_enqueue_script( 'milo-megamenu-admin-js' );

3.2. Function Enqueue Script Frontend (milo_mega_menu_enqueue_script)

CSS: sử dụng thư viện animate.css để làm hiệu ứng

wp_register_style( 'milo-megamenu-animate', get_template_directory_uri() . '/framework/core/megamenu/assets/css/animate.css' );
wp_enqueue_style( 'milo-megamenu-animate' );

3.3. Function Add custom fields to $item nav object (milo_mega_menu_setup_item)

Example field: Có thể add thêm field như phân tích ở phần 2

// Set item mega menu
$menu_item->megamenu                  = get_post_meta( $menu_item->ID, '_menu_item_megamenu', true );
      
// Set item style
$menu_item->megamenu_style            = get_post_meta( $menu_item->ID, '_menu_item_megamenu_style', true );

3.4. Function Save menu custom field (milo_mega_menu_save_fields)

Example field:

// Process Enable megamenu
if(isset($_REQUEST['menu-item-megamenu'][$menu_item_db_id]) && $_REQUEST['menu-item-megamenu'][$menu_item_db_id] !== '') {
    $megamenu_value = $_REQUEST['menu-item-megamenu'][$menu_item_db_id];
    update_post_meta( $menu_item_db_id, '_menu_item_megamenu', $megamenu_value  );
} else {
    delete_post_meta ( $menu_item_db_id, '_menu_item_megamenu'  );
}

// Process megamenu style
if(isset($_REQUEST['menu-item-megamenu_style'][$menu_item_db_id]) && $_REQUEST['menu-item-megamenu_style'][$menu_item_db_id] !== '') {
    $megamenu_style_value = $_REQUEST['menu-item-megamenu_style'][$menu_item_db_id];
    update_post_meta( $menu_item_db_id, '_menu_item_megamenu_style', $megamenu_style_value  );
} else {
    delete_post_meta ( $menu_item_db_id, '_menu_item_megamenu_style' );
}

3.5. Define new Walker edit (milo_mega_menu_edit_walker)

function milo_mega_menu_edit_walker($walker,$menu_id) {
    return 'Walker_Nav_Menu_Edit_Custom';
}

3.6. Reaplace walker args để xử lý Mega Menu mobile

public function replace_walker_to_milo_mega_menu($args) {
    if( $args['menu_class'] == 'milo-nav-mobile-menu' ) {
        $args['is_mobile_menu'] = true;
    }

    return $args;
}

3.7. Kết luận

Như vậy ở phần 3 của Series bài viết về Cách tạo WordPress Mega Menu chúng ta code được phần setting field để thêm các field cần thiết cho WordPress Mega Menu. Ở phần tiếp theo chúng ta sẽ code phần hiển thị cho các field này ở Menu Admin setting.