Cách tạo WordPress Mega Menu - Phần 4 (Code Settings Field Mega Menu Admin 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 4 là code hiển thị 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 Phần 4: Code Setting Field Mega Menu Admin Display Updating... Ở phần 4 này sẽ hướng dẫn code file chính của menu là: edit_custom_walker.php Có thể xem phần 1 và 3 để hiểu chi tiết hơn về file này.

4.1. Class Walker_Nav_Menu_Edit_Custom

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

<?php
/**
 *  /! This is a copy of Walker_Nav_Menu_Edit class in core
 * 
 * Create HTML list of nav menu input items.
 *
 * @package WordPress
 * @since 3.0.0
 * @uses Walker_Nav_Menu
 */
 
class Walker_Nav_Menu_Edit_Custom extends Walker_Nav_Menu {
    /**
     * @see Walker_Nav_Menu::start_lvl()
     * @since 3.0.0
     *
     * @param string $output Passed by reference.
     */
     
    
    function start_lvl(&$output, $depth = 0, $args = array()) { 

    }
    
    /**
     * @see Walker_Nav_Menu::end_lvl()
     * @since 3.0.0
     *
     * @param string $output Passed by reference.
     */
    function end_lvl(&$output, $depth = 0, $args = array()) {

    }
    
    /**
     * @see Walker::start_el()
     * @since 3.0.0
     *
     * @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. Used for padding.
     * @param object $args
     */
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    
    }
    
}

4.2. Function start_el

4.2.1. Default Fields

Các field mặc định của menu chúng ta giữ nguyên như title và description. Ví dụ:

<p class="field-description description description-wide">
    <label for="edit-menu-item-description-<?php echo esc_attr($item_id); ?>">
        <?php esc_html_e( 'Description','milo-eco' ); ?><br />
        <textarea id="edit-menu-item-description-<?php echo esc_attr($item_id); ?>" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description[<?php echo esc_attr($item_id); ?>]"><?php echo esc_html( $item->description ); // textarea_escaped ?></textarea>
        <span class="description"><?php esc_html_e('The description will be displayed in the menu if the current theme supports it.','milo-eco'); ?></span>
    </label>
</p>    

4.2.2. Add new Fields

- Sub Label Field

<p class="description description-thin">
    <label for="menu-item-megamenu_sublabel-<?php echo esc_attr($item_id); ?>">
        <?php esc_html_e( 'Sub Label', 'milo-eco' ); ?><br />
        <input type="text" id="menu-item-megamenu_sublabel-<?php echo esc_attr($item_id); ?>" class="widefat menu-item-megamenu_sublabel" name="menu-item-megamenu_sublabel[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr( $item->megamenu_sublabel ); ?>" />
    </label>
</p>
<p class="description description-thin sublabel-color">
    <label for="menu-item-megamenu_sublabel_color-<?php echo esc_attr($item_id); ?>">
        <?php esc_html_e( 'Sub Label Color', 'milo-eco' ); ?><br />
        <input type="text" data-id="<?php echo esc_attr($item_id); ?>" id="menu-item-megamenu_sublabel_color-<?php echo esc_attr($item_id); ?>" name="menu-item-megamenu_sublabel_color[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr( $item->megamenu_sublabel_color ); ?>" class="color-picker sub-label-color-picker-<?php echo esc_attr($item_id); ?>" />
    </label>
</p>

- Icon Field

