Вновь по теме JS, правильному, или лучше сказать – целесообразной регистрации и подключении скриптов… По этому поводу много писано-переписано букв в сети, однако, и у себя в блоге я уделяю этой теме многие посты, ведь вопрос-то оч. важный! потому как от ловкого использования функционала js, jQuery напрямую зависит то пресловутое обстоятельство скоростей загрузки страниц сайта! более того, чтобы завязанный на js функционал отрабатывал чётко и правильно, без перегрузок…
По разделам текста ниже будут даны примеры, изучив которые, вы всегда добьётесь поставленных целей в использовании js на сайте. Ни от каких скриптов не придётся отказываться ввиду каких-то багов – главное, подходить к решению задач, опираясь хотя бы на какие-то базовые знания…
Так что Подписывайтесь на канал Телеграм, рассказывается запросто о Вордпресс!..
- Как подключить jQuery к Вордпресс
- функции wp_enqueue_script() и wp_register_script
- загружаем базовый скрипт WordPress с другого адреса (источника)
- функция wp_deregister_script()
- как подключить к Вордпресс другие скрипты – возможна организация подгрузки только на указанных страницах
- как удалить из ссылок исходного кода страницы сайта версии скриптов .js и стилей style.css
- пример использования JS:
главное правило:
jQuery не нужно несколько раз подключать в коде сайта!! Бессмысленно и тяжело… к тому же не исключены ошибки.
Если покупаете шаблон, то непременно тестируйте на предмет правильной организации JS функционала.
Как подключить jQuery к Вордпресс
Прежде окончательного решения подключать jQuery, целесообразно открыть исходный HTML код страницы ( Ctrl+U ) и доподлинно убедимся в том, что jQuery УЖЕ не подключен (например, каким-то плагином, либо вы сами ранее его уже подключали в теме).
в плане полезного для владельцев магазинов,и администраторов: Отключаем подгрузку стилей, скрипов для страниц, не относящихся к Wooсommerce
функции 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 должна быть загружена раньше зависимого от неё кастомного скрипта!..
взгляните на фотку ниже: играя приоритетами, возможно поменять местами (выше/ниже) строки!
Как эпилог:
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];
}
пример использования JS:
Кнопка скопировать текст, ссылку – на чистом JS
на этом пока что всё…
…и теперь возможно посмотреть видео по работе с условными тегами WP (на примере закрытия страниц пагинации в noindex,follow).
…либо о том, как правильно закомментировать код js, php и css и пр.
mihalica.ru !
Михаил ATs -