add_action('wp_enqueue_scripts', 'front_scripts');
function front_scripts(){
	// add jQuery to footer and from Google
	global $google_jQuery;
	if(!$google_jQuery) {
		$google_jQuery = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';

		wp_deregister_script('jquery-core');
		wp_register_script('jquery-core', $google_jQuery, false, null, true);

 		wp_deregister_script('jquery');
		wp_register_script('jquery', false, array('jquery-core'), null, true);
	}

	// add ajaxurl
	global $ajaxurl;
	if(!$ajaxurl){
		$ajaxurl = admin_url('admin-ajax.php');
		wp_localize_script( 'jquery', 'ajaxurl', admin_url('admin-ajax.php'));
	}
}

Последняя версия jQuery от Google

В этом скрипте я также добавил сразу подключение ajaxurl.

Этот скрипт для фронтенда, если нужен для админки — добавляем:

add_action('admin_enqueue_scripts', 'admin_scripts');

А теперь немного пред истории:

В вордпресе есть локальная версия jQuery, также и все остальные сопутствующие скрипты, дело это хорошее, но все-же лучше всего подключать библиотеку jQuery WordPress лежащую в гугле. Перенаправить или заменить стандартный скрипт джейквери (jQuery), лежащий в ядре вп или Вордпресс, не достаточно, потому что там немного сложный механизм. Есть 2 названия одного и того-же подключения стандартного скрипта jQuery в вродпресе: jquery и jquery-core. Дело в том что при вызове первого скрипта происходит ссылка на второй. В ядре мы можем найти следующий код который немного это объяснит:

if ( $handle === 'jquery' )
    $handle = 'jquery-core';

Немного странно… Вообщем чтобы в wp jQuery подключить из гугла правильно, приходится немного попотеть. Получается если нужно дописать какой-то скрипт, типа как ajax url используя функцию:

wp_localize_script( 'jquery', 'ajaxurl', admin_url('admin-ajax.php'));

В первом параметре этой функции мы говорим что скрипт должен запуститься сразу перед подключением скрипта ‘jquery’, но так как мы видели из кода выше скрипт всеравно будет искать ‘jquery-core’. Это означает что он будет подключаться не там где надо или если мы переписали или отменили ‘jquery-core’ то он вообще не подключится.

Подключить jQuery WordPress из CDN Google

Чтобы решить эту проблему я методом долгих проб и ошибок нашел лучшее решение этой проблемы.

Итак задача:

Подключить jQuery WordPress из CDN Google, но чтобы при этом работали оба варианта подключения jquery и jquery-core. И также чтобы работало подключение других остальных скриптов.

Решение:

1. Сначала обнуляем jquery и jquery-core

wp_deregister_script('jquery-core'); 
wp_deregister_script('jquery');

2. Затем регистрируем ‘jquery-core’ скрипт

wp_register_script('jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true);

3. Регистрируем ‘jquery’ скрипт как ссылку на первый

wp_register_script('jquery', false, array('jquery-core'), null, true);

Вот и вся фишка моего решения. Теперь, при обращении к jquery или jquery-core, будет вызываться, все равно, скрипт подключенный в jquery-core.

Если кто знает лучшее решение, напишите его в комментариях.

Возможно кому интересно — на днях обновил статью на тему: как установить WordPress с помощью терминала на маке.

Сообщение Google jQuery WordPress — как правильно подключить появились сначала на Wiki | PWODEV.

Отследить клик за пределами определенного элемента пригодится например чтобы закрыть открывшееся меню, или закрыть попап (close popup by outside click). Либо для любых других ваших задач.

Как реализовать это? Как отследить клик вне элемента?

jQuery(document).on('click',function (e) {
 var el = '.element';
 if (jQuery(e.target).closest(el).length) return;
 // дальше пишем код который нужно выполнить по клику вне элемента
});

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

Сообщение Клик вне элемента — jQuery click outside появились сначала на Wiki | PWODEV.

Очень полезный плагин для того чтобы реализовать сайт в полный экран с прокруткой до блока.

Документация на русском языке

Как работает Full page плагин:

1. Для начала скачиваем последнюю версию плагина с официального сайта.

2. Нас интересует 2 файла — jquery.fullpage.min.css и jquery.fullpage.min.js

3. Кладем файлы в нужные папки и подключаем скрипты к нашему сайту:

4. Далее в коде где будем использовать создаем такую структуру

<div class="scroll_slider">
	<div class="section" data-anchor="slide1">
		<div class="slide slide1">1</div>
		<div class="slide slide2">2</div>
	</div>
	<div class="section" data-anchor="slide2">
		<div class="slide slide1">2</div>
	</div>
</div>

5. И последнее подключаем скрипт к контейнеру:

jQuery(document).ready(function () {
     jQuery('.scroll_slider').fullpage();
});

Готово, наш скрипт работает.

Если нужно поменять селекторы контейнеров делаем это так:

jQuery('.scroll_slider').fullpage({
 sectionSelector: '.section',
 slideSelector: '.slide'
});

Полный список параметров:

jQuery(document).ready(function() {
 jQuery('.scroll_slider').fullpage({
 //Navigation
 menu: '#menu',
 lockAnchors: false,
 anchors:['firstPage', 'secondPage'],
 navigation: false,
 navigationPosition: 'right',
 navigationTooltips: ['firstSlide', 'secondSlide'],
 showActiveTooltip: false,
 slidesNavigation: false,
 slidesNavPosition: 'bottom',

 //Scrolling
 css3: true,
 scrollingSpeed: 700,
 autoScrolling: true,
 fitToSection: true,
 fitToSectionDelay: 1000,
 scrollBar: false,
 easing: 'easeInOutCubic',
 easingcss3: 'ease',
 loopBottom: false,
 loopTop: false,
 loopHorizontal: true,
 continuousVertical: false,
 continuousHorizontal: false,
 scrollHorizontally: false,
 interlockedSlides: false,
 dragAndMove: false,
 offsetSections: false,
 resetSliders: false,
 fadingEffect: false,
 normalScrollElements: '#element1, .element2',
 scrollOverflow: false,
 scrollOverflowReset: false,
 scrollOverflowOptions: null,
 touchSensitivity: 15,
 normalScrollElementTouchThreshold: 5,
 bigSectionsDestination: null,

 //Accessibility
 keyboardScrolling: true,
 animateAnchor: true,
 recordHistory: true,

 //Design
 controlArrows: true,
 verticalCentered: true,
 sectionsColor : ['#ccc', '#fff'],
 paddingTop: '3em',
 paddingBottom: '10px',
 fixedElements: '#header, .footer',
 responsiveWidth: 0,
 responsiveHeight: 0,
 responsiveSlides: false,
 parallax: false,
 parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},

 //Custom selectors
 sectionSelector: '.section',
 slideSelector: '.slide',

 lazyLoading: true,

 //events
 onLeave: function(index, nextIndex, direction){},
 afterLoad: function(anchorLink, index){},
 afterRender: function(){},
 afterResize: function(){},
 afterResponsive: function(isResponsive){},
 afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
 onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
 });
});

