Intereting Posts
Поиск по тегу, категории и автору без плагина Использование страницы шаблона страницы разрыва страницы Как добавить песни на мой сайт WordPress? Почему этот эскиз жесткого кода обрезки не работает? Повторное перенаправление URL-адресов с датами к URL-адресам без дат Установите правильный порядок запроса, который возвращает сообщения на основе двух настраиваемых полей Как удалить метатег RichText jQuery + больше не загружается в заголовке Программно повторно заказывайте изображения в дополнении галереи ACF. Orderby Название, идентификатор и т. Д. Пользовательский тип поиска по типу с использованием $ _SESSION и pre_get_posts Школьный код, который вставлен в текстовое поле, отображается неправильно wpdb-> обновить всю таблицу вместо одной строки Пользовательский запрос поля – значение мета является массивом Должны ли файлы шаблонов копироваться в дочернюю тему для редактирования? Shortcode в выражении $ output

Как использовать jQuery UI в моем плагине

Это печальный день в мире, когда я что-то Google, и он ничего не возвращает. Я пытаюсь использовать datepicker по умолчанию (или ANY datepicker на этом этапе), и я не могу из-за своей нехватки знаний в WordPress / PHP. В моем плагине я пытаюсь зарегистрировать jquery и ui и, видимо, нарушаю другие части WordPress в этом процессе. Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно, и если они смогут предоставить рабочее решение, я откажусь от всего кода:

add_action('init', 'add_styles'); function add_styles(){ wp_deregister_style('simpleschoolstyles'); wp_register_style('simpleschoolstyles', SSM_STYLEFILE); wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'); wp_deregister_script( 'jquery-ui' ); wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js'); wp_deregister_style( 'jquery-ui' ); wp_register_style( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css' ); wp_deregister_script('maskedinput'); wp_register_script('maskedinput', SSM_PLUGIN_URL . '/includes/js/jquery.maskedinput.min.js'); wp_deregister_script('simpleschool'); wp_register_script('simpleschool', SSM_PLUGIN_URL . '/includes/js/simpleschool.js'); } add_action('wp_enqueue_scripts', 'load_scripts'); add_action('admin_enqueue_scripts', 'load_scripts'); function load_scripts() { wp_enqueue_style('jquery-ui'); wp_enqueue_style('simpleschoolstyles'); wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui'); wp_enqueue_script('maskedinput'); wp_enqueue_script('simpleschool'); } 

Мне нужно, чтобы jQuery был доступен в области администрирования, а также интерфейс для ввода данных пользователя. Пожалуйста, помогите кому-нибудь. Я почти вытаскиваю свои ногти на ногах, так как я уже разорвал все мои волосы … Я предполагаю, что я должен быть в очереди в неправильный момент времени, но опять же, из-за моего ограниченного знания WordPress, я сам выкопал себя могила быстро.

