Верстка сайтов

Woocommerce полезные хуки

Верстка сайтов / , , ,

При работе с плагином Woocommerce на сайте часто требуется изменять вид отображения карточек товара, корзины и многое другое. Для этих целей можно править шаблоны, применять плагины и использовать хуки. В этом посте я буду собирать полезные хуки для вукомерц. Хуки (hooks)

1
2
3
4
5
6
7
8
9
10
11
12
13
/* убрать ссылку с карточки товара */
add_action('woocommerce_before_shop_loop_item', 'remove_link', 1);
function remove_link() {
remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
}
 
/* убрать ссылку с корзины */
add_filter( 'woocommerce_cart_item_name', 'mad_remove_cart_product_link', 1, 3 );
function mad_remove_cart_product_link( $product_link, $cart_item, $cart_item_key ) {
    $product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
    return " Ч " . $product->get_title() . " Ч ";
}

 

Простое всплывающее окно на сайте

Верстка сайтов / , ,

На сайте часто нужно вывести информацию в шапке о режиме работы или контактах. Чтобы не нагромождать информацию, её можно разместить во всплавающем окне, которое выводится по клику на какой нибудь элемент. Простое всплывающее окошко можно сделать с помощью CSS и  jQuery. Для это добавляем код html на сайт:

XHTML
1
2
3
4
5
6
<div class="wrap">
    <div class="modal"></div>
    <div class="header">
        <a href="#">режим работы</a>
    </div>
</div>

Скрипт вставляем в шапку или футер: …

Простое всплывающее окно на сайте Читать полностью »

Добавляем на сайт свой фид (feed) для Яндекса

Верстка сайтов / , ,

Если с сайта нужно выгрузить фид для Яндекса или для другого сервиса. То есть два способа. Первый это всевозможные плагины, но они почти все работаю с Woocommerce. Второй вариант, написать выгрузку вручную. С такой проблемой я столкнулся на сайте застройщика, квартиры были выполнены кастомными записями. А нужно было несколько фидов в XML-формате для разных сервисов. …

Добавляем на сайт свой фид (feed) для Яндекса Читать полностью »

Свой фильтр для виджета AE Post Blocks от AnyWhere Elementor Pro

Верстка сайтов / , , ,

Для WordPress плагин Elementor выполняет большинство задач не прибегая к ковырянию в коде. Но всё же есть моменты, которые Elementor не выполняет без Хуков. Так  виджет AE Post Blocks от плагина AnyWhere Elementor Pro выводит записи именно те которые прописываются в фильтре И если этот виджет применить для шаблона архива в Elementor, то при переходе по таксономиям (рубрики, …

Свой фильтр для виджета AE Post Blocks от AnyWhere Elementor Pro Читать полностью »

Прилипающее меню или шапка для сайта

Верстка сайтов / , , ,

Чтобы блок с меню (или шапка сайта целиком) при прокрутке страницы вниз — скрывался, а потом прилипал сверху сайта, нужно присвоив  блоку стиль и задать ему свойство position: fixed;.

CSS
1
2
3
4
.menu.fixed {
    position: fixed;
    top: 0px;
}

И прописать, код который при прокрутке на несколько пикселей вниз (в нашем случае на 135px) будет блоку со стилем .menu присваивать стиль .fixed.

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
    jQuery(window).scroll(function() {
    var the_top = jQuery(document).scrollTop();
    if (the_top > 135) {
        jQuery('.menu').addClass('fixed');
    }
    else {
        jQuery('.menu').removeClass('fixed');
    }
});
</script>

Так …

Прилипающее меню или шапка для сайта Читать полностью »

Подгружать HTML в DIV

Верстка сайтов / , , ,

Если необходимо на сайте в div подгрузить какой нибудь html контент, это можно сделать следующим образом. Положить html файл на сервер, через FTP-клиент. И прописать скрипт.

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
$.get('/readme.html',function(data){ //указываешь урл от корня папки
$('#content_file_html').html(data); //тут после # пишешь ID слоя куда подгрузить текст
});
});
 
Для WordPress если вставлять код через админку, то этот код:
 
jQuery(document).ready(function(){
jQuery.get('/readme.html',function(data){ //указываешь урл от корня папки
jQuery('#content_file_html').html(data); //тут после # пишешь ID слоя куда подгрузить текст
});
});

Простой слайдер bxslider для WordPress

Верстка сайтов / , , , , ,

Когда нужно сделать простой слайдер фотографий или слайдер текста. То можно применить bxslider. При вставке стандартной галереи в Wordpres на страницу, из этих картинок можно сделать слайдер, если подключить bxslider. Подключается он очень просто. Достаточно прописать код в шапке или футере сайта.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
 
/* инициализация самого слайдера */
<script>
    jQuery(document).ready(function(){
      jQuery('.gallery').bxSlider({
        auto: true,
        controls: false,
        slideWidth: 400
      });
 
    });
    
  </script>

.gallery — это блок с классом gallery внутри которого идут картинки или блоки с контентом.

XHTML
1
2
3
4
5
6
7
8
9
10
<div class="gallery">
<div>Контент или картинка 1</div>
<div>Контент или картинка 2</div>
<div>Контент или картинка 3</div>
<div>Контент или картинка 4</div>
</div>
 
или шорткод стандартной галереи WordPress
 
[gallery link="none" ids="31,32,33"]

Опции …

Простой слайдер bxslider для WordPress Читать полностью »

Одинаковая высота у блоков

Верстка сайтов / , ,

Часто требуется выводить блоки, чтобы они были одинаковой высоты и сами подстраивались под содержимое. Для этого вставляем следующий код Код HTML

XHTML
1
2
3
4
5
6
<ul class="products">
<li class="box height_fix">Содержимое блока 1</li>
<li class="box height_fix">Содержимое блока 2</li>
<li class="box height_fix">Содержимое блока 3</li>
<li class="box height_fix">Содержимое блока 4</li>
</ul>

Код скрипта

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
jQuery(function($){
var max_col_height = 80; // максимальная высота, первоначально 80
$('ul.products li.box.height_fix').each(function(){ // цикл "для каждой из колонок"
if ($(this).height() > max_col_height) { // если высота колонки больше значения максимальной высоты,
max_col_height = $(this).height(); // то она сама становится новой максимальной высотой
}
});
$('ul.products li.box.height_fix').height(max_col_height); // устанавливаем высоту каждой колонки равной значению максимальной высоты
});
</script>

Тэги могут быть разными, вместо списков li могут, могут быть div.