Если у вас есть дополнения или новые идеи к этой статье, пишите их в комментариях. Также для того чтобы написать на нашем сайте свою статью — у нас открыта регистрация по ссылке http://wiki.pwodev.com/wp-admin

Сообщение Full page jQuery plugin scrolling появились сначала на Wiki | PWODEV.

Решение:

Отключить событие перехода по ссылке по клику на ссылку очень просто, достаточно в самом начале функции обработчика события клика вставить следующий код:

jQuery('a').on('click', function (e) {
    e.preventDefault(); // этот код предотвращает стандартное поведение браузера по клику
    // остальной код
});

Теперь браузер не будет переходить по ссылке.

Сообщение preventDefault или как отменить переход по ссылке появились сначала на Wiki | PWODEV.

• Swipe — пролистывание как слайд, обычно используется для открытия меню жестом, провести пальцем по экрану слева на право чтобы открылось меню.
• hold — событие долгому длинному нажатию

Для того чтобы отследить жесты как на мобильном устройстве iPhone или Android или любой другой mobile, проще всего подключить библиотеку jquery.touchSwipe.min.js. Дальше привязываем событие к нужному нам элементу:

jQuery('body').swipe({
 swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
 console.log(direction);
 }
});

Теперь мы можем дополнять наш сайт жестами.

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

jQuery('body').swipe( {
    swipeStatus:function(event, phase, direction, distance, duration, fingerCount, fingerData, currentDirection)
    {
        if (phase=="start"){
            // сработает в начале swipe
        } 
        if (phase=="end"){ 
            //сработает через 20 пикселей то число которое выбрали в threshold
            if (direction == 'left') {
                //сработает при движении влево
            }
            if (direction == 'right') {
                //сработает при движении вправо
            }
            if (direction == 'up') {
                //сработает при движении вверх
            }
            if (direction == 'down') {
                //сработает при движении вниз
            }
 },
 triggerOnTouchEnd:false,
 threshold:20 // сработает через 20 пикселей
});

Параметры:

event — стандартный ивент, тут можно посмотреть по какому элементу сработал скрипт

jQuery(event.target)

phase

• start — указывает начальную фазу события касания
• move — указывает на событие перемещения
• end — указывает на завершение события
• cancel — указывает на отмену события

direction

• left — указывает на передвижение влево
• right — указывает на передвижение вправо
• up — указывает на передвижение вверх
• down — указывает на передвижение вниз
• in — указывает на событие помещения в обьект
• out — указывает на событие выхода из обьекта

distance — расстояние которое пользователь пролистал

duration — продолжительность пролистывания в миллисекундах

fingerCount — количество пальцев при таче

fingerData — координаты пальцев при событии тач

currentDirection — текущее направление движения тача

Сайт библиотеки плагина и документации к плагину

Сообщение jQuery touch swipe или как отследить жесты появились сначала на Wiki | PWODEV.