Ваш путь: Главная » Сниппеты, хаки, функции » текущая страница

! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета

Здравствуй всегда, читатель !
написано: — 
отредактировано: 2020-07-05
издатель: в теме: Сниппеты, хаки, функции  пост видели: 80
Запросто с WordPress — создание сайтов ATs media

Как правильно зарегистрировать JS файл — подключение JS jQuery

Вновь по теме JS, правильному, или лучше сказать — целесообразной регистрации и подключении скриптов… По этому поводу много писано-переписано букв в сети, однако, и у себя в блоге я уделяю этой теме многие посты, ведь вопрос-то оч. важный! потому как от ловкого использования функционала js, jQuery напрямую зависит то пресловутое обстоятельство скоростей загрузки страниц сайта! более того, чтобы завязанный на js функционал отрабатывал чётко и правильно, без перегрузок…

По разделам текста ниже будут даны примеры, изучив которые, вы всегда добьётесь поставленных целей в использовании js на сайте. Ни от каких скриптов не придётся отказываться ввиду каких-то багов — главное, подходить к решению задач, опираясь хотя бы на какие-то базовые знания…

Подписывайтесь на канал Телеграм, рассказывается запросто о Вордпресс!


 

 

 

 

 

главное правило:

jQuery не нужно несколько раз подключать в коде сайта!! Бессмысленно и тяжело… к тому же не исключены ошибки.

Если покупаете шаблон, то непременно тестируйте на предмет правильной организации JS функционала.

 

 

 

 

Как подключить jQuery к Вордпресс

 

 

 

 

Прежде окончательного решения подключать jQuery, целесообразно открыть исходный HTML код страницы ( Ctrl+U ) и доподлинно убедимся в том, что jQuery УЖЕ не подключен (например, каким-то плагином, либо вы сами ранее его уже подключали в теме).

 

 

 

 

функции wp_enqueue_script() и  wp_register_script

 

 

 

 

Очень желательно, все скрипты для сайта на Вордпресс регистрировать при помощи функции wp_register_script и загружать соответственно, используя функцию wp_enqueue_script() — фильтр init лучше не использовать, либо использовать в том случае, если чётко понимаете цели.

 

 

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

 

 

 

Как организовать подключения js скриптов в файлах шаблона — событие wp_footer — без перегрузок!..

 

 

Использование функции (её аргументации):

 

 

 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

 

 

 

 

…переменные в себя включают:

 

$handle — (обязательный — строка) ярлык, уникальное имя скрипта — прописывать в нижнем регистре, возможно использовать параметры запроса: name?v=2.2 — имя и запрос (?v=2.2). — можно прямо указать системе версию подключаемого скрипта;

 

$src — (строка) путь к скрипту — URL /js/jquery-1.12.4.min.js

 

определение урла динамически!

 

Для плагинов: plugins_url()

 

Для тем: get_template_directory_uri()

 

По умолчанию: ' '

 

 

$deps — массив скриптов — зависимости загружаемого скрипта — по умолчанию: array();

 

$ver — версия — по умолчанию: false;

 

$in_footer — подключение и загрузка скрипта в футере (подвал) — по умолчанию: false.

 

По умолчанию (как правило) скрипты подключаются в <head>.

Однако, многие веб мастера привыкли (преследуя призрачную мечту сокращение визуального времени загрузки страницы)) подключать JS скрипты в футер.

Если казать in_footer (в данном случае это равно true),  то подключение будет при вызове wp_footer(). место перед </body>.

 

 

 

 

к оглавлению

загружаем базовый скрипт WordPress с другого адреса (источника)

 

 

 

 

В ядре WordPress уже существуют некоторые современные библиотеки jQuery, — их возможно, скажем так, подключать/отключать…

 

Однако бывают, и частенько бывают такие ситуации, когда вместо библиотеки jQuery из арсенала WordPress, требуется подключить иную копию, к примеру с CDN.

 

В этом случае поможет данный ниже код, поместите его в файл functions.php активной темы (или какой-то созданный для этого файл или плагин):

 

 

 

 

к оглавлению

функция wp_deregister_script()

 

 

 

 

Перед тем как подключить заместо имеющегося иной скрипт, нужно дерегистрировать прежний jQuery:

 

 

wp_deregister_script('jquery');

 

 

…и подключить другой /аналогичный или не совсем аналогичный/ скрипт (например, jQuery 1.7.2).

 

 

…все эти команды воедино в коде ниже:

 

 

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 11 );
function my_scripts_method() {
wp_deregister_script( 'jquery' ); //дерегистрируем прежний скрипт
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
wp_enqueue_script( 'jquery' );
}

 

 

 

 

