Как использовать jQuery на странице WordPress / Post

#javascript #jquery #html #wordpress

#javascript #jquery #HTML #wordpress

Вопрос:

это раздражает меня уже несколько часов.

Итак, у меня есть страница WordPress, которая имеет HTML-форму. В настоящее время я пытаюсь сделать две вещи с помощью этой формы. A) Запустите плагин jQuery для работы, который преобразует форму выбора в форму с несколькими флажками для выбора. Б) Сохраните всю информацию после ее отправки.

В настоящее время я использую плагин под названием Chosen, который выполняет для меня функцию A, но он не действует как флажок и, насколько я знаю, не позволяет мне сохранять информацию после публикации.

 multiple="multiple" name="other_qualifications[]">
<option value="">None</option>
<option value="Personnel Management Training">Personnel Management Training</option>
<option value="WHamp;amp;S">WHamp;amp;S [Workplace Health amp;amp; Safety] Training</option>
<option value="First Aid Training">First Aid Training</option>
<option value="Barista Training">Barista Training</option>
<option value="RSA">RSA [Responsible Service of Alcohol] Training</option>
<option value="Specialised Culinary Training">Specialised Culinary Training</option>
<option value="Front-of-House Training">Front-of-House Training</option>
<option value="Back-of-House Training">Back-of-House Training</option>
<option value="Wait-staff Training">Wait-staff Training</option>
<option value="House-keeping Training">Hotel amp;amp; House-keeping Training</option>
</select>
  

В любом случае, короче говоря, я хочу использовать либоhttp://davidstutz.github.io/bootstrap-multiselect / или http://www.codexworld.com/multi-select-dropdown-list-with-checkbox-jquery

Я следовал руководствам по добавлению элементов в functions.php файл, но мне не повезло.

Например, что касается части 3 по первой ссылке выше, я не уверен, предназначен ли этот код для размещения на той же странице, что и форма, или где-то еще.

Буду признателен за любую помощь, поскольку сейчас я совершенно застрял.

Приветствия.

Комментарии:

1. «Я следовал руководствам по добавлению элементов в functions.php файл, но мне не повезло.» Можете ли вы показать нам код, который вы добавили в файл, чтобы убедиться, что вы сделали это правильно?

Ответ №1:

Создайте шаблон страницы для этой цели или просто вставьте весь необходимый код в содержимое страницы

WordPress просто включает содержимое страницы, преобразованное в HTML, в то место в вашем файле шаблона, где the_content() вызывается. Это означает, что теоретически вы могли бы включить любой HTML, CSS или JS, который хотите отобразить на странице, в HTML-представление вашего редактора post, но в большинстве случаев WordPress все испортит, встраивая ваш код в <p> теги после каждых двух последовательных символов новой строки. Это оставляет два вышеупомянутых варианта, которые работают надежным способом без особых хлопот.

Создание пользовательского шаблона

Я бы рекомендовал это, если вы собираетесь повторно использовать этот компонент select на нескольких страницах. Ознакомьтесь с пользовательскими шаблонами страниц WordPress в WP docs, они довольно мощные и гибкие. Вот трюк в двух словах:

  • Клонируйте шаблон страницы по умолчанию в своей теме (сначала создайте дочернюю тему, если вы этого еще не сделали)
  • Включите Template Name: Your Template Name в комментарий в верхней части файла, измените название
  • Добавьте все свои скрипты и стили в шаблон
  • Создайте свою страницу и установите шаблон в соответствии с вашим недавно созданным шаблоном
  • Наслаждайтесь своей новой страницей с суперспособностями, которые не загрязняют остальной сайт случайными библиотеками JS и CSS!

Встроить в само содержимое страницы

Это грязное решение проблемы, но оно работает, так что вам решать, насколько чистым должно быть ваше решение. Хитрость заключается в том, чтобы либо получить плагин, который поставляется с [raw] коротким кодом, либо создать свой собственный. Вот краткий фрагмент для добавления такого короткого кода, любезно предоставленный wprecipies

 function my_formatter($content) {
    $new_content = '';
    $pattern_full = '{([raw].*?[/raw])}is';
    $pattern_contents = '{[raw](.*?)[/raw]}is';
    $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

    foreach ($pieces as $piece) {
        if (preg_match($pattern_contents, $piece, $matches)) {
            $new_content .= $matches[1];
        } else {
            $new_content .= wptexturize(wpautop($piece));
        }
    }

    return $new_content;
}

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'my_formatter', 99);
  

Добавьте приведенный выше код в свою тему functions.php файл. Затем вы можете добавить любой HTML, JS и CSS внутрь содержимого страницы, если вы заключите его в «короткий код», вот так:

 [raw]
<script type="text/javascript">
document.write('Im in ur contuntz, running ur skriptz!');
</script>
[/raw]
  

Итак, для вашего примера вы бы взяли код из вашей первой ссылки, включили все это в содержимое, заключенное в [raw] теги в порядке, указанном в статье, и бум, это сработало бы. Надеюсь, это поможет!

Отказ от ответственности: как упоминалось выше, это довольно сложное решение со скриптами и стилями внутри вашего <body> тега. Если вы чувствуете себя некомфортно из-за этого или хотите соответствовать лучшим практикам в Интернете, вам нужно будет создать полностью пользовательскую тему, в которой вы можете контролировать, какие библиотеки вы включаете на каждой странице, и какие скрипты выполняются на каждой странице, но я полагаю, что это выходит за рамки данного вопроса.

Комментарии:

1. Привет, спасибо за ваш ответ. Я пошел простым путем и хочу встроить что-то внутри страницы, поэтому я добавил эту хакерскую функцию в свой functions.php файл (это дочерняя тема).

2. Я также добавил весь код из моей первой ссылки внутрь [raw] [/raw] и по-прежнему ничего. Ваш тестовый скрипт, который возвращает «Я в ur contuntz, запускаю ur skriptz!», работает нормально. Я поместил файлы .js как в корневой каталог веб-сайта, так и в папку дочерней темы. Где я мог ошибиться?

3. Проверьте отладчик вашего браузера, может ли он найти скрипты. Вам нужно указать полный абсолютный URL в src атрибуте ваших тегов, поскольку относительные пути — это ад в WP. Если вы разместили файлы внутри своей темы, это должно выглядеть примерно так http://your-domain.com/wp-content/themes/your-theme/js/script-name.js