Intereting Posts
Создать шаблон комментариев для пользовательских типов сообщений Почему WordPress ограничивает количество попыток pingbacks за сообщение? Показать всю подкатегорию, кроме одной Понимание уязвимостей SVG в WordPress, связанных с определенным исправлением AJAX nonce с check_ajax_referer () результат поиска фильтра с помощью мета-ключа персонализированного сообщения Использование preg_replace для фильтрации пользовательского текстового поля Вставить запрос, не работающий для не зарегистрированных пользователей Отображать данные таблицы базы данных после выбора пользователем опции из раскрывающегося списка get_pages Не принимать мой запрос Получение значений атрибутов shortcode и содержимого короткого кода с помощью JavaScript regex Попытка отображения данных пользователя Meta из формы запрос mysql на wp_user и проблему user_meta Показывать электронные сообщения пользователей, которые уже опубликовали хотя бы один раз Неопределенный индекс: rating_score … / wp-postratings.php в строке 994

Rhyzz Повторяемые поля javascript в php и wordpress

Мне сложно понять, почему мои повторяющиеся поля javascript не работают. Я использую следующий плагин: Rhyzz (repeatable-fields): http://www.rhyzz.com/repeatable-fields.html . Я очистил веб-сайт, и я вижу, что он запускал скрипт внутри html, а также запускал его javascript на одной странице. Мой сайт намного больше. Я использую WordPress, и я сделал следующее, чтобы вызвать скрипт в functions.php .

  wp_enqueue_script( 'jquery', 'https://code.jquery.com/jquery-1.11.2.min.js', array(), '20120206', true ); wp_enqueue_script( 'jquery-ui', 'https://code.jquery.com/ui/1.11.4/jquery-ui.min.js', array(), '20120206', true ); wp_enqueue_script( 'jquery-repeatable', get_template_directory_uri() . '/js/repeatable.js', array( 'jquery', 'jquery-ui' ), '20120206', true ); 

У меня также есть еще 10 скриптов. Все файлы находятся в правильных каталогах. Затем у меня есть определенная страница на моем сайте (PHP), реализующая повторяющиеся поля, но ни одна из кнопок не работает. У меня нет нигде, и я не знаю, нужно ли это, но на сайте Rhyzz он помещает его в свой HTML:

 jQuery(function() { jQuery('.repeat').each(function() { jQuery(this).repeatable_fields(); }); }); 

Я очень расстроен и не знаю, что делать. Я также не знаю, правильно ли я запускаю сценарий, как в случае, если я должен передать jquery и jquery-ui в поле массива. Если кто-нибудь может мне помочь, пожалуйста, сделайте это!

Примечание. Это GitHub от Rhyzz с учебником о том, как реализовать в HTML, https://github.com/Rhyzz/repeatable-fields .

Solutions Collecting From Web of "Rhyzz Повторяемые поля javascript в php и wordpress"

Да, это выполнимо. Вот протестированное решение, которое поможет вам встать и работать.

Запуск сценариев

WordPress уже включает jQuery и пользовательский интерфейс jQuery, поэтому нет необходимости (или рекомендуется, как правило) включать их из внешнего источника. Иногда библиотеки JavaScript будут работать с использованием декларативного синтаксиса, а это означает, что их можно инициализировать с помощью определенных идентификаторов, классов или атрибутов данных в HTML. В других случаях (и это чаще всего бывает), вам нужно будет добавить некоторый дополнительный JavaScript для инициализации библиотеки JavaScript, которую вы пытаетесь использовать. Это похоже на этот повторяемый сценарий полей.

Вот код, который вставляет в очередь библиотеку повторяющихся полей и наш скрипт инициализации. Убедитесь, что пути верны для вашей конкретной установки.

 add_action( 'wp_enqueue_scripts', 'wpse_repeatable_scripts' ); function wpse_repeatable_scripts() { wp_enqueue_script( 'jquery-repeatable', get_template_directory_uri() . '/js/repeatable-fields/repeatable-fields.js', array( 'jquery', 'jquery-ui-core' ), '20120206', true ); wp_enqueue_script( 'jquery-repeatable-init', get_template_directory_uri() . '/js/repeatable-init.js', array( 'jquery-repeatable' ), '20120206', true ); } 

повторяемые-init.js

Ниже приведено содержимое repeatable-init.js , которое инициализирует библиотеку повторяющихся полей, чтобы она привязывалась к разметке с использованием класса .repeat .

 jQuery( document ).ready( function( $ ) { $( ".repeat" ).each( function() { $( this ).repeatable_fields(); }); }); 

Наконец, вот HTML (через документы разработчика):

 <div class="repeat"> <table class="wrapper" width="100%"> <thead> <tr> <td width="10%" colspan="4"><span class="add">Add</span></td> </tr> </thead> <tbody class="container"> <tr class="template row"> <td width="10%"><span class="move">Move</span></td> <td width="10%">An Input Field</td> <td width="70%"> <input type="text" name="an-input-field[{{row-count-placeholder}}]" /> </td> <td width="10%"><span class="remove">Remove</span></td> </tr> </tbody> </table> </div> 