UPDATE: я изменил свой скрипт и теперь загружал только пользовательский интерфейс jQuery и тестировал, что jQuery и пользовательский интерфейс загружены и имеют успех для этих двух, но не существующих объектов в DOM:

 add_action('init', 'init_scripts'); function init_scripts(){ wp_deregister_style('simpleschoolstyles'); wp_register_style('simpleschoolstyles', SSM_STYLEFILE); //wp_deregister_script( 'jquery-ui' ); wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js'); //wp_deregister_style( 'jquery-ui' ); wp_register_style( 'jquery-ui-pepper-grinder', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css' ); //wp_deregister_script('maskedinput'); wp_register_script('maskedinput', SSM_PLUGIN_URL . '/includes/js/jquery.maskedinput.min.js'); //wp_deregister_script('simpleschool'); wp_register_script('simpleschool', SSM_PLUGIN_URL . '/includes/js/simpleschool.js'); wp_enqueue_style('jquery-ui-pepper-grinder'); wp_enqueue_style('simpleschoolstles'); wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'jquery-ui' ); wp_enqueue_script('simpleschool'); } 

Мой тест:

 jQuery(document).ready(function(){ //jQuery('.datepick').mask("99/99/9999"); //jQuery('.phone').mask("(999) 999-9999"); jQuery( '.datepick' ).datepicker( 'option', 'dateFormat', 'yyyy-mm-dd' ); // <-- this fails ???? alert('jQuery BETTER BE LOADED!!!'); // <---this worked jQuery('<div>crazy wordpress and their php</div>').dialog(); // <--- this worked too }); 

Solutions Collecting From Web of "Как использовать jQuery UI в моем плагине"

Учитывая, что все библиотеки, которые вам нужны для datepicker, связаны с WordPress и регистрируются со всеми соответствующими зависимостями, вам действительно нужно сделать следующее:

 function enqueue_my_scripts_wpse_97533() { wp_enqueue_script('jquery-ui-datepicker'); } add_action('wp_enqueue_scripts','enqueue_my_scripts_wpse_97533'); 

Если вы посмотрите на источник страницы, вы увидите, что все загруженные jQuery, jQuery-UI и jQuery-UI-Datepicker загружены.

Конечно, вам нужно будет загружать любые другие скрипты сами по себе, но вы должны зарегистрировать их с их зависимостями – третьим параметром.

 wp_register_script( $handle, $src, $deps, $ver, $in_footer ); 

Например…

 wp_register_script( 'maskedinput', SSM_PLUGIN_URL.'/includes/js/jquery.maskedinput.min.js', array('jquery') ); 

Таким образом, вы можете загрузить это с помощью …

 function enqueue_my_scripts_wpse_97533_v2() { wp_enqueue_script('maskedinput'); } add_action('wp_enqueue_scripts','enqueue_my_scripts_wpse_97533_v2'); 

… и знаете, что зависимости – jQuery – тоже загрузятся.

В дополнение к превосходному ответу @ s_ha_dum , вот пример, показывающий, как использовать встроенный механизм выбора даты в jQuery на вашей странице плагина.

Результат будет выглядеть так:

введите описание изображения здесь

Загрузить на GitHub .

Наиболее важные части:

  • Используйте пул страницы с параметрами, чтобы вставлять скрипты и таблицы стилей только на странице, а не на всех страницах администрирования ( фон ).
  • Не забудьте установить datepicker({ dateFormat: "yy-mm-dd" }) , чтобы вы знали, чего ожидать в обработчике обратного вызова.
  • Нет встроенного стиля для выбора даты в WordPress, поэтому вам нужно вставить отдельную таблицу стилей. Но есть и хороший демо-плагин от @helenhousandi с CSS, который прекрасно вписывается в основные стили.

Сначала я построил базовый класс, чтобы иметь что-то, что я могу использовать и в других ответах, и сохранить фактический код для сценария выбора даты конкретным и простым.

Базовый класс Wpse_Plugin_Options_Page

 /** * Basic code, for a better documented example see * @link {https://github.com/toscho/T5-Admin-Menu-Demo} * @author toscho * * We do not use the so called Settings API here, because that is way too * complicated. * admin-post.php is used instead: simple, clean markup, works. */ class Wpse_Plugin_Options_Page { protected static $instance = NULL; protected $slug = ''; protected $menu_slug = 'wpse_demo'; protected $option = 'wpse_option'; protected $title = 'WPSE Demo'; protected $styles = array(); protected $scripts = array(); public static function get_instance() { NULL === self::$instance and self::$instance = new self; return self::$instance; } public function wp_loaded() { add_action( "admin_post_update_$this->option", array ( $this, 'admin_post' ) ); add_action( 'admin_menu', array ( $this, 'admin_menu' ) ); } public function admin_menu() { $slug = add_options_page( $this->title, // page title $this->title, // menu title 'manage_options', // capability $this->menu_slug, // menu slug array ( $this, 'render_page_base' ) // callback function ); $this->slug = $slug; add_action( "admin_print_styles-$slug", array ( $this, 'enqueue_style' ) ); add_action( "admin_print_scripts-$slug", array ( $this, 'enqueue_script' ) ); add_action( "page_content_$slug", array ( $this, 'render_page_content' ) ); } public function render_page_base() { $this->print_message(); printf( '<div class="wrap"><h2>%1$s</h2><form method="post" action="%2$s">', $GLOBALS['title'], admin_url( 'admin-post.php' ) ); printf( '<input type="hidden" name="action" value="%s"/>', "update_$this->option" ); wp_nonce_field( "update_$this->option" ); do_action( 'page_content_' . $this->slug ); print '</form></div>'; } protected function print_message() { if ( ! isset ( $_GET['msg'] ) ) return; $text = $this->get_message_text( $_GET['msg'] ); if ( ! $text ) return; print "<div id='message' class='updated fade'><p>$text</p></div>"; } protected function get_message_text( $id ) { $messages = $this->get_messages(); if ( isset ( $messages[ $id ] ) ) return $messages[ $id ]; return FALSE; } protected function get_messages() { return array(); } public function render_page_content() { echo $this->slug; } public function enqueue_style() { foreach ( $this->styles as $style ) wp_enqueue_style( $style ); do_action( 'base_styles_loaded_' . $this->slug ); } public function enqueue_script() { foreach ( $this->scripts as $script ) wp_enqueue_script( $script ); do_action( 'base_scripts_loaded_' . $this->slug ); } public function admin_post() { if ( ! check_admin_referer( "update_$this->option" ) ) die( 'nope' ); if ( ! isset ( $_POST[ $this->option ] ) ) die( 'something is missing' ); $msg = $this->save_option( $_POST[ $this->option ] ); $url = add_query_arg( 'msg', $msg, $_POST[ '_wp_http_referer' ] ); wp_safe_redirect( $url, 303 ); exit; } protected function save_option( $data ) { return (bool) update_option( $this->option, $data ); } } 

Теперь нам нужно переопределить только самые важные части. Хороший и короткий.

Специальный класс Wpse_Datepicker_Example

 class Wpse_Datepicker_Example extends Wpse_Plugin_Options_Page { protected $title = 'jQuery Date Picker'; protected $menu_slug = 'wpse_datepicker'; protected $option = 'wpse_datepicker'; protected $scripts = array ( 'jquery-ui-datepicker' ); // not inherited public static function get_instance() { NULL === self::$instance and self::$instance = new self; return self::$instance; } public function render_page_content() { $value = esc_attr( get_option( $this->option ) ); printf( '<p style="margin:100px auto;width:30em"><label for="%1$s">Pick a date <input type="text" id="%1$s" name="%2$s" value="%3$s" /> </label> %4$s</p>', 'datepicker', $this->option, $value, get_submit_button( 'Save', 'primary', 'submit', FALSE ) ); add_action( "admin_footer-$this->slug", array ( $this, 'print_footer_script' ) ); } public function enqueue_style() { wp_register_style( 'jquery-ui-datepicker', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css' ); wp_enqueue_style( 'jquery-ui-datepicker' ); } public function print_footer_script() { ?> <script> jQuery( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" }); </script> <?php } protected function get_messages() { return array ( 1 => 'Date saved.' ); } } 

Есть еще много возможностей для улучшения, но в начале это должно быть полезно.

Существует несколько способов включить jQuery в тему. Я всегда использую пакетную версию WP, которую я считаю очень простой. Чтобы правильно настроить ситуацию, нам нужно убедиться, что страница WP будет содержать следующие файлы, которые будут включены в загрузку страницы. Для загрузки сильфона скрипт и стиль добавьте сильфонный код в файл functions.php темы.

Скрипт для использования в интерфейсе

 function add_e2_date_picker(){ //jQuery UI date picker file wp_enqueue_script('jquery-ui-datepicker'); //jQuery UI theme css file wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false); } add_action('wp_enqueue_scripts', 'add_e2_date_picker'); 

Скрипт для использования в фоновом режиме

 function add_e2_date_picker(){ //jQuery UI date picker file wp_enqueue_script('jquery-ui-datepicker'); //jQuery UI theme css file wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false); } add_action('admin_enqueue_scripts', 'add_e2_date_picker'); 

Мы можем написать функцию, которая будет подключаться для определенных страниц, например, страницы single.php, page или плагина. Я добавляю или подключаюсь к 'options-general.php' для отображения в Settigns-> Date Picker . Просто поместите этот код в файл funtions.php или ниже этого кода.

 function register_datepiker_submenu() { add_submenu_page( 'options-general.php', 'Date Picker', 'Date Picker', 'manage_options', 'date-picker', 'datepiker_submenu_callback' ); } function datepiker_submenu_callback() { ?> <div class="wrap"> <input type="text" class="datepicker" name="datepicker" value=""/> </div> <script> jQuery(function() { jQuery( ".datepicker" ).datepicker({ dateFormat : "dd-mm-yy" }); }); </script> <?php } add_action('admin_menu', 'register_datepiker_submenu'); ?> 

После добавления этого кода у вас будет выбор даты в меню администратора -> Settigns-> Date Picker . Если вам нужна помощь для получения этой опции, спросите любой запрос, чтобы добавить комментарии к Добавить jQuery DatePicker в WordPress Theme или Plugin .