<div class="milo-mega-menu-icon">
    <label for="edit-menu-item-megamenu_icon-<?php echo esc_attr($item_id); ?>"><?php esc_html_e( 'Icon','milo-eco' ); ?></label>
    <div class="milo-icon">
        <span class="icon">
            <i class="fa fa-cogs"></i>
        </span>
        <span class="select_icon" data-id="<?php echo esc_attr($item_id); ?>">
            <i class="fa fa-arrow-down"></i>
        </span>
        <span class="select_color" data-id="<?php echo esc_attr($item_id); ?>">
            <i class="fa fa-magic"></i>
        </span>
        <span class="<?php echo empty($item->megamenu_icon) ? 'hide ': '; ?>display icon-<?php echo esc_attr($item_id); ?>" style="color: <?php echo esc_attr( $item->megamenu_icon_color ); ?>;<?php echo empty( $item->megamenu_icon_size ) ? 'font-size: 13px' : "font-size: {$item->megamenu_icon_size}px"; ?>">
            <i class="fa <?php echo esc_attr( $item->megamenu_icon ); ?>"></i>
        </span>
        <div class="mega-entry list-entry-<?php echo esc_attr($item_id); ?>"  data-id="<?php echo esc_attr($item_id); ?>">
            <span class="megamenu-search">
                <input type="text" class="box-search search-<?php echo esc_attr($item_id); ?>" placeholder="<?php esc_html_e( 'Ex: balance-scale', 'milo-eco' ); ?>" />
                <i class="fa-search fip-fa fa"></i>
            </span>
            <p class="mega-list-icon list-entry-<?php echo esc_attr($item_id); ?>"></p>
        </div>
        <div class="mega-entry box-set color-<?php echo esc_attr($item_id); ?>">

            <div class="size">
                <label for="edit-menu-item-megamenu_icon_size-<?php echo esc_attr($item_id); ?>"><?php esc_html_e( 'Size', 'milo-eco' ); ?></label>
                <input type="number" id="edit-menu-item-megamenu_icon_size-<?php echo esc_attr($item_id); ?>" name="menu-item-megamenu_icon_size[<?php echo esc_attr($item_id); ?>]" value="<?php echo empty( $item->megamenu_icon_size ) ? '13' : $item->megamenu_icon_size; ?>">
            </div>

            <input type="text" data-id="<?php echo esc_attr($item_id); ?>" id="edit-menu-item-megamenu_icon_color-<?php echo esc_attr($item_id); ?>" name="menu-item-megamenu_icon_color[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr( $item->megamenu_icon_color ); ?>" class="color-picker-<?php echo esc_attr($item_id); ?>" />

            <div>
                <label for="edit-menu-item-megamenu_icon_alignment-<?php echo esc_attr($item_id); ?>"><?php esc_html_e( 'Icon Alignment', 'milo-eco' ); ?></label>
                <select class="select_alignment" id="edit-menu-item-megamenu_icon_alignment-<?php echo esc_attr($item_id); ?>" name="menu-item-megamenu_icon_alignment[<?php echo esc_attr($item_id); ?>]">
                    <option value="left"<?php selected( $item->megamenu_icon_alignment, 'left' ); ?>><?php esc_html_e( 'Left', 'milo-eco' ); ?></option>
                    <option value="right"<?php selected( $item->megamenu_icon_alignment, 'right' ); ?>><?php esc_html_e( 'Right', 'milo-eco' ); ?></option>
                    <option value="center"<?php selected( $item->megamenu_icon_alignment, 'center' ); ?>><?php esc_html_e( 'Center', 'milo-eco' ); ?></option>
                </select>
            </div>

        </div>
        <input type="hidden" id="edit-menu-item-megamenu_icon-<?php echo esc_attr($item_id); ?>" data-icon="<?php echo esc_attr( $item->megamenu_icon ); ?>" value="<?php echo esc_attr( $item->megamenu_icon ); ?>" name="menu-item-megamenu_icon[<?php echo esc_attr($item_id); ?>]" />
    </div>
</div>

- Mega Menu Fields

 
<p class="megamenu-status description description-wide" style="margin-top: 10px;">
    <label for="edit-menu-item-megamenu-<?php echo esc_attr($item_id); ?>">
    <input class="enable_megamenu" data-id="<?php echo esc_attr($item_id); ?>" type="checkbox" id="edit-menu-item-megamenu-<?php echo esc_attr($item_id); ?>" value="megamenu" name="menu-item-megamenu[<?php echo esc_attr($item_id); ?>]"<?php checked( $item->megamenu, 'megamenu' ); ?> />
    <?php esc_html_e( 'Enable megamenu','milo-eco' );    ?>
    </label>
</p>

<script type="text/javascript">
    jQuery(document).ready(function($) {

        if ( $('input[name="menu-item-megamenu[<?php echo esc_attr($item_id); ?>]"]:checked').serialize() != ' ) {
            $('.enable_megamenu_child-<?php echo esc_attr($item_id); ?>').show();
        } else {
            $('.enable_megamenu_child-<?php echo esc_attr($item_id); ?>').hide();
        }

    });
</script>
 
