0
225
2019-01-10

Cactus - Улучшение Top Left Menu + megamenu для меню с лого по середине

Решние разного рода проблем при активации "Top Left Menu" темы "Cactus"
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Приветствую друзья, данная статья скорее предназначена для моего личного пользования. Но я не исключаю что возможно она пригодиться и не только мне, в любом случае для применения и понимания того что здесь описано нужно иметь опыт в работе с CSS, JS, PHP. Если вкратце, я не буду здесь не чего расписывать и в случае если Вы не используете тему Cactus данный пост Вам наврят ли пригодится. И еще за ранее прошу прощение за обложку поста... ).

Cactus MegaMenu для меню в лого посередине

Пример отображения меню с лого по середине

Для того что бы мега меню заработало для меню “Top Left Menu (Split Navigation Bar)”:

Меню в WP

Применяем класс cactus-mega-menu к пунктам меню

У пункта меню который содержит мега меню должен быть класс cactus-mega-menu

По этому применяем данный класс прям в пункте меню:

Указываем класс в меню

Оборачиваем суб меню <div class="cactus-mega-menu-wrap">

Суб меню для #top-left-menu должны быть обернуты в <div class="cactus-mega-menu-wrap"> (как указано на скрине ниже).

HTML код

Для этого добавляем скрипт:

jQuery(document).ready(function($){
    // Обертываем суб меню для мега меню
     $('ul#top-menu-left li.cactus-mega-menu > .sub-menu').each(function(){
        $(this).wrap( "<div class='cactus-mega-menu-wrap'></div>" );
    });
});

CSS

/* Отменяем фиксацию меню для моб устройств*/
@media screen and (max-width:767px){
    div#SDStudio_Fixed_Menu {
        position: relative !important;
    }    
}

JS конечная версия скрипта:

jQuery(document).ready(function($){
if ( $(window).width() >= 769){
    // Обертываем суб меню для мега меню
    $('ul#top-menu-left li.cactus-mega-menu > .sub-menu').each(function(){
        $(this).wrap( "<div class='cactus-mega-menu-wrap'></div>" );
    });
} else {
    // Меняем ID левого меню для срабатывания мобильного меню
    $('ul#top-menu-left').attr('id','top-menu');
}
});

CSS стили при помощи которых можно выделить основные пункты меню

Для того что бы можно было выделить основные пункты меню обязательно должен быть проставлен класс “cactus-mega-menu” во всех основных пунктах меню (как на скрине выше). Стили ниже прежде всего созданы для мобильной версии сайта

.cactus-mega-menu > .sub-menu > li{
font-weight: 800 !important;
    padding-bottom: 10px;
} 
.cactus-mobile-main-nav > li > a{
    font-weight: 800 !important;    
}

Как отобразить Top Left Menu на мобильной версии сайта

Переходим в файл:

/wp-content/themes/Cactus/template-parts/navigation/navigation-mobile.php

И сразу за кодом:

<div class="cactus-mobile-drawer-header" style="display: none;">
<?php
    wp_nav_menu( array(
        'theme_location' => 'top',
        'menu_id'        => 'top-menu',
        'menu_class' => 'cactus-mobile-main-nav',
        'fallback_cb'    => 'cactus_menu_fallback',
        'container' =>'',
        'link_before' => '<span>',
        'link_after' => '</span>',
    ) );

Вставляем код:

wp_nav_menu( array(
    'theme_location' => 'top-left',
    'menu_id'        => 'top-menu-left',
    'menu_class' => 'cactus-mobile-main-nav',
    'fallback_cb'    => 'cactus_menu_fallback',
    'container' =>'',
    'link_before' => '<span>',
    'link_after' => '</span>',
) );

Должно получиться:

