Làm cách nào để sử dụng giao diện người dùng jQuery trong Plugin của tôi

Đó là một ngày buồn trên thế giới khi tôi Google một cái gì đó và nó không trả lại gì cả. Tôi đang cố gắng sử dụng công cụ hẹn hò mặc định (hoặc BẤT K date công cụ hẹn hò nào vào thời điểm này) và không thể vì tôi thiếu kiến ​​thức với Wordpress / PHP. Trong plugin của tôi, tôi đang cố gắng đăng ký jquery và ui và dường như đang phá vỡ các phần khác của WordPress trong quá trình này. Ai đó có thể vui lòng cho tôi biết tôi đang làm gì sai không và nếu họ có thể cung cấp giải pháp hiệu quả, tôi sẽ loại bỏ tất cả mã của mình:

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');
}

Tôi cần jQuery có sẵn trong khu vực quản trị cũng như giao diện người dùng để nhập dữ liệu người dùng. Xin ai đó giúp đỡ. Tôi sắp rút móng chân ra vì tôi đã xé hết tóc rồi ... Tôi cho rằng mình phải mê mẩn không đúng lúc, nhưng một lần nữa, do kiến ​​thức về WordPress hạn chế, tôi đã tự đào một ngôi mộ nhanh chóng.

CẬP NHẬT: Tôi đã sửa đổi tập lệnh của mình và bây giờ chỉ tải Giao diện người dùng jQuery và đã kiểm tra rằng jQuery và Giao diện người dùng đều được tải và đã thành công cho cả hai, nhưng không phải là một đối tượng hiện có trong 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');
}

Bài kiểm tra của tôi:

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
});

Cho rằng tất cả các thư viện bạn cần cho công cụ hẹn hò đều được gói cùng với WordPress và được đăng ký với tất cả các phụ thuộc phù hợp, tất cả những gì bạn thực sự cần làm là:

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

Nếu sau đó bạn nhìn vào nguồn của trang, bạn sẽ thấy rằng jQuery, jQuery-UI và jQuery-UI-Datepicker đều được tải.

Tất nhiên, bạn sẽ cần phải tự tải bất kỳ tập lệnh nào khác theo cách bạn đã thực hiện, mặc dù bạn nên đăng ký chúng với các phụ thuộc của chúng-- tham số thứ ba.

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

Ví dụ...

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

Bằng cách đó, bạn có thể tải nó với ...

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

... Và biết rằng các phụ thuộc-- jQuery-- cũng sẽ được tải.

Để bổ sung cho câu trả lời tuyệt vời của @ s_ha_dum , đây là một ví dụ cho thấy cách sử dụng trình chọn ngày của UI UI tích hợp trên trang plugin của bạn.

Kết quả sẽ như thế này:

Tải xuống trên GitHub .

Những phần quan trọng nhất:

• Sử dụng slug trang tùy chọn của bạn để liệt kê các tập lệnh và bảng định kiểu trên trang của bạn, không phải trên tất cả các trang quản trị ( nền ).
• Hãy chắc chắn để đặt datepicker({ dateFormat: "yy-mm-dd" }), để bạn biết những gì mong đợi trong trình xử lý gọi lại của bạn.
• Không có kiểu dựng sẵn cho trình chọn ngày trong WordPress, vì vậy bạn phải liệt kê một biểu định kiểu riêng. Nhưng cũng có một plugin demo đẹp từ @helenhousandi với CSS phù hợp độc đáo với các phong cách cốt lõi.

Tôi đã xây dựng một lớp cơ sở trước tiên để có một cái gì đó tôi có thể sử dụng trong các câu trả lời khác và để giữ mã thực tế cho tập lệnh chọn ngày cụ thể và đơn giản.

Lớp cơ sở 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 );
    }
}

Bây giờ chúng ta phải xác định lại chỉ những phần quan trọng nhất. Đẹp và ngắn.

Lớp học đặc biệt 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.'
        );
    }
}

Vẫn còn nhiều chỗ để cải tiến, nhưng khi bắt đầu nó sẽ hữu ích.

Có một số cách để đưa jQuery vào một chủ đề. Tôi luôn sử dụng phiên bản WP kèm theo mà tôi thấy rất đơn giản. Để thiết lập đúng mọi thứ, chúng tôi cần đảm bảo trang WP sẽ có các tệp sau được đưa vào tải trang. Để tải kịch bản & kiểu chuông, thêm mã ống thổi vào tệp tin.php.

Script để sử dụng front-end

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'); 

Script để sử dụng back-end

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'); 

Chúng ta có thể viết một hàm được nối cho các trang cụ thể, chẳng hạn như single.php, trang hoặc trang plugin. Tôi đã thêm hoặc nối vào 'tùy chọn-general.php' để hiển thị trên Settigns-> Bộ chọn ngày . Chỉ cần đặt mã này cũng tập tin funtions.php hoặc dưới các mã đó.

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');

?>

Sau khi thêm mã này, bạn sẽ có một công cụ chọn ngày trên Menu quản trị-> Sắp xếp-> Công cụ chọn ngày . Nếu bạn cần bất kỳ trợ giúp nào để có được tùy chọn này, hãy hỏi bất kỳ câu hỏi ném nhận xét nào về Thêm jQuery DatePicker vào WordPress Theme hoặc Plugin .