Permettre aux utilisateurs finaux de modifier les polices d'un thème peut être une tâche ardue, surtout lorsque vous souhaitez proposer cette option dans un panneau d'administration personnalisé, une méta-boîte ou même le personnalisateur de thème. Aujourd'hui, je vais expliquer comment ajouter des options de type font personnalisées via Titan Framework.
font Les options de type sont l'une des options les plus polyvalentes de Titan Framework. Non seulement il vous permet de modifier les polices, mais c'est aussi un sélecteur de style de police complet. Avec un ensemble complet d'options riches en fonctionnalités, vous pouvez choisir parmi des polices sécurisées pour le Web et Google WebFonts. Appliquez autant de styles que vous le souhaitez, tels que la couleur, l'espacement des lettres, l'ombre, la hauteur des lignes, etc. Les utilisateurs finaux peuvent également afficher des aperçus des polices et de leurs styles. Voici à quoi ressemble l'option :
Vous pouvez voir à quel point les paramètres de police sont détaillés dans l'image ci-dessus. Ceci peut être réalisé grâce à un large ensemble de paramètres de réglage pris en charge par cette option. Il existe certains paramètres obligatoires et facultatifs. Tout d’abord, jetons un œil aux champs obligatoires :
font. Maintenant, certains paramètres facultatifs que vous devez utiliser sont :
font, ce paramètre se comporte légèrement différemment. Il prend un tableau contenant certaines polices et styles par défaut que vous souhaitez utiliser (nous y reviendrons plus tard). Enfin, il existe une longue liste de certains paramètres basés sur l'inspection avec leurs valeurs par défaut définies sur true。让我们为它们命名，并了解如果设置为 falsecomment ils se comportent.
false, la section famille de polices disparaît. false, la palette de couleurs ne sera pas affichée. false, l'option de taille de police disparaît. false, l'option font-weight disparaît. false, le paramètre de style de police disparaîtra. false, la hauteur de la ligne ne peut pas être modifiée. false, vous ne pouvez pas modifier letter_spacing. false, l'option de transformation de texte disparaît. false, le champ font-variant n'apparaîtra pas. false, vous ne verrez pas d'aperçu en direct de la police. false, la liste des polices Web sécurisées disparaîtra. false, les polices Google ne seront pas affichées. false, Google Fonts (si utilisé) ne sera pas automatiquement mis en file d'attente. Vous pouvez y ajouter font des options de type :
La portée de cet article n'est pas la création de ces conteneurs. Si vous souhaitez en savoir plus, vous pouvez vous référer à mon article précédent.
Le processus global d'ajout de ce type d'option reste le même :
getInstance(). createOption(). getOption(). Créons cette option dans le panneau d'administration.
Voici le code :
<?php
/**
*
* Create font type option in an admin panel
*
*/
$aa_panel->createOption( array(
'id' => 'aa_font', // The ID which will be used to get the value of this option
'type' => 'font', // Type of option we are creating
'name' => 'My Font Option', // Name of the option which will be displayed in the admin panel
'desc' => 'Choose your font settings' // Description of the option which will be displayed in the admin panel
) );
J'ai ajouté l'option de type createOption() 函数（第 7 行）在管理面板中添加了 font 类型选项 $ aa_panel。该函数占用一个参数数组。这就是为什么这里使用 name、id、type 和 desc 等参数。 ID 的值（即 aa_font $ aa_panel dans le panneau d'administration en utilisant la fonction
name, id, type
et
sont utilisés ici. La valeur de l'ID (c'est-à-dire aa_font) doit être unique car elle obtient la valeur de l'option enregistrée.
fontDans la capture d'écran ci-dessus, il y a une
Options soignées
. Il existe plusieurs options de paramètres que vous pouvez utiliser pour configurer les paramètres de police pour votre projet de développement Web.
getInstance() 函数，该函数使用一个唯一参数，最好是您的主题名称（即 neat 中这个案例）。接下来，我使用了 getOption() 函数（第 6 行），该函数通过 ID aa_font 获取值，然后将其保存在新变量 $aa_font_arrayExemple d'utilisation
Maintenant, je vais récupérer la valeur de l'option enregistrée. font 类型选项会占用一组参数设置，即使我们实际上没有定义它们，因为它们的默认值设置为 true
<?php // 1. Get the titan framework instance and save it to a variable $titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it. // 2. Get the value via ID using getOption function $aa_font_array = $titan->getOption( 'aa_font' ); /** * * Printing font array values * */ var_dump( $aa_font_array ); ?>
est utilisée, qui prend un seul argument, de préférence le nom de votre thème (c'est-à-dire neat$aa_font_array 使用了 var_dump()
(ligne 6) qui récupère la valeur par ID aa_font puis l'enregistre dans une nouvelle variable $aa_font_array</ code>. <img src="https://img.php.cn/upload/article/000/887/227/169365008334889.jpg" alt="添加字体类型选项：Titan 框架初学者综合指南" />
</p>Plus tôt, nous avons établi que les options de type <p> occupent un ensemble de paramètres même si nous ne les avons pas réellement définis, car leurs valeurs par défaut sont définies sur <code class="inline"> true. Donc, avant que le frontend n'affiche les valeurs récupérées, permettez-moi d'imprimer ce tableau de paramètres complet. font
(ligne #16). Voyons comment ce tableau s'imprime :
Dans la capture d'écran ci-dessus, une description détaillée de chaque élément du tableau est répertoriée. Il explique clairement comment définir les options de type dans Titan Framework.
Maintenant, cette partie n'est qu'une chose supplémentaire - notre objectif principal est de modifier les paramètres de police par défaut et de l'imprimer sur le frontend. font-size
<?php /** * * Replace this code on line #16 * */ ?> <h3 style="font-size: <?php echo $aa_font_array['font-size']; ?>;">Pellentesque habitant morbi tristique.</h3>
style 
,
c'est-à-dire 14px, est imprimée sur le devant.
30px
La taille actuelle du texte imprimé est 
. Modifions cette valeur depuis le tableau de bord et prévisualisons les résultats.
Afficher les résultats sur le frontend
Supposons que je définisse la valeur de démonstration sur 
.
font-size
fontLe texte ajouté est clairement visible. Cela vous permet de saisir n'importe quel élément du tableau à la ligne 16 du code et de prévisualiser les résultats.
Exemple de déclaration
createOption() 在元框 <code class="inline">$aa_metbox 添加了 ID 为 aa_mb_font 的 font 类型选项Créons une option de type dans la méta-boîte qui contient tous les champs de style
<?php
/**
*
* Create font type option in a metabox
*
*/
$aa_metbox->createOption( array(
'id' => 'aa_mb_font', // The ID which will be used to get the value of this option
'type' => 'font', // Type of option we are creating
'name' => 'My Font Option', // Name of the option which will be displayed
'desc' => 'Choose your font settings' // Description of the option which will be displayed
) );
J'ai ajouté l'ID de aa_mb_font dans la méta-boîte $aa_metbox via createOption() <strong> Tapez la fonction options (ligne 8). Il apparaît à côté du nom « Mes options de police
这是我使用 Titan Framework 创建的自定义元框。请参阅我之前的文章以了解具体操作方法。
现在我将检索保存的选项值。
<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.
/**
*
* Get Option Value of metabox.
*
*
*/
$aa_mb_font1_array = $titan->getOption( 'aa_mb_font', get_the_ID() );
// Check if value was set / Validation
$aa_mb_font1_val = ( is_array( $aa_mb_font1_array ) && !empty( $aa_mb_font1_array ) ? TRUE : FALSE );
/////////////////////////////////////////////////////////////
// Get all the values you need Abstraction of PHP and HTML //
/////////////////////////////////////////////////////////////
// Get color value
$aa_mb_font1_clr_val = ( $aa_mb_font1_val == TRUE ? $aa_mb_font1_array['color'] : 'red' );
// Get font-family value
$aa_mb_font1_ffm_val = ( $aa_mb_font1_val == TRUE ? $aa_mb_font1_array['font-family'] : 'Arial' );
// Get font-size value
$aa_mb_font1_fsz_val = ( $aa_mb_font1_val == TRUE ? $aa_mb_font1_array['font-size'] : '14px' );
/**
*
* Print values at front-end
*
*/
?>
<div
style="
color:<?php echo $aa_mb_font1_clr_val; ?>;
font-family: <?php echo $aa_mb_font1_ffm_val; ?>;
font-size: <?php echo $aa_mb_font1_fsz_val; ?>;
"
>
Printed value of font type option in metabox.
</div>
获取我在这里使用的值的过程有点复杂。首先通过第 3 行中的 getInstance() 函数获取一个唯一实例。接下来，通过在 getOption() 函数内注册 ID aa_mb_font 作为参数来检索保存的值（第 11 行）。
现在，aa_mb_font 不是一个普通的 ID，而是包含我们的字体选项的完整关联数组。我将此关联数组保存在新变量 $aa_mb_font1_array 中。
第 14 行验证变量 $aa_mb_font1_array 中是否存在数组，并检查它是否不为空。这一步很重要，因为我们不想因为输出变量的元素而导致致命的 PHP 错误，而该变量本来就不是数组。
有时，当用户未保存仪表板中的任何值并且您未设置任何默认值时，此 getOption 函数会获取 NULL。为此，使用基于检查的语句。如果它是一个数组并且不为空，则它会放置一个 TRUE 值，否则，如果它不是一个数组并且为空，那么它会将 FALSE 设置为以下值： $aa_mb_font1_val。
如果 TRUE，则意味着：
$aa_mb_font1_array 是一个数组。$aa_mb_font1_array 不是一个空数组，而是其中包含元素。 如果 FALSE，则意味着：
$aa_mb_font1_array 不是数组，或者 $aa_mb_font1_array 是一个空数组，其中没有任何元素。 这是对字体数组的整体验证。现在我将把这个过程扩展到单个数组元素。第 #21 行到第 #27 行获取关联数组中各个键的值，如果不存在值则定义默认值。
例如，第 #21 行解释了如果定义的条件满足 TRUE，这意味着存在一个值，则获取数组的 color 并将其保存在变量 $aa_mb_font1_clr_val。如果不存在此类值，则将该值设置为 red，在本例中为默认值。有很多方法可以解决这个问题，所以这只是我喜欢的方法之一。
简而言之，如果用户从他或她的仪表板中保存了任何新的字体颜色，则会出现所选的字体颜色；否则会显示 red。我建议在设置字体时设置默认选项以避免任何此类问题。
同样的解释也适用于第 #24 行和第 #27 行，除了这些行验证 font-family 和 font-size 的值。 p>
最后，我刚刚编写了在前端打印结果的代码。在第 #38 行到第 #48 行中，用 HTML 创建了一个 div。然后我通过内联 CSS 样式回显所有所需变量的值。
假设我设置以下演示字体设置：
这是它在前端的显示方式：
您现在可以自己尝试一些新设置。
让我们在管理选项卡中创建此选项，但采用不同的方法。
<?php
/**
*
* Create font type option in an admin tab
*
*/
$aa_tab1->createOption( array(
'id' => 'aa_font_in_tab1_panel2', // The ID which will be used to get the value of this option
'type' => 'font', // Type of option we are creating
'name' => 'My Font Option', // Name of the option which will be displayed in the admin panel
'desc' => 'Choose font settings', // Description of the option which will be displayed in the admin panel
'show_font_weight' => false, //Font-weight field is not shown
'show_font_style' => false, //Font-style field is not shown
'show_line_height' => false, //Line-height field is not shown
'show_letter_spacing' => false, //Letter-spacing field is not shown
'show_text_transform' => false, //Text-transform field is not shown
'show_font_variant' => false, //Font-variant field is not shown
'show_text_shadow' => false, //Text-shadow field is not shown
'default' => array(
'font-family' => 'Arial', //Default value of font-family
'color' => 'red', //Default value of font color
'line-height' => '2em', //Default value of line-height
'font-weight' => '500' //Default value of font-weight
)
) );
这次我添加了 font 类型选项，但只允许显示一些样式字段。此选项的唯一 ID 是 aa_font_in_tab1_panel2。查看参数列表，您就会发现这段代码与之前的代码有何不同。
我已将几个基于检查的参数的默认值更改为 false。这意味着第 #13 行到第 #19 行的所有样式字段都不会出现。另请注意样式选项的默认值，如字体系列、颜色、行高和字体粗细。
名为我的字体选项的类型选项存在<管理面板Neat Options 2的strong>选项卡1。如果您想了解如何通过 Titan Framework 制作此管理选项卡，请浏览本系列之前的文章。
在上面的屏幕截图中，字体菜单在样式字段方面显得不太详细。原因很明显，即我的代码中许多参数的 false 状态。请注意另一件事：选项的默认值是自动设置的，即 'font-family' => 'Arial' 和 color => 'red'。< /p>
我是否跳过了任何细节？是的！我相信您一定想知道 line-height 和 font-weight 的默认值去了哪里。再次查看参数列表，您会发现 show_line_height 和 show_font_weight 的值设置为 false。
这意味着无论您以什么身份定义参数，只有在设置为 true 后才会起作用。添加这两个参数的唯一目的是解释这个概念。目前，您也可以忽略这些。
让我们获取保存的选项值：
<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.
/**
*
* Get Option Value of metabox.
*
*
*/
$aa_font2_array = $titan->getOption( 'aa_font_in_tab1_panel2' );
// Check if value was set / Validation
$aa_font2_val = ( is_array( $aa_font2_array ) || !empty( $aa_font2_array ) ? TRUE : FALSE );
/////////////////////////////////////////////////////////////
// Get all the values you need Abstraction of PHP and HTML //
/////////////////////////////////////////////////////////////
// Get color value
$aa_font2_clr_val = ( $aa_font2_val == TRUE ? $aa_font2_array['color'] : 'red' );
// Get font family value
$aa_font2_ffm_val = ( $aa_font2_val == TRUE ? $aa_font2_array['font-family'] : 'Arial' );
// Get font size value
$aa_font2_fsz_val = ( $aa_font2_val == TRUE ? $aa_font2_array['font-size'] : '14px' );
/**
*
* Print values at front-end
*
*/
?>
<div style="
color:<?php echo $aa_font2_clr_val; ?>;
font-family: <?php echo $aa_font2_ffm_val; ?>;
font-size: <?php echo $aa_font2_fsz_val; ?>;
"
>
Printed value of font type option in tab.
</div>
为检索保存的选项值而编写的行与我之前为元框编写的行几乎相同。只是变量名和ID不同。所以，我只是总结上面写的步骤：
在此阶段，如果我预览前端，它将仅显示默认设置，如下所示：
假设这些是我们的新字体设置：
以下是此新配置的屏幕截图：
两种设置之间的差异非常明显。
最后，让我们在定制器中创建此选项。
<?php
/**
*
* Create font type option in a customizer
*
*/
$aa_section1->createOption( array(
'id' => 'aa_sec_font', // The ID which will be used to get the value of this option
'type' => 'font', // Type of option we are creating
'name' => 'My Font Option', // Name of the option which will be displayed
'desc' => 'Choose your font settings' // Description of the option which will be displayed
) );
主题定制器部分 $aa_section1 中存在一个 font ID 为 aa_sec_font 的类型选项。它的名称为“我的字体选项”。其余参数相同。
您可以在名为我的部分的主题定制器部分中找到此选项。
让我们获取它保存的值。
<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.
// Body bg color
$aa_sec_font3_array = $titan->getOption( 'aa_sec_font' );
// Check if value was set / Validation
$aa_sec_font3_val = ( is_array( $aa_sec_font3_array ) || !empty( $aa_sec_font3_array ) ? TRUE : FALSE );
/////////////////////////////////////////////////////////////
// Get all the values you need Abstraction of PHP and HTML //
/////////////////////////////////////////////////////////////
// Get color value
$aa_sec_font3_clr_val = ( $aa_sec_font3_val == TRUE ? $aa_sec_font3_array['color'] : 'red' );
// Get font family value
$aa_sec_font3_ffm_val = ( $aa_sec_font3_val == TRUE ? $aa_sec_font3_array['font-family'] : 'Arial' );
// Get font size value
$aa_sec_font3_fsz_val = ( $aa_sec_font3_val == TRUE ? $aa_sec_font3_array['font-size'] : '14px' );
/**
*
* Print values at front-end
*
*/
?>
<div
style="
color:<?php echo $aa_sec_font3_clr_val; ?>;
font-family: <?php echo $aa_sec_font3_ffm_val; ?>;
font-size: <?php echo $aa_sec_font3_fsz_val; ?>;
"
>
Printed value of font type option in customizer.
</div>
这段代码再次与我在管理选项卡和元框的情况下编写的代码完全相同。只是变量名和ID不同。因此，请参阅上面写的详细信息。
让我们看一下我所做的更改的实时预览。
在我们对 Titan Framework 中的 font 类型选项的讨论中，我们了解到它的 CSS 参数与其他选项相比，其行为略有不同。今天，在本文中，我将向您展示如何在自定义管理面板甚至主题定制器部分中自动生成字体类型选项的 CSS。
一般来说，css 是一个 string 类型参数，因此，如果您设置它，每次在管理面板内创建 Titan Framework 选项时，它都会自动生成 CSS和/或主题定制器部分。
我们知道，Titan Framework 中的 font 类型选项基本上是一个关联数组，其中包含一系列样式字段，例如 color、 font-family、font-size 等。同样，您可能会在主题或插件的其他位置使用相同的样式属性。在 css 参数中写入这么多选项可能是一项重复且浪费时间的任务。当您不使用某些属性时，该怎么办？
为了让事情变得更简单，Titan Framework 允许您通过字体的 css 参数将所有样式分配给 CSS 选择器。只需在此参数中使用术语 value 即可完成您的工作。让我向您展示如何操作：
<?php
/**
*
* 'css' parameter in 'font' type option
*
*/
'css' => 'h1.site-header {
value
}'
既然我们知道 css 参数会生成所有必要的 CSS 规则，那么让我们讨论一下它何时位于以下容器内：
注意：本文的范围仅涉及 Titan Framework 中 css 参数以及 font 类型选项的用法和行为。如果您想了解这些容器的制作方法或如何在 Titan Framework 中添加 font 类型选项，请参阅我之前的文章。
让我们编写它的代码。
<?php
/**
*
* Using 'css' parameter inside an admin panel option
*
*/
$aa_panel->createOption( array(
'id' => 'aa_font', // The ID which will be used to get the value of this option
'type' => 'font', // Type of option we are creating
'name' => 'My Font Option', // Name of the option which will be displayed
'desc' => 'Choose your font settings', // Description of the option which will be displayed
'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 { value }'
) );
此代码在管理面板 $aa_panel 中创建一个具有有限样式字段的 font 类型选项。该选项的 ID 为 aa_font。值设置为 false 的所有参数（第 13 行到第 17 行）都不会出现。我还为 font-family、color、line-height 和 font-weight 添加了默认值设置。
第 24 行为名为 .aa_site_font1 的类定义了 css 参数。请注意，在这个类定义中，我只编写了 value。这意味着该字段将生成的所有 CSS 将放置在写入 value 的位置。因此，无论何时使用此类，它都会自动加载 CSS 属性。
上面的屏幕截图显示了当前的字体设置，并清楚地表明此选项是在我的第一个管理面板中创建的，即<强>简洁的选项。
让我们使用 aa_site_font1 类创建一个 div 标签，并在前端查看结果。
<!-- A div tag with class aa_site_font1 to prview the font properties--> <div class="aa_site_font1"> Value of 'css' in tab 2 of amdin panel2 </div>
如果您查看上面的代码，我们会为 font 字段的 css 参数提供一个应输出 CSS 结果的类，该类就是 aa_site_font1。因此，我继续创建了一个带有类 aa_site_font1 的 div，以在前端显示结果。
在这个阶段，如果你看前端，它会是这样的：
现在让我们更改默认设置，使字体变大并呈红色。
新的更改会像这样出现在前端。请记住，它只是前端的一个 div，其中包含 CSS 类 aa_site_font1，我们在 css 参数中使用了它。
通过此方法可以在 内添加 <code class="inline">css 参数font 类型选项。 Titan Framework 将在您的主题中自动为其生成 CSS。
看看它的代码。
<?php
/**
*
* Use 'css' parameter in a theme customizer
*
*/
$aa_section1->createOption( array(
'id' => 'aa_sec_font', // The ID which will be used to get the value of this option
'type' => 'font', // Type of option we are creating
'name' => 'My Font Option', // Name of the option which will be displayed
'desc' => 'Choose your font settings', // Description of the option which will be displayed
'css' => '.aa_site_font2 { value }'
) );
这次，我添加了 css 参数以及 class .aa_site_font2。它在 font 类型选项内定义，其中包含所有样式字段。
上面的屏幕截图显示了主题定制器部分 $aa_section1 中的此选项。另外，请查看当前设置的设置。
我将再次展示类 aa_site_font2 的样式属性在其他地方的使用，例如在出现在所有帖子和页面编辑屏幕上的元框中。
<!-- A div tag with class aa_site_font2 to prview the font properties-->
<div class="aa_site_font2">
Value of 'css' in a metabox
</div>
我再次有一个包含 aa_site_font2 类的 div。其中有一些虚拟文本，但忽略该文本并查看它是如何自动设置样式的。
让我们从主题定制器部分设置任何演示字体设置，如下所示：
Voici à quoi ressemble le front-end :
Il s’agit d’utiliser l’option de type font dans Titan Framework. J'ai expliqué presque tous les aspects de cette option en détail.
Titan Framework est définitivement un script intuitif qui vous permet de créer un ensemble d'options intéressantes tout en restant simple et méchant. N’abusez pas de ces options : rappelez-vous la philosophie selon laquelle « des décisions, pas des options ».
Essayez cette option et postez vos questions dans la zone de commentaires ci-dessous ou contactez-moi sur Twitter.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Méthode d'annulation du contrôle de compte d'utilisateur
Que dois-je faire si msconfig ne peut pas être ouvert ?
Quelles informations privées les amis proches de Douyin verront-ils ?
Quel logiciel est l'âme ?
Comment vérifier l'état du port avec netstat
méthode d'ouverture du fichier pkg
Trois caractéristiques majeures de Java
Comment récupérer des fichiers complètement supprimés sur un ordinateur
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
