#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