Meta Boxes personalizados reutilizables Parte 3 Campos adicionales

En la Parte 1 y la Parte 2 de nuestra serie de tutoriales de plantillas de meta box personalizadas, aprendimos cómo crear una matriz de campos para recorrer y crear una meta box personalizada con sus campos estándar. Ahora vamos a agregar un poco de JavaScript para algunos campos elegantes, pero muy útiles.

Selector de fechas

Cada uno de los campos que cubrimos en este tutorial requerirá jQuery y la interfaz de usuario de jQuery. Afortunadamente, WordPress hace que sea muy fácil de usar con wp_enqueue_script, y a partir de 3.3, todas las interacciones de la interfaz de usuario de jQuery y los widgets se incluyen con WordPress.

Ya que estamos trabajando en una página que ya pone en cola jQuery, podemos omitir eso, pero necesitaremos obtener el jQuery UI Datepicker. También necesitaremos crear nuestra propia hoja de estilo ya que el CSS necesario no viene incluido en WordPress todavía, aunque están trabajando en eso.

 if (is_admin ()) wp_enqueue_script ('jquery-ui-datepicker'); wp_enqueue_style ('jquery-ui-custom', get_template_directory_uri (). '/ css / jquery-ui-custom.css'); 

Solo necesitamos cargarlos en el administrador, y no en la parte delantera del sitio, así que envuelva las funciones de forma condicional. La primera función llama al selector de fechas y también cargará el núcleo de la interfaz de usuario de jQuery. La segunda función llamará a nuestra hoja de estilo jquery-ui-custom.css desde la carpeta css del tema. La hoja de estilo de ejemplo incluida en la descarga al principio de este tutorial no requiere imágenes. También puedes crear tu propio tema de jQuery UI.

Ahora veamos el elemento de matriz que necesitamos agregar a nuestro $ custom_meta_fields matriz comenzamos en la parte 1.

 array ('label' => 'Date', 'desc' => 'Una descripción para el campo.', 'id' => $ prefix.'date ',' type '=>' date ')

Esta matriz es casi idéntica a nuestro elemento de texto. Tiene una etiqueta principal, una descripción, una identificación única y el tipo de fecha está definido. Simplemente vamos a ir con una implementación básica del selector de fecha en nuestro ejemplo aquí, pero si necesita mejorar su uso del selector de fecha, también puede agregar otra información a la matriz, como el formato preferido, la localización , y rango de fechas para nombrar unos pocos. Luego, puede usar esa información en el siguiente llamador de script que necesitamos agregar al encabezado de la página:

 add_action ('admin_head', 'add_custom_scripts'); function add_custom_scripts () global $ custom_meta_fields, $ post; $ output = ''