Guide du débutant pour le framework Titan ajout d'une option de type de date

Dans cet article, nous allons explorer les rendez-vous amoureux type option dans Titan Framework: son fonctionnement et les paramètres qu’il offre. Découvrez comment vous pouvez créer un sélecteur de date dans un panneau d’administration WordPress personnalisé, une section metabox ou un personnaliseur..

L'option Type de date dans Titan Framework

Dans Titan Framework, il existe un rendez-vous amoureux type option qui permet aux utilisateurs finaux de saisir dynamiquement les paramètres de date et d’heure dans leurs thèmes. Cette option charge tout le calendrier et vous permet de définir la date de votre choix. Voici la mise en page de cette option:

Jetons un coup d'oeil à la liste de paramètres que cette option supporte:

  • prénom: Il définit le nom d'affichage du rendez-vous amoureux option de type.
  • identifiant: Ce paramètre spécifie un nom unique qui aide à obtenir les valeurs enregistrées.
  • desc: Il affiche une brève description avec le nom de l'option.
  • défaut(Facultatif) Il définit la valeur par défaut rendez-vous amoureux réglages. Ce paramètre prend un format spécifique de valeurs, c.-à-d.. Y-m-d pour la date, Salut pour le temps, et Y-m-d H: i pour la date et l'heure.
  • rendez-vous amoureux: (Facultatif) Si faux, cette option n'est pas affichée. Il est mis à vrai par défaut.
  • temps: (Facultatif) Si vrai, cette option apparaîtra. Il est mis à faux par défaut.

Les paramètres rendez-vous amoureux et temps sont booléen par type, alors que les autres sont de type chaîne

Conteneurs disponibles pour l'option Type de date

le rendez-vous amoureux L'option type peut être créée à l'intérieur: 

  • panneau d'administration
  • Onglets Admin
  • Metabox
  • Section de personnalisation de thème

Cette option est créée en suivant une routine de code similaire quel que soit le type de conteneur:

  • Obtenez une instance unique via le getInstance () une fonction.
  • Ajouter une option via le createOption () une fonction.
  • Obtenir les valeurs enregistrées via le getOption () une fonction. 

Cependant, si vous voulez savoir comment ces conteneurs sont créés avec Titan Framework, vous pouvez trouver les détails dans mes articles précédents de cette série..

Création d'une option de type de date dans un panneau d'administration

Exemple de déclaration

Je vais d'abord créer ce type d'option dans un panneau d'administration.

