Come Utilizzare jQuery UI Nel Mio Plugin WordPress

Per integrare l'eccellente risposta di @s_ha_dum, ecco un esempio che mostra come utilizzare il selettore di date jQuery UI integrato nella tua pagina del plugin.

Il risultato sarà simile a questo:

Le parti più importanti:

• Utilizza lo slug della tua pagina delle opzioni per caricare gli script e i fogli di stile solo sulla tua pagina, non su tutte le pagine di amministrazione (contesto).
• Assicurati di impostare datepicker({ dateFormat: "yy-mm-dd" }), così saprai cosa aspettarti nel tuo gestore di callback.
• Non c'è uno stile integrato per il selettore di date in WordPress, quindi devi caricare un foglio di stile separato. Ma c'è anche un bel plugin demo di @helenhousandi con CSS che si integra perfettamente con gli stili core.

Ho prima costruito una classe base per avere qualcosa che possa utilizzare anche in altre risposte e per mantenere il codice effettivo per lo script del selettore di date specifico e semplice.

Classe base Wpse_Plugin_Options_Page

/**
 *
 * Non utilizziamo la cosiddetta Settings API qui, perché è troppo
 * complicata.
 * Viene invece utilizzato admin-post.php: semplice, markup pulito, funziona.
 */
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,                       // titolo pagina
            $this->title,                       // titolo menu
            'manage_options',                   // capacità
            $this->menu_slug,                   // slug menu
            array ( $this, 'render_page_base' ) // funzione callback
        );

        $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( 'no' );

        if ( ! isset ( $_POST[ $this->option ] ) )
            die( 'manca qualcosa' );

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

Ora dobbiamo ridefinire solo le parti più importanti. Bello e corto.

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

    // non ereditato
    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">Scegli una data
                <input type="text" id="%1$s" name="%2$s" value="%3$s" />
            </label> %4$s</p>',
            'datepicker',
            $this->option,
            $value,
            get_submit_button( 'Salva', '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 => 'Data salvata.'
        );
    }
}

C'è ancora molto spazio per miglioramenti, ma come inizio dovrebbe essere utile.

Esistono diversi modi per includere jQuery in un tema. Personalmente utilizzo sempre la versione inclusa in WordPress, che trovo molto semplice da implementare. Per configurare correttamente le cose, dobbiamo assicurarci che la pagina WordPress includa i seguenti file durante il caricamento. Per caricare gli script e gli stili necessari, aggiungi il codice seguente nel file functions.php del tema.

Script per l'uso front-end

function add_e2_date_picker(){
//File jQuery UI date picker
wp_enqueue_script('jquery-ui-datepicker');
//File CSS del tema jQuery UI
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 per l'uso back-end

function add_e2_date_picker(){
//File jQuery UI date picker
wp_enqueue_script('jquery-ui-datepicker');
//File CSS del tema jQuery UI
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'); 

Possiamo scrivere una funzione da agganciare a pagine specifiche, come single.php, page.php o una pagina di plugin. Ho aggiunto o agganciato il codice a 'options-general.php' per visualizzarlo in Impostazioni->Date Picker. Inserisci questo codice anche nel file functions.php o sotto gli altri codici.

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

?>

Dopo aver aggiunto questo codice, otterrai un date picker in Menu Admin->Impostazioni->Date Picker. Se hai bisogno di aiuto per implementare questa funzionalità, puoi chiedere supporto nei commenti su Aggiungere un jQuery DatePicker a un Tema o Plugin WordPress.