Статьи

Как правильно установить jQuery Mobile на ваш сайт WordPress

Итак, вы хотите начать пользоваться некоторыми из фантастических новых функций jQuery Mobile на своем сайте WordPress, но вы могли бы воспользоваться некоторыми рекомендациями относительно лучшего способа быстрого запуска. Нет проблем! В этом кратком руководстве я покажу вам «правильный путь», чтобы WordPress мог загрузить jQuery Mobile для вас.

Одной из основных функций, которые я хотел использовать, были новые всплывающие окна, которые можно создавать с помощью jQuery Mobile. Они отлично подходят для острых ситуативных диалогов и других удобных способов общения с посетителями сайта с помощью подсказок или форм. Но их правильная реализация в WordPress может быть немного сложной. Так же, как безопасность и надежность WordPress означает, что мы получаем мощную, надежную структуру; это также означает, что мы должны сделать несколько дополнительных шагов при внедрении новых инструментов.

wp_enqueue_script

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

Вот описание того, что вам нужно сделать, чтобы загрузить JavaScript:

  1. Создать функцию
  2. Вызовите wp_enqueue_script с правильными аргументами
  3. Используйте функцию 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.