Làm menu đa cấp cho theme flatsome, hướng dẫn chi tiết làm menu mega cho flatsome

bài hướng dẫn này là mình ghi chú lại để tham khảo, có giá trị sử dụng ở bản flatsome cũ mình sử dụng cách đây 2 năm. Nên các bạn cân nhắc trước khi sử dụng.

Cái menu cho flatsome này mình làm từ rất lâu rồi. Làm cho khách hàng là chính, cơ mà sau theme flatsome nó update nhiều quá. mà làm cái menu này can thiệp nhiều vào code. Mỗi lần flatsome update là lười ko chịu up ì phải chỉnh nhiều. Nhưng thôi kệ, cứ viết bài hướng dẫn chi tiết cách làm menu cho flatsome theme đẹp nhé. mọi thắc mắc cứ ném ở comment tau lgiair quyết hết nhé

Bước 1: tìm File options-header-mega-menu.php và sửa

 inc/admin/options/header/options-header-mega-menu.php

[ từ dòng 1 – dòng 30 ]

<?php /************* * - Wishlist Options *************/ Flatsome_Option::add_section( 'header_mega_menu', array( 'title'       => __( 'Mega Menu', 'flatsome-admin' ), 'panel'       => 'header', 'priority' => 110, ) ); function flatsome_refresh_mega_menu_partials( WP_Customize_Manager $wp_customize ) { // Abort if selective refresh is not available. if ( ! isset( $wp_customize->selective_refresh ) ) { return; } $wp_customize->selective_refresh->add_partial( 'header-mega-menu', array( 'selector' => '.header-mega-menu', 'container_inclusive' => true, 'settings' => array(), 'render_callback' => function() { return get_template_part('template-parts/header/partials/element','mega-menu'); }, ) ); } add_action( 'customize_register', 'flatsome_refresh_mega_menu_partials' );

bước 2: tìm trong options-header.php và sửa fatsome theme

inc/admin/options/header/options-header.php

thêm đoạn sau vào trong file options-header.php:

include_once(dirname( __FILE__ ).'/options-header-content.php'); include_once(dirname( __FILE__ ).'/options-header-contact.php'); include_once(dirname( __FILE__ ).'/options-header-newsletter.php'); +include_once(dirname( __FILE__ ).'/options-header-mega-menu.php'); if(class_exists( 'YITH_WCWL' )){ include_once(dirname( __FILE__ ).'/options-header-wishlist.php');

như vậy file “options-header.php” sẽ có dạng sau:

<?php /************* * Header Panel *************/ Flatsome_Option::add_panel( 'header', array( 'title'       => __( 'Header', 'flatsome-admin' ), 'description' => __( 'Change Theme Header Options here.', 'flatsome-admin' ), ) ); include_once(dirname( __FILE__ ).'/options-header-presets.php'); include_once(dirname( __FILE__ ).'/options-header-layout.php'); include_once(dirname( __FILE__ ).'/options-header-logo.php'); include_once(dirname( __FILE__ ).'/options-header-top.php'); include_once(dirname( __FILE__ ).'/options-header-main.php'); include_once(dirname( __FILE__ ).'/options-header-bottom.php'); include_once(dirname( __FILE__ ).'/options-header-mobile.php'); include_once(dirname( __FILE__ ).'/options-header-sticky.php'); include_once(dirname( __FILE__ ).'/options-header-dropdown.php'); include_once(dirname( __FILE__ ).'/options-header-buttons.php'); include_once(dirname( __FILE__ ).'/options-header-refresh.php'); include_once(dirname( __FILE__ ).'/options-header-account.php'); include_once(dirname( __FILE__ ).'/options-header-cart.php'); include_once(dirname( __FILE__ ).'/options-header-search.php'); include_once(dirname( __FILE__ ).'/options-header-content.php'); include_once(dirname( __FILE__ ).'/options-header-contact.php'); include_once(dirname( __FILE__ ).'/options-header-newsletter.php'); include_once(dirname( __FILE__ ).'/options-header-mega-menu.php'); if(class_exists( 'YITH_WCWL' )){ include_once(dirname( __FILE__ ).'/options-header-wishlist.php'); }

 

bước 3: tiếp tục tìm options-helpers.php trong flatsome theme và sửa như sau:

tìm đoạn đầu và sửa thành đoạn sau nhé:

'html-3' => __( 'HTML 3', 'flatsome-admin' ), 'html-4' => __( 'HTML 4', 'flatsome-admin' ), 'html-5' => __( 'HTML 5', 'flatsome-admin' ), + 'mega-menu' => __( 'Mega Menu', 'flatsome-admin' ), ); // Add Hooked Header Elements

kết quả là:

<?php //Access the WordPress Pages via an Array $list_pages = array(); $of_pages_obj     = get_pages('sort_column=post_parent,menu_order'); $list_pages  ['0'] = 'Select a page:'; foreach ($of_pages_obj as $of_page) { $list_pages[$of_page->post_name] = $of_page->post_title; } $blocks = array(false => '-- None --'); $posts = flatsome_get_post_type_items('blocks'); if($posts){ foreach ($posts as $value) { $blocks[$value->post_name] = $value->post_title; } } // Set default transport $transport = 'postMessage'; if ( ! isset( $wp_customize->selective_refresh ) ) { $transport = 'refresh'; } $image_url = get_template_directory_uri().'/inc/admin/customizer/img/'; $nav_elements = array( 'cart' => __( 'Cart', 'flatsome-admin' ), 'account' => __( 'Account', 'flatsome-admin' ), 'menu-icon' => __( '☰ Nav Icon', 'flatsome-admin' ), 'nav' => __( 'Main Menu', 'flatsome-admin' ), 'nav-top' => __( 'Top Bar Menu', 'flatsome-admin' ), 'search' => __( 'Search Icon', 'flatsome-admin' ), 'search-form' => __( 'Search Form', 'flatsome-admin' ), 'social' => __( 'Social Icons', 'flatsome-admin' ), 'contact' => __( 'Contact', 'flatsome-admin' ), 'button-1' => __( 'Button 1', 'flatsome-admin' ), 'button-2' => __( 'Button 2', 'flatsome-admin' ), 'checkout' => __( 'Checkout Button', 'flatsome-admin' ), 'newsletter' => __( 'Newsletter', 'flatsome-admin' ), 'languages' => __( 'Languages', 'flatsome-admin' ), 'divider' => __( '|', 'flatsome-admin' ), 'divider_2' => __( '|', 'flatsome-admin' ), 'divider_3' => __( '|', 'flatsome-admin' ), 'divider_4' => __( '|', 'flatsome-admin' ), 'divider_5' => __( '|', 'flatsome-admin' ), 'block-1' => __( 'Block 1', 'flatsome-admin' ), 'block-2' => __( 'Block 2', 'flatsome-admin' ), 'html' => __( 'HTML 1', 'flatsome-admin' ), 'html-2' => __( 'HTML 2', 'flatsome-admin' ), 'html-3' => __( 'HTML 3', 'flatsome-admin' ), 'html-4' => __( 'HTML 4', 'flatsome-admin' ), 'html-5' => __( 'HTML 5', 'flatsome-admin' ), 'mega-menu' => __( 'Mega Menu', 'flatsome-admin' ), ); // Add Hooked Header Elements $nav_elements = apply_filters( 'flatsome_header_element', $nav_elements); $visibility= array( '' => __( 'Show for All', 'flatsome-admin' ), 'hide-for-small' => __( 'Hide For Mobile', 'flatsome-admin' ), 'hide-for-medium' => __( 'Hide For Tablet', 'flatsome-admin' ), 'show-for-small' => __( 'Show For Mobile', 'flatsome-admin' ), 'show-for-medium' => __( 'Show For Tablet', 'flatsome-admin' ), 'show-for-large' => __( 'Show For Desktop', 'flatsome-admin' ), ); $nav_styles_img = array( '' => $image_url . 'nav-default.svg', 'divided' => $image_url . 'nav-divided.svg', 'line' => $image_url . 'nav-line.svg', 'line-grow' => $image_url . 'nav-line-grow.svg', 'line-bottom' => $image_url . 'nav-line-bottom.svg', 'box' => $image_url . 'nav-box.svg', 'outline' => $image_url . 'nav-outline.svg', 'pills' => $image_url . 'nav-pills.svg', 'tabs' => $image_url . 'nav-tabs.svg' ); $smart_links = __( '', 'flatsome-admin' ); $sizes = array( 'xxlarge' => __( 'XX Large', 'flatsome-admin' ), 'xlarge' => __( 'X Large', 'flatsome-admin' ), 'larger' => __( 'Larger', 'flatsome-admin' ), 'large' => __( 'Large', 'flatsome-admin' ), 'medium' => __( 'Medium', 'flatsome-admin' ), 'small' => __( 'Small', 'flatsome-admin' ), 'smaller' => __( 'Smaller', 'flatsome-admin' ), 'xsmall' => __( 'X Small', 'flatsome-admin' ), ); $button_styles = array( '' => __( 'Normal', 'flatsome-admin' ), 'outline' => __( 'Outline', 'flatsome-admin' ), 'shade' => __( 'Shade', 'flatsome-admin' ), 'underline' => __( 'Underline', 'flatsome-admin' ), 'link' => __( 'link', 'flatsome-admin' ), ); $nav_sizes = array( 'xsmall' => __( 'XS', 'flatsome-admin' ), 'small' => __( 'S', 'flatsome-admin' ), '' => __( 'Default', 'flatsome-admin' ), 'medium' => __( 'M', 'flatsome-admin' ), 'large' => __( 'L', 'flatsome-admin' ), 'xlarge' => __( 'XL', 'flatsome-admin' ), ); $nav_spacing = array( 'xsmall' => __( 'XS', 'flatsome-admin' ), 'small' => __( 'S', 'flatsome-admin' ), '' => __( 'Default', 'flatsome-admin' ), 'medium' => __( 'M', 'flatsome-admin' ), 'large' => __( 'L', 'flatsome-admin' ), 'xlarge' => __( 'XL', 'flatsome-admin' ), ); $bg_repeat = array( "repeat" => "Tiled", "repeat-x" => "Repeat X", "repeat-y" => "Repeat Y", "no-repeat" => "No Repeat" );

 

mega menu cho flatsome
tạo menu đa cấp cho theme flatsome

bước 4: tìm và sửa file /function-setup.php trong bộ theme flatsome theo hướng dẫn:

inc/functions/function-setup.php

 

tìm đoạn như sau và sửa thành

function flatsome_setup() { 'footer' => __( 'Footer Menu', 'flatsome' ), 'top_bar_nav' => __( 'Top Bar Menu', 'flatsome' ), 'my_account' => __( 'My Account Menu', 'flatsome' ), + 'mega_menu' => __( 'Mega Menu', 'flatsome' ), ) ); /* Enable support for Post Formats */

 

