Bagaimana Saya Menggunakan UI jQuery di Plugin Saya

Ini adalah hari yang menyedihkan di dunia ketika saya Google sesuatu dan tidak menghasilkan apa-apa. Saya mencoba menggunakan datepicker default (atau datepicker APAPUN pada saat ini) dan saya tidak dapat melakukannya karena kurangnya pengetahuan saya dengan Wordpress / PHP. Dalam plugin saya, saya mencoba mendaftar jquery dan ui dan tampaknya saya melanggar bagian lain dari WordPress dalam proses. Dapatkah seseorang tolong beri tahu saya apa yang saya lakukan salah dan jika mereka dapat memberikan solusi yang berfungsi, saya akan memo semua kode saya:

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

Saya perlu jQuery tersedia di area admin serta front-end untuk entri data pengguna. Tolong seseorang bantu. Saya hampir saja mencabut kuku kaki saya karena saya sudah merobek semua rambut saya ... Saya berasumsi bahwa saya harus enqueue pada titik waktu yang salah, tetapi sekali lagi, karena pengetahuan saya yang terbatas tentang WordPress, saya telah menggali sendiri kuburan dengan cepat.

UPDATE: Saya memodifikasi skrip saya dan sekarang hanya memuat jQuery UI dan telah menguji bahwa jQuery dan UI sama-sama dimuat dan sukses untuk keduanya, tetapi bukan objek yang ada di 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');
}

Tes saya:

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

Karena semua perpustakaan yang Anda butuhkan untuk datepicker dibundel dengan WordPress dan terdaftar dengan semua dependensi yang sesuai, yang perlu Anda lakukan adalah:

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

Jika kemudian Anda melihat sumber halaman Anda akan melihat bahwa jQuery, jQuery-UI, dan jQuery-UI-Datepicker semuanya dimuat.

Tentu saja, Anda perlu memuat skrip lain sendiri dengan cara yang sudah Anda lakukan, meskipun Anda harus mendaftarkannya dengan dependensinya - parameter ketiga.

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

Sebagai contoh...

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

Dengan begitu, Anda bisa memuatnya dengan ...

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

... dan tahu bahwa dependensi - jQuery - akan dimuat juga.

Untuk melengkapi jawaban luar biasa @ s_ha_dum , berikut adalah contoh yang menunjukkan cara menggunakan pemilih tanggal UI jQuery bawaan pada halaman plugin Anda.

Hasilnya akan terlihat seperti ini:

Unduh di GitHub .

Bagian terpenting:

• Gunakan siput halaman opsi Anda untuk membuat skrip dan stylesheet pada halaman Anda saja, tidak di semua halaman admin ( latar belakang ).
• Pastikan untuk mengatur datepicker({ dateFormat: "yy-mm-dd" }), sehingga Anda tahu apa yang diharapkan dalam penangan panggilan balik Anda.
• Tidak ada gaya bawaan untuk pemilih tanggal di WordPress, jadi Anda harus mengubah lembar gaya terpisah. Tetapi ada juga plugin demo yang bagus dari @helenhousandi dengan CSS yang cocok dengan gaya inti.

Saya membangun kelas dasar terlebih dahulu untuk memiliki sesuatu yang dapat saya gunakan dalam jawaban lain juga dan untuk menjaga kode aktual untuk skrip pemilih tanggal spesifik dan sederhana.

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

Sekarang kita harus mendefinisikan ulang hanya bagian yang paling penting. Bagus dan pendek.

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

Masih ada banyak ruang untuk perbaikan, tetapi sebagai awalnya harus bermanfaat.

Ada beberapa cara untuk memasukkan jQuery ke dalam tema. Saya selalu menggunakan versi bundel WP yang saya temukan sangat sederhana. Untuk mengatur segalanya dengan benar, kita perlu memastikan bahwa halaman WP akan memiliki file-file berikut untuk dimasukkan dalam pemuatan halaman. Untuk memuat bellow script & style tambahkan bellow kode pada file functions.php tema.

Script untuk penggunaan 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 untuk penggunaan 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'); 

Kita dapat menulis sebuah fungsi untuk dihubungkan ke halaman tertentu, seperti halaman single.php, halaman atau plugin. Saya telah menambahkan atau mengaitkan pada 'options-general.php' untuk tampilan pada Settigns-> Date Picker . Masukkan saja kode ini juga file funtions.php atau di bawah kode tersebut.

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

?>

Setelah menambahkan kode ini, Anda akan mendapatkan pemilih tanggal di Menu Admin-> Setuju-> Pemilih Tanggal . Jika Anda memerlukan bantuan untuk mendapatkan opsi ini, tanyakan pertanyaan apa pun dengan memberikan komentar pada Tambahkan jQuery DatePicker ke WordPress Theme atau Plugin .