Como uso a interface do usuário do jQuery no meu plug-in

9

É um dia triste no mundo em que procuro algo no Google e nada retorna. Estou tentando usar o datepicker padrão (ou QUALQUER datepicker neste momento) e não consigo devido à minha falta de conhecimento do Wordpress / PHP. No meu plugin, estou tentando registrar o jquery e a interface do usuário e, aparentemente, estou quebrando outras partes do WordPress no processo. Alguém pode me dizer o que estou fazendo de errado e, se eles puderem fornecer uma solução funcional, descartarei todo o meu código:

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

Eu preciso que o jQuery esteja disponível na área de administração, bem como no front-end para entrada de dados do usuário. Por favor, alguém ajude. Estou quase arrancando as unhas dos pés, já que já arranquei todo o meu cabelo ... Estou assumindo que devo estar enfileirando no momento errado, mas, novamente, devido ao meu conhecimento limitado do WordPress, eu me cavei uma sepultura rapidamente.

ATUALIZAÇÃO: modifiquei meu script e agora apenas carrego a interface do usuário do jQuery e testei que o jQuery e a interface do usuário são carregados e têm êxito para os dois, mas não para um objeto existente no 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');
}

Meu teste:

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
});
sentido horárioq
fonte
O cancelamento do registro de bibliotecas internas como o jQuery é provavelmente a raiz de todos os problemas. Eles não funcionam da mesma maneira que os de ajax.googleapis.com.
fuxia
Então, como alguém usaria o jQuery UI Datepicker?
clockwiseq
Você pode usá-lo apenas enfileirando-o no seu plugin usando wp_enqueue_script ('jquery-ui');
Vinod Dalvi
Qual ação devo enfileirar os scripts?
clockwiseq

Respostas:

9

Como todas as bibliotecas necessárias para o datepicker são fornecidas com o WordPress e registradas com todas as dependências apropriadas, tudo o que você realmente precisa fazer é:

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

Se você olhar para a fonte da página, verá que jQuery, jQuery-UI e jQuery-UI-Datepicker estão todos carregados.

Obviamente, você precisará carregar quaisquer outros scripts da mesma maneira que já é, embora deva registrá-los com suas dependências - terceiro parâmetro.

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

Por exemplo...

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

Dessa forma, você pode carregar isso com ...

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

... e saiba que as dependências-- jQuery-- também serão carregadas.

s_ha_dum
fonte
ótima resposta! uma pergunta, em qual evento eu faço tudo isso? Eu preciso disso na seção admin, bem como no front-end.
clockwiseq
O que eu postei-- wp_enqueue_scripts- será carregado em todos os lugares no front end, sem contar a página de login. Mas você realmente deseja carregar os scripts apenas nas páginas específicas que precisam deles, para poder modificar esse retorno de chamada para ser mais específico da página. Para o back-end, admin_enqueue_scriptsporém, novamente, você realmente deseja carregá-los sempre que necessário. Existem vários ganchos específicos da página no back-end. Não sei dizer o que você precisa sem saber onde você precisa dos scripts.
precisa saber é o seguinte
6

Para complementar a excelente resposta de @ s_ha_dum , aqui está um exemplo que mostra como usar o seletor de datas da UI do jQuery na sua página de plug-in.

O resultado será semelhante a este:

insira a descrição da imagem aqui

Faça o download no GitHub .

As partes mais importantes:

  • Use o slug da página de opções para enfileirar os scripts e as folhas de estilo apenas na sua página, não em todas as páginas administrativas ( plano de fundo ).
  • Certifique-se de definir datepicker({ dateFormat: "yy-mm-dd" }), para que você saiba o que esperar em seu manipulador de retorno de chamada.
  • Não há um estilo interno para o seletor de datas no WordPress, então você precisa enfileirar uma folha de estilo separada. Mas também há um bom plugin de demonstração do @helenhousandi com CSS que se encaixa perfeitamente nos estilos principais.

Criei uma classe base primeiro para ter algo que eu possa usar em outras respostas também e para manter o código real do script do selecionador de datas específico e simples.

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

Agora temos que redefinir apenas as peças mais importantes. Bom e curto.

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

Ainda há muito espaço para melhorias, mas, para começar, deve ser útil.

fuxia
fonte
2

Existem várias maneiras de incluir o jQuery em um tema. Eu sempre uso a versão em pacote do WP, que acho muito simples. Para configurar corretamente as coisas, precisamos garantir que a página WP tenha os seguintes arquivos a serem incluídos no carregamento da página. Para carregar o script e o estilo dos foles, adicione o código dos foles no arquivo functions.php do tema.

Script para uso 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 para uso de backend

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

Podemos escrever uma função a ser conectada a páginas específicas, como single.php, página ou página de plug-in. Eu adicionei ou viciei em 'options-general.php' para exibição em Settigns-> Date Picker . Basta colocar esse código também no arquivo funtions.php ou abaixo desse código.

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

?>

Depois de adicionar esse código, você terá um seletor de datas no Menu do administrador-> Ajustes-> Seletor de datas . Se você precisar de alguma ajuda para obter essa opção, faça qualquer pergunta com os comentários em Adicionar um jQuery DatePicker ao WordPress WordPress ou Plugin .

csehasib
fonte