Слайдер с превью через кастомные поля в Oxygen. Самый простой вариант для записей выводимых через шаблон.
Слайдер с превью через кастомные поля в Oxygen. Самый простой вариант для записей выводимых через шаблон.
Необходимо было сделать, чтобы модальное окно открывалось на смартфоне во всю ширину экрана. Поэтому пользователи чтобы закрыть его использовали кнопку НАЗАД, на своем смартфоне. Но это приводило к переходу на одну страницу назад. Шаблон сверстан в Oxygen, такой функции по умолчанию нет, поэтому прописал в сниппете следующий код: Этот код делает следующие действия, когда нажимаю […]
Необходимо было сделать чтобы переключалки слайдера были внизу и показывалось количество слайдов и номер слайда. Для этого добавляем вот такой код в сниппет, и всё работает.
Чтобы разрешить хеш-ссылки (hash links) для открытия вкладок (tabs) в Oxygen нужно проделать следующее. Так как по умолчанию это не работает.
Столкнулся с такой задачей. Для пункта в Max Mega Menu нужно было повесить своё событие через JQuery. Но оно не хотело работать. Причина оказалось в том, что maxmegamenu.js выводится в самом конце страницы. Поэтому чтобы запустить свое событие, его нужно инициализировать после запуска всех скриптов. Я поступил так: Данный код по клику открывает меню 3-его […]
Как-то на одном проекте возникла необходимость стилизовать тег <select> и его пункты. Как известно с помощью простого CSS он не стилизуется так, как бы этого хотелось. В сети нашел решение. Решение реализовано на CSS и jQuery, взял его на этом сайте. Здесь выложу уже рабочий код, который применил для своих нужд, для плагина Contact Form, […]
На одном из проектов, необходимо было реализовать фотогалерею по разделам. Она была реализована с помощью кастомных записей и плагина Search & Filter. Но при переводе проекта на Oxygen, плагин Search & Filter отказался работать. Поэтому переделали фильтр на основе кастомных записей и библиотеки Isotope.
Столкнулся с такой проблемой. Woocommerce не сортирует товары у которого стоит статус "в наличии" или "нет в наличии". Он только сортирует по остаткам на складе. Поэтому вышел из положения так. На странице вывел все товары и те у кого статус "нет в наличии" скриптом перекинул вниз.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
add_action( 'wp_footer', function () { ?> <?php if (is_woocommerce() && is_product_category()) : ?> <script> jQuery(document).ready(function() { jQuery('.outofstock').each(function(index, item) { var $this = jQuery(item); $this.appendTo($this.parent()); }); }); </script> <?php endif; ?> <?php } ); |
Если заменить на $this.prependTo($this.parent()); то все товары не […]
На сайте часто нужно вывести информацию в шапке о режиме работы или контактах. Чтобы не нагромождать информацию, её можно разместить во всплавающем окне, которое выводится по клику на какой нибудь элемент. Простое всплывающее окошко можно сделать с помощью CSS и jQuery. Для это добавляем код html на сайт:
|
1 2 3 4 5 6 |
<div class="wrap"> <div class="modal"></div> <div class="header"> <a href="#">режим работы</a> </div> </div> |
Скрипт вставляем в шапку или футер: […]
Для WordPress плагин Elementor выполняет большинство задач не прибегая к ковырянию в коде. Но всё же есть моменты, которые Elementor не выполняет без Хуков. Так виджет AE Post Blocks от плагина AnyWhere Elementor Pro выводит записи именно те которые прописываются в фильтре И если этот виджет применить для шаблона архива в Elementor, то при переходе по таксономиям (рубрики, […]
Чтобы блок с меню (или шапка сайта целиком) при прокрутке страницы вниз — скрывался, а потом прилипал сверху сайта, нужно присвоив блоку стиль и задать ему свойство position: fixed;.
|
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> |
Так […]
Если необходимо на сайте в 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. При вставке стандартной галереи в Wordpres на страницу, из этих картинок можно сделать слайдер, если подключить bxslider. Подключается он очень просто. Достаточно прописать код в шапке или футере сайта.
Часто требуется выводить блоки, чтобы они были одинаковой высоты и сами подстраивались под содержимое. Для этого вставляем следующий код Код HTML
|
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.