C'est un jour triste dans le monde où je recherche quelque chose sur Google et qui ne renvoie rien. J'essaie d'utiliser le datepicker par défaut (ou TOUT datepicker à ce stade) et je ne peux pas le faire à cause de mon manque de connaissances avec Wordpress/PHP. Dans mon plugin, j'essaie d'enregistrer jquery et l'interface utilisateur et, apparemment, je casse d'autres parties de WordPress. Quelqu'un peut-il me dire ce que je ne fais pas correctement et s’ils peuvent fournir une solution de travail, je supprimerai tout mon code:
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');
}
J'ai besoin que jQuery soit disponible dans la zone d'administration ainsi que dans l'interface frontale pour la saisie de données utilisateur. S'il vous plaît quelqu'un aide. Je suis sur le point de retirer mes ongles car j'ai déjà arraché tous mes cheveux ... Je suppose que je dois faire une file d'attente au mauvais moment, mais encore une fois, à cause de ma connaissance limitée de WordPress, je me suis creusé une tombe rapidement.
UPDATE: J'ai modifié mon script et ne charge plus que l'interface utilisateur de jQuery. Nous avons testé le fait que jQuery et l'interface utilisateur sont tous deux chargés et qu'ils ont réussi pour les deux, mais pas pour un objet existant dans le 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');
}
Mon test:
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
});
Étant donné que toutes les bibliothèques dont vous avez besoin pour le datepicker sont fournies avec WordPress et sont enregistrées avec toutes les dépendances appropriées, il vous suffit de:
function enqueue_my_scripts_wpse_97533() {
wp_enqueue_script('jquery-ui-datepicker');
}
add_action('wp_enqueue_scripts','enqueue_my_scripts_wpse_97533');
Si vous regardez ensuite la source de la page, vous verrez que jQuery, jQuery-UI et jQuery-UI-Datepicker sont tous chargés.
Bien sûr, vous devrez charger vous-même tous les autres scripts, comme vous le faites déjà, bien que vous deviez les enregistrer avec leurs dépendances - troisième paramètre.
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
Par exemple...
wp_register_script(
'maskedinput',
SSM_PLUGIN_URL.'/includes/js/jquery.maskedinput.min.js',
array('jquery')
);
De cette façon, vous pourriez charger cela avec ...
function enqueue_my_scripts_wpse_97533_v2() {
wp_enqueue_script('maskedinput');
}
add_action('wp_enqueue_scripts','enqueue_my_scripts_wpse_97533_v2');
... et sachez que les dépendances-- jQuery-- seront également chargées.
Pour compléter @ s_ha_dum, l’excellente réponse , voici un exemple montrant comment utiliser le sélecteur de date jQuery UI intégré sur la page de votre plugin.
Le résultat ressemblera à ceci:
Les parties les plus importantes:
datepicker({ dateFormat: "yy-mm-dd" })
afin que vous sachiez à quoi vous attendre dans votre gestionnaire de rappel.J'ai d'abord construit une classe de base pour pouvoir utiliser quelque chose que je puisse utiliser dans d'autres réponses et pour conserver le code du script de sélecteur de date spécifique et simple.
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 );
}
}
Nous ne devons maintenant redéfinir que les pièces les plus importantes. Sympa et court.
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.'
);
}
}
Il reste encore beaucoup à faire, mais cela devrait être utile au départ.
Il y a plusieurs façons d'inclure jQuery dans un thème. J'utilise toujours WP version groupée que je trouve très simple. Pour configurer correctement les éléments, nous devons nous assurer que WP page aura les fichiers suivants à inclure dans le chargement de la page. Pour charger le script et le style de soufflet, ajoutez du code à soufflet au fichier functions.php du thème.
Script pour utilisation frontale
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 pour utilisation en aval
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');
Nous pouvons écrire une fonction à accrocher pour des pages spécifiques, telles que single.php, page ou page de plugin. J'ai ajouté ou accroché sur 'options-general.php' pour l'affichage sur Settigns-> Date Picker . Il suffit de mettre ce code également dans le fichier funtions.php ou sous ce code.
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');
?>
Après avoir ajouté ce code, vous aurez un sélecteur de date sur Menu Admin-> Réglages-> Sélecteur de date . Si vous avez besoin d’aide pour obtenir cette option, posez vos questions sur Ajoutez un DatePicker jQuery à un thème WordPress ou à un plugin .