<div class="cactus-mobile-drawer-header" style="display: none;">
<?php
   wp_nav_menu( array(
        'theme_location' => 'top-left',
        'menu_id'        => 'top-menu-left',
        'menu_class' => 'cactus-mobile-main-nav',
        'fallback_cb'    => 'cactus_menu_fallback',
        'container' =>'',
        'link_before' => '<span>',
        'link_after' => '</span>',
    ) );

  wp_nav_menu( array(
        'theme_location' => 'top',
        'menu_id'        => 'top-menu',
        'menu_class' => 'cactus-mobile-main-nav',
        'fallback_cb'    => 'cactus_menu_fallback',
        'container' =>'',
        'link_before' => '<span>',
        'link_after' => '</span>',
    ) );
?>

Функционал Mega Menu с отключением стандартной реализации Cactus (для дочерних тем) при помощи Carbon Fields

Этот вариант будет полезен при наличии дочерней темы и плагина Carbon Fields. Для появляения выпадающего пунка меню реализцующего активацию мега меню, добавляем в functions.php код ниже:

use Carbon_Fields\Container;
use Carbon_Fields\Field;

// ============== SDStudio Menu Options======================
// ============== START ======================================
add_action( 'carbon_fields_register_fields', 'SDStudio_menu_options' );
function SDStudio_menu_options() {
    Container::make( 'nav_menu_item', __( 'Menu Settings' ) )
    ->add_fields( array(
//        Field::make( 'color', 'crb_color', __( 'Color' ) ),
        Field::make( 'select', 'sdstudio_mega_menu', 'Mega Menu' )
                ->add_options( array(
                '0' => 'Нет',
                '1' => 'Да',
        ) ),
    ));
}

// ============== END =======================================
// ============== SDStudio Menu Options====================== 

В начале отключаем функционал реализации мега меню темы Cactus при помощи снипета @_ДЕАКТИВИРУЕМ_РОДИТЕЛЬСКУЮ_ФУНКЦИЮ. Далее добавляем класс cactus-mega-menu к пунктам меню при помощи снипета * @_АКТИВИРУЕМ_CARBON_FIELDS_MEGA_MENU

/**
 * 
 * @_ДЕАКТИВИРУЕМ_РОДИТЕЛЬСКУЮ_ФУНКЦИЮ
 * @_Cactus - глючная функция из-за которой перестал работать функционал раскрытия  пункта меню в админ панели при редактировапнии меню.
 * 
 */

add_action( 'after_setup_theme','REMOVE_Cactus_MegaMenu', 100 );
function REMOVE_Cactus_MegaMenu() {
    remove_action( 'init', 'cactus_setup_menu_custom_fields' );
}

/**
* 
* @_АКТИВИРУЕМ_CARBON_FIELDS_MEGA_MENU
* 
* https://wordpress.stackexchange.com/questions/90649/add-class-to-menu-items-of-one-specific-menu-nav-menu-css-class
* https://docs.carbonfields.net/#/containers/nav-menu-item
*/
function atg_menu_classes($classes, $item, $args) {
    // Объявляем переменную с методатой пункта меню
    $sdstudio_mega_menu = carbon_get_nav_menu_item_meta( $item->ID, 'sdstudio_mega_menu' );

    // Если у пункта меню выбрана опция "Мега меню" добавляем класс пункту меню
    if($sdstudio_mega_menu == 1) {
        $classes[] = 'cactus-mega-menu';
    }

  return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);

И добаляем JS благодаря которому осуществим оборачивание дочерних пунктов меню:

//Custum Cactus Mega Menu - Оборачиваем дочерние пункты для мега меню

jQuery(document).ready(function($){
if ( $(window).width() >= 769){
    // Обертываем суб меню для мега меню
    $('ul#top-menu li.cactus-mega-menu > .sub-menu').each(function(){
        $(this).wrap( "<div class='cactus-mega-menu-wrap'></div>" );
    });
} else {
    // Меняем ID левого меню для срабатывания мобильного меню
    $('ul#top-menu').attr('id','top-menu');
}
});