<p class="megamenu-style description description-wide enable_megamenu_child-<?php echo esc_attr( $item_id ); ?>">
    <label for="menu-item-megamenu_style-<?php echo esc_attr($item->ID); ?>">
    <?php esc_html_e( 'Megamenu style', 'milo-eco' ); ?>
    <br/>
    <select id="menu-item-megamenu_style-<?php echo esc_attr($item->ID); ?>" name="menu-item-megamenu_style[<?php echo esc_attr($item->ID); ?>]" class="widefat code edit-menu-item-custom">
        <option <?php selected( $item->megamenu_style, 'menu_style_column' ); ?> value="menu_style_column"><?php esc_html_e( 'Column', 'milo-eco' ); ?></option>
        <option <?php selected( $item->megamenu_style, 'menu_style_tab' ); ?> value="menu_style_tab"><?php esc_html_e( 'Tab', 'milo-eco' ); ?></option>
    </select>
</p>

 
<p class="megamenu-columns description description-wide megamenu-child-options enable_megamenu_child-<?php echo esc_attr( $item_id ); ?>">
    <label for="menu-item-megamenu_columns-<?php echo esc_attr($item->ID); ?>">
        <?php esc_html_e( 'Megamenu columns', 'milo-eco' ); ?>
        <br/>
        <select id="menu-item-megamenu_columns-<?php echo esc_attr($item->ID); ?>" name="menu-item-megamenu_columns[<?php echo esc_attr($item->ID); ?>]" class="widefat code edit-menu-item-custom">
            <option <?php selected( $item->megamenu_col, 'columns-2' ) ?> value="columns-2"><?php esc_html_e( 'Two', 'milo-eco' ) ?></option>
            <option <?php selected( $item->megamenu_col, 'columns-3' ) ?> value="columns-3"><?php esc_html_e( 'Three', 'milo-eco' ) ?></option>
            <option <?php selected( $item->megamenu_col, 'columns-4' ) ?> value="columns-4"><?php esc_html_e( 'Four', 'milo-eco' ) ?></option>
            <option <?php selected( $item->megamenu_col, 'columns-5' ) ?> value="columns-5"><?php esc_html_e( 'Five', 'milo-eco' ) ?></option>
            <option <?php selected( $item->megamenu_col, 'columns-6' ) ?> value="columns-6"><?php esc_html_e( 'Six', 'milo-eco' ) ?></option>
        </select>
    </label>
</p>    

 
<p class="megamenu-background-image description description-wide megamenu-child-options enable_megamenu_child-<?php echo esc_attr( $item_id ); ?>">
    <label for="menu-item-megamenu_background_image-<?php echo esc_attr($item->ID); ?>">
        <?php esc_html_e( 'Background Image', 'milo-eco' ); ?>
        <br/>
        <input type="text" id="edit-menu-item-megamenu_background_image-<?php echo esc_attr($item_id); ?>" name="menu-item-megamenu_background_image[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr( $item->megamenu_background_image ); ?>" class="media-input" /><button class="media-button">Select image</button>
    </label>
</p>

 
<p class="milo-mega-menu-awidth description description-wide enable_megamenu_child-<?php echo esc_attr( $item_id ); ?>">
    <label for="edit-menu-item-megamenu_awidth-<?php echo esc_attr($item_id); ?>">
    <input type="checkbox" id="edit-menu-item-megamenu_awidth-<?php echo esc_attr($item_id); ?>" value="megamenu_awidth" name="menu-item-megamenu_awidth[<?php echo esc_attr($item_id); ?>]"<?php checked( $item->megamenu_awidth, 'megamenu_awidth' ); ?> />
    <?php esc_html_e( 'Sub menu fullawidth? (only use with Column style)','milo-eco' );    ?>
    </label>
</p>

 
<p class="milo-mega-menu-heading description description-wide enable_megamenu_child-<?php echo esc_attr( $item_id ); ?>">
    <label for="edit-menu-item-megamenu_heading-<?php echo esc_attr($item_id); ?>">
    <input type="checkbox" id="edit-menu-item-megamenu_heading-<?php echo esc_attr($item_id); ?>" value="megamenu_heading" name="menu-item-megamenu_heading[<?php echo esc_attr($item_id); ?>]"<?php checked( $item->megamenu_heading, 'megamenu_heading' ); ?> />
    <?php esc_html_e( 'Hide Mega menu heading?','milo-eco' );    ?>
    </label>
