oleg, Автор в Сборка сайтов и интернет-магазинов

Понадобилось на одном проекте сделать галерею с превьюшками.

Так как это были кастомные записи, и их было много то, решил эту галерею вывести с помощью кастомных полей ACF и слайдера на основе Slick.

Для этого создал дополнительное поле для записи как Редактор WordPress

В поле добавлял обычную галерею которая есть в редакторе WordPress, а выводил её в шаблоне вывода записи, с помощью PHP-кода или через Oxygen, причем в двух местах, одна за другой (дубль). Только первому присваивал дополнительный стиль: slider-for-jq, а второму: slider-nav-jq.

И через сниппет подключил модуль Slick и прописал стили.

Вот код сниппета с готовым кодом:

// Подключаем библиотеку Slick 
add_action( 'wp_footer', function () { ?>
<style>
	.slider-for-jq div.gallery,
	.slider-nav-jq div.gallery {
		display:flex;
		flex-direction: row;
		width:100%;
	}
	.slider-for-jq div.gallery {
		height: max-content;
		flex-wrap: wrap;
	}
	
	.slider-for-jq div.gallery figure.gallery-item,
	.slider-nav-jq div.gallery figure.gallery-item {
		margin:0 5px;
	}
	
	.slider-for-jq div.gallery figure {
		width:100%;
		height: max-content;
	}
	.slider-for-jq div.gallery.slick-slider figure img {
		height: 400px;
    	object-fit: cover;
    	width: 100%;
	}
	.slider-nav-jq div.gallery figure img {
		width:100px;
		height: 100px;
		object-fit: cover;
		opacity: .5;
		transition:all 0.3s;
	}
	.slider-nav-jq div.gallery.slick-slider figure img {
		width:100%;
	}
	.slider-nav-jq div.gallery figure.slick-active.slick-current img {
		opacity: .95;
	}
	@media only screen and (max-width: 768px) {
		.slider-nav-jq div.gallery figure img {
			height: 50px;
		}
		.slider-for-jq div.gallery.slick-slider figure img {
			height:auto;
		}
	}
</style>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/for_oxygen/plugins/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/for_oxygen/plugins/slick/slick-theme.css"/>
<script type="text/javascript" src="/wp-content/themes/for_oxygen/plugins/slick/slick.min.js"></script>
  <script>
jQuery(document).ready(function(){

// добавляем стили для галереи, чтобы она заработала
jQuery('span.slider-for-jq div.gallery').addClass( 'slider-for' );
jQuery('span.slider-nav-jq div.gallery').addClass( 'slider-nav' );		


//слайдр в проектах	
jQuery('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
jQuery('.slider-nav').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
	arrows: false,
  dots: false,
  centerMode: true,
  focusOnSelect: true
});
	
	
});
	  
	  
// отключение ссылок на иконках галереи	  
jQuery('.slider-nav-jq div.gallery figure.gallery-item a').on('click', function (e) {
    e.preventDefault(); // этот код предотвращает стандартное поведение браузера по клику
    // остальной код
	//alert("Мы не перешли по ссылке, а вывели своё сообщение!");
});
	  
	  
  </script>
<?php } );

// Подключаем библиотеку Slick

