Una guía para principiantes de Titan Framework Agregar una opción de tipo de fecha

En este artículo, exploraremos la fecha Opción de tipo en Titan Framework: cómo funciona y qué parámetros ofrece. Descubra cómo puede crear un selector de fecha dentro de un panel de administración de WordPress personalizado, un metabox o una sección de personalizador.

La opción de tipo de fecha en Titan Framework

En Titan Framework, hay una fecha Opción de tipo que permite a los usuarios finales ingresar dinámicamente los ajustes de fecha y hora en sus temas. Esta opción carga el calendario completo, y puede establecer cualquier fecha de su elección. Aquí está el diseño de esta opción:

Echemos un vistazo a la lista de parámetros que admite esta opción:

  • nombre: Define el nombre de visualización del fecha opción de tipo.
  • carné de identidad: Este parámetro especifica un nombre único que ayuda a obtener los valores guardados.
  • desc: Muestra una breve descripción con el nombre de la opción..
  • defecto(Opcional) Establece el valor predeterminado. fecha ajustes Este parámetro toma un formato específico de valores, es decir,. Y-m-d para la fecha, Hola por el momento, y Y-m-d H: i tanto para fecha como para hora.
  • fecha: (Opcional) Si falso, Esta opción no se muestra. Se establece en cierto por defecto.
  • hora: (Opcional) Si cierto, Esta opción aparecerá. Se establece en falso por defecto.

Los parametros fecha hora son booleano Por tipo, mientras que el resto son de tipo. cuerda

Contenedores disponibles para la opción de tipo de fecha

los fecha La opción de tipo se puede crear dentro de: 

  • Panel de administrador
  • Pestañas de administrador
  • Metabox
  • Sección de personalización de temas

Esta opción se crea siguiendo una rutina de código similar independientemente del tipo de contenedor:

  • Consigue una instancia única a través de obtener Instancia() función.
  • Añade una opción a través de createOption () función.
  • Obtenga los valores guardados a través de getOption () función. 

Sin embargo, si desea saber cómo se crean estos contenedores con Titan Framework, puede encontrar los detalles en mis artículos anteriores de esta serie..

Creación de una opción de tipo de fecha dentro de un panel de administración

Ejemplo de Declaración

Primero crearé este tipo de opción dentro de un panel de administración..

