Turiel Wordpress Chapitre 19, CSS et JS dans l'administration

Jimmy Adda
Javascript
PHP Wordpress
PHP

Bonjour tout le monde,

Je rencontre un petit problème avec le rendu de mon code.

Ce que je fais

Je cherche à reproduire le tuto de Grafikart.
Il s’agit de faire en sorte que d'un champ input apparaisse le sélecteur de date flatpickr qui est plus sympa et ergonomique que si je tapais la date manuellement.

Voici le lien vers le chapitre du tuto de Grafikart :
https://www.youtube.com/watch?v=4bAFGZeZ2mI&

Voici le lien vers flatpickr :
https://flatpickr.js.org/

Voici mon code dans le fichier assets/admin.js :

console.log('Le JS est chargé');
jQuery(".montheme_datepicker").flatpickr({});

Voici mon code dans le fichier options/agence.php :

<?php
// echo "<pre>";var_dump(get_template_directory_uri());echo "</pre>";
class AgenceMenuPage{
    const GROUP = "agence_options"; 
    public static function register(){
        add_action('admin_menu', [self::class, 'addMenu']); 
        add_action('admin_init', [self::class, 'registerSettings']); 

        // echo "<pre>";var_dump(get_template_directory_uri());echo "</pre>";die(); 
        add_action('admin_enqueue_scripts', [self::class, 'registerScripts']); 
    }

    public static function registerScripts($suffix){

        // echo "<pre>";var_dump($suffix);echo "</pre>";die(); 
        if($suffix === 'settings_page_agence_options'){     
            wp_register_style('flatpickr', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css', [], false, true);
            wp_register_script('flatpickr', 'https://cdn.jsdelivr.net/npm/flatpickr', [], false, true);

            wp_enqueue_script('montheme_admin', get_template_directory_uri().'/assets/admin.js', ['flatpickr'], false, true);
            wp_enqueue_style('flatpickr');
        }
    }
    public static function registerSettings(){
        register_setting(self::GROUP, 'agence_horaire'); 
        register_setting(self::GROUP, 'agence_date'); //👾
        add_settings_section('agence_options_section', 'Paramètres', function(){
            echo "Vous pouvez ici gerer les paramètres liés à l'agence immobilère";
        }, self::GROUP);

        add_settings_field('agence_options_horaire', 'Horaires d\'ouverture', function(){
        ?>
        <textarea name="agence_horaire" cols="30" rows="10" style="width: 80;"><?= esc_html(get_option('agence_horaire')) ?></textarea>
        <?php
        }, self::GROUP, 'agence_options_section');

        add_settings_field('agence_options_date', 'Date d\'ouverture', function(){
            ?>
            <input type="text" name="agence_date" value="<?= esc_attr(get_option('agence_date')) ?>" class="montheme_datepicker">
            <?php
            }, self::GROUP, 'agence_options_section');
    }
    public static function addMenu(){
        add_options_page("Gestion de l'agence", "Agence", "manage_options", self::GROUP, [self::class, 'render']);  
    }
    public static function render(){  
        ?>
        <h1>Gestion de l'agence</h1>
        <!-- <pre>
            <?php //var_dump(get_current_screen()); ?>
        </pre> -->
        <?= get_option('agence_horaire'); ?>
        <form action="options.php" method="post">
            <?php
                    settings_fields(self::GROUP);
                    do_settings_sections(self::GROUP); 
                    submit_button(); 
            ?>

        </form>
        <?php
    }

}

Ce que je veux

J'aimerai avoir le même résultat que Grafikart.

Ce que j'obtiens

J'ai finalement un problème sur l'affichage du champ "input type text" qui apparaît complètement éclaté. Même si cela fonctionne j'ai deux chevrons énormes et une liste de chiffre qui correspond à la date à choisir mais je n'ai pas le visuel qu'obtient Grafikart dans le tuto. Merci pour votre temps :))

Aucune réponse