Как исправить отображение хэдера с логотипом и меню, чтобы при скролле бэкграунд становился белым?
Находим файл main.js
/wp-content/themes/proland/js/main.js
Добавляем в него кусок кода, отвечающий за анимацию полоски меню
/* ---------- Nav BG ON Scroll---------- */ $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 99) { $(".navbar-default").addClass("is-scrolling"); } else { $(".navbar-default").removeClass("is-scrolling"); } });
После этого всё должно работать.
Как включить анимацию блоков лэндинга
После первой установки темы Proland и загрузки демо-данных у меня абсолютно не работала анимация блоков. Они то вообще не появлялись, то появлялись по клику.
Оказывается, в настройках темы (в самом последнем пункте «Icon Libraries») есть опция включения-выключения эффектов анимации. Она так и называется — «Animation». Проблема в том, что у меня анимация не работала при любом положении этого переключателя.
Недостаток исправил путем внесения небольшого изменения в файл functions.php
/wp-content/themes/proland/functions.php
Просто меняем условие подключения нужных css файлов
if ( ot_get_option( 'proland_animate' ) =='on' ){ // Animate library wp_enqueue_style( 'animate', get_template_directory_uri() . '/css/plugins/animate.css', false, '1.0'); //wp_deregister_style( 'animate' ); // VC plugin hack wp_deregister_style( 'animate-css' ); // VC plugin hack wp_deregister_style( 'animate-css-css' ); // VC plugin hack }
Как изменить положение валюты в товарах плагина Theme Products
Шаблон вывода находится вот в этом файле:
/wp-content/plugins/proland-shortcodes/proland-shortcodes.php
Меняем последовательность вывода цены и валюты:
//if ( $proland_product_price){ $out .= '<h4 class="price">'. $proland_product_currency . ''. $proland_product_price . '</h4>'; } //меняем на if ( $proland_product_price){ $out .= '<h4 class="price">'. $proland_product_price . ' '. $proland_product_currency . '</h4>'; }
//if( $proland_product_sale !='' ){$out .= '<del>'. $proland_product_currency . ''. $proland_product_sale . '</del>'; } //if( $proland_product_price !='' ){$out .= ''. $proland_product_currency . ''. $proland_product_price . ''; } //меняем на if( $proland_product_sale !='' ){ $out .= '<del>'. $proland_product_sale . ' '. $proland_product_currency . '</del>'; } if( $proland_product_price !='' ){$out .= ''. $proland_product_price . ' '. $proland_product_currency . ''; }
//$out .= '<div class="price"><span>'.esc_html( $currency ).'</span>'.esc_html( $priceamount ).'</div>'; //меняем на $out .= '<div class="price"><span>'.esc_html( $priceamount ).'</span> '.esc_html( $currency ).'</div>';
Убираем uppercase с валюты. Идем в «Внешний вид» -> «Theme Options» -> «Custom CSS» и в поле «additional css» вставляем
.product-desc .price { text-transform: none; }
Добавление эффекта 3D Flip изображения товара на главной лэндинга
Подробности подключения самой библиотеки описаны тут: 3D переворот картинки
Добавлю, что код инциализации разместил внутри основной функции в файле
/wp-content/themes/proland/js/main.js
Естественно без тегов <script></script>.
Для появления эффекта переворота изображения необходимо внести изменения в файл
/wp-content/plugins/proland-shortcodes/proland-shortcodes.php
Коряво, но работает
// получаем все изображения товара и их урлы $i=0; foreach ($proland_product_items as $image2) { $img_url_flip[$i] = $image2['full_url']; $i++; } $out .= '<div class="col-sm-6 col-md-'. $column_number .' item wow fadeIn '. $offset .'" '. $delay .'>'; $out .= '<div class="row m0 featured-img">'; $thumb = get_post_thumbnail_id(); $img_url = wp_get_attachment_url( $thumb,'full' ); $image = aq_resize( $img_url, 213, 213, true, true, true ); if( $image !='' && $resize =='0' || $resize =='' ){ $out .= '<a href="'. $proland_product_small_btn_link .'"><img class="product-gallery-image-single" src="'. esc_url($image) . '" alt="'. get_the_title() .'" /></a>'; } if( $img_url !='' && $resize =='1'){ // формируем эффект переворота из первого и второго изображения $out .= '<div class="flip"><div class="front"><img class="product-gallery-image-single" src="'. esc_url($img_url) . '" alt="'. get_the_title() .'" /></div><div class="back"><img class="product-gallery-image-single" src="'. esc_url($img_url_flip[1]) . '" alt="'. get_the_title() .'" /></div></div>'; //$out .= '<img class="product-gallery-image-single" src="'. esc_url($img_url) . '" alt="'. get_the_title() .'" />'; }
В настройках темы Proland в разделе additional css добавил
.flip .back img { max-height: 330px; }
Это ограничивает высоту картинки до 330px.