Share
Permettre à un utilisateur final de changer la police de votre thème peut être une tâche intimidante, en particulier lorsque vous souhaitez fournir cette option dans un panneau d’administration personnalisé, une métabox ou même le personnaliseur de thème. Aujourd'hui, je vais discuter de la façon d'ajouter une coutume Police de caractère option de type via Titan Framework.
le Police de caractère L'option type est l'une des options les plus polyvalentes en termes de fonctionnalités de Titan Framework. Cela vous permet non seulement de changer la police, mais aussi sélecteur de style de police. Avec une gamme complète d'options riches en fonctionnalités, vous pouvez choisir à la fois des polices Web sécurisées et des polices Google Web. Appliquez autant de styles que vous le souhaitez, par exemple couleurs, espacement des lettres, ombres, hauteur de ligne, etc. Un utilisateur final peut également consulter l'aperçu de l'apparence de la police et de ses styles. Voici à quoi ressemble cette option:
Vous pouvez voir dans l'image ci-dessus à quel point les paramètres de police sont détaillés. Cela est possible via tout un ensemble de paramètres de réglage pris en charge par cette option. Il y a quelques paramètres obligatoires et optionnels. D'abord, jetons un coup d'œil aux obligatoires:
Accentsconagua
Police de caractère option de type.Certains des paramètres optionnels que vous devriez utiliser sont les suivants:
Police de caractère type option, ce paramètre se comporte un peu différemment. Il s'agit d'un tableau contenant les polices et les styles par défaut que vous souhaitez utiliser (nous en parlerons plus tard).Enfin, il existe une longue liste de certains paramètres basés sur le contrôle, dont les valeurs par défaut sont définies sur vrai. Nommez-les et découvrez comment ils se comporteront s'ils sont configurés à faux.
faux.faux.faux.faux.faux.faux.faux.faux.faux.faux.faux.faux.faux alors la police Google (si utilisée) ne sera pas automatiquement mise en file d'attente.Vous pouvez ajouter le Police de caractère type option à l'intérieur:
La portée de cet article ne concerne pas la création de ces conteneurs. Vous pouvez vous référer à mes articles précédents si vous voulez en savoir plus.
Le processus général d’ajout de ce type d’option reste le même:
getInstance () une fonction.createOption () une fonction.getOption () une fonction. Créons cette option dans un panneau d'administration.
Voici le code:
createOption (array ('id' => 'aa_font', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'police', // Type d'option que nous créons 'nom' => 'My Font Option', // Nom de l'option qui sera affichée dans le panneau d'administration 'desc' => 'Choisissez vos paramètres de police' // Description de l'option qui sera affichée dans le panneau d'administration)); J'ai utilisé le createOption () fonction (ligne n ° 7) pour ajouter un Police de caractère option de type dans un panneau d'administration $ aa_panel. Cette fonction prend un tableau de paramètres. C'est pourquoi des paramètres comme nom, id, type et desc sont utilisés ici. La valeur de ID (i.e. aa_font) devrait être unique car il récupère les valeurs des options sauvegardées.
Dans la capture d'écran ci-dessus, il y a un Police de caractère type option nommée Option de police dans un panneau d'administration Options soignées. Plusieurs options de configuration peuvent être définies pour configurer les paramètres de police de votre projet de développement Web..
Maintenant, je vais récupérer les valeurs des options sauvegardées.
getOption ('aa_font'); / ** * * Impression des valeurs du tableau de polices * * / var_dump ($ aa_font_array); ?>Le processus d'obtention des valeurs enregistrées est à peu près le même que celui décrit dans les articles précédents. À la ligne 3, le getInstance () fonction est utilisée. Elle utilise un paramètre unique, de préférence le nom de votre thème (i.e. soignédans ce cas). Ensuite, j'ai utilisé le getOption () fonction (ligne n ° 6), qui obtient la valeur via l'ID aa_font, puis je l'ai enregistré dans une nouvelle variable $ aa_font_array.
Auparavant, nous avons établi que le Police de caractère L'option type prend en charge un tableau de paramètres même si nous ne les définissons pas en réalité car leur valeur par défaut est définie sur vrai. Donc, avant d’afficher les valeurs récupérées au début, laissez-moi imprimer ce tableau complet de paramètres.
Pour cela j'ai utilisé le var_dump () fonction (à la ligne 16) pour la variable $ aa_font_array. Voyons comment ce tableau est imprimé:
Dans la capture d'écran ci-dessus, une description détaillée de chaque élément d'un tableau est répertoriée. Cela explique clairement comment Police de caractère L'option de type dans Titan Framework est définie.
Maintenant, cette partie était juste une chose supplémentaire: notre objectif principal est de modifier les paramètres de police par défaut et de les imprimer au premier plan..
Remplacez la ligne 16 par les lignes de code suivantes:
Pellentesque habitant morbi tristique.
À la ligne 7, j'ai utilisé le style CSS intégré dans une balise H3 (rubrique 3). La valeur correspondant à la style attribut,c'est à dire. taille de police, est imprimé au début.
Pour cela, j'ai intégré le écho commande, qui affiche uniquement une partie spécifique du tableau, c.-à-d.. echo $ aa_font_array ['font_size'], dans le CSS en ligne. A ce stade, le front-end apparaît comme ceci:
Le texte imprimé est actuellement 14px en taille. Modifions cette valeur à partir de notre tableau de bord et visionnons le résultat..
Supposons que je mette la valeur de démonstration à 30px.
Enregistrez ce paramètre et découvrez les modifications. Voici la capture d'écran:
Une augmentation taille de police du texte est vu clairement. De cette façon, vous pouvez entrer n’importe quel élément du tableau dans la ligne 16 du code et prévisualiser les résultats..
Créons un Police de caractère option de type dans un metabox qui a tous les champs de style en cela.
createOption (array ('id' => 'aa_mb_font', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'police', // Type d'option que nous créons 'nom' => 'My Font Option', // Nom de l’option à afficher 'desc' => 'Choisissez vos paramètres de police' // Description de l’option à afficher));J'ai ajouté un Police de caractère type option avec ID aa_mb_font dans un metabox $ aa_metbox via le createOption () fonction (ligne n ° 8). Il apparaît contre le nom 'Option de police'.
Voici la capture d'écran, où vous pouvez trouver Option de police dans une metabox affichée à la fin d'un écran de modification de page.
Ceci est une métabox personnalisée que j'ai créée avec Titan Framework. Reportez-vous à mes articles précédents pour savoir comment.
Maintenant, je vais récupérer les valeurs des options sauvegardées.
getOption ('aa_mb_font', get_the_ID ()); // Vérifie si la valeur a été définie / Validation $ aa_mb_font1_val = (is_array ($ aa_mb_font1_array) &&! Empty ($ aa_mb_font1_array)? TRUE: FALSE); ////////////////////////////////////////////////////////// /////////// // Obtenez toutes les valeurs dont vous avez besoin Abstraction de PHP et HTML // //////////////////////////// //////////////////////////////////// // // Obtenir la valeur de couleur $ aa_mb_font1_clr_val = ($ aa_mb_font1_val == VRAI? $ Aa_mb_font1_array ['color']: 'red'); // Obtenir la valeur de la famille de polices $ aa_mb_font1_ffm_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['font-family']: 'Arial'); // Obtenir la valeur de la taille de la police $ aa_mb_font1_fsz_val = ($ aa_mb_font1_val == VRAI? $ Aa_mb_font1_array ['taille de la police']: '14px'); / ** * * Imprimer les valeurs au début * * /?> Valeur imprimée de l'option de type de police dans metabox. Le processus d'obtention des valeurs que j'utilise ici est un peu complexe. Commencez par obtenir une instance unique via le getInstance () fonction dans la ligne # 3. Ensuite, récupérez la valeur enregistrée en enregistrant l'ID aa_mb_font à l'intérieur de getOption () fonctionne comme paramètre (ligne # 11).
À présent, aa_mb_font n’est pas un ID ordinaire, mais un ensemble complet associatif de nos options de polices. J'ai sauvegardé ce tableau associatif dans une nouvelle variable $ aa_mb_font1_array.
La ligne 14 valide la présence d'un tableau dans la variable $ aa_mb_font1_array et vérifie qu'il n'est pas vide. Cette étape est importante car nous ne voulons pas nous retrouver avec des erreurs PHP fatales en sortant un élément d'une variable qui n'est même pas un tableau..
Parfois, lorsque l'utilisateur n'a enregistré aucune valeur du tableau de bord et que vous n'avez défini aucune valeur par défaut, cela getOption la fonction obtient NUL. À cette fin, une instruction basée sur la vérification est utilisée. Si c'est un tableau et qu'il n'est pas vide, alors il met un VRAI valeur, ou bien si ce n'est pas un tableau et est vide, alors il définit FAUX comme la valeur de $ aa_mb_font1_val.
Si VRAI, alors cela signifie:
$ aa_mb_font1_array est un tableau.$ aa_mb_font1_array n'est pas un tableau vide, mais contient des éléments. Si FAUX, alors cela signifie:
$ aa_mb_font1_array n'est pas un tableau, ou $ aa_mb_font1_array est un tableau vide et ne contient aucun élément. Il s’agissait d’une validation globale du tableau de polices. Maintenant, je vais étendre ce processus à des éléments de tableau individuels. Les lignes 21 à 27 obtiennent les valeurs des clés individuelles dans le tableau associatif et définissent une valeur par défaut si aucune valeur n'existe..
Par exemple, la ligne 21 explique que si la condition définie est vérifiée VRAI, ce qui signifie qu'une valeur existe, puis récupérez le Couleur d'un tableau et enregistrez-le dans une variable $ aa_mb_font1_clr_val. Si cette valeur n'existe pas, définissez la valeur sur rouge, qui est par défaut dans ce cas. Il y a plusieurs façons de contourner ce problème, ce n'est donc qu'un des moyens que j'aime.
En bref, si un utilisateur a enregistré une nouvelle couleur de police dans son tableau de bord, la couleur de police sélectionnée apparaît. autrement rougeest montré. Je vous recommande de définir les options par défaut lors de la définition de la police pour éviter de tels problèmes..
La même explication s’applique aux lignes 24 et 27, sauf que ces lignes valident les valeurs de famille de polices et taille de police.
En fin de compte, je viens d'écrire le code qui affiche le résultat au début. Aux lignes 38 à 48, un div est créé en HTML. Ensuite, j'ai répété les valeurs de toutes les variables souhaitées via un style CSS inline.
Supposons que je définisse les paramètres de police de démonstration suivants:
Voici comment il apparaît au début:
Vous pouvez maintenant essayer vous-même de nouveaux paramètres.
Créons cette option dans un onglet administrateur, mais avec une approche différente.
createOption (array ('id' => 'aa_font_in_tab1_panel2', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'police', // Type d'option que nous créons 'nom' => 'My Font Option', // Nom de l'option qui sera affichée dans le panneau d'administration 'desc' => 'Choisir les paramètres de police', // Description de l'option qui sera affichée dans le panneau d'administration 'show_font_weight' => false, // le champ Police-weight n'est pas affiché 'show_font_style' => false, // le champ Style de police n'est pas affiché 'show_line_height' => false, // le champ de hauteur de ligne n'est pas affiché 'show_letter_spacing' => false, // Le champ d'espacement des lettres n'est pas affiché 'show_text_transform' => false, // le champ de transformation de texte n'est pas affiché 'show_font_variant' => false, // le champ de police-variant n'est pas affiché 'show_text_shadow' => false, // Le champ d'ombre du texte n'est pas affiché 'default' => array ('font-family' => 'Arial', // Valeur par défaut de font-family 'color' => 'rouge', // Valeur par défaut de font color ' line-height '=>' 2em ', // valeur par défaut de line-height' font-w eight '=>' 500 '// Valeur par défaut de font-weight))); Cette fois, j'ajoute un Police de caractère option de type, mais ne permettant que quelques champs de style apparaître. L'identifiant unique de cette option est aa_font_in_tab1_panel2. Regardez la liste des paramètres et vous saurez ce qui différencie ce code du précédent..
J'ai changé le défaut les valeurs de plusieurs paramètres basés sur le contrôle à faux. Cela signifie que tous les champs de style des lignes 13 à 19 n'apparaîtront pas. Notez également la présence de défaut valeurs pour les options de style comme famille de polices, couleur, hauteur de trait et poids de la police.
UNE Police de caractère type option nommée Option de police existe dans Onglet 1 du panneau d'administration Options soignées 2. Si vous voulez savoir comment cet onglet d'administrateur a été créé via Titan Framework, parcourez les articles précédents de cette série..
Dans la capture d'écran ci-dessus, le menu de la police apparaît moins détaillé en termes de champs de style. La raison est assez évidente, c’est-à-dire le faux état d'un certain nombre de paramètres dans mon code. Notez une autre chose: les valeurs par défaut des options sont définies automatiquement, c.-à-d.. 'font-family' => 'Arial' et couleur => 'rouge'.
Ai-je sauté un détail? Oui! Je suis sûr que vous devez vous demander où sont les valeurs par défaut de hauteur de la ligne et poids de la police est allé. Regardez à nouveau la liste des paramètres et vous trouverez les valeurs de show_line_height et show_font_weight sont mis à faux.
Cela signifie que quelle que soit votre capacité à définir un paramètre, celui-ci ne fonctionnera qu'une fois défini sur vrai. L'ajout de ces deux paramètres avait pour seul objectif d'expliquer ce concept. Pour le moment, vous pouvez aussi les omettre.
Récupérons les valeurs des options sauvegardées:
getOption ('aa_font_in_tab1_panel2'); // Vérifie si la valeur a été définie / Validation $ aa_font2_val = (is_array ($ aa_font2_array) ||! Empty ($ aa_font2_array)? TRUE: FALSE); ////////////////////////////////////////////////////////// /////////// // Obtenez toutes les valeurs dont vous avez besoin Abstraction de PHP et HTML // //////////////////////////// ////////////////////////////////////// // // Obtenir la valeur de couleur $ aa_font2_clr_val = ($ aa_font2_val == VRAI? $ Aa_font2_array ['color']: 'red'); // Récupère la valeur de la famille de polices $ aa_font2_ffm_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['font-family']: 'Arial'); // Obtenir la valeur de la taille de la police $ aa_font2_fsz_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['font-size']: '14px'); / ** * * Imprimer les valeurs au début * * /?> Valeur imprimée de l'option de type de police dans l'onglet. Les lignes écrites pour récupérer les valeurs des options sauvegardées sont à peu près les mêmes que celles que j’avais écrites précédemment pour un metabox. Seuls les noms de variables et les identifiants sont différents. Donc, je ne fais que résumer les étapes écrites ci-dessus:
A ce stade, si je prévisualise le front-end, il affichera uniquement les paramètres par défaut tels que:
Supposons que ce soient nos nouveaux paramètres de police:
Voici la capture d'écran de cette nouvelle configuration:
La différence entre les deux paramètres est assez évidente.
En fin de compte, créons cette option dans le personnaliseur.
createOption (array ('id' => 'aa_sec_font', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'police', // Type de l'option que nous créons 'nom' => 'My Font Option', // Nom de l’option à afficher 'desc' => 'Choisissez vos paramètres de police' // Description de l’option à afficher));UNE Police de caractère type option avec ID aa_sec_font existe dans une section de personnalisation de thème $ aa_section1. Il apparaît avec le nom 'Option de police'. Le reste des paramètres sont les mêmes.
Vous pouvez trouver cette option dans la section de personnalisation du thème nommée Ma section.
Obtenons ses valeurs sauvegardées.
getOption ('aa_sec_font'); // Vérifie si la valeur a été définie / Validation $ aa_sec_font3_val = (is_array ($ aa_sec_font3_array) ||! Empty ($ aa_sec_font3_array)? TRUE: FALSE); ////////////////////////////////////////////////////////// /////////// // Obtenez toutes les valeurs dont vous avez besoin Abstraction de PHP et HTML // //////////////////////////// //////////////////////////////////// // // Obtenir la valeur de couleur $ aa_sec_font3_clr_val = ($ aa_sec_font3_val == VRAI? $ Aa_sec_font3_array ['color']: 'red'); // Récupère la valeur de la famille de polices $ aa_sec_font3_ffm_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['font-family']: 'Arial'); // Obtenir la valeur de la taille de la police $ aa_sec_font3_fsz_val = ($ aa_sec_font3_val == VRAI? $ Aa_sec_font3_array ['font-size']: '14px'); / ** * * Imprimer les valeurs au début * * /?> Valeur imprimée de l'option de type de police dans le personnaliseur. Encore une fois, ce code est exactement le même que celui que j’ai écrit dans le cas d’un onglet administrateur et d’un metabox. Seuls les noms de variables et les identifiants sont différents. Alors, reportez-vous au détail écrit ci-dessus.
Jetons un coup d'œil à l'aperçu en direct des modifications que j'ai apportées.
Dans notre discussion sur le Police de caractère type option dans Titan Framework, nous avons appris que son paramètre CSS se comporte quelque peu différemment par rapport aux autres options. Aujourd'hui, dans cet article, je vais vous montrer comment générer automatiquement une feuille de style CSS de votre type de police dans un panneau d'administration personnalisé ou même dans une section de personnalisation de thème..
En général, css est un chaîne type de paramètre, donc si vous le définissez, il peut générer automatiquement le CSS chaque fois qu'une option Titan Framework est créée dans un panneau d'administrateur et / ou une section de personnalisation du thème.
Nous savons qu'un Police de caractère L'option type de Titan Framework est fondamentalement un tableau associatif qui porte une gamme de champs de style, par exemple.Couleur, famille de polices, taille de police, etc. De même, il se peut que vous utilisiez les mêmes propriétés de style ailleurs dans votre thème ou plug-in. Écrire ces nombreuses options dans le css paramètre peut être une tâche répétitive et fastidieuse. Lorsque vous n'utilisez pas certaines propriétés, que?
Pour simplifier les choses, Titan Framework vous permet d’attribuer tous les styles à vos sélecteurs CSS via la police. css paramètre. Utilisez simplement le terme valeur à l'intérieur de ce paramètre et votre travail est terminé. Laisse moi te montrer comment:
'h1.site-header valeur'
Puisque nous savons que le css paramètre génère toutes les règles CSS nécessaires, voyons quand cela se trouve dans les conteneurs suivants:
Remarque: Cet article traite uniquement de l'utilisation et du comportement du css paramètre avec le Police de caractère option de type dans Titan Framework. Si vous voulez savoir comment ces conteneurs sont fabriqués ou comment ajouter un Police de caractère tapez l'option dans Titan Framework puis reportez-vous à mes articles précédents.
Ecrivons son code.
createOption (array ('id' => 'aa_font', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'police', // Type d'option que nous créons 'nom' => 'Mon option de police', // Nom de l'option qui sera affichée 'desc' => 'Choisissez vos paramètres de police', // Description de l'option qui sera affichée 'show_font_style' => false, 'show_letter_spacing' => false, 'show_text_transform' => false, 'show_font_variant' => false, 'show_text_shadow' => false, 'default' => array ('font-family' => 'Exo 2', 'color' => '# 888888 ',' line-height '=>' 2em ',' font-weight '=>' 500 ',),' css '=>' .aa_site_font1 valeur '));Ce code crée un Police de caractère option de type dans un panneau d'administration $ aa_panel avec des champs de style limités. L'identifiant de cette option est aa_font. Tous les paramètres (lignes 13 à 17) où les valeurs sont définies sur faux n'apparaîtra pas. J'ai également ajouté des valeurs par défaut pour le famille de polices, Couleur, hauteur de la ligne et poids de la police réglages.
La ligne 24 définit un css paramètre pour une classe nommée .aa_site_font1. Notez que dans cette définition de classe, je n’ai écrit que valeur. Cela signifie que tous les CSS que ce champ va générer seront placés là où valeur est écrit. Donc, partout où cette classe est utilisée, elle charge automatiquement les propriétés CSS.
La capture d'écran ci-dessus montre les paramètres de police actuels et indique clairement que cette option est créée dans mon premier panneau d'administration, c'est-à-dire. Options soignées.
Créons une balise div avec aa_site_font1 classe et voir le résultat au début.
Valeur de 'css' dans l'onglet 2 du panneau amdin2
Si vous regardez le code ci-dessus, nous avons fourni le css paramètre de la Police de caractère champ une classe où il devrait sortir les résultats CSS, et cette classe était aa_site_font1. J'ai donc créé une div avec classe. aa_site_font1, pour afficher les résultats au début.
A ce stade, si vous regardez le front-end, cela ressemblera à ceci:
Modifions maintenant nos paramètres par défaut et rendons cette police plus grande et de couleur rouge..
Les nouveaux changements apparaissent au début comme ceci. Rappelez-vous qu'il ne s'agit que d'une div au début avec la classe CSS aa_site_font1 que nous avons utilisé à l’intérieur du css paramètre.
Voici comment vous pouvez ajouter un css paramètre à l'intérieur d'un Police de caractère option de type. Titan Framework générera automatiquement le CSS pour cela dans votre thème.
Regarde son code.
createOption (array ('id' => 'aa_sec_font', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'police', // Type de l'option que nous créons 'nom' => 'Mon option de police', // Nom de l'option à afficher 'desc' => 'Choisissez vos paramètres de police', // Description de l'option à afficher 'css' => '.aa_site_font2 valeur' ));Cette fois, j'ai ajouté le css par