add_action( 'wp_footer', function () { ?>

<style>

.slider-for-jq div.gallery,

.slider-nav-jq div.gallery {

display:flex;

flex-direction: row;

width:100%;

}

.slider-for-jq div.gallery {

height: max-content;

flex-wrap: wrap;

}

.slider-for-jq div.gallery figure.gallery-item,

.slider-nav-jq div.gallery figure.gallery-item {

margin:0 5px;

}

.slider-for-jq div.gallery figure {

width:100%;

height: max-content;

}

.slider-for-jq div.gallery.slick-slider figure img {

height: 400px;

object-fit: cover;

width: 100%;

}

.slider-nav-jq div.gallery figure img {

width:100px;

height: 100px;

object-fit: cover;

opacity: .5;

transition:all 0.3s;

}

.slider-nav-jq div.gallery.slick-slider figure img {

width:100%;

}

.slider-nav-jq div.gallery figure.slick-active.slick-current img {

opacity: .95;

}

@media only screen and (max-width: 768px) {

.slider-nav-jq div.gallery figure img {

height: 50px;

}

.slider-for-jq div.gallery.slick-slider figure img {

height:auto;

}

</style>

jQuery(document).ready(function(){

// добавляем стили для галереи, чтобы она заработала

jQuery('span.slider-for-jq div.gallery').addClass( 'slider-for' );

jQuery('span.slider-nav-jq div.gallery').addClass( 'slider-nav' );

//слайдр в проектах

jQuery('.slider-for').slick({

slidesToShow: 1,

slidesToScroll: 1,

arrows: false,

fade: true,

asNavFor: '.slider-nav'

});

jQuery('.slider-nav').slick({

slidesToShow: 4,

slidesToScroll: 1,

asNavFor: '.slider-for',

arrows: false,

dots: false,

centerMode: true,

focusOnSelect: true

});

// отключение ссылок на иконках галереи

jQuery('.slider-nav-jq div.gallery figure.gallery-item a').on('click', function (e) {

e.preventDefault(); // этот код предотвращает стандартное поведение браузера по клику

// остальной код

//alert("Мы не перешли по ссылке, а вывели своё сообщение!");

});

</script>

<?php } );

И еще один момент, для того чтобы по клику на изображение открывалось большое изображение в модальном окне - установил плагин Easy FancyBox. А для навигационных слайдов отключил автоматическое определение ссылок как фансибокс, для этого добавил стиль .slider-nav-jq .gallery-icon a в исключения:

Необходимо было сделать, чтобы модальное окно открывалось на смартфоне во всю ширину экрана. Поэтому пользователи чтобы закрыть его использовали кнопку НАЗАД, на своем смартфоне. Но это приводило к переходу на одну страницу назад.

Шаблон сверстан в Oxygen, такой функции по умолчанию нет, поэтому прописал в сниппете следующий код:

//По нажатию на кнопку вызова модального окна, добавляет хэш и изменяет историю браузера.
    jQuery("a.cast-button-butt").on("click", function()  {
        var urlReplace = "#" + jQuery(this).attr('id');
        history.pushState(null, null, urlReplace);
    });
	jQuery("a.button-xs").on("click", function()  {
        var urlReplace = "#" + jQuery(this).attr('id');
        history.pushState(null, null, urlReplace);
    });

// По нажатию на кнопку назад, закрывает модальное окно Oxy
    jQuery(window).on('popstate', function() {
        jQuery(document).ready(function() {
				oxyCloseModal();
			});
    });

//По нажатию на кнопку вызова модального окна, добавляет хэш и изменяет историю браузера.

jQuery("a.cast-button-butt").on("click", function() {

var urlReplace = "#" + jQuery(this).attr('id');

history.pushState(null, null, urlReplace);

});

jQuery("a.button-xs").on("click", function() {

var urlReplace = "#" + jQuery(this).attr('id');

history.pushState(null, null, urlReplace);

});

// По нажатию на кнопку назад, закрывает модальное окно Oxy

jQuery(window).on('popstate', function() {

jQuery(document).ready(function() {

oxyCloseModal();

});

Этот код делает следующие действия, когда нажимаю на кнопку, чтобы открыть модальное окошко, добавляется новое состояние истории в виде нового хэша в урл. Затем событие popstate закрывает открытое модальное окно.

Пример взят тут, за что им очень благодарен.

Необходимо было сделать чтобы переключалки слайдера были внизу и показывалось количество слайдов и номер слайда.

Для этого добавляем вот такой код в сниппет, и всё работает.

add_action( 'wp_head', function () { ?>
<script type="text/javascript">
window.onload=function(){
    jQuery('nav.unslider-nav').each(function() {
		var text = jQuery(this).find('li:last-child').text(); // находим выбранную опцию и берем из нее текст
		jQuery(this).append('/ '+text); 
		

		
  	});
}
</script>
<style>
	nav.unslider-nav {
    	position: absolute;
    	bottom: 0;
    	left: calc(50% - 80px);
		color: #fff;
    	background: rgb(45,176,2);
    	background: -moz-linear-gradient(left, rgba(45,176,2,1) 0%, rgba(56,215,73,1) 100%);
    	background: -webkit-linear-gradient(left, rgba(45,176,2,1) 0%,rgba(56,215,73,1) 100%);
    	background: linear-gradient(to right, rgba(45,176,2,1) 0%,rgba(56,215,73,1) 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2db002', endColorstr='#38d749',GradientType=1 );
		
		padding: 20px 60px 10px 60px;
		display: flex;
    	flex-direction: row;
    	align-items: center;
    	justify-content: center;
		font-size:22px;
	}
	body nav.unslider-nav ol li {
		text-indent:0;
    	width:auto;
    	height: auto;
    	margin: 0 4px;
    	background: transparent;
    	border-radius: 0px;
    	overflow: hidden;
    	border: none;
    	cursor: pointer;
		box-shadow:none;
		display: none;
		font-size:22px;
	}
	body nav.unslider-nav ol li.unslider-active {
		border: none !important;
		background:transparent !important;
		box-shadow:none !important;
		display:block;
	}
	body .unslider-arrow.prev {
		top: calc(100% - 31px);
		left: calc(50% - 75px) !important;
		background:transparent;
	}
	body .unslider-arrow.next {
		top: calc(100% - 23px);
		right: calc(50% - 85px) !important;
		background:transparent;
	}
	body .unslider-arrow:before {
		content: "\e902";
		color:#ffffff;
		font-family: 'intersite' !important;
    	line-height: 1;
    	font-size: 25px;
		position: absolute;
    	top: 0;
    	left: 0;
    	text-indent: 0;
	}
</style>
<?php } );

add_action( 'wp_head', function () { ?>

window.onload=function(){

jQuery('nav.unslider-nav').each(function() {

var text = jQuery(this).find('li:last-child').text(); // находим выбранную опцию и берем из нее текст

jQuery(this).append('/ '+text);

});

}

</script>

<style>

nav.unslider-nav {

position: absolute;

bottom: 0;

left: calc(50% - 80px);

color: #fff;

background: rgb(45,176,2);

background: -moz-linear-gradient(left, rgba(45,176,2,1) 0%, rgba(56,215,73,1) 100%);

background: -webkit-linear-gradient(left, rgba(45,176,2,1) 0%,rgba(56,215,73,1) 100%);

background: linear-gradient(to right, rgba(45,176,2,1) 0%,rgba(56,215,73,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2db002', endColorstr='#38d749',GradientType=1 );

padding: 20px 60px 10px 60px;

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

font-size:22px;

}

body nav.unslider-nav ol li {

text-indent:0;

width:auto;

height: auto;

margin: 0 4px;

background: transparent;

border-radius: 0px;

overflow: hidden;

border: none;

cursor: pointer;

box-shadow:none;

display: none;

font-size:22px;

}

body nav.unslider-nav ol li.unslider-active {

border: none !important;

background:transparent !important;

box-shadow:none !important;

display:block;

}

body .unslider-arrow.prev {

top: calc(100% - 31px);

left: calc(50% - 75px) !important;

background:transparent;

}

body .unslider-arrow.next {

top: calc(100% - 23px);

right: calc(50% - 85px) !important;

background:transparent;

}

body .unslider-arrow:before {

content: "\e902";

color:#ffffff;

font-family: 'intersite' !important;

line-height: 1;

font-size: 25px;

position: absolute;

top: 0;

left: 0;

text-indent: 0;

}

</style>

<?php } );

Столкнулся с такой проблемой, что созданные атрибуты в Woocommerce не выводятся в карточке товаров которая сверстана в Oxygen. Вернее если применен стандартный вывод информации товара. Так же атрибуты не выводятся в модальном окне через плагин yith-woocommerce-quick-view.

Решение нашел такое:

С помощью хуков вывел атрибуты и в большой карточке товаров и в модальном окне. Так же можно выводить в мини-карточках на странице архивов.

// Функция вывода атрибутов
function atrb_productShoes() {
global $product;
$product->list_attributes();
}
// Хук для вывода в большой карточке товара
add_action( 'woocommerce_single_product_summary', 'atrb_productShoes' );
// Хук для вывода в карточке товара в YITH окне
add_action( 'yith_wcqv_product_summary', 'atrb_productShoes', 16 );

// Функция вывода атрибутов

function atrb_productShoes() {

global $product;

$product->list_attributes();

}

// Хук для вывода в большой карточке товара

add_action( 'woocommerce_single_product_summary', 'atrb_productShoes' );

// Хук для вывода в карточке товара в YITH окне

add_action( 'yith_wcqv_product_summary', 'atrb_productShoes', 16 );

Чтобы посмотреть порядок вывода для модального окна YITH, можно заглянуть в файл:

/wp-content/plugins/yith-woocommerce-quick-view/includes/class.yith-wcqv-frontend.php

Сам код я взял на сайте https://wpcraft.top/woocommerce-kak-vyvesti-atributy-tovarov-v-kataloge/ Там есть еще пару вариантов, я их не проверял. Но размещу тут, вдруг пригодятся.

function atrb_productShoes2() {
	global $product;
	global $post;
 
	$attributes = $product->get_attributes();
 
	if ( ! $attributes ) {
		return;
		}
 
	foreach ( $attributes as $attribute ) {
	
	// Получение таксаномии
	$terms = wp_get_post_terms( $product->id, $attribute[ 'name' ], 'all' );
	$taxonomy = $terms[ 0 ]->taxonomy;
 
	// Получение объекта таксаномии
	$taxonomy_object = get_taxonomy( $taxonomy );
 
	// Получение меток атрибутов
	$attribute_label = $taxonomy_object->labels->name;
	$attribute_label = str_replace('Товар', '', $attribute_label);
 
	// Отображение метки с кликабельным списком терминов
	echo get_the_term_list( $post->ID, $attribute[ 'name' ] , '<div class="attributes">' . $attribute_label . ': ' , ', ', '</div>' );
	}
}
// Хук для вывода после заголовка товаров в категории
add_action( 'woocommerce_after_shop_loop_item_title', 'atrb_productShoes2' );

function atrb_productShoes2() {

global $product;

global $post;

$attributes = $product->get_attributes();

if ( ! $attributes ) {

return;

}

foreach ( $attributes as $attribute ) {

// Получение таксаномии

$terms = wp_get_post_terms( $product->id, $attribute[ 'name' ], 'all' );

$taxonomy = $terms[ 0 ]->taxonomy;

// Получение объекта таксаномии

$taxonomy_object = get_taxonomy( $taxonomy );

// Получение меток атрибутов

$attribute_label = $taxonomy_object->labels->name;

$attribute_label = str_replace('Товар', '', $attribute_label);

// Отображение метки с кликабельным списком терминов

echo get_the_term_list( $post->ID, $attribute[ 'name' ] , '<div class="attributes">' . $attribute_label . ': ' , ', ', '</div>' );

}

// Хук для вывода после заголовка товаров в категории

add_action( 'woocommerce_after_shop_loop_item_title', 'atrb_productShoes2' );

И вывод не всех атрибутов, а только первых двух:

function atrb_productShoes2() {
	global $product;
	global $post;
 
	$attributes = $product->get_attributes();
 
	if ( ! $attributes ) {
		return;
		}
 
	$counter = 0; // задаем счетчик
	foreach ( $attributes as $attribute ) {
		$counter++; // Считаем количество итераций и выходим из цикла при условии
		if($counter > 2) {
			break;
			};
	
	// Получение таксаномии
	$terms = wp_get_post_terms( $product->id, $attribute[ 'name' ], 'all' );
	$taxonomy = $terms[ 0 ]->taxonomy;
 
	// Получение объекта таксаномии
	$taxonomy_object = get_taxonomy( $taxonomy );
 
	// Получение меток атрибутов
	$attribute_label = $taxonomy_object->labels->name;
	$attribute_label = str_replace('Товар', '', $attribute_label);
 
	// Отображение метки с кликабельным списком терминов
	echo get_the_term_list( $post->ID, $attribute[ 'name' ] , '<div class="attributes">' . $attribute_label . ': ' , ', ', '</div>' );
	}
}
// Хук для вывода после заголовка товаров в категории
add_action( 'woocommerce_after_shop_loop_item_title', 'atrb_productShoes2' );

function atrb_productShoes2() {

global $product;

global $post;

$attributes = $product->get_attributes();

if ( ! $attributes ) {

return;

}

$counter = 0; // задаем счетчик

foreach ( $attributes as $attribute ) {

$counter++; // Считаем количество итераций и выходим из цикла при условии

if($counter > 2) {

break;

};

// Получение таксаномии

$terms = wp_get_post_terms( $product->id, $attribute[ 'name' ], 'all' );

$taxonomy = $terms[ 0 ]->taxonomy;

// Получение объекта таксаномии

$taxonomy_object = get_taxonomy( $taxonomy );

// Получение меток атрибутов

$attribute_label = $taxonomy_object->labels->name;

$attribute_label = str_replace('Товар', '', $attribute_label);

// Отображение метки с кликабельным списком терминов

echo get_the_term_list( $post->ID, $attribute[ 'name' ] , '<div class="attributes">' . $attribute_label . ': ' , ', ', '</div>' );

}

// Хук для вывода после заголовка товаров в категории

add_action( 'woocommerce_after_shop_loop_item_title', 'atrb_productShoes2' );

На одном проекте было необходимо по ссылке сохранять переменные в файл CSV. Реализовал это средствами PHP, через сниппеты в WordPress.

Для этого завел сниппет, как шорткод. Сам шорткод [save_csv] вставил на страницу, на которую ссылается форма с перемеными передаваемые GET запросом.

URL имеет вот такой вид:

/result2/?d2=29&m2=09&y2=1989&prof_name=Имя&email=mail%40mail.ru&checkbox-1=Даю-согласие-на-обработку-своих-персональных-данных-в-соответствии-с-Условиями

1	/result2/?d2=29&m2=09&y2=1989&prof_name=Имя&email=mail%40mail.ru&checkbox-1=Даю-согласие-на-обработку-своих-персональных-данных-в-соответствии-с-Условиями

Код самого сниппета вот:

add_shortcode( 'save_csv', function () {

// начало шорткода

if ( $_GET['checkbox-1']='Даю-согласие-на-обработку-своих-персональных-данных-в-соответствии-с-Условиями' ) {
	function saveRow($list) {
  		$file = fopen($_SERVER['DOCUMENT_ROOT'].'/wp-content/uploads/base.csv','a');
		foreach ($list as $line)
  			{
				// перекодеровка в cp1251, что открывалось в Excel
				$line = iconv( "UTF-8", "cp1251",  $line );
    				fputcsv($file,explode(',',$line));
			}
		
  		fclose($file); 
	}
	// Массив с GET-переменными
	saveRow(
		Array(
			$_GET['d2'].';'.$_GET['m2'].';'.$_GET['y2'].';'.$_GET['prof_name'].';'.$_GET['email'].';'.'checkbox-1=true'
		));
}
	
// конец шорткода
// 	
} );

add_shortcode( 'save_csv', function () {

// начало шорткода

if ( $_GET['checkbox-1']='Даю-согласие-на-обработку-своих-персональных-данных-в-соответствии-с-Условиями' ) {

function saveRow($list) {

$file = fopen($_SERVER['DOCUMENT_ROOT'].'/wp-content/uploads/base.csv','a');

foreach ($list as $line)

{

// перекодеровка в cp1251, что открывалось в Excel

$line = iconv( "UTF-8", "cp1251", $line );

fputcsv($file,explode(',',$line));

}

fclose($file);

}

// Массив с GET-переменными

saveRow(

Array(

$_GET['d2'].';'.$_GET['m2'].';'.$_GET['y2'].';'.$_GET['prof_name'].';'.$_GET['email'].';'.'checkbox-1=true'

));

}

// конец шорткода

} );

Файл сохраняется по адресу /wp-content/uploads/base.csv и имеет правильную кодировку cp1251, для открытия его через Excel без лишних манипуляций.

Чтобы разрешить хеш-ссылки (hash links) для открытия вкладок (tabs) в Oxygen нужно проделать следующее. Так как по умолчанию это не работает.

Нужно для таба прописать JS код, это делается так:

Выделяется нужный tab;
Заходим в Advanced > Javascript и вставляем код который ниже;
Добавляем ссылку в нужном месте (на любой странице) с якорем (хеш), примерно <a href="/flats/#_tab-168-235">.

var hash = window.location.hash.substr(1);
   
if (hash == '%%ELEMENT_ID%%') {
  setTimeout(function(){
    
  jQuery([document.documentElement, document.body]).animate({
  scrollTop: jQuery('#' + '%%ELEMENT_ID%%').offset().top - 100
  }, 1000);
    
  jQuery('#' + '%%ELEMENT_ID%%').trigger('click');
  },1000);
}

var hash = window.location.hash.substr(1);

if (hash == '%%ELEMENT_ID%%') {

setTimeout(function(){

jQuery([document.documentElement, document.body]).animate({

scrollTop: jQuery('#' + '%%ELEMENT_ID%%').offset().top - 100

}, 1000);

jQuery('#' + '%%ELEMENT_ID%%').trigger('click');

},1000);

}

Решение взято тут: https://gist.github.com/wplit/0cc261359e17e7cb9140fb56b2412e47#file-tab-element-js

Чтобы на сайте сделать современный, красивый скроллбар (он же scrollbar) необходимо минимум кода CSS. Меняя цвета на своё усмотрение можно на своем сайте показывать красивый скролл.

И не нужно его прятать и избегать, так как он вписывается в общий дизайн сайта.

Код CSS для стилизации srollbar

div.scrollbar_castom::-webkit-scrollbar {
	width: 15px;
	border-radius: 10px;
	background-color: transparent;
}
div.scrollbar_castom::-webkit-scrollbar-thumb {
	border-radius: 15px;
	background-color: #eeefc8;
	border-right: 4px solid #fdfdf7;
	border-left: 4px solid #fdfdf7;
}
div.scrollbar_castom::-webkit-scrollbar-track {
	border-radius: 10px;
	background-color: transparent;
}
div.scrollbar_castom::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

div.scrollbar_castom::-webkit-scrollbar {

width: 15px;

border-radius: 10px;

background-color: transparent;

}

div.scrollbar_castom::-webkit-scrollbar-thumb {

border-radius: 15px;

background-color: #eeefc8;

border-right: 4px solid #fdfdf7;

border-left: 4px solid #fdfdf7;

}

div.scrollbar_castom::-webkit-scrollbar-track {

border-radius: 10px;

background-color: transparent;

}

div.scrollbar_castom::-webkit-scrollbar-thumb:hover {

background-color: #a8bbbf;

}

На одном из проектов стояла задача разместить камеры наблюдения на сайте. Чтобы посетители могли наблюдать за объектом. Камеры были подключены и выданы ссылки с протоколом RTSP, с помощью VLC плеера можно было к ним подключится. Но чтобы их разместить на сайте — нужен сервер который поток RTSP преобразует в другой формат и который можно транслировать на сайте.

После поисков, было найдено простое и рабочее решение, благодаря программисту, который написал программу для сервера. Вот ссылка на описание этой программы.

Для вставки IP-камер на сайт мы сделали следующее

Купили VDS сервер на TimeWeb c ОС Windows.
Установили программу RTSP2HLS_win64 взятую на сайта carpediem.0fees.us.
Настроили конфигуратор для своих ссылок к IP-камерам.
Взяли с основного домена SSL сертификат и разместили файлы сертификата под именами cert.pem и privkey.pem в подпапке data которая расположена в папке установленной программы RTSP2HLS на VDS сервере.
Через CMD файл прописали запуск RTSP2HLS.exe серверной части программы, так как по клику она не открывалась на VDS.
Настроили запуск CMD файла при запуске системы, чтобы он запускался автоматически при перезагрузки сервера.
На сайте через теги IFRAME вставили ссылки на на эти камеры.

И за объектом стало возможно наблюдать прямо на сайте.

Код программы на Гитхабе: https://github.com/carpediem-av/rtsp2hls

Столкнулся с такой задачей. Для пункта в Max Mega Menu нужно было повесить своё событие через JQuery. Но оно не хотело работать. Причина оказалось в том, что maxmegamenu.js выводится в самом конце страницы. Поэтому чтобы запустить свое событие, его нужно инициализировать после запуска всех скриптов. Я поступил так:

// запуск скрипта после загрузки всей страницы
window.onload=function(){
	jQuery(function(){
		// по клику пункта меню убрать переход по ссылке
		jQuery('#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item-has-children>a').click(function(e){
			e.preventDefault();
		});
		// по клику добавлять стиль active для отображения меню 3-его уровня
		jQuery('#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item-has-children').click(function(){
			jQuery(this).toggleClass('active');
			jQuery(this).find('ul.mega-sub-menu').toggleClass('active');
		});
		
	});
}

// запуск скрипта после загрузки всей страницы

window.onload=function(){

jQuery(function(){

// по клику пункта меню убрать переход по ссылке

jQuery('#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item-has-children>a').click(function(e){

e.preventDefault();

});

// по клику добавлять стиль active для отображения меню 3-его уровня

jQuery(this).toggleClass('active');

jQuery(this).find('ul.mega-sub-menu').toggleClass('active');

});

}

Данный код по клику открывает меню 3-его уровня если он есть. Для этого необходимо еще прописать стиль:

/* меню 3-его уровня */
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu ul.mega-sub-menu {
		max-height: 0;
		opacity: 0;
		line-height:0;
		margin: 0em .8em 0em;
  		overflow: hidden;
		transition: all 500ms cubic-bezier(1.000, -0.415, 0.055, 1.355); 
  		transition-timing-function: cubic-bezier(1.000, -0.415, 0.055, 1.355);
	}
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li ul.mega-sub-menu.active {
		max-height: 999em;
		opacity: 1;
		line-height:inherit;
		margin: .8em;
		
	}
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item-has-children>a:after {
		content: '' ;
  		display: inline-block;
  		width: 7px;
  		height: 7px;
  		border-top: 2px solid #666;
  		border-right: 2px solid #666;
  		transform: rotate(45deg);
  		position: absolute;
  		margin-left: 5px;
  		margin-top: 8px;
  		transition: all 500ms cubic-bezier(1.000, -0.415, 0.055, 1.355); 
  		transition-timing-function: cubic-bezier(1.000, -0.415, 0.055, 1.355);
	}
	#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item-has-children.active>a:after {
		transform: rotate(135deg);
	}

/* меню 3-его уровня */

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu ul.mega-sub-menu {

max-height: 0;

opacity: 0;

line-height:0;

margin: 0em .8em 0em;

overflow: hidden;

transition: all 500ms cubic-bezier(1.000, -0.415, 0.055, 1.355);

transition-timing-function: cubic-bezier(1.000, -0.415, 0.055, 1.355);

}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li ul.mega-sub-menu.active {

max-height: 999em;

opacity: 1;

line-height:inherit;

margin: .8em;

}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item-has-children>a:after {

content: '' ;

display: inline-block;

width: 7px;

height: 7px;

border-top: 2px solid #666;

border-right: 2px solid #666;

transform: rotate(45deg);

position: absolute;

margin-left: 5px;

margin-top: 8px;

transition: all 500ms cubic-bezier(1.000, -0.415, 0.055, 1.355);

transition-timing-function: cubic-bezier(1.000, -0.415, 0.055, 1.355);

}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item-has-children.active>a:after {

transform: rotate(135deg);

}

Сегодня, в мае 2022 года я для себя открыл супер инструмент. Ранее которого мне не хватало. А именно как изменить цвет SVG иконке не вставляя её как код? А вот как.

Вставляем картинку СВГ (чёрно-белую иконку) как обычную картинку через тег IMG SRC

<img src="/work.svg" class="chm__icon_svg">

1	<img src="/work.svg" class="chm__icon_svg">

И присваиваем ей стиль через CSS:

img.chm__icon_svg {
	filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);
	-webkit-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);
	-moz-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);
	-ms-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);
	-o-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);
}

img.chm__icon_svg {

filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);

-webkit-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);

-moz-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);

-ms-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);

-o-filter: invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);

}

