Время движется вперед и в сфере разработки сайтов появляются новые технологии. В частности, большую шумиху делает популярный css3 со своими возможностями анимации. Все же друзья согласитесь, jQuery по прежнему рулит в плане разнообразия анимации и захватывающих спецэффектов .
jQuery – это современная библиотека скриптов, основанных на базе прогрессивного языка программирования JavaScript, для реализации самых разнообразных задач в процессе создания сайтов. Библиотека помогает оформлять внешний вид сайта, скрывает блоки контента, фиксирует баннеры, завораживает эффектами анимации, участвует в проверке форм, взаимодействует с AJAX. Способов применения великое множество.
Недавно пришлось делать для изображений flip эффект. Картинка переворачивается плавно в горизонтальной, или вертикальной плоскости. При минимальном соприкосновением мыши, начинается показываться ее обратная сторона. В реальности эффект осуществляется при помощи двух картинок. Хотя возникает ощущение, что картинка одна. Такой вариант легко реализовать применяя css3. Но там эффект слишком ограничен. В jquery мы все чеканим до идеальности. В результате получается все реалистично и красиво.
Чтобы использовать скрипты jquery на блоге, следует подключить данную библиотеку. Способов подключения существует несколько. Рассмотрим наиболее актуальные.
Подключение джейквери через Google. Часто используемый вариант новичками. Требует минимум знаний в программировании. Вводим между тегами следующий вид кода:
[code lang="js"] [/code]
Теперь через Google библиотека будет подгружаться автоматически. Для экономии времени копируете строку и подставляете цифры свежей версии. Последнюю версию узнаем здесь JQuery.
Дополнительные DNS для соединения. Ниже приведены еще два варианта онлайн подключения. Лично я подключаюсь через Гугл и вам советую.
Все представленные ссылки работают когда сайт непосредственно взаимодействует с интернетом. В большинстве случаев сайты разрабатываются на локальном сервере localhost. По сути хостингом является наш компьютер. И если соединение с интернетом отсутствует, то следовательно скрипты перестанут работать.
Проблема решается предварительным скачивание библиотеки jquery и размещением ее файлов в специальной папке под название js (называем папку сами). Обычно папка ява скриптов находится в шаблоне движка cms. В простых html сайтах в корне.
Подключение для html сайта:
[php] [/php]
Подключение для Joomla:
[php] /* Используем конструктор объектов для получения методов других классов. Получаем объект класса JDocumentHTML. Другими словами мы создали оъект */ $doc = JFactory::getDocument(); $doc->addScript(JUri::base().'templates/'.$doc->template.'/js/jquery.min.js'); /* Назначаем путь к файлу */ [/php]
Как узнать подключилась ли библиотека
Работая с кодом всегда необходимо внимательно следить за расположением скриптов. Иногда скрипт может не заработать. Ищешь причину неполадки и потом, когда находишь оказывается проблема в элементарном, пропустили какие-то буквы, слеш, не правильно скопировали строчку. Поэтому после подключения проверяйте работоспособность.
[js] /* Ниже инициализируем скрипт, который выведет сообщение на экран в случаи удачного подключения */ [/js]
Возможности jQuery действительно внушительны. И будет большим плюсом научиться самостоятельно создавать собственные скрипты.
wp_enqueue_script() — подключение JavaScript
Рекомендуемый метод подключения скриптов WordPress. Имеет ряд особенностей:
JS-файлы вставляются на страницы сайта через функции wp_head() и wp_footer(),
в админке же скрипты объединяются в один с помощью PHP-обработчика load-scripts.php ,
позволяет подключать скрипты с учетом их зависимостей друг от друга;
То есть нужный вам js-файл не будет вставляться в HTML сразу же, как только вы использовали функцию, т.к. функция всего лишь помещает файл в очередь для вывода.
Если хотите узнать больше про правильное подключение JS-файлов WordPress, то могу порекомендовать вам мой видеоурок.
$handle (строка) какое-нибудь название (идентификатор), придуманное вами (строка в нижнем регистре), либо можно подключить уже зарегистрированные (через wp_register_script()) ранее скрипты, используя их идентификаторы $src (строка) абсолютный URL файла JavaScript, который требуется подключить, этот параметр (и все последующие тоже) нужен только для незарегистрированных скриптов $deps (массив) массив идентификаторов скриптов, от которых зависит подключаемый скрипт $ver (строка) версия файла. Если установить значение null , то версия не будет указываться. По умолчанию — текущая версия WordPress. Подробнее про параметр. $in_footer (логическое) по умолчанию файлы JavaScript подключаются внутри тегов . Если же указать данный параметр равным true , тогда скрипт будет вставлен непосредственно перед закрывающим тегом
.
Пример 1 – подключение JS файла
Для вставки скриптов во фронтэнде (т.е. не в админке), используйте хук wp_enqueue_scripts , пример:
Для подключения скриптов только в админке используйте хук admin_enqueue_scripts , например:
add_action('admin_enqueue_scripts', 'true_include_in_admin', 25); function true_include_in_admin(){wp_enqueue_script('myscript', . ); }
Пример 2 – подключение jQuery CDN
Иногда бывает, что вы хотите подключите какой-то скрипт с CDN, это даже не обязательно должен быть jQuery, в этом случае указываем полный URL файла.
add_action('wp_enqueue_scripts', 'true_jquery_cdn', 25); function true_jquery_cdn(){wp_deregister_script('jquery'); wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'); }
Пример 3 – как подключить JS к HTML
Небольшое отклонение от нашей темы и от функции wp_enqueue_script() – хочу показать вам именно способы подключения JS к HTML сайта в или в футере при помощи тегов .
Для подключения между тегами
и мы будем использовать хук wp_head:
add_action('wp_head', 'truemisha_script_to_head', 25); function truemisha_script_to_head(){echo''; }
А для футера сайта соответственно используем хук wp_footer:
add_action('wp_footer', 'truemisha_script_to_footer', 25); function truemisha_script_to_footer(){echo''; }
Если хотите узнать больше про правильное подключение JS-файлов WordPress, то могу порекомендовать вам мой видеоурок.
Пример 4. Подключение JS только на странице настроек конкретного плагина
Получается, что мы подключаем необходимый JavaScript файл только там, где нужно — это же здорово!
add_action('admin_init', 'true_plugin_admin_init'); add_action('admin_menu', 'true_plugin_admin_menu'); function true_plugin_admin_init(){/* * Регистрируем скрипт, * он кстати должен находиться той же папке, что и файл, в который будет вставлен этот код. */wp_register_script('myscript', plugins_url('/myscript.js', __FILE__)); }function true_plugin_admin_menu(){/* * Добавляем субменю настроек плагина в Параметры. */$page_hook_suffix = add_submenu_page('options-general.php', 'Мой плагин', 'Настройки моего плагина', 'manage_options', 'true-plugin', 'true_plugin_print_page'); /* * Нетрудно догадаться, что вся фишка кроется в переменной $page_hook_suffix */add_action('admin_print_scripts-' . $page_hook_suffix, 'true_plugin_admin_scripts'); }function true_plugin_admin_scripts(){/* * Подключаем наш уже зарегистрированный ранее скрипт. */wp_enqueue_script('myscript'); }function true_plugin_print_page(){/* * Cодержимое страницы настроек. */echo'Привет'; }
Таблица стандартных скриптов в WordPress
Все скрипты, перечисленные в этой таблице, регистрировать не нужно, так как они уже присутствуют в ядре WordPress и зарегистрированы, достаточно указать их идентификатор при подключении, например: wp_enqueue_script( ‘идентификатор’ ) или:
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
Параметры
Пример 1 – подключение
Пример 2 – jQuery через CDN
Пример 3 – подключение тегом script
Пример 4 – только на странице плагина
Скрипты в ядре
Комментарии — 34
Лариса 16 Окт 2013
Михаил, здравствуйте! Возник вопрос: в Кодексе в описании этой функции нет параметра in_footer. Так как все-таки на самом деле? Дело в том, что занимаюсь переносом скриптов из хедера в подвал, и было бы очень удобно, если бы функция действительно принимала этот параметр)
Миша 16 Окт 2013
Добрый день) а в чем собственно вопрос? этот параметр есть, по умолчанию принимает значение false
Лариса 16 Окт 2013
Вопрос только в том, что на странице описания этой функции в Кодексе об этом параметре нет ни слова. А у Вас прочитала, вот и спрашиваю.
Миша 17 Окт 2013
русская версия Кодекса мягко говоря не очень) да и в английской иногда бывают недочеты.
Лариса 16 Окт 2013
И вернулась сказать спасибо) Действительно есть и действительно работает. Большое спасибо 🙂
Миша 17 Окт 2013
пожалуйста)
Евгений 28 Ноя 2013
Спасибо за статью. Нашел тут сайт с русским сервером скриптов http://salat-production.ru/interactive-jquery-mootools-cdn.php
VRS 24 Мар 2014
Доброй ночи. Подскажи, пожалуйста, а как подключить новый медиазагрузчик? Вот такой код выводит «старый»
function my_add_upload_scripts(){wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_register_script('my-upload-script'/* Подключаем JS-код задающий поведение * загрузчика и указывающий, куда вставлять * ссылку после загрузки изображения * Его код будет приведен ниже. */ ,get_bloginfo('template_url').'/js/upload.js'/* Указываем скрипты, от которых * зависит наш JS-код */ ,array('jquery','media-upload','thickbox')); wp_enqueue_script('my-upload-script'); }// Запускаем функцию подключения загрузчикаif(is_admin())add_action('admin_print_scripts', 'my_add_upload_scripts');
пробовала менять media-upload на plupload-full, но не работает.
Антон 15 Авг 2014
$deps (массив) массив идентификаторов скриптов, от которых зависит подключаемый скрипт Вот про $deps я вообще ничего не понял какие там должны быть идентификаторы?? Что от чего зависит (т.е как может быть что бы скрипты друг от друга зависили)?? Можете пожалуйста подробнее растолковать.
Миша 15 Авг 2014
Ну например у вас есть какой-то код jQuery и он не будет работать пока не поключена сама библиотека jQuery — один из примеров такой зависимости.
Антон 15 Авг 2014
Да например js код какой то не может работать без jq но можно прописать же так например
и все будет зависеть и все без всяких array в чем тогда разница?
Миша 16 Авг 2014
Дело в том, что скрипты могут подключаться в разных местах, не только в теме, но и в плагинах, поэтому, чтобы все файлы задействовались в правильном порядке, нужно указывать этот параметр $deps.
Антон 16 Авг 2014
Все понял спасибо. И еще как сделать так что бы Jquery подключался у меня в wp_footer перед боди. Пишу вот так wp_enqueue_script(‘jquery’); но он у меня в шапке подключается.
Миша 16 Авг 2014
Нужно провернуть примерно такую комбинацию:
и если честно, то он у меня не работает(((( а я не знаю куда вставлять код, чтобы подключить JS((( ПОМОГИТЕ ПОЖАЛУЙСТА
Миша 24 Янв 2015
Здравствуйте! Скажите, какая у этого кода задача?
Сайра 4 Фев 2015
у меня имеется два selectmenu. При выборе департамента, у меня автоматически должен появляться отдел. Если этот код сохранить через блокнот в расширении .js, то все идеально работает, а на WР никак не могу подключить. На сколько я поняла, мне необходимо сохранить мой скрипт в расширении js и положить его в папку плагины, а потом просто ссылаться на него, но никак не разобралась и ничего не заработало((((
Сайра 4 Фев 2015
то есть, если сохранить в блокноте в расширении .html то все работатет
Миша 4 Фев 2015
В таком случае сначала просто вставьте этот код в WordPress туда, где его нужно вывести, в какой-нибудь php-файл. Сохранять его в .js неправильно, так как там также имеется и html код.
артем 14 Май 2015
здравствуйте. хочу реализовать на блоге вордпресс печать по этой инструкции: _http://loco.ru/materials/107-php-print-this-page-feature-javascript. я не понимаю, как подключить скрипт через отдельный Js-файл. пробовал, но не получается. можете объяснить и сколько стоит?
Миша 15 Май 2015
Здравствуйте. Вот так:
script src="URL скрипта">script>
артем 15 Май 2015
Миша, огромное спасибо, заработало. только в бланке печати русские буквы отображаются в виде символов (когда подключаю Js файл). когда скрипт просто вставляю в тело, то буквы отображаются нормально. может еще что-то надо указать, чтобы кириллица отображалась?