É 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
});
fonte
ajax.googleapis.com
.Respostas:
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 é:
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.
Por exemplo...
Dessa forma, você pode carregar isso com ...
... e saiba que as dependências-- jQuery-- também serão carregadas.
fonte
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_scripts
poré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.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:
Faça o download no GitHub .
As partes mais importantes:
datepicker({ dateFormat: "yy-mm-dd" })
, para que você saiba o que esperar em seu manipulador de retorno de chamada.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
Agora temos que redefinir apenas as peças mais importantes. Bom e curto.
Classe especial
Wpse_Datepicker_Example
Ainda há muito espaço para melhorias, mas, para começar, deve ser útil.
fonte
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
Script para uso de backend
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.
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 .
fonte