Получится из черного цвета, зеленый цвет. Вот этот код

invert(42%) sepia(66%) saturate(1328%) hue-rotate(93deg) brightness(100%) contrast(103%);

генерируется в этом сервисе. Указываем там какой нам нужен цвет в формате #00bb12 и получаем код фильтра.

Как-то на одном проекте возникла необходимость стилизовать тег <select> и его пункты. Как известно с помощью простого CSS он не стилизуется так, как бы этого хотелось. В сети нашел решение. Решение реализовано на CSS и jQuery, взял его на этом сайте. Здесь выложу уже рабочий код, который применил для своих нужд, для плагина Contact Form, отличается он немного скриптом, так как я реализовал, чтобы в описание поля попадало первое значение из выпадающего списка. Так как само поле с выпадающим списком формируется через плагин Contact Form7 и его нельзя поправить.

1. В Contact Form7 я создал поле с выпадающим списком.

2. В сниппете прописал следующий код:

// стилизация SELECT
jQuery('.wpcf7-select').each(function() {
    const _this = jQuery(this),
        selectOption = _this.find('option'),
        selectOptionLength = selectOption.length,
        selectedOption = selectOption.filter(':selected'),
        duration = 450; // длительность анимации 

    _this.hide();
    _this.wrap('<div class="select"></div>');
    jQuery('<div>', {
        class: 'new-select',
        text: _this.children('option:first').text()
    }).insertAfter(_this);

    const selectHead = _this.next('.new-select');
    jQuery('<div>', {
        class: 'new-select__list'
    }).insertAfter(selectHead);

    const selectList = selectHead.next('.new-select__list');
    for (let i = 1; i < selectOptionLength; i++) {
        jQuery('<div>', {
            class: 'new-select__item',
            html: jQuery('<span>', {
                text: selectOption.eq(i).text()
            })
        })
        .attr('data-value', selectOption.eq(i).val())
        .appendTo(selectList);
    }

    const selectItem = selectList.find('.new-select__item');
    selectList.slideUp(0);
    selectHead.on('click', function() {
        if ( !jQuery(this).hasClass('on') ) {
            jQuery(this).addClass('on');
            selectList.slideDown(duration);

            selectItem.on('click', function() {
                let chooseItem = jQuery(this).data('value');

                jQuery('select').val(chooseItem).attr('selected', 'selected');
                selectHead.text( jQuery(this).find('span').text() );

                selectList.slideUp(duration);
                selectHead.removeClass('on');
            });

        } else {
            jQuery(this).removeClass('on');
            selectList.slideUp(duration);
        }
    });
});

