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

9

Это печальный день в мире, когда я что-то гуглю и ничего не возвращаю. Я пытаюсь использовать средство выбора даты по умолчанию (или ЛЮБОЕ средство выбора даты в данный момент) и не могу из-за моего недостатка знаний в Wordpress / PHP. В своем плагине я пытаюсь зарегистрировать jquery и пользовательский интерфейс и, по-видимому, нарушаю другие части 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, я выкопал себя могила быстро.

ОБНОВЛЕНИЕ: я изменил свой скрипт и теперь загружаю только jQuery UI и проверил, что jQuery и UI оба загружены и имеют успех для этих двух, но не для существующего объекта в 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
});
clockwiseq
источник
Отмена регистрации встроенных библиотек, таких как jQuery, вероятно, является причиной всех проблем. Они работают не так, как те, из ajax.googleapis.com.
Fuxia
Итак, как можно использовать JQuery UI Datepicker?
часовой стрелке
Вы можете использовать его, просто поставив его в очередь в своем плагине, используя wp_enqueue_script ('jquery-ui');
Винод Дальви
Какое действие я должен поставить в очередь сценарии?
часовой стрелке,

Ответы:

9

Учитывая, что все библиотеки, необходимые для средства выбора даты, связаны с 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
источник
отличный ответ! один вопрос, в каком событии я делаю все это? Мне нужно это в административном разделе, а также в интерфейсе.
часовой стрелке,
То, что я написал wp_enqueue_scripts- загрузит везде на переднем крае , не считая страницы входа. Но вы действительно хотите загружать сценарии только на тех страницах, которые нуждаются в них, чтобы вы могли изменить этот обратный вызов, чтобы он был более специфичным для конкретной страницы. Для внутреннего использования, admin_enqueue_scriptsно опять же, вы действительно хотите загружать их только там, где это необходимо. На серверной стороне есть несколько хуков, специфичных для каждой страницы. Я не могу сказать, что вам нужно, не зная, где вам нужны сценарии.
s_ha_dum
6

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

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

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

Скачать на 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.'
        );
    }
}

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

Фуксия
источник
2

Есть несколько способов включить 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, страница или страница плагина. Я добавил или подключил «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');

?>

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

csehasib
источник