</p>

 
<p class="milo-mega-menu-widgetarea description description-wide enable_megamenu_child-<?php echo esc_attr( $item_id ); ?>">
    <label for="edit-menu-item-megamenu_widgetarea-<?php echo esc_attr($item_id); ?>">
        <?php esc_html_e( 'Mega Menu Widget Area', 'milo-eco' ); ?>
        <select id="edit-menu-item-megamenu_widgetarea-<?php echo esc_attr($item_id); ?>" class="widefat code edit-menu-item-custom" name="menu-item-megamenu_widgetarea[<?php echo esc_attr($item_id); ?>]">
            <option value="0"><?php esc_html_e( 'Select Widget Area', 'milo-eco' ); ?></option>
            <?php
            global $wp_registered_sidebars;
            if( ! empty( $wp_registered_sidebars ) && is_array( $wp_registered_sidebars ) ):
            foreach( $wp_registered_sidebars as $sidebar ):
            ?>
            <option value="<?php echo esc_attr($sidebar['id']); ?>" <?php selected( $item->megamenu_widgetarea, $sidebar['id'] ); ?>><?php echo esc_html($sidebar['name']); ?></option>
            <?php endforeach; endif; ?>
        </select>
    </label>
</p>
 
<p class="megamenu-columns-tab description description-wide megamenu-child-options enable_megamenu_child-<?php echo esc_attr( $item_id ); ?>">
    <label for="menu-item-megamenu_columns_tab-<?php echo esc_attr($item->ID); ?>">
        <?php esc_html_e( 'Tab columns (only use with tab style)', 'milo-eco' ); ?>
        <br/>
        <select id="menu-item-megamenu_columns_tab-<?php echo esc_attr($item->ID); ?>" name="menu-item-megamenu_columns_tab[<?php echo esc_attr($item->ID); ?>]" class="widefat code edit-menu-item-custom">
            <option <?php selected( $item->megamenu_col_tab, 'columns-1' ) ?> value="columns-1"><?php esc_html_e( 'One', 'milo-eco' ) ?></option>
            <option <?php selected( $item->megamenu_col_tab, 'columns-2' ) ?> value="columns-2"><?php esc_html_e( 'Two', 'milo-eco' ) ?></option>
            <option <?php selected( $item->megamenu_col_tab, 'columns-3' ) ?> value="columns-3"><?php esc_html_e( 'Three', 'milo-eco' ) ?></option>
            <option <?php selected( $item->megamenu_col_tab, 'columns-4' ) ?> value="columns-4"><?php esc_html_e( 'Four', 'milo-eco' ) ?></option>
        </select>
    </label>
</p>
 <script type="text/javascript">
    jQuery(document).ready(function($) {

    });
</script>              
<?php
/* New fields inserted end here */
?>
<div class="menu-item-actions description-wide submitbox">
    <?php if( 'custom' != $item->type && $original_title !== false ) : ?>
        <p class="link-to-original">
            <?php printf( esc_html__('Original: %s','milo-eco'), '<a href="' . esc_attr( $item->url ) . '">' . esc_html( $original_title ) . '</a>' ); ?>
        </p>
    <?php endif; ?>
    <a class="item-delete submitdelete deletion" id="delete-<?php echo esc_attr($item_id); ?>" href="<?php
    echo wp_nonce_url(
    esc_url( add_query_arg(
            array(
                'action'    => 'delete-menu-item',
                'menu-item' => $item_id,
            ),
            remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) ) )
        ),
        'delete-menu_item_' . $item_id
    ); ?>"><?php esc_html_e('Remove','milo-eco'); ?></a> <span class="meta-sep"> | </span> <a class="item-cancel submitcancel" id="cancel-<?php echo esc_attr($item_id); ?>" href="<?php echo esc_url( add_query_arg( array('edit-menu-item' => $item_id, 'cancel' => time()), remove_query_arg( $removed_args, admin_url( 'nav-menus.php' ) ) ) );
        ?>#menu-item-settings-<?php echo esc_attr($item_id); ?>"><?php esc_html_e('Cancel','milo-eco'); ?></a>
</div>
</div> 

4.2.3. Style CSS new Fields

Sau khi add thêm các setting fields cho menu cần style CSS:

.mega-entry,
.mega-list-icon,
.hide,
.megamenu-status {
    display: none;
}
.menu-item-depth-0 .megamenu-status {
    display: block;
}
.menu-item-depth-0 .milo-mega-menu-widgetarea {
    display: none !important;
}
/* Show option columns tab only in level 1 */
.megamenu-columns-tab {
    display: none!important;
}
.menu-item-depth-1 .megamenu-columns-tab {
    display: block !important;
}

.menu-item-depth-1 .milo-mega-menu-widgetarea {
    display: block !important;
    margin-top: 15px;
}

4.3. Kết luận

Như vậy ở phần 4 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. Ở phần tiếp theo chúng ta sẽ code và xử lý phần hiển thị ở Frontend.