createOption (array ('id' => 'aa_date', // El ID que se usará para obtener el valor de esta opción 'type' => 'date', // Tipo de opción que estamos creando 'name' => 'My Date Option', // Nombre de la opción que se mostrará en el panel de administración 'desc' => 'Esta es nuestra opción', // Descripción de la opción que se mostrará en el panel de administración 'default' = > '2015-8-15' // Valor predeterminado));

UNA fecha La opción de tipo se crea dentro de un panel de administración. $ aa_panel mediante el createOption () función (línea # 7). He definido los parametros ID, tipo, nombre, descdefecto. La ID (es decir,. aa_date) siempre debe ser único. 

Se puede ver que la opción nombrada. Mi fecha de opcion existe dentro de un panel de administración Opciones aseadas. La configuración de fecha predeterminada también aparece en la captura de pantalla anterior. 

Ejemplo de uso

Vamos a obtener los valores de las opciones guardadas..

getOption ('aa_date'); // Convertir la fecha de eco del valor de época de la fecha ('r', $ aa_date_epoch_val); // salida como fecha RFC 2822 - devuelve la hora local - Para más información, visite http://goo.gl/g9tZLi?> 

En la línea # 3, se adquiere una instancia a través del obtener Instancia() función, que toma un parámetro único, preferiblemente el nombre de su tema (he usado ordenado). Los valores guardados se recuperan a través de getOption () Función en la línea # 6, que registra la identificación. aa_date como parámetro y guarda su valor en una nueva variable $ aa_date_val.

La última parte del código imprime valores en el extremo frontal. En la mayoría de los casos, el servidor nos puede devolver un valor de época, que deberemos convertir utilizando PHP fecha() función. La discusión de los valores de época está fuera del alcance de este tutorial, pero puede leer más sobre esto aquí.

Viendo el resultado en el front-end

Ahora estableceré cualquier valor de fecha de demostración y lo guardaré. Por ejemplo, elijo 2015-08-20.

Veamos su salida en el front-end..

El ajuste de la fecha guardada se imprime correctamente, con la hora. Como el parámetro para hora está deshabilitado por ahora, no se muestran las configuraciones de tiempo. ¿Cómo se configura el tiempo? Llegaré a eso en un momento.

Creación de una opción de tipo de fecha dentro de una pestaña de administrador

Ejemplo de Declaración

Ahora agregaré esta opción en una pestaña de administración, pero mostrará ambas fechahora ajustes.

createOption (array ('id' => 'aa_date_in_tab1_panel2', // Los ID siempre deben ser únicos. El ID que se usará para obtener el valor de esta opción 'type' => 'date', // Tipo de opción que somos creando 'nombre' => 'Mi opción de fecha', // Nombre de la opción que se mostrará en el panel de administración 'desc' => 'Esta es nuestra opción', // Descripción de la opción que se mostrará en el panel de administración 'predeterminado' => '2015-8-15 00:00', // Valor predeterminado para la fecha y hora 'hora' => verdadero // Configuración de hora habilitada.)); 

Esta vez estoy agregando un fecha escriba la opción en una pestaña de administrador $ aa_tab1. Su ID es aa_date_in_tab1_panel2. Mira la lista de parámetros. Muestra hora se establece en cierto. Esto significa que la selección de tiempo está habilitada. Tenga en cuenta el formato de valor para defecto, que se establece para ambos fechahora.

Puedes encontrar Mi fecha de opcion en Pestaña 1del panel de administración Opciones aseadas 2.

Ejemplo de uso

Vamos a recuperar los valores..

getOption ('aa_date_in_tab1_panel2'); fecha de eco ('r', $ aa_date_in_tab1_panel2_val); // salida como fecha RFC 2822 - devuelve la hora local - Para más información, visite http://goo.gl/g9tZLi?> 

Realmente no hay nada nuevo en este código.

Viendo el resultado en el front-end

Supongamos que mis valores de fecha y hora de demostración son 2015-09-06 y 08:45. También hay una Ahora botón que establece el valor de tiempo actual en un solo clic.

El front-end aparece así:

Creación de una opción de tipo de fecha en un Metabox

Ejemplo de Declaración

Vamos a escribir su codigo.

createOption (array ('id' => 'aa_mb_date', // Los ID deben ser siempre únicos. El ID que se usará para obtener el valor de esta opción 'type' => 'date', // Tipo de opción somos creando 'nombre' => 'Seleccionar configuración de tiempo', // Nombre de la opción que se mostrará 'desc' => 'Esta es nuestra opción', // Descripción de la opción que se mostrará 'predeterminado' => ' 00:00 ', // Valor predeterminado para la hora' fecha '=> falsa, // Configuración de fecha deshabilitada.' Hora '=> verdadera // Configuración de fecha habilitada.)); 

los createOption () función agrega un fecha opción de tipo en un metabox $ aa_metbox (línea # 5). Pero este código solo muestra hora ajustes porque el fecha se establece en falso. Por eso he cambiado el nombre defecto valores de esta opción en consecuencia.

La captura de pantalla de arriba muestra un selector de tiempo llamado Seleccione la configuración de tiempodentro de un metabox. Esto aparece en todas las pantallas de edición de página y post..

Ejemplo de uso

Vamos a obtener los valores de tiempo guardados.

getOption ('aa_mb_date', get_the_ID ()); fecha de eco ('r', $ aa_mb_time_epoch_val); // salida como fecha RFC 2822 - devuelve la hora local - Para más información, visite http://goo.gl/g9tZLi?> 

Acabo de recuperar el valor del tiempo y luego lo convertí con el fecha() función.

Viendo el resultado en el front-end

Mi valor de tiempo de demostración es 13: 03.

La salida se imprime así:

Creación de una opción de tipo de fecha en una sección de personalizador de tema

Ejemplo de Declaración

Al final, agregaré esta opción en una sección del personalizador de temas..

createOption (array ('id' => 'aa_sec_date', // Los ID deben ser siempre únicos. El ID que se usará para obtener el valor de esta opción 'type' => 'date', // Tipo de opción somos creando 'nombre' => 'Seleccionar configuración de fecha / hora', // Nombre de la opción que se mostrará 'desc' => 'Esta es nuestra opción', // Descripción de la opción que se mostrará 'por defecto' = > '2015-08-01', // Valor predeterminado para fecha y hora 'fecha' => verdadero, // Configuración de fecha habilitada. 'Hora' => verdadero // Configuración de hora habilitada.)); 

Finalmente, agregué esta opción siguiendo el mismo procedimiento en una sección del personalizador de temas..

La captura de pantalla lo muestra claramente..

Ejemplo de uso

Vamos a obtener los valores de sus opciones guardadas..

getOption ('aa_sec_date'); ?> 
El valor de la fecha / hora es

Conseguiré sus valores guardados en el header.php expediente. Entonces, primero obtenga una instancia y registre la ID única dentro de getOption () función. Luego crea un div e imprime la salida de la variable $ aa_sec_date_val mediante el fecha() función (línea # 13).

Viendo el resultado en el front-end

Aquí hay una captura de pantalla de los cambios que tienen lugar..

Conclusión

Así es como puede agregar configuraciones dinámicas de fecha y hora en sus temas y complementos de WordPress. Esta opción puede ser útil cuando desee que el usuario final ingrese la fecha y la hora por cualquier motivo.. 

Por ejemplo, estaba creando este tema de WordPress en el que quería agregar un tipo de publicación personalizada de Eventos (a través de un complemento). En ese momento, tuve la opción de agregar cualquiera de los complementos de Evento más utilizados o codificar un pequeño y sencillo complemento.. 

Entonces, en lugar de proporcionarle a mi cliente un complemento de eventos que podría haber parecido la cabina de un avión, utilicé Titan Framework. Usé el fecha Escriba la opción dos veces en dos metaboxes diferentes para fechas de eventos.

Integre esta opción en su proyecto y reduzca la carga de escribir código largo. En mi próximo artículo, exploraremos la radio Opción de tipo en Titan Framework.

¿Tiene usted alguna pregunta? Publícalos en los comentarios a continuación, o accede a Twitter..