createOption (array ('id' => 'aa_date', // l'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'date', // type d'option que nous créons 'nom' => 'My Date Option', // Nom de l'option qui sera affichée dans le panneau d'administration 'desc' => 'Ceci est notre option', // Description de l'option qui sera affichée dans le panneau d'administration 'default' = > '2015-8-15' // Valeur par défaut));

UNE rendez-vous amoureux L'option type est créée dans un panneau d'administration $ aa_panel via le createOption () fonction (ligne n ° 7). J'ai défini les paramètres id, type, nom, desc et défaut. L'ID (c'est-à-dire. aa_date) devrait toujours être unique. 

Vous pouvez voir que l'option nommée Option Date existe à l'intérieur d'un panneau d'administration Options soignées. Le réglage de date par défaut apparaît également dans la capture d'écran ci-dessus. 

Exemple d'utilisation

Récupérons les valeurs des options sauvegardées.

getOption ('aa_date'); // Convertit la valeur d'époque de la date echo date ('r', $ aa_date_epoch_val); // sortie en tant que date RFC 2822 - renvoie l'heure locale - Pour plus d'informations, consultez http://goo.gl/g9tZLi?> 

En ligne 3, une instance est acquise via le getInstance () fonction, qui prend un paramètre unique, de préférence le nom de votre thème (j’ai utilisé soigné). Les valeurs enregistrées sont récupérées via le getOption () fonction dans la ligne 6, qui enregistre l'identifiant aa_date en tant que paramètre et enregistre sa valeur dans une nouvelle variable $ aa_date_val.

La dernière partie du code imprime les valeurs au début du processus. Dans la plupart des cas, le serveur peut nous renvoyer une valeur d'époque, que nous devrons convertir en utilisant PHP rendez-vous amoureux() une fonction. La discussion des valeurs d'époque sort du cadre de ce didacticiel, mais vous pouvez en savoir plus à ce sujet ici..

Affichage du résultat au début

Maintenant, je vais définir une valeur de date de démonstration et la sauvegarder. Par exemple, je choisis 2015-08-20.

Voyons sa sortie au début.

Le réglage de la date enregistrée est correctement imprimé, avec l'heure. En tant que paramètre pour temps est désactivé pour l'instant, aucun réglage de l'heure n'est affiché. Comment définissez-vous l'heure? J'y viendrai dans un instant.

Création d'une option de type de date dans un onglet Admin

Exemple de déclaration

Maintenant, je vais ajouter cette option dans un onglet administrateur, mais il affichera à la fois rendez-vous amoureux et temps réglages.

createOption (array ('id' => 'aa_date_in_tab1_panel2', // les ID doivent toujours être uniques. L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'date', // Type d'option que nous sommes creation 'name' => 'My Date Option', // Nom de l’option qui sera affichée dans le panneau d’administration 'desc' => 'Ceci est notre option', // Description de l’option qui sera affichée dans le panneau panneau d'administration 'default' => '2015-8-15 00:00', // Valeur par défaut pour la date et l'heure 'time' => true // Paramètres de l'heure activés.)); 

Cette fois, j'ajoute un rendez-vous amoureux option de type dans un onglet administrateur $ aa_tab1. Son identifiant est aa_date_in_tab1_panel2. Regardez la liste des paramètres. Ça montre temps est réglé sur vrai. Cela signifie que la sélection de l'heure est activée. Notez le format de valeur pour défaut, qui est défini pour les deux rendez-vous amoureux et temps.

Tu peux trouver Option Date dans Onglet 1du panneau d'administration Options soignées 2.

Exemple d'utilisation

Récupérons les valeurs.

getOption ('aa_date_in_tab1_panel2'); echo date ('r', $ aa_date_in_tab1_panel2_val); // sortie en tant que date RFC 2822 - renvoie l'heure locale - Pour plus d'informations, consultez http://goo.gl/g9tZLi?> 

Il n'y a vraiment rien de nouveau dans ce code.

Affichage du résultat au début

Supposons que mes valeurs de date et d'heure de démonstration sont 2015-09-06 et 08h45. Il y a aussi À présent bouton qui définit la valeur temporelle actuelle en un clic.

Le front-end apparaît comme ceci:

Création d'une option de type de date dans une metabox

Exemple de déclaration

Ecrivons son code.

createOption (array ('id' => 'aa_mb_date', // les ID doivent toujours être uniques. L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'date', // Type d'option que nous sommes creation 'name' => 'Select Time Settings', // Nom de l’option qui sera affichée 'desc' => 'C’est notre option', // Description de l’option qui sera affichée 'default' => ' 00:00 ', // Valeur par défaut de l'heure' date '=> false, // Paramètres de date désactivés.' Time '=> true // Paramètres de date activés.)); 

le createOption () la fonction ajoute un rendez-vous amoureux option de type dans un metabox $ aa_metbox (ligne 5) Mais ce code n’affiche que temps paramètres parce que le rendez-vous amoureux est défini sur false. C'est pourquoi j'ai changé le prénom et défaut les valeurs de cette option en conséquence.

La capture d'écran ci-dessus affiche un sélecteur de temps nommé Sélectionnez les paramètres de l'heureà l'intérieur d'un metabox. Cela apparaît sur toutes les pages et les écrans de post-édition.

Exemple d'utilisation

Obtenons les valeurs de temps économisées.

getOption ('aa_mb_date', get_the_ID ()); echo date ('r', $ aa_mb_time_epoch_val); // sortie en tant que date RFC 2822 - renvoie l'heure locale - Pour plus d'informations, consultez http://goo.gl/g9tZLi?> 

Je viens de récupérer la valeur du temps, puis je l'ai converti avec le rendez-vous amoureux() une fonction.

Affichage du résultat au début

La valeur de mon temps de démonstration est 13: 03.

La sortie s'imprime comme ceci:

Création d'une option de type de date dans une section de personnalisation de thème

Exemple de déclaration

En fin de compte, je vais ajouter cette option dans une section de personnalisation de thème..

createOption (array ('id' => 'aa_sec_date', // les identifiants doivent toujours être uniques. L'identifiant qui sera utilisé pour obtenir la valeur de cette option 'type' => 'date', // le type d'option que nous sommes creation 'name' => 'Select Date / Time Settings', // Nom de l’option qui sera affichée 'desc' => 'Ceci est notre option', // Description de l’option qui sera affichée 'default' = > '2015-08-01', // Valeur par défaut pour la date et l'heure 'date' => true, // Paramètres de date activés. 'Time' => true // Paramètres d'horloge activés.)); 

Enfin, j'ai ajouté cette option en suivant la même procédure dans une section de personnalisation de thème..

La capture d'écran le montre clairement.

Exemple d'utilisation

Obtenons ses valeurs d'options sauvegardées.

getOption ('aa_sec_date'); ?> 
La valeur de la date / heure est

Je vais obtenir ses valeurs sauvegardées dans le header.php fichier. Donc, commencez par obtenir une instance et enregistrez l'ID unique à l'intérieur du getOption () une fonction. Créez ensuite un div et imprimez la sortie de la variable $ aa_sec_date_val via le rendez-vous amoureux() fonction (ligne n ° 13).

Affichage du résultat au début

Voici une capture d'écran des changements en cours.

Conclusion

Voici comment ajouter des paramètres dynamiques de date et d’heure dans vos thèmes et plug-ins WordPress. Cette option peut s'avérer utile lorsque vous souhaitez que l'utilisateur final saisisse la date et l'heure pour une raison quelconque.. 

Par exemple, je construisais ce thème WordPress dans lequel je voulais ajouter un type de publication d'événements personnalisé (via un plugin). A cette époque, j'avais la possibilité d'ajouter n'importe lequel des plugins Event les plus utilisés ou de coder moi-même un petit plugin soigné.. 

Ainsi, au lieu de fournir à mon client un plug-in d'événement pouvant ressembler à un cockpit d'avion, j'ai utilisé Titan Framework. J'ai utilisé le rendez-vous amoureux tapez option deux fois dans deux métaboxes différents pour les dates d'événements.

Intégrez cette option dans votre projet et réduisez le fardeau lié à la rédaction de longs codes. Dans mon prochain article, nous explorerons les radio option de type dans Titan Framework.

Avez-vous des questions? Postez-les dans les commentaires ci-dessous ou rejoignez-nous sur Twitter.