// стилизация SELECT

jQuery('.wpcf7-select').each(function() {

const _this = jQuery(this),

selectOption = _this.find('option'),

selectOptionLength = selectOption.length,

selectedOption = selectOption.filter(':selected'),

duration = 450; // длительность анимации

_this.hide();

_this.wrap('<div class="select"></div>');

jQuery('<div>', {

text: _this.children('option:first').text()

}).insertAfter(_this);

const selectHead = _this.next('.new-select');

jQuery('<div>', {

}).insertAfter(selectHead);

const selectList = selectHead.next('.new-select__list');

for (let i = 1; i < selectOptionLength; i++) {

jQuery('<div>', {

html: jQuery('<span>', {

text: selectOption.eq(i).text()

})

.attr('data-value', selectOption.eq(i).val())

.appendTo(selectList);

}

const selectItem = selectList.find('.new-select__item');

selectList.slideUp(0);

selectHead.on('click', function() {

if ( !jQuery(this).hasClass('on') ) {

jQuery(this).addClass('on');

selectList.slideDown(duration);

selectItem.on('click', function() {

let chooseItem = jQuery(this).data('value');

jQuery('select').val(chooseItem).attr('selected', 'selected');

selectHead.text( jQuery(this).find('span').text() );

selectList.slideUp(duration);

selectHead.removeClass('on');

});

} else {

jQuery(this).removeClass('on');

selectList.slideUp(duration);

}

});

3. И прописал стили для этого селекта,

.chm_modal_uslugi .form-contact .select {
	display: block;
	width: 100%;
	position: relative;
	margin: 0 0 10px 0;
}
.chm_modal_uslugi .form-contact .new-select {
	position: relative;
	border: none;
	background-color: #f4f6fb;
	padding: 10px 10px;
	cursor: pointer;
	user-select: none;
	border-radius:8px;
	font-size: 14px;
	font-family: Roboto;
	line-height: 1.15;
}
.chm_modal_uslugi .form-contact .new-select__list {
	position: absolute;
	top: 35px;
	left: 0;
	border: none;
	cursor: pointer;
	width: 100%;
	z-index: 2;
	background: #f4f6fb;
	user-select: none;
}
.chm_modal_uslugi .form-contact .new-select__list.on {
	display: block;
}
.chm_modal_uslugi .form-contact .new-select__item span {
	display: block;
	padding: 10px 15px;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
	font-weight: 600;
}
.chm_modal_uslugi .form-contact .new-select__item span:hover {
	background: #ecf0f8;
}
.chm_modal_uslugi .form-contact .new-select:after {
	content: '';
	display: block;
	width: 25px;
	height: 25px;
	position: absolute;
	right: 9px;
	top: 5px;
	background: url('/wp-content/themes/for_oxygen/img/icn-r-chevron-selectel.svg') no-repeat right center / cover;
	opacity: 0.6;

	-webkit-transition: all .27s ease-in-out;
	-o-transition: all .27s ease-in-out;
	transition: all .27s ease-in-out;

	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.chm_modal_uslugi .form-contact .new-select.on:after {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.chm_modal_uslugi .form-contact .select {

display: block;

width: 100%;

position: relative;

margin: 0 0 10px 0;

}

.chm_modal_uslugi .form-contact .new-select {

position: relative;

border: none;

background-color: #f4f6fb;

padding: 10px 10px;

cursor: pointer;

user-select: none;

border-radius:8px;

font-size: 14px;

font-family: Roboto;

line-height: 1.15;

}

.chm_modal_uslugi .form-contact .new-select__list {

position: absolute;

top: 35px;

left: 0;

border: none;

cursor: pointer;

width: 100%;

z-index: 2;

background: #f4f6fb;

user-select: none;

}

.chm_modal_uslugi .form-contact .new-select__list.on {

display: block;

}

.chm_modal_uslugi .form-contact .new-select__item span {

display: block;

padding: 10px 15px;

border-bottom: 1px solid #ccc;

font-size: 14px;

font-weight: 600;

}

.chm_modal_uslugi .form-contact .new-select__item span:hover {

background: #ecf0f8;

}

.chm_modal_uslugi .form-contact .new-select:after {

content: '';

display: block;

width: 25px;

height: 25px;

position: absolute;

right: 9px;

top: 5px;

background: url('/wp-content/themes/for_oxygen/img/icn-r-chevron-selectel.svg') no-repeat right center / cover;

opacity: 0.6;

-webkit-transition: all .27s ease-in-out;

-o-transition: all .27s ease-in-out;

transition: all .27s ease-in-out;

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

.chm_modal_uslugi .form-contact .new-select.on:after {

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

Получилось очень симпатично, а главное просто.

Открыл для себя плагин WP Grid Builder. Попробовал его в Oxygen применить для EasyPosts и Repeater element, результат огонь. Можно выводить список записей в Oxygen, через EasyPosts или Repeater, или Woocomerce и применять к нему Facet (фильтр).

Для этого я использую такие настройки:

А также установил плагин-дополнение WP Grid Builder - Oxygen для удобства, чтобы не вставлять фильтры через шорткод, а добавлять их через соответствующие элементы.

Там задается фильтр который создается отдельно и для какого блока записей он применяется.

В настройках EasyPosts появляется соответствующее меню. Где можно указать сообщение о том, если результаты не найдены (No Results Message) и добавить анимацию, при фильтрации записей.

Но эта анимация представляет из себя плавное появление записей, поэтому я нашел решение которое эту анимацию кастомизирует и добавляет плавную прокрутку в начало записей при выборе фильтра.

Анимация записей при фильтрации записей через WP Grid Builder в Oxygen

В редакторе Oxygen нужно добавить блок Code Block, и добавить в него Javascript код:

Код следующий, пробовал его добавить через сниппет, не заработал, работает только через Code Block:

window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', onInit );

function onInit( wpgb ) {
    wpgb.facets.on( 'appended', onAppended );
}

function onAppended( posts ) {
    posts.forEach( animate );
}

function animate( post, index ) {
    post.style.opacity = 0;

    setTimeout( function() {
        requestAnimationFrame( function() {
            post.style.opacity = 1;
            post.classList.add( 'post-animation' );
        } );
		
		// это прокрутка вверх страницы по выбору фильтра до блока с ID
		const el = document.getElementById('div_block-69-1641');
		el.scrollIntoView({behavior: "smooth"});
		
    }, index * 60 );
}

window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', onInit );

function onInit( wpgb ) {

wpgb.facets.on( 'appended', onAppended );

}

function onAppended( posts ) {

posts.forEach( animate );

}

function animate( post, index ) {

post.style.opacity = 0;

setTimeout( function() {

requestAnimationFrame( function() {

post.style.opacity = 1;

post.classList.add( 'post-animation' );

} );

// это прокрутка вверх страницы по выбору фильтра до блока с ID

const el = document.getElementById('div_block-69-1641');

el.scrollIntoView({behavior: "smooth"});

}, index * 60 );

}

А затем нужно добавит CSS в любом удобном месте. Я добавляю через сниппеты следующий код CSS:

@keyframes post-animation {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translatey(0);
  }
}
.post-animation {
  animation: post-animation 0.9s ease;
}

@keyframes post-animation {

from {

opacity: 0;

transform: translateY(50px);

}

to {

opacity: 1;

transform: translatey(0);

}

.post-animation {

animation: post-animation 0.9s ease;

}

Данное решение я взял с этого сайта, но выбрал для себя CSS с простой анимацией, так как при применении более сложной анимации, у меня зависал редактор. Можно написать и свой CSS для фильтрации записей. Главное? что добавляется стиль при применении фильтра.

Если не нужна анимация каждой записи, то можно обойтись вообще просто CSS, так как при применении фильтра для блока с записями добавляется класс .wpgb-loading примерно на 1 секунду. Вот для этого класса можно прописать свой стиль появления блоков. Тем самым не будет надобности использовать Javascript, но тогда нужно будет что-то придумывать с плавной прокруткой до начала, а так это все реализовано в одном коде.

Проблемы: При активированном плагине Autoptimize данный скрипт не работает. Не помогло даже убирание всех галочек в настройках плагина оптимизации. Только его деактивация.

Довольно часто необходимо скачать сразу много файлов по списку. Есть несколько способов, первоначально я это делал через Download master, но потом я попробовал это сделать через консольную утилиту Wget. Мне очень понравилось, так как нечего лишнего, и список может быть довольно большой.

Для начала я подготавливаю список с URL. И сохраняю его в текстовый файл url.txt. На сайте https://eternallybored.org/misc/wget/ скачиваю для своей версии операционной системы утилиту wget. Распаковываю программу в папку на диске C:\wget\. Туда же ложу файл url.txt для удобства. Создаю папку downloads_file на диске C:. И через командную строку запускаю команду:

c:\wget\wget.exe -i c:\wget\url.txt --secure-protocol=auto -nc -c -P c:\downloads_file\

На экране появится ЛОГ операций. Дожидаемся окончания и проверяем в папке закачанные изображения или файлы.

Некоторые переменные программы WGET

-i и дальше путь для файла со списком URL для скачивания
--secure-protocol=auto - это используем, если на сайте защищенный протокол HTTPS, если простой HTTP, то убирайте эту команду
-nc - если файл уже есть, и он скачан полностью, то он не будет загружен заново
-c - если файл закачан не полностью, то будет продолжена закачка
-P и дальше папка, куда сохранять данные
Остальные команды можно узнать по справке c:\wget\wget.exe -h
Если нужна структура сохранения файлов как на источнике, то нужно добавить команду команду -x.

Нашел плагин Advanced Product Fields (Product Addons) for WooCommerce но еще не пробовал. Думаю, это альтернатива подобному-платному плагину. Чтобы не забыть.

Для того, что бы вывести Re-usable part в любом месте на сайте через шорткод, нужно в сниппете, через Code Snippets добавить код:

add_shortcode( 'oxygen-template', 'func_oxygen_template' );
/**
 * Add a custom shortcode for displaying a Oxygen template/reusable part.
 *
 * Sample usage: [oxygen-template id="478"]
 *
 * @param array $atts Shortcode attributes.
 * @return string HTML output of the specified Oxygen template/reusable part.
 */
function func_oxygen_template( $atts ) {

    return do_shortcode( get_post_meta( $atts['id'], 'ct_builder_shortcodes', true ) );

}

add_shortcode( 'oxygen-template', 'func_oxygen_template' );

/**

* Add a custom shortcode for displaying a Oxygen template/reusable part.

* Sample usage: [oxygen-template id="478"]

* @param array $atts Shortcode attributes.

* @return string HTML output of the specified Oxygen template/reusable part.

function func_oxygen_template( $atts ) {

return do_shortcode( get_post_meta( $atts['id'], 'ct_builder_shortcodes', true ) );

}

Для этого в нужно в Code Snippets выбрать: Запускать только на публичной части сайта

Затем нужно в том месте, где необходимо вывести этот шаблон вставить шорткод:

[oxygen-template id="627"]

1	[oxygen-template id="627"]

Где 627 это ID шаблона Oxygen.

Только стили в шаблоне Oxygen нужно прописывать для стилей, а не для ID, так как таблица стилей для идентификаторов не будет подгружаться.

Информация взята с сайта: https://wpdevdesign.com/shortcode-for-displaying-oxygen-templates-and-reusable-parts/

Нужно было с помощью Repeater создать рандомный вывод статей через Oxygen. Это делается через advanced

Но нужно было вывести всего 5 постов и убрать пагинацию в конце постов. Это делается следующим методом. Заходим в настройки и добавляем параметры.

Параетры:

post_per_page = 5 - выведет всего пять постов
no_found_rows = true - убирает строку пагинации в конце вывода постов.

Взято решение с этого сайта: https://wpdevdesign.com/how-to-remove-pagination-for-repeater-queries-in-oxygen/

При установке плагина Плагин расчёта стоимости доставки СДЭК для WooCommerce от WooDev. И если стоит плагин редактирования полей оформления заказа, такой как Checkout Fields Manager for WooCommerce или от Saphali. То при оформлении заказа вылетает ошибка: «Невозможно создать заказ, так как город получатель не определён.»

Для устранения этой ошибки, нужно добавить скрытое поле в платежный адрес с ID billing_state_id. Это можно сделать следующим кодом.

/**
 * Добавляем поле billing_state_id на страницу оформления заказа
**/ 
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function – $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
     $fields['billing']['billing_state_id'] = array(
		'type'          => 'hidden',
    	'required'  => false,
    	'clear'     => true
     );

     return $fields;
}

/**

* Добавляем поле billing_state_id на страницу оформления заказа

**/

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function – $fields is passed via the filter!

function custom_override_checkout_fields( $fields ) {

$fields['billing']['billing_state_id'] = array(

'type' => 'hidden',

'required' => false,

'clear' => true

);

return $fields;

}

Для добавления Google Tag Manager я использовал раньше на сайтах плагин Head, Footer and Post Injections. Так как нужно было разместить код сразу за тегом <body>. В WordPress версии 5.2 и выше появился хук для этого wp_body_open() . Но я использую билдер Oxygen и для него тоже есть решение, вот оно. Нужно в сниппетах прописать следующий код:

add_action( 'wp_head', 'sk_google_tag_manager1', 1 );
/**
* Код между тегами <head>
*/
function sk_google_tag_manager1() { ?>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxxxxxx');</script>
<!-- End Google Tag Manager -->
<?php }
add_action( 'ct_before_builder', 'sk_google_tag_manager2' );
/**
* Код сразу за тегом <body>.
*/
function sk_google_tag_manager2() { ?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxxxxxx"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php }

add_action( 'wp_head', 'sk_google_tag_manager1', 1 );

/**

* Код между тегами <head>

function sk_google_tag_manager1() { ?>

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-xxxxxxx');</script>

<?php }

add_action( 'ct_before_builder', 'sk_google_tag_manager2' );

/**

* Код сразу за тегом <body>.

function sk_google_tag_manager2() { ?>

height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<?php }

Теперь одним плагином меньше.

В этой статье я расскажу о том как я создал интернет-магазин по доставке еды. Сайт был настроен и запущен одним человеком. Дизайн рисовал дизайнер, синхронизацию сайта с программой кафе делал программист. Опустим расходы на дизайнера и программиста. Так как в большинстве случаев для маленького кафе достаточно настроить сайт, и чтобы заказы с него прилетали на почту или телефон оператора, а он бы уже в ручную забивал их в программе, как если бы он принимал заказ по телефону.

И так начнем.

Мне понадобилось почти 100 часов, wordpress, woocommerce и несколько платных плагинов. Стоимость готового сайта для клиента сложилась из моих потраченных часов, стоимости плагинов, и стоимость дизайнера и программиста. Но как я уже писал выше программиста и дизайнера не будем учитывать, так как не всем нужна та или иная функциональность.

Чем интересен этот кейс?

Тем что я создал новый интернет-магазин на основе старого. Т.е. если у вас уже есть готовый, наполненный магазин, то при минимум затрат и времени его можно доработать. Старый сайт по доставке пиццы был сделан в 2013 году тоже на основе woocommerce. Но для функциональности на нем было куча «костылей» прям в коде woocommerce, из-за которых не могли провести очередное обновления плагинов. Поэтому при переделке сайта, а точнее сказать создании. Правок напрямую в коде плагинов не производилось. Только хуки и дополнительные функции созданные через сниппеты.

Какие основные плагины я использовал?

Конечно же это woocommerce, и ряд разных плагинов для нужной функциональности. Некоторые конечно можно заменить, но я не заменил их по причине того, что они уже стояли и перенастраивать их заново заняло бы больше времени. Из бесплатных это:

Advanced Custom Fields
Max Mega Menu
Code Snippets
WooCommerce
Ajax add to cart for WooCommerce
Saphali Woocommerce Russian
Variation Swatches for WooCommerce
YITH WooCommerce Quick View
Оплата банковской картой (от Сбербанка)

И платные плагины:

Oxygen
Oxygen Elements for WooCommerce
Extra Variation
WP All Export Pro
WP All Import Pro
WP All Import - ACF Add-On
WP All Import - WooCommerce Add-On Pro

Это плагины, которые нужны для самого интернет магазина. Также помимо этих, на сайте используются и другие. Которые необходимы для правильной работы сайта в целом.

И теперь кратко о плагинах и для чего они нужны.

Oxygen

Это бильдер, он заменяет тему в wordpress. В нем собраны все шаблоны. Эти шаблоны можно легко экспортировать и импортировать на другой сайт через стандартный Экспорт-Импорт WordPress.

Oxygen Elements for WooCommerce

Это дополнение для Oxygen, установка этого плагина добавляет блоки от woocommerce/

Extra Variation

Это плагин дополнений. В нем настраиваются дополнения или опции для товаров, при выборе которых в карточке товара добавляется стоимость дополнения к основной стоимости товара. В этом случае это были дополнения для блюд.

WP All Export Pro и WP All Import Pro

Это плагин экспорта и импорта любых записей, товаров, кастомных записей. С этими плагинами производится массовое редактирование описаний, цен товаров и многое другое. В ручную редактировать товары, когда их много, да еще у каждого есть вариации - очень затруднительно. А благодаря этим плагинам это происходить существенно быстрее.

Advanced Custom Fields

Это плагин для кастомных полей, с его помощью создаются дополнительные поля с необходимой информацией о товаре. Которую необходимо разместить в описании товара отдельным блоком.

Max Mega Menu

Это меню для сайта, использую его, потому что оно мне нравится. Можно использовать и другой. Но в этом можно настроить красивое мобильное меню. А главное при минимуме затрат. А так же у него есть функция экспорта-импорта. Что сокращает время настройки при переносе его на другой проект.

Code Snippets

Это плагин сниппетов, заменяет стандартный файл functions.php в теме. Можно создавать свои функции и через хуки менять woocommerce и всё это правится прям в админке. Без этого плагина работа с Oxygen очень затруднительна.

WooCommerce

Это собственно плагин самого интернет-магазина, о нем уж столько расписано, что нет смысла говорит какую функцию он выполняет.

Ajax add to cart for WooCommerce

Это плагин добавления товара в корзину с карточки товара без перезагрузки страницы.

Saphali Woocommerce Russian

Это плагин для редактирования полей при оформлении заказов. Вместо него можно использовать Checkout Manager for WooCommerce мне он даже нравится больше, но в данном проекте стоял уже Saphali.

Variation Swatches for WooCommerce

Это плагин который переключения вариаций превращает в кнопки вместо выпадашек.

YITH WooCommerce Quick View

Это плагин для быстрого просмотра товара через модальное окно, работает как через аякс. В каталоге с большим количеством товаров не грузит сильно страницу, так как не создает для каждого товара отдельную карточку, как некоторые плагины.

Оплата банковской картой (от Сбербанка)

Это плагин от сбербанка, платежный шлюз. Через который осуществляются он-лайн платежи на сайте.

Переделка сайт с минимальными затратами

Изначально планировалось, просто уйти от «костылей» в коде. Чтобы WP и все плагины работали как есть от разработчика, и обновление не затрагивало функциональности, а сайт работал без перебоев в работе. Для этого была сделана копия сайта, обновил WP и плагины, установили Oxygen, чтобы дизайн собирать в нем. Но когда клиент увидел скорость работы нового сайта, он захотел сразу вложить в него больше денег и переделать дизайн.

Для себя я выбрал такой подход, что все изменения я делал в шаблонах Oxygen и все новые функции прописывал в сниппетах. Чтобы потом, просто обновить старый сайт и через экспорт-импорт перенести шаблоны и сниппеты. Но от этого в последствии отказались, просто заменили местами сайты. Хотя из-за этого подхода я теперь могу для другого проекта перенести все свои наработки на другой сайт и потратить на него в пределах 10-20 часов рабочего времени и иметь готовый интернет-магазин доработанный, чтобы было удобно покупателям.

К таким удобствам относятся:

Все категории на одной странице.
Стандартное меню через jquery библиотеку преобразуется в якоря (не нужно меню делать вручную)
Быстрый просмотр товара через модальное окно.
Быстрое редактирование шаблонов через Oxygen.
Набор собственных шорткодов для массового редактирования контактных данных.
Дополнения к товарам.
Корзина и оформление заказа на одной странице.
Удобная навигация.

Конечно эти пункты обычные, но в стандартном woocommerce этого нет, приходится через хуки делать изменения. И сейчас у меня готовые наработки которые за 4 клика можно применить к другому сайту.

Готовый набор своих наработок я могу продать или установить сам на ваш сайт. Кому интересно, обращайтесь через форму обратной связи.

Что бы запустить сайт и начать с ним работать. Я делаю следующие шаги. У каждого эти шаги свои и разные. Но мне удобно так, поэтому я расскажу о своем опыте. Коротко о шагах которых я придерживаюсь, чтобы не упустить деталей.

Домен
Хостинг.
Установка WordPress на хостинге.
Установка основных плагинов.
Настройка WordPress.
Создание основных шаблонов (шапка, футер).
Создание основных страниц.
Регистрация пользователей.
Настройка безопасности.
Настройка бэкапа.
Настройка SEO.
Регистрация и установка метрики.

Доменное имя

Регистрирую доменное имя. Если есть уже, то прошу доступы или прописать NS-сервера от хостинга на котором будет сайт.

Хостинг

Выбираю хостинг. Мой выбор сейчас остановился на ТаймВеб. Я его рекомендую всем клиентам, так как с ними работать удобно. И цена у них соответствует услугам.

Установка WordPress

На хостинг устанавливаю свежий архив https://ru.wordpress.org/download/#download-install Так как процесс установки полностью контролирую сам. Создаю базу с понятным именем. Меню прификс базы с стандартного WP_ на другой (для надежности). Создаю администратора с нестандартным именем. Захожу в админ панель и начинаю настраивать.

Основные плагины для работы с WordPress

Для удобной работы с CMS ставлю основные плагины. Все бесплатные плагины устанавливаю через админку, через поиск. Но если нужно запускать сразу много сайтов. То можно все эти плагины скачать в архив, и потом распаковывать это архив на хостинге, а в админке только активировать и обновлять если потребуется. Так существенно экономится время.

Дополнительно ставлю, если нужно будет:

Если требуется интернет магазин или каталог то ставлю:

WooCommerce

Также я ставлю платные плагины, которые облегчают работу и без которых уже трудно представить работу на сайте и его обслуживание.

Oxygen
WP All Export Pro
WP All Import Pro

Настройка WordPress

Пробегаюсь по настройкам, устанавливаю часовой пояс, ссылки ЧПУ, меняю название и описание сайта на необходимое. Если настраиваю интернет магазин, то захожу в настройки Woocommerce и настраиваю там первоначальные данные.

Основные шаблоны сайта

Так как в работе я использую Oxygen, то в нем создаю основные шаблоны. Это главный шаблон, где шапка и футер сайта, а также модальные окна которые можно открыть на любой странице сайта. Это шаблон для страниц, шаблон для записей и архивов. А также шаблон для 404 страницы. Также я завожу шаблон для главной страницы и если нужно то для отдельных страниц (такие как контакты, страница доставки и подобные). Для чего? Так удобнее переносить потом дизайн через стандартный экспорт-импрот средствами самого WordPress. Если будет необходимо перенести на другой, уже рабочий и наполненный сайт.

Основные страницы сайта

Завожу основные страницы, которые будут в меню. Если на сайте будут новости или блог, то завожу 3-4 записи. Для интернета-магазина, добавляю несколько товаров. Это для того, чтобы сразу выстроить структуру сайта и добавить меню на сайт.

Регистрация пользователей

Создаю пользователей, для того чтобы разграничить доступ. Чтобы у меня всегда оставался свой пользователь, так как иногда когда сайт начинает работать, просят что-то поправить через год. А доступы все утеряны, даже от хостинга и отдельная своя учетная запись иногда выручает, если её не удалили. Также это помогает разбираться, кто накосячил, для этого ставится плагин, который ведет историю по пользователям — кто и когда правил записи и страницы.

Последний шаг в запуске сайта

Далее до настраиваю плагины безопасности, бэкап, плагин SEO. Регистрирую и устанавливаю на сайт метрику и аналитику. И начинаю тонкую и глубокую работу с сайтом по ТЗ, верстку по макету, доделки и пожелания клиента. Процесс этот долгий, для каждого сайта индивидуальный. Поэтому некоторые части этого процесса будут описаны отдельными записями.

Чтобы на странице оформления заказа убрать итоговую таблицу, это иногда надо, когда совмещается корзина и оформление заказа на одной странице. Нужно вставить следующий код.

(далее…)

На одном из проектов, необходимо было реализовать фотогалерею по разделам. Она была реализована с помощью кастомных записей и плагина Search & Filter. Но при переводе проекта на Oxygen, плагин Search & Filter отказался работать. Поэтому переделали фильтр на основе кастомных записей и библиотеки Isotope.

(далее…)

При оформлении заказа, часто нужно вставить свои поля, но по умолчанию они не попадают в шаблон письма. Есть решение, добавляем код, который добавит нужные нам поля в письмо.

// Выводим значения полей в шаблоне письма с заказом
add_filter('woocommerce_email_order_meta_fields', 'add_cust_fields_email_order_meta_fields', 10, 3 );
function add_cust_fields_email_order_meta_fields( $fields, $sent_to_admin, $order_obj ) {
//получаем номер заказа
$o_n = $order_obj-&gt;get_order_number();

//получаем поля через get_post_meta на вывод их в письме
$fields&#91;'dostavka_tovara'] = array(
    'label' =&gt; 'Способ доставки',
    'value' =&gt; get_post_meta( $o_n, '_billing_wooccm11', true )
);
$fields&#91;'dostavka_upakovka1'] = array(
    'label' =&gt; 'Имя поля 1',
    'value' =&gt; get_post_meta( $o_n, '_additional_wooccm1', true )
);
$fields&#91;'dostavka_upakovka2'] = array(
    'label' =&gt; 'Имя поля 2',
    'value' =&gt; get_post_meta( $o_n, '_additional_wooccm2', true )
);  

return $fields; 
}

// Выводим значения полей в шаблоне письма с заказом

add_filter('woocommerce_email_order_meta_fields', 'add_cust_fields_email_order_meta_fields', 10, 3 );

function add_cust_fields_email_order_meta_fields( $fields, $sent_to_admin, $order_obj ) {

//получаем номер заказа

$o_n = $order_obj->get_order_number();

//получаем поля через get_post_meta на вывод их в письме

$fields['dostavka_tovara'] = array(

'label' => 'Способ доставки',

'value' => get_post_meta( $o_n, '_billing_wooccm11', true )

);

$fields['dostavka_upakovka1'] = array(

'label' => 'Имя поля 1',

'value' => get_post_meta( $o_n, '_additional_wooccm1', true )

);

$fields['dostavka_upakovka2'] = array(

'label' => 'Имя поля 2',

'value' => get_post_meta( $o_n, '_additional_wooccm2', true )

);

return $fields;

}

Хочу рассказать, почему именно WordPress я выбираю для сайтов. Всё просто, это движок мне нравится больше остальных, я с ним работаю с 2010 года. За это время было много сайтов созданых другими инструментами, но WordPress по сравнению с ними на порядок выше, он гораздо удобнее.

В работе с командой я выполняю роль верстальщика. Задачи по программированию лежат на программисте. Но если я собираю сайт на WordPress-е, то большинство задач я выполняю сам, не прибегая к помощи программиста. Так простые сайты, одностраничники, Landing page и простые интернет-магазины я собираю сам от начала и до конца. Если же требуется реализовать не стандартную схему работы на сайте, то тут помагает программист.

Так работая над одним проектом в bitrix, мы постоянно были привязаны к программисту, из-за чего сроки поджимали. Делая сайт на вордпрессе, такого бы не было. Но и в конце с битриксом ждала проблема, при его интеграции с 1C (а именно из-за этого его выбрал клиент), настройки постояно «ломались», каждое обновление приносило головную боль. В итоге мы поняли, что если бы сразу начали собирать сайт на WordPress+Woocommerce, такого бы не произошло. Так как для интеграции 1C с Woocommerce есть готовые плагины.

А если собирать простые интернет-магазины на WordPress+Woocommerce, так это вообще сказка, за неделю удается начать с нуля и полностью отдать клиенту готовый и рабочий магазин. С корзиной, экварингом и массовым редактированием товаров через Excel, CSV или XML.

Поэтому цикл статей по cозданию сайтов я буду посвещать только WordPress и его плагинам. По нему в сети есть куча полезной информации, которая помогает создавать очень интересные проекты.

Те кто говорит, что WP это не лучший выбор для создания сайта, что он тормозной, что он тупит. Пускай остаются при своем мнении, я же на нем создал не мало сайтов и понимаю, что сибестоимость готового проекта на WordPress в разы обходится дешевле клиенту, чем разработка подобного проекта на других «движках».

Понадобилось на одном сайте, на WordPress сделать переключение городов и разный контент для каждого города. Реализовал просто, установил плагин WT GeoTargeting — https://wordpress.org/plugins/wt-geotargeting/ В настройках прописал только город по умолчанию, в шапке сайта поставил шорткод:

[wt_geotargeting get="city"]

1	[wt_geotargeting get="city"]

Который выводил город, на этот блок повесил событие по клику, которое выводило модальное окно с выбором городов, в нем просто поставил ссылки:

<a href="?wt_city_by_default=Владивосток">Владивосток</a>,<br>
<a href="?wt_city_by_default=Спасск-Дальний">Спасск-Дальний</a>,<br>
<a href="?wt_city_by_default=Лесозаводск">Лесозаводск</a>,<br>
<a href="?wt_city_by_default=Дальнереченск">Дальнереченск</a><br><br>
<a href="?wt_geo_clean=1">Отменить выбор</a>

<a href="?wt_city_by_default=Владивосток">Владивосток</a>,<br>

<a href="?wt_city_by_default=Спасск-Дальний">Спасск-Дальний</a>,<br>

<a href="?wt_city_by_default=Лесозаводск">Лесозаводск</a>,<br>

<a href="?wt_city_by_default=Дальнереченск">Дальнереченск</a><br><br>

<a href="?wt_geo_clean=1">Отменить выбор</a>

А в том месте где нужен разный контент для разных городов, вставил шорткоды:

<?php 

echo do_shortcode('[wt_geotargeting type="title" city_show="Владивосток"]<a class="but-head-oplata" href="#1">ОПЛАТИТЬ</a>[/wt_geotargeting]'); 
	
echo do_shortcode('[wt_geotargeting type="title" city_show="Спасск-Дальний"]<a class="but-head-oplata" href="#2">ОПЛАТИТЬ</a>[/wt_geotargeting]');

?>

<?php

echo do_shortcode('[wt_geotargeting type="title" city_show="Владивосток"]<a class="but-head-oplata" href="#1">ОПЛАТИТЬ</a>[/wt_geotargeting]');

echo do_shortcode('[wt_geotargeting type="title" city_show="Спасск-Дальний"]<a class="but-head-oplata" href="#2">ОПЛАТИТЬ</a>[/wt_geotargeting]');

Описание шорткодов можно смотреть на сайте разработчиков плагина: https://web-technology.biz/cms-wordpress/plugin-wt-geotargeting-for-cms-wordpress/shortkod-wt_geotargeting/

Для товаров без указанной цены выводим сообщение «Цена по запросу»

add_filter('woocommerce_empty_price_html', 'empty_price_message');
function empty_price_message() {
	return 'Цена по запросу';
}

add_filter('woocommerce_empty_price_html', 'empty_price_message');

function empty_price_message() {

return 'Цена по запросу';

}

Для товаров с нулевой ценой выводим «Цена по запросу» вместо «Бесплатно»

function my_price_replace($price, $product) {
	if ($price == 0)  return __( 'Цена по запросу' );
	return $price;
}
add_filter( 'woocommerce_get_price_html', 'my_price_replace', 1, 2 );

function my_price_replace($price, $product) {

if ($price == 0) return __( 'Цена по запросу' );

return $price;

}

add_filter( 'woocommerce_get_price_html', 'my_price_replace', 1, 2 );

И отключаем возможность покупки товара с нулевой ценой

function make_not_purchasable( $purchasable, $product ){
	if( $product-&gt;get_price() == 0 )
		$purchasable = false;
	return $purchasable;
}
add_filter( 'woocommerce_is_purchasable', 'make_not_purchasable', 10,

function make_not_purchasable( $purchasable, $product ){

if( $product->get_price() == 0 )

$purchasable = false;

return $purchasable;

}

add_filter( 'woocommerce_is_purchasable', 'make_not_purchasable', 10,

Взято тут: https://conotes.ru/sajtostroj/wordpress/woocommerce/woocommerce-tsena-po-zaprosu.html

Столкнулся с такой проблемой. Woocommerce не сортирует товары у которого стоит статус "в наличии" или "нет в наличии". Он только сортирует по остаткам на складе. Поэтому вышел из положения так. На странице вывел все товары и те у кого статус "нет в наличии" скриптом перекинул вниз.

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 } );

add_action( 'wp_footer', function () { ?>

<?php if (is_woocommerce() && is_product_category()) : ?>

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()); то все товары не в наличии попадут наверх.

Прилепающие сообщения в Oxygen

Этот же скрипт помог в случае когда нужно было "прилипающие" сообщения вывести наверх списка. Для этого в шаблоне вывода постов Oxygen я добавил в класс следующий код

<div class='oxy-post <?php if (in_array( get_the_ID(), get_option( 'sticky_posts' ) )) {echo "sticky";}  ?>'>

1	<div class='oxy-post <?php if (in_array( get_the_ID(), get_option( 'sticky_posts' ) )) {echo "sticky";} ?>'>

А в сниппете подключил скрипт, который посты с классом sticky перекидывает наверх:

add_action( 'wp_footer', function () { ?>

	<script>
		jQuery(document).ready(function() {
			jQuery('.sticky').each(function(index, item) {
				var $this = jQuery(item);
				$this.prependTo($this.parent());
			});
		});
	</script>

<?php } );

add_action( 'wp_footer', function () { ?>

jQuery(document).ready(function() {

jQuery('.sticky').each(function(index, item) {

var $this = jQuery(item);

$this.prependTo($this.parent());

});

</script>

<?php } );

Записываем в functions.php следующий код

// Удаляем URL из формы отправки комментариев
add_filter('comment_form_default_fields', 'sheens_unset_url_field');
function sheens_unset_url_field ( $fields ) {
  if ( isset($fields['url'] ))
  unset ( $fields['url'] );
  return $fields;
}

// Удаляем URL из формы отправки комментариев

add_filter('comment_form_default_fields', 'sheens_unset_url_field');

function sheens_unset_url_field ( $fields ) {

if ( isset($fields['url'] ))

unset ( $fields['url'] );

return $fields;

}

Если не сработает, то, скорее всего, в теме есть файл шаблонов комментариев — comments.php. Тогда нужно в нем править. Закомментировать это поле с name="url".

Иногда нужно создать копию сайта, и когда размер папки с сайтом занимает большой объем, то возникают трудности с работой по ФТП через панель управления хостингом — не всё копируется. А работать через ФТП-клиент тоже не удобно, так как большой объем файлов.

Поэтому гораздо проще и быстрее это сделать через SSH-консоль командой рекурсивного копирования всего содержимого папки:

cp -r * /home/r/папка_назначения/public_html/

Эта команда скопирует содержимое папки в которой мы находимся в папку /home/r/папка_назначения/public_html/

Восстановить базу данных из дампа можно несколькими способами, это и через панель хостинга, и через MyPhpAdmin. Но иногда импорт через MyPhpAdmin завершается ошибкой, особенно когда база большого объема. Поэтому гораздо проще и быстрее развернуть дамп базы через консоль SSH.

Это можно сделать с помощью следующей команды:

mysql -h имя_хоста_DB -u имя_пользователя_DB -pпароль_DB имя_DB < путь_к_файлу_дампа_базы

Внимание: между параметром «-p» и паролем к базе данных не должно быть пробела.

Пример:

mysql -h localhost -u user -pBzzZw nameDB < dump-DB-full-05.03.2020.sql

Если дамп запакован в архив, перед разворачиванием его нужно разархивировать, это также можно сделать одной командой:

zcat dump-DB-full-05.03.2020.gz | mysql -h localhost -u user -pBzzZw nameDB

Создание дампа базы данных для переноса сайта

Иногда создать дамп через панель управления хостингом не получается, тогда его можно создать через SSH консоль.

Для этого выбираем директорию с требуемым сайтом и вводим в командную строку следующее:

mysqldump -ulogin -p dbname >dump_file.sql

login - логин для доступа к базе данных,
dbname - имя базы данных
dump_file.sql - имя создаваемого файла дампа)

Нажимаем Enter, система запросит пароль для доступа к базе данных. Если введённые данные верны, то начнётся создание дампа. По его окончании увидим строку для ввода команд. Дамп готов. Файл дампа будет расположен в текущей директории, имя файла dump_file.sql.

Ultimate Member — плагин для создания сообществ и пользовательских профилей в WordPress. https://ultimatemember.com/ и https://wordpress.org/plugins/ultimate-member/. Альтернатива: плагин WP-Recall https://wordpress.org/plugins/wp-recall/ (Ultimate Member проще и понятнее)

Search & Filter — плагин для организации своего поиска на сайте и фильтра рубрик и кастомных записей. https://ru.wordpress.org/plugins/search-filter/

WPC Variations Radio Buttons for WooCommerce — плагин для удобного выбора вариативных товаров. https://ru.wordpress.org/plugins/wpc-variations-radio-buttons/

Чтобы изменить URL адрес WordPress, Вы должны прописать этот код в файл wp-config.php:

define('WP_HOME','http://example.com');
define('WP_SITEURL','http://example.com');

1 2	define('WP_HOME','http://example.com'); define('WP_SITEURL','http://example.com');

В файле functions.php прописываем следующий код:

// отключим Гутенберг
if( 'disable_gutenberg' ){
	add_filter( 'use_block_editor_for_post_type', '__return_false', 100 );
	remove_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
	add_action( 'admin_init', function(){
		remove_action( 'admin_notices', [ 'WP_Privacy_Policy_Content', 'notice' ] );
		add_action( 'edit_form_after_title', [ 'WP_Privacy_Policy_Content', 'notice' ] );
	} );
}

// отключим Гутенберг

if( 'disable_gutenberg' ){

add_filter( 'use_block_editor_for_post_type', '__return_false', 100 );

remove_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );

add_action( 'admin_init', function(){

remove_action( 'admin_notices', [ 'WP_Privacy_Policy_Content', 'notice' ] );

add_action( 'edit_form_after_title', [ 'WP_Privacy_Policy_Content', 'notice' ] );

} );

}

При работе с плагином Woocommerce на сайте часто требуется изменять вид отображения карточек товара, корзины и многое другое.

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

Хуки (hooks)

(далее…)

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

Простое всплывающее окошко можно сделать с помощью CSS и jQuery.

Для это добавляем код html на сайт:

<div class="wrap">
    <div class="modal"></div>
    <div class="header">
        <a href="#">режим работы</a>
    </div>
</div>

<a href="#">режим работы</a>

</div>

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

$('a').on('click', function(e){
    e.preventDefault();
    $('.modal').toggleClass('active');
});

$('a').on('click', function(e){

e.preventDefault();

$('.modal').toggleClass('active');

});

И прописываем стиль для появления этого окошка.

.wrap {
    width:500px;
    margin: 0 auto;
    height:400px;
    background:red;
    position:relative;
}
.header {
    background:green;
    height:50px;
}
.modal {
    background:blue;
    height:200px;
    width:180px;
    position:absolute;
    right:10px;
    top:-210px;
    -webkit-transition: top 0.5s;
    -moz-transition: top 0.5s;
    -o-transition: top 0.5s;
    transition: top 0.5s
}
.modal.active {
    top:10px;
}

.wrap {

width:500px;

margin: 0 auto;

height:400px;

background:red;

position:relative;

}

.header {

background:green;

height:50px;

}

.modal {

background:blue;

height:200px;

width:180px;

position:absolute;

right:10px;

top:-210px;

-webkit-transition: top 0.5s;

-moz-transition: top 0.5s;

-o-transition: top 0.5s;

transition: top 0.5s

}

.modal.active {

top:10px;

}

Источник кода взят тут: http://jsfiddle.net/iiil/7Ly6y/3/

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

С такой проблемой я столкнулся на сайте застройщика, квартиры были выполнены кастомными записями. А нужно было несколько фидов в XML-формате для разных сервисов. И вот как я поступил, покажу на примере одного фида. Я же по подобию делал их несколько.

В файл functions.php вставляю следующий код:

// Yandex.Realty RSS
add_action('init', 'AddYandexRSS');
function AddYandexRSS(){
  add_feed('yandex-realty.xml', 'ProceedYandexRealtyRSS');
}
function ProceedYandexRealtyRSS() {
  get_template_part('rss-realty');
}

// Yandex.Realty RSS

add_action('init', 'AddYandexRSS');

function AddYandexRSS(){

add_feed('yandex-realty.xml', 'ProceedYandexRealtyRSS');

}

function ProceedYandexRealtyRSS() {

get_template_part('rss-realty');

}

Описание: yandex-realty.xml это адрес фида https://название_сайта/yandex-realty.xml/ и rss-realty — это название шаблона который нужно положить в папку с темой сайта (rss-realty.php).

В файле rss-realty.php вставляем цикл WP_Query который берет из кастомных записей, кастомные поля. Для примера приведу готовый код Яндекс.Недвижимость.

<?php header('Content-Type: '.feed_content_type('rss-http').'; charset='.get_option('blog_charset'), true);
echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?>'; 
?>
<realty-feed xmlns="http://webmaster.yandex.ru/schemas/feed/realty/2010-06">
<generation-date><?= date('c'); ?></generation-date>

<?php
// задаем нужные нам критерии выборки данных из БД
$args = array(
	'post_type' => 'flat',
	'posts_per_page' => -1,
	'meta_query' => array(
	array(
		'key'     => 'flat_reservation',
		'value'   => 1,
		'compare' => '!=',
    ),
  ),
);

$query = new WP_Query( $args );
// Цикл
if ( $query->have_posts() ) {
	while ( $query->have_posts() ) {
		$query->the_post();
?>

<offer internal-id="<? the_ID(); ?>">
<type>продажа</type>         
<property-type>жилая</property-type>         
<category>квартира</category>
<creation-date><?= date('c'); ?></creation-date>   
<location>             
  <country>Россия</country>             
  <locality-name>Город</locality-name>             
  <address>Улица ул., д. номер</address> 
  <apartment><? echo get_field( 'flat_number', get_the_ID() ); ?></apartment> 
</location>         
<sales-agent>
<category>agency</category>             
  <phone>+71111111111</phone>
</sales-agent>     
<price>     
  <value><? echo get_field( 'flat_price', get_the_ID() ); ?></value>        
  <currency>RUR</currency> 
</price>
<area>     
  <value><? echo get_field( 'flat_area', get_the_ID() ); ?></value>     
  <unit>кв. м</unit> 
</area> 
<? if ( get_field( 'flat_rooms', get_the_ID() ) == 'студия' ) { ?>
<studio>да</studio>
<? }
else {
?>
<rooms><? echo preg_replace("/[^0-9]/", '', get_field( 'flat_rooms', get_the_ID() )); ?></rooms> 
<rooms-offered><? echo preg_replace("/[^0-9]/", '', get_field( 'flat_rooms', get_the_ID() )); ?></rooms-offered>
<? } ?>

<floor><? echo get_field( 'flat_level', get_the_ID() ); ?></floor>

</offer>
<?php		
	}
} else {
	// Постов не найдено
}
// Возвращаем оригинальные данные поста. Сбрасываем $post.
wp_reset_postdata();
?>

</realty-feed>

<?php header('Content-Type: '.feed_content_type('rss-http').'; charset='.get_option('blog_charset'), true);

echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?>';

<realty-feed xmlns="http://webmaster.yandex.ru/schemas/feed/realty/2010-06">

<generation-date><?= date('c'); ?></generation-date>

<?php

// задаем нужные нам критерии выборки данных из БД

$args = array(

'post_type' => 'flat',

'posts_per_page' => -1,

'meta_query' => array(

array(

'key' => 'flat_reservation',

'value' => 1,

'compare' => '!=',

);

$query = new WP_Query( $args );

// Цикл

if ( $query->have_posts() ) {

while ( $query->have_posts() ) {

$query->the_post();

<type>продажа</type>

<property-type>жилая</property-type>

<category>квартира</category>

<creation-date><?= date('c'); ?></creation-date>

<country>Россия</country>

<locality-name>Город</locality-name>

<address>Улица ул., д. номер</address>

</location>

<sales-agent>

<category>agency</category>

</sales-agent>

<price>

</price>

<area>

</area>

<? if ( get_field( 'flat_rooms', get_the_ID() ) == 'студия' ) { ?>

<? }

else {

<rooms-offered><? echo preg_replace("/[^0-9]/", '', get_field( 'flat_rooms', get_the_ID() )); ?></rooms-offered>

<? } ?>

</offer>

<?php

}

} else {

// Постов не найдено

}

// Возвращаем оригинальные данные поста. Сбрасываем $post.

wp_reset_postdata();

</realty-feed>

Для WordPress плагин Elementor выполняет большинство задач не прибегая к ковырянию в коде. Но всё же есть моменты, которые Elementor не выполняет без Хуков.

Так виджет AE Post Blocks от плагина AnyWhere Elementor Pro выводит записи именно те которые прописываются в фильтре

И если этот виджет применить для шаблона архива в Elementor, то при переходе по таксономиям (рубрики, теги) записи не фильтруются. Чтобы это исправить есть один хук.

В виджете, в поле Query Filter прописываем название пользовательского фильтра: my_super_filter (можно название любое).

В файл funtions.php для активной темы прописываем следующий код:

function my_super_filer_function($query_args){
	$queried_object = get_queried_object(); // Получаем ID тега
	$term_id = $queried_object->term_id; // Получаем ID тега
	$term = get_term($term_id); // Получаем ID тега
	$query_args[$queried_object->taxonomy] = $term->slug; // фильтруем по таксономии и тегу через SLUG

    return $query_args;
}
add_filter('my_super_filter', 'my_super_filer_function');

function my_super_filer_function($query_args){

$queried_object = get_queried_object(); // Получаем ID тега

$term_id = $queried_object->term_id; // Получаем ID тега

$term = get_term($term_id); // Получаем ID тега

$query_args[$queried_object->taxonomy] = $term->slug; // фильтруем по таксономии и тегу через SLUG

return $query_args;

}

add_filter('my_super_filter', 'my_super_filer_function');

И после этого записи фильтруются по рубрикам. Так же можно и фильтровать по тегам. Этот же хук можно применить для виджета — Записи, который входит в плагин Elementor Pro. Для этого во вкладке Запрос, есть поле ID запроса.

О работе этого хука я узнал из документации к AnyWhere Elementor Pro.

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

.menu.fixed {
    position: fixed;
    top: 0px;
}

.menu.fixed {

position: fixed;

top: 0px;

}

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

<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>

jQuery(window).scroll(function() {

var the_top = jQuery(document).scrollTop();

if (the_top > 135) {

jQuery('.menu').addClass('fixed');

}

else {

jQuery('.menu').removeClass('fixed');

}

});

</script>

Так можно создавать дополнительный блок со свойством display: none; а при достижении прокрутки до определенного расстояния появляться. Таким образом можно создать разные шапки, основную и дополнительную (минимальную), которая будет прилипать при скролле сайта вниз.

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

$(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 слоя куда подгрузить текст
	});		
});

$(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

<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>

<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>

Код скрипта

<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>

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.

Решение нашел такое:

Код CSS для стилизации srollbar

Для вставки IP-камер на сайт мы сделали следующее

Анимация записей при фильтрации записей через WP Grid Builder в Oxygen

Некоторые переменные программы WGET

Чем интересен этот кейс?

Какие основные плагины я использовал?

Oxygen

Oxygen Elements for WooCommerce

Extra Variation

WP All Export Pro и WP All Import Pro

Advanced Custom Fields

Max Mega Menu

Code Snippets

WooCommerce

Ajax add to cart for WooCommerce

Saphali Woocommerce Russian

Variation Swatches for WooCommerce

YITH WooCommerce Quick View

Оплата банковской картой (от Сбербанка)

Переделка сайт с минимальными затратами

Доменное имя

Хостинг

Установка WordPress

Основные плагины для работы с WordPress

Настройка WordPress

Основные шаблоны сайта

Основные страницы сайта

Регистрация пользователей

Последний шаг в запуске сайта

Прилепающие сообщения в Oxygen

Создание дампа базы данных для переноса сайта

Хуки (hooks)

Код HTML

Код скрипта

Задать вопрос