Итак, вы хотите начать пользоваться некоторыми из фантастических новых функций jQuery Mobile на своем сайте WordPress, но вы могли бы воспользоваться некоторыми рекомендациями относительно лучшего способа быстрого запуска. Нет проблем! В этом кратком руководстве я покажу вам «правильный путь», чтобы WordPress мог загрузить jQuery Mobile для вас.
Одной из основных функций, которые я хотел использовать, были новые всплывающие окна, которые можно создавать с помощью jQuery Mobile. Они отлично подходят для острых ситуативных диалогов и других удобных способов общения с посетителями сайта с помощью подсказок или форм. Но их правильная реализация в WordPress может быть немного сложной. Так же, как безопасность и надежность WordPress означает, что мы получаем мощную, надежную структуру; это также означает, что мы должны сделать несколько дополнительных шагов при внедрении новых инструментов.
wp_enqueue_script
Прежде всего, единственный рекомендуемый метод вызова функции или оператора JavaScript в WordPress — через функцию wp_enqueue_script , которая специально встроена в WordPress. Это просто позволяет вашей установке WordPress знать, что у вас есть файл, который вы хотите загрузить, и гарантирует, что он интегрируется без каких-либо конфликтов или других проблем. В целом, это замечательно, поддерживает организованную установку WordPress и избавляет нас от многих потенциальных проблем. В краткосрочной перспективе, тем не менее, это может быть боль.
Вот описание того, что вам нужно сделать, чтобы загрузить JavaScript:
- Создать функцию
- Вызовите wp_enqueue_script с правильными аргументами
- Используйте функцию add_action, чтобы правильно вызвать вашу функцию, которая содержит wp_enqueue_script
Вот как это выглядит в самом коде:
[sourcecode language = ”php”]
<? PHP
function get_jqm () {
wp_enqueue_script (
‘jqm_js’,
‘Http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js’,
Массив ( ‘JQuery’),
‘1.2.0’
);
}
add_action (‘wp_enqueue_scripts’, ‘get_jqm’);
?>
[/исходный код]
Функция wp_enqueue_script имеет только два требования: уникальное имя скрипта, который вы хотите вызвать (дайте ему любое имя, которое вы хотите, желательно разумное, семантическое) и источник скрипта. В нашем случае мы вызываем файл JS из CDN jQuery.com.
Я также включил немного дополнительной информации. В частности, я включил номер версии, который не является обязательным, но тем не менее является хорошей практикой. Когда выйдет новая версия, вы можете обновить свой код новой информацией, и браузер загрузит последнюю версию jQuery Mobile. В противном случае, он будет кэшировать его и сэкономить посетителю такую большую полосу пропускания, что приведет к более быстрой и быстрой загрузке страницы для вашего сайта WordPress. Так что, включайте номера версий, когда можете, если можете.
wp_register_style и wp_enqueue_style
jQuery Mobile не обходится без CSS! Я вижу, что эта ошибка случается совсем немного. JavaScript работает, а настраиваемый файл CSS, разработанный специально для работы с jQuery Mobile, — нет. Итак, давайте удостоверимся, что эта трагедия не случится с вами.
CSS-файлы немного отличаются и требуют еще больше шагов, чтобы получить право. Вы должны сначала зарегистрировать стиль, а затем поставить его в очередь:
[sourcecode language = ”php”]
wp_register_style (
‘Jqm_css’,
‘Http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’,
»,
‘1.2.0’
);
wp_enqueue_style (
‘Jqm_css’,
‘Http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’,
»,
‘1.2.0’
);
[/исходный код]
Вы заметите шаблон, я уверен. Это в значительной степени та же самая техника, но этот метод дает нам гибкость в определении условий, при которых файл фактически загружается в браузер. Таким образом, мы можем зарегистрировать CSS в WordPress, но мы не будем требовать от пользователя его загрузки до тех пор, пока не произойдет указанное событие, и ему действительно не понадобится CSS. Я не собираюсь вдаваться в эти непредвиденные обстоятельства в этой статье, но достаточно сказать, что это может быть мощной функцией, которой в полной мере пользуются немногие разработчики.
Объединяем код
Теперь, когда вы видите, как части собираются вместе для правильной постановки в очередь JavaScript, а также для регистрации и постановки в очередь CSS, давайте посмотрим на окончательный код:
[sourcecode language = ”php”]
function get_jqm () {
wp_enqueue_script (
‘jqm_js’,
‘Http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js’,
Массив ( ‘JQuery’),
‘1.2.0’
);
wp_register_style (
‘Jqm_css’,
‘Http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’,
»,
‘1.2.0’
);
wp_enqueue_style (
‘Jqm_css’,
‘Http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’,
»,
‘1.2.0’
);
}
add_action (‘wp_enqueue_scripts’, ‘get_jqm’);
[/исходный код]
Вы можете скопировать и вставить этот код в файл functions.php вашей установки WordPress или использовать его для настройки собственного плагина . В любом случае, это правильно подключит ваш код к WordPress, чтобы вы могли в полной мере воспользоваться новейшими, лучшими функциями и функциями jQuery Mobile для вашего сайта WordPress.