kết quả:

<?php if ( ! isset( $content_width ) ) $content_width = 1020; /* pixels */ function flatsome_setup() { /* add woocommerce support */ add_theme_support( 'woocommerce' ); /* add title tag support */ add_theme_support( 'title-tag' ); /* Load child theme languages */ load_theme_textdomain( 'flatsome', get_stylesheet_directory() . '/languages' ); /* load theme languages */ load_theme_textdomain( 'flatsome', get_template_directory() . '/languages' ); /* Add default posts and comments RSS feed links to head */ add_theme_support( 'automatic-feed-links' ); /* Add excerpt to pages */ add_post_type_support( 'page', 'excerpt' ); /* Add support for post thumbnails */ add_theme_support( 'post-thumbnails' ); /* Add support for Selective Widget refresh */ add_theme_support( 'customize-selective-refresh-widgets' ); /* Add support for HTML5 */ add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'widgets', ) ); /*  Registrer menus. */ register_nav_menus( array( 'primary' => __( 'Main Menu', 'flatsome' ), 'primary_mobile' => __( 'Main Menu - Mobile', 'flatsome' ), 'footer' => __( 'Footer Menu', 'flatsome' ), 'top_bar_nav' => __( 'Top Bar Menu', 'flatsome' ), 'my_account' => __( 'My Account Menu', 'flatsome' ), 'mega_menu' => __( 'Mega Menu', 'flatsome' ), ) ); /*  Enable support for Post Formats */ add_theme_support( 'post-formats', array( 'video' ) ); } add_action( 'after_setup_theme', 'flatsome_setup' ); /* Setup Theme Widgets */ function flatsome_widgets_init() { $title_before = ''; $title_class = ''; $title_after = '<div class="is-divider small"></div>'; register_sidebar( array( 'name'          => __( 'Sidebar', 'flatsome' ), 'id'            => 'sidebar-main', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget'  => '</aside>', 'before_title'  => $title_before.'<h3 class="widget-title '.$title_class.'"><span>', 'after_title'   => '</span></h3>'.$title_after, ) ); register_sidebar( array( 'name'          => __( 'Footer 1', 'flatsome' ), 'id'            => 'sidebar-footer-1', 'before_widget' => '<div id="%1$s" class="col pb-0 widget %2$s">', 'after_widget'  => '</div>', 'before_title'  => '<h3 class="widget-title">', 'after_title'   => '</h3><div class="is-divider small"></div>', ) ); register_sidebar( array( 'name'          => __( 'Footer 2', 'flatsome' ), 'id'            => 'sidebar-footer-2', 'before_widget' => '<div id="%1$s" class="col pb-0 widget %2$s">', 'after_widget'  => '</div>', 'before_title'  => '<h3 class="widget-title">', 'after_title'   => '</h3><div class="is-divider small"></div>', ) ); } add_action( 'widgets_init', 'flatsome_widgets_init' ); /** * Setup Flatsome Styles and Scripts */ function flatsome_scripts() { $uri = get_template_directory_uri(); $theme = wp_get_theme( get_template() ); $version = $theme->get( 'Version' ); // Styles if(!is_rtl()){ wp_enqueue_style( 'flatsome-main', $uri .'/assets/css/flatsome.css', array(), $version, 'all' ); } else{ wp_enqueue_style( 'flatsome-main-rtl', $uri .'/assets/css/flatsome-rtl.css', array(), $version, 'all' ); } if(is_woocommerce_activated() && !is_rtl()){ wp_enqueue_style( 'flatsome-shop', $uri .'/assets/css/flatsome-shop.css', array(), $version, 'all' ); } else if(is_woocommerce_activated()){ wp_enqueue_style( 'flatsome-shop-rtl', $uri .'/assets/css/flatsome-shop-rtl.css', array(), $version, 'all' ); } // Load current theme styles.css file. wp_enqueue_style( 'flatsome-style', get_stylesheet_uri(), array(), $version, 'all'); // Register styles (Loaded on request) wp_register_style( 'flatsome-effects', $uri .'/assets/css/effects.css', array(), $version, 'all' ); // Register scripts (Loaded on request) wp_register_script( 'flatsome-masonry-js', $uri .'/assets/libs/packery.pkgd.min.js', array( 'jquery' ), $version, true ); wp_register_script( 'flatsome-isotope-js', $uri .'/assets/libs/isotope.pkgd.min.js', array( 'jquery' ), $version, true ); // Google maps $maps_api = get_theme_mod('google_map_api'); wp_register_script( 'flatsome-maps', '//maps.googleapis.com/maps/api/js?key='.$maps_api, array( 'jquery' ), $version, true ); // Enqueue theme scripts wp_enqueue_script( 'flatsome-js', $uri .'/assets/js/flatsome.js', array( 'jquery', 'hoverIntent', ), $version, true ); $sticky_height = get_theme_mod('header_height_sticky', 70); if(is_admin_bar_showing()) $sticky_height = $sticky_height + 30; // Add variables to scripts wp_localize_script( 'flatsome-js', 'flatsomeVars', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'rtl' => is_rtl(), 'sticky_height' => $sticky_height ) ); if ( is_woocommerce_activated() ) { wp_enqueue_script( 'flatsome-theme-woocommerce-js', $uri .'/assets/js/woocommerce.js', array( 'flatsome-js' ), $version, true ); } else { wp_enqueue_script( 'js-cookie', $uri .'/assets/js/jquery_cookie.js', $version, true ); } if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'flatsome_scripts', 100 ); /** * Set up UX Builder. */ function flatsome_ux_builder_setup() { // Add Ux Builder to post types. add_ux_builder_post_type( 'blocks' ); add_ux_builder_post_type( 'product' ); add_ux_builder_post_type( 'featured_item' ); } add_action( 'init', 'flatsome_ux_builder_setup', 10 ); /** * Enqueue UX Builder scripts. * * @param  string $context Context is «editor» or content */ function flatsome_ux_builder_scripts( $context ) { $uri = get_template_directory_uri(); $theme = wp_get_theme( get_template() ); $version = $theme->get( 'Version' ); // Add UxBuilder assets. if ( $context == 'editor' ) { wp_enqueue_script( 'ux-builder-flatsome', $uri .'/assets/js/builder/custom/editor.js', null, $version, true ); wp_enqueue_style( 'ux-builder-flatsome', $uri .'/assets/css/builder/custom/builder.css', null, $version ); } if ( $context == 'content' ) { wp_enqueue_style( 'ux-builder-flatsome', $uri .'/assets/css/builder/custom/builder.css', null, $version ); wp_enqueue_script( 'ux-builder-flatsome', $uri .'/assets/js/builder/custom/content.js', array( 'flatsome-js', 'flatsome-masonry-js' ), $version, true ); } } add_action( 'ux_builder_enqueue_scripts', 'flatsome_ux_builder_scripts', 10 ); // Lazy load backgrounds. if(!is_admin() && get_theme_mod('lazy_load_backgrounds', 1)){ function flatsome_lazy_load_backgrounds_css() { echo '<style>.bg{opacity: 0; transition: opacity 1s; -webkit-transition: opacity 1s;} .bg-loaded{opacity: 1;}</style>'; } add_filter('wp_head', 'flatsome_lazy_load_backgrounds_css'); }

Bước 5 : tạo file element-mega-menu.php và chèn vào theme flatsome

template-parts/header/partials/element-mega-menu.php

thêm nội dung sau:

<div id="mega-menu-wrap"> <div id="mega-menu-title"><i class="fa fa-bars"></i> <?php esc_html_e( 'DANH MỤC SẢN PHẨM', 'flatsome' ) ?></div> <?php wp_nav_menu(array( 'theme_location' => 'mega_menu', 'container' => false, 'menu_id' => 'mega_menu', 'depth' => 0 )); ?> </div>

kết quả:

<div id="mega-menu-wrap"> <div id="mega-menu-title"><i class="fa fa-bars"></i> <?php esc_html_e( 'DANH MỤC SẢN PHẨM', 'flatsome' ) ?></div> <?php wp_nav_menu(array( 'theme_location' => 'mega_menu', 'container'       => false, 'menu_id' => 'mega_menu', 'depth'           => 0 )); ?> </div>

Bước cuối cùng: chèn thêm mã JS và làm đẹp giao diện Menu Flatsome bằng css:

chèn mã srip sau:

<script> jQuery(document).ready(function () { jQuery("#mega-menu-title").click(function () { jQuery("#mega_menu").toggleClass("active") }), jQuery("body").click(function (e) { var i = jQuery(e.target); "mega-menu-title" != i.attr("id") && jQuery("#mega_menu.active").removeClass("active") }), jQuery("#mega_menu>li").each(function (e) { jQuery(this).children(".sub-menu").css("margin-top", 37 * -e + "px"), jQuery(this).children(".menu-image").css("margin-top", 37 * -e + "px"), jQuery(this).find("li").each(function (e) { jQuery(this).children(".menu-image").css("margin-top", 36 * -e + "px") }) }) }); </script>

và chèn css để làm đẹp

/** mega menu */ #wide-nav > .flex-row > .flex-left { width: 25%; min-width: 245px; margin-right: 15px; } #mega-menu-wrap { width: 100%; background: #1d71ab; position: relative; } #mega-menu-title { padding: 10px 0 10px 15px; font-size: 15px; font-family: "Roboto Condensed", sans-serif; font-weight: 700; color: #fff; cursor: pointer } #mega-menu-title i { margin-right: 9px } #mega_menu { position: absolute; top: 100%; margin-top: 20px; left: 0; width: 100%; border: 1px solid #ddd; padding: 0; background: #fff; display: none } #header.header.has-sticky .header-wrapper.stuck #mega_menu { margin-top: 0; } body.home #mega_menu { display: block } #mega_menu > li { position: relative; z-index: 8 } #mega_menu li a { padding: 7px 15px; display: block; font-size: 14px } #mega_menu > li > a:after { content: "\f105"; font-family: FontAwesome; float: right } #mega_menu > li > a { position: relative; padding-left: 40px } #mega_menu > li > a > img { position: absolute; top: 8px; left: 8px } #mega_menu > li:hover > a { background: #f5f5f5 } #mega_menu li > .toggle { display: none } #mega_menu > li > ul.sub-menu { position: absolute; top: -1px; left: 100%; background: #fff; width: 201%; min-height: 334px; margin: 0; padding: 0; border: 1px solid #ccc; box-shadow: 0 6px 12px rgba(0, 0, 0, .175) } #mega_menu ul.sub-menu > li > a { width: 50% } #mega_menu ul.sub-menu > li:hover > a { background: #f5f5f5 } #mega_menu ul.sub-menu li a, #mega_menu > li:hover > ul.sub-menu { display: block } #header.header.has-sticky .header-wrapper.stuck #mega_menu:not(.active) { display: none } #header.header #mega_menu.active { display: block } #mega_menu > li > .menu-image { position: absolute; left: 100%; top: 0px; display: none; width: 200%; background: #fff; text-align: right; } #mega_menu > li > .menu-image > img { position: relative; z-index: 1; max-width: 49%; max-height: 330px; margin-top: 1px; } #mega_menu > li:hover > .menu-image, #mega_menu > li:hover > ul.sub-menu { display: block } #mega_menu > li:hover > ul.sub-menu:before { content: ""; background: 0 0; position: absolute; top: -1px; bottom: 0; width: 15px; left: -15px } #mega_menu ul.sub-menu > li { position: relative } #mega_menu ul.sub-menu > li > .menu-image { position: absolute; top: 0; right: 0; width: 50%; min-height: 240px; background: #fff; text-align: right; display: none; z-index: 2 } #mega_menu ul.sub-menu > li > .menu-image > img { width: 100% } #mega_menu ul.sub-menu > li:hover > .menu-image { display: block }

rồi xong rồi đó hem. Làm đi, chúc thành công

 

Nhớ bình chọn chất lượng bài viết để mình cố gắng :v
[Total: 1   Average: 5/5]
guest
4 Comments
oldest
newest
Inline Feedbacks
View all comments
thong
thong
1 year ago

đã làm theo mà header đoạn js thay vào ko có nghĩa,nó ko chạy đc, mà làm hết show ra nó ko giống của bạn, hi vọng đc bạn teamview hướng dẫn

phạm mạnh
phạm mạnh
1 year ago

/************* * – Wishlist Options *************/ Flatsome_Option::add_section( ‘header_mega_menu’, array( ‘title’ => __( ‘Mega Menu’, ‘flatsome-admin’ ), ‘panel’ => ‘header’, ‘priority’ => 110, ) ); function flatsome_refresh_mega_menu_partials( WP_Customize_Manager $wp_customize ) { // Abort if selective refresh is not available. if ( ! isset( $wp_customize->selective_refresh ) ) { return; } $wp_customize->selective_refresh->add_partial( ‘header-mega-menu’, array( ‘selector’ => ‘.header-mega-menu’, ‘container_inclusive’ => true, ‘settings’ => array(), ‘render_callback’ => function() { return get_template_part(‘template-parts/header/partials/element’,’mega-menu’); }, ) ); } add_action( ‘customize_register’, ‘flatsome_refresh_mega_menu_partials’ ); Skip to content

em làm theo hướng dẫn và khi truy cập vào tùy biến thì nó báo lỗi vầy anh

Vũ
9 months ago

“mọi thắc mắc cứ ném ở comment tau lgiair quyết hết nhé”
1 bài hướng dẫn tồi tệ =)))