к оглавлению

как подключить к Вордпресс другие скрипты — возможна организация подгрузки только на указанных страницах

 

 

 

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

 

 

А чем интересен код данный ниже!!?

 

 

…а тем, что регистрацию, либо банальное подключение того или иного скрипта возможно обусловить только на указанной странице (подробнее об условиях WP читать по этим ссылкам).

 

 

Посмотрим на примере известной библиотеки jquery-1.12.4.min.js

 

 

Подключаем так:

 

 

 

/*регистрируем и подключаем JS*/
add_action('wp', 'ats_script_where_it_nece');
function ats_script_where_it_nece() {
//if (!is_page(array('id','id'))) // условия для требуемых страниц по ID
add_action( 'wp_enqueue_scripts', 'ats_scripts_method' );
}
function ats_scripts_method() {
//$script_url = plugins_url( '/js/jquery-1.12.4.min.js', __FILE__ ); // или get_template_directory_uri()
$script_url = wp_enqueue_script('atsnumscript', get_template_directory_uri() . '/js/jquery-1.12.4.min.js', array(), null, true );
wp_enqueue_script('atsnumscript', $script_url, array('atsnumscript') ); // можно в array подгрузить штатный скрипт scriptaculous
}
/*регистрируем и подключаем JS*/

 

 

 

Или, к примеру, регистрируем и подключаем свои кастомные скрипты:

 

 

 

можно, конечно, в некоторых случаях подключить и напрямую по типу: <script>function скрипт</script> но это неэстетичность, и однажды, в один прекрасный момент сайт может лечь от посыпавшихся ошибок!

 

 

 

…однако, логичнее подключиться в таком образе:

 

 

/*регистрируем и подключаем общий файл JS*/
add_action('wp_enqueue_scripts', 'js_blocs_func', 11 ); //
function js_blocs_func() {
wp_enqueue_script('blocs', get_template_directory_uri() . '/js/name.js', array(), null, true ); // общий файл JS
wp_enqueue_script('back', get_template_directory_uri() . '/js/name2.js', array(), null, true ); // фин true в подвале
// правила: wp_register_script( $handle, $src, $deps, $ver, $in_footer );
}
/*регистрируем и подключаем общий файл JS*/

 

 

 

Приоритет в экшн 11 — пример. всего лишь пример.

 

 

 

…из-за неверного подключения библиотек, скриптов — функционал отрабатывает с ошибками.!. либо вовсе не работает.

Как правило — библиотека jQuery должна быть загружена раньше зависимого от неё кастомного скрипта!..

 

 

 

взгляните на фотку ниже: играя приоритетами, возможно поменять местами (выше/ниже) строки!

 

 

 

регистрация js

 

 

 

 

Как эпилог:

 

 

WordPress как и многие веб организации располагает API. в частности возможно, при регистрации скрипта, указать его зависимости от того или иного.

 

К примеру, код показанный ниже, указывает WP на то, чтобы перед пользовательским скриптом custom_script.js (какой-нить карусели, спойлера и т.п.)  была загружена библиотека jQuery: — это для того, как и говорилось выше, чтобы был порядок подключений, но не каша.

 

 

add_action('wp_enqueue_scripts', 'my_scripts_method');
function my_scripts_method() {
    wp_enqueue_script('custom-script',
    get_template_directory_uri() . '/js/custom_script.js', // путь к фалу в теме
    array('jquery')
    );
}

 

 

 

 

 

к оглавлению

как удалить из ссылок исходного кода страницы сайта версии скриптов .js и стилей style.css

 

 

 

 

пример, как выглядит отображение версии: /wp-includes/css/min.min.css?ver=4.9 или типа такого /wp-includes/js/comment-reply.min.js?ver=4.9

 

 

 

add_filter( 'script_loader_src', '_remove_script_version' );//удалим прицеп версий js
add_filter( 'style_loader_src', '_remove_script_version' );//удаляем прицеп версии стилей
function _remove_script_version( $src ){
	$parts = explode( '?', $src );
	return $parts[0];
}

 

 

 

 

на этом пока что всё…

 

 

 

…и теперь возможно посмотреть видео по работе с условными тегами WP (на примере закрытия страниц пагинации в noindex,follow).

 

 

 

 

 

…либо о том, как правильно закомментировать код js, php и css и пр.

 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !



Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...




Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
Статьи по теме:


смотреть ещё статьи в теме: Сниппеты, хаки, функции

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©

 необходимо принять правила конфиденциальности