web-dev-qa-db-fra.com

Ajouter un Datepicker Jquery à un champ personnalisé en post-édition

Je voudrais ajouter un champ personnalisé qui est défini par une interface utilisateur jquery datepicker dans le panneau d'édition. Je suis nouveau sur wordpress, donc je ne suis pas sûr de savoir comment ajouter quelque chose comme ça. Je n'ai pas eu beaucoup de chance avec les plugins, donc j'aimerais savoir comment on s'y prend pour ajouter quelque chose comme ça manuellement. Je connais bien PHP.

custom-fieldphpjquerydatepicker
4
Thomas

Puisque vous êtes nouveau dans WordPress, je vous suggérerais d’utiliser Script de boîte méta pour WordPress qui offre un moyen simple d’ajouter vos champs personnalisés au panneau de modification post et ses principales caractéristiques sont les suivantes:

  • Prend en charge différents types de champs, notamment: texte, zone de texte, case à cocher, liste de cases à cocher, case d'option, sélectionner, wysiwyg, fichier, image, date, heure, couleur. Les développeurs peuvent facilement ajouter plus de types en étendant le script.
  • Permet de créer plusieurs méta-boîtes.
  • Ecrit en POO, permet aux développeurs d’étendre facilement le script.
  • Travailler avec des types de publication personnalisés. Chaque méta-boîte peut être définie pour de nombreux types de publication personnalisés.
5
Bainternet

Je sais que vous avez déjà accepté une réponse, mais j'ajoute ceci aux autres qui sont peut-être un peu plus avancés qui créent leurs propres boîtes à méta. Vous trouverez ci-dessous le code que j'ai utilisé dans un projet récent pour activer un sélecteur de date sur un champ dans un type de publication personnalisé. N'hésitez pas à modifier selon vos besoins:

fichier de fonctions:

// Register datepicker ui for properties
function admin_homes_for_sale_javascript(){
    global $post;
    if($post->post_type == 'homes-for-sale' && is_admin()) {
        wp_enqueue_script('jquery-ui-datepicker', WP_CONTENT_URL . '/themes/philosophy/js/jquery-ui-datepicker.min.js');  
    }
}
add_action('admin_print_scripts', 'admin_homes_for_sale_javascript');

// Register ui styles for properties
function admin_homes_for_sale_styles(){
    global $post;
    if($post->post_type == 'homes-for-sale' && is_admin()) {
        wp_enqueue_style('jquery-ui', WP_CONTENT_URL . '/themes/philosophy/css/jquery-ui-1.8.11.custom.css');  
    }
}
add_action('admin_print_styles', 'admin_homes_for_sale_styles');

Puis code inline avec la méta-boîte contenant le sélecteur de date dans:

<script>jQuery(document).ready(function(){jQuery( "input[name='chb_homes_for_sale_specifics_dateavail']" ).datepicker({ dateFormat: 'DD, d MM, yy', numberOfMonths: 3 }); jQuery( "#ui-datepicker-div" ).hide();});</script>
11
Brady

WordPress 3.5+

Vous pouvez maintenant simplement utiliser

wp_enqueue_script( 'jquery-ui-datepicker' );

comme il est livré avec le noyau.

3
kaiser