Архивы Верстка сайтов

Отключить редактор блоков Гутенберг

В файле 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 полезные хуки

Верстка сайтов / hook, woocommerce, wordpress, Хук

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

/* убрать ссылку с карточки товара */
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() . " Ч ";
}

/* убрать ссылку с карточки товара */

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() . " Ч ";

}

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

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

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

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

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

</div>

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

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

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

Верстка сайтов / hook, wordpress, Хук

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

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

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

Верстка сайтов / Elementor, html, jQuery, wordpress

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

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

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

Верстка сайтов / html, javascript, jQuery, wordpress

Чтобы блок с меню (или шапка сайта целиком) при прокрутке страницы вниз — скрывался, а потом прилипал сверху сайта, нужно присвоив блоку стиль и задать ему свойство 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>

Так …

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

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

Верстка сайтов / html, javascript, jQuery, wordpress

Если необходимо на сайте в 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 для WordPress

Верстка сайтов / html, javascript, jQuery, slider, wordpress, слайдер

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

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

/* инициализация самого слайдера */

jQuery(document).ready(function(){

jQuery('.gallery').bxSlider({

auto: true,

controls: false,

slideWidth: 400

});

</script>

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

<div class="gallery">
	<div>Контент или картинка 1</div>
	<div>Контент или картинка 2</div>
	<div>Контент или картинка 3</div>
	<div>Контент или картинка 4</div>
</div>

или шорткод стандартной галереи WordPress

[gallery link="none" ids="31,32,33"]

<div>Контент или картинка 1</div>

<div>Контент или картинка 2</div>

<div>Контент или картинка 3</div>

<div>Контент или картинка 4</div>

</div>

или шорткод стандартной галереи WordPress

[gallery link="none" ids="31,32,33"]

Опции …

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

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

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

Часто требуется выводить блоки, чтобы они были одинаковой высоты и сами подстраивались под содержимое. Для этого вставляем следующий код Код 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.