Добавление проверенного примера кода в уже хороший ответ от @Dave Romsey

Для мета-боксов можно использовать повторяющиеся поля Rhyzz. На самом деле, недавно я строил для этого небольшой тестплагин! Я хотел получить простое повторяемое поле WYSIWYG. Поскольку этот тип поля имеет некоторые ограничения, он был заменен обычным элементом textarea.

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

Сначала мы должны поставить в очередь JQuery sortable, Rhyzz повторяемые поля и наш собственный JS-файл для init.

 /** * Enqueue our styles and scripts */ function prfx_enqueue_scripts() { // enqueue JQuery sortable wp_enqueue_script( 'jquery-ui-sortable', array( 'jquery' ) ); // enqueue Rhyzz Repeatable-fields wp_enqueue_script( 'prfx-repeatable-fields-js', plugins_url('/inc/repeatable-fields/repeatable-fields.js', __FILE__), array( 'jquery' ) ); // enqueue init JS wp_enqueue_script( 'prfx-init-js', plugins_url('/js/scripts.js', __FILE__) ); } add_action( 'admin_enqueue_scripts', 'prfx_enqueue_scripts', 99 ); 

Теперь мы создаем новый мета-ящик, например, только на страницах post-types.

 /** * Create custom metabox */ function prfx_add_meta_boxes() { add_meta_box( 'prfx_repeatable-fields', 'prfx_Repeatable Fields', 'prfx_callback', // see callback function below 'page', // post-type 'normal', 'default' ); } add_action('admin_init', 'prfx_add_meta_boxes', 1); 

Теперь мы можем создать функцию обратного вызова. В этой функции вы увидите таблицу HTML шаблонов повторяющихся полей Rhyzz.

Я не мог использовать placeholder {{row-count-placeholder}} , поэтому в итоге я просто использовал PHP для увеличения номера строки.

 /** * Callback function of our fields */ function prfx_callback() { global $post; // check our fields $repeatable_fields = get_post_meta($post->ID, 'an-input-field', true); // create a nonce for the field wp_nonce_field( 'prfx_repeatable_meta_box_nonce', 'prfx_repeatable_meta_box_nonce' ); ?> <div class="repeat"> <table class="wrapper" width="100%"> <thead> <tr> <td width="100%" colspan="4"><span class="add button">Add Editor</span><hr></td> </tr> </thead> <tbody class="container"> <?php if ($repeatable_fields) { $i = 0; foreach ($repeatable_fields as $field) { ++$i; ?> <tr class="row"> <td width="100%" class="td"> <textarea rows="3" id="custom_editor_<?php echo $i; ?>" name="an-input-field[]" class="custom-editor-box"><?php echo $field; ?></textarea> <p> <hr> <span class="move button">Move</span> <span class="remove button">Remove</span> </p> </td> </tr> <?php } } ?> <!-- template row, if "Add" button is clicked, this template will show --> <tr class="template row"> <td width="100%"> <textarea rows="3" id="custom_editor_0" name="an-input-field[]" class="custom-editor-box"></textarea> <p> <hr> <span class="move button">Move</span> <span class="remove button">Remove</span> </p> </td> </tr> </tbody> </table> </div> <?php } 

И последнее, но не менее важное, нам также нужна функция сохранения, чтобы сохранить наши повторяемые поля.

 /** * Save our metafields */ function prfx_repeatable_meta_box_save($post_id) { if ( ! isset( $_POST['prfx_repeatable_meta_box_nonce'] ) || ! wp_verify_nonce( $_POST['prfx_repeatable_meta_box_nonce'], 'prfx_repeatable_meta_box_nonce' ) ) return; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; if (!current_user_can('edit_post', $post_id)) return; if ( isset( $_POST['an-input-field'] ) ) { $contents = $_POST['an-input-field']; update_post_meta( $post_id, 'an-input-field', $contents ); } } add_action('save_post', 'prfx_repeatable_meta_box_save'); 

Это код PHP, который необходим, теперь нам просто нужно заполнить наш файл scripts.js следующим образом:

 jQuery(document).ready(function($){ $('.repeat').each(function() { $(this).repeatable_fields({ wrapper: '.wrapper', container: '.container', row: '.row', add: '.add', remove: '.remove', move: '.move', template: '.template', is_sortable: true, }); }); }); 

В этом примере используется обычный элемент textarea.

Просто голова, если вы хотите использовать эту технику с полем WYSIWYG / editor: это сложнее, поскольку TinyMCE использует iframe. Например, вам нужно выслушать сортировку JQuery для удаления редактора при сортировке start и повторного добавления редактора на сортируемый стоп. И еще больше проблем (я там был).