Harrix Блог

  • Списки статей
    • Все статьи
    • IT
    • Qt
    • C++
    • Сложение двух чисел
    • Web программированиe
    • FAQ
    • Latex
    • Установка программ
    • Мифы
    • Видео
    • Про фото
  • Проекты
  • Harrix.org
  • RSS
  • Контакты

jQuery не работает в WordPress

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

08.01.2016 5 комментариев 10 660 просмотров

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

Целый день, блин, потратил на поиск небольшой особенности работы WordPress. Целый день, Карл! Может, это истина в последней инстанции, которую все знают, но я ничего не находил по теме.

Итак, был у меня вот такой код jQuery:

1
2
3
4
5
6
7
8
9
10
<script type='text/javascript'>
$(document).ready(function() {
$('#search_input').focus(function() {
     $('#search_input').animate({width: '100px'});
});
$('#search_input').blur(function() {
     $('#search_input').animate({width: '30px'});
});
});
</script>

В том же jsfiddle.net код проходил на ура, но в WordPress отказывался работать. Что нужно было сделать?

Решение. Нужно было $ поменять на jQuery. Всё!

1
2
3
4
5
6
7
8
9
10
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery('#search_input').focus(function() {
     jQuery('#search_input').animate({width: '100px'});
});
jQuery('#search_input').blur(function() {
     jQuery('#search_input').animate({width: '30px'});
});
});
</script>

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

Поэтому в WordPress файл jquery.js, который располагается по адресу [сайт]/wp-includes/js/jquery/jquery.js, отличается от стандартных версий библиотеки jQuery тем, что в конце файла прописана строчка:

1
jQuery.noConflict();

Эта строчка и отключает работу с элементами страницы через $. Поэтому приходится работать через jQuery.


Статьи по теме:

  1. Как показать в Worpdress документы PDF напрямую из GitHub
  2. Отображение файлов Markdown *.md в WordPress
  3. Elastic Grid - небольшие модификации плагина
  4. Галерея фотографий Automatic Image Montage with jQuery с LightBox

Web программирование jQuery, Wordpress

© 2014 Harrix