新增字體類型選項：Titan 框架初學者綜合指南

允許最終用戶更改主題的字體可能是一項令人生畏的任務，尤其是當您想在自訂管理面板、元框甚至主題自訂器中提供此選項時。今天，我將討論如何透過 Titan Framework 新增自訂 font 類型選項。

Titan 框架中的字體類型選項

font 類型選項是 Titan Framework 中功能最通用的選項之一。它不僅可以讓您更改字體，而且還是一個完整的字體樣式選擇器。憑藉一整套功能豐富的選項，您可以在其中選擇網頁安全字體和 Google WebFonts。套用您想要的多種樣式，例如顏色、字母間距、陰影、行高等。最終用戶還可以查看字體及其樣式的預覽。此選項的外觀如下：

您可以在上圖中看到字體設定的詳細程度。這可以透過該選項支援的一大堆設定參數來實現。有一些強制參數和可選參數。首先，我們來看看必填項：

• 名稱：（字串）定義 font 類型選項的顯示名稱。
• id：（字串）此參數指派一個唯一的名稱，有助於取得值。
• desc：（字串）顯示簡短描述。

現在您應該使用的一些可選參數是：

• 預設：（布林值）在 font 類型選項中，此參數的行為略有不同。它佔用一個數組，其中包含您要使用的一些預設字體和樣式（稍後會詳細介紹）。
• css：（字串）當您在管理頁面和/或主題自訂器部分中新增此選項時，此參數會自動產生 CSS（稍後會詳細介紹）。

最後，有一長串某些基於檢查的參數，其預設值設定為 true。讓我們為它們命名，並了解如果設定為 false，它們的行為方式。

• show_font_family：（布林值）如果此參數設定為 false，則字體系列部分會消失。
• show_color：（布林值）如果此參數設定為 false，則不會顯示調色板。
• show_font_size：（布林值）如果此參數設定為 false，則字體大小選項會消失。
• show_font_weight：（布林值）如果此參數設定為 false，則 font-weight 選項會消失。
• show_font_style：（布林值）如果此參數設定為 false，則字體樣式設定將消失。
• show_line_height：（布林值）如果此參數設定為 false，則無法變更行高。
• show_letter_spacing：（布林值）如果此參數設定為 false，則您無法編輯 letter_spacing。
• show_text_transform：（布林值）如果此參數設定為 false，文字轉換選項就會消失。
• show_font_variant：（布林值）如果此參數設定為 false，則不會出現 font-variant 欄位。
• show_preview：（布林值）如果此參數設定為 false，您將看不到字體的即時預覽。
• show_websafe_fonts：（布林值）如果此參數設定為 false，網路安全字體清單將會消失。
• show_google_fonts：（布林值）如果此參數設定為 false，則不會顯示 Google 字型。
• include_fonts：（混合）這是一個正規表示式字串，指定您要新增的字體。
• enqueue：（布林值）如果設定為 false，則 Google 字型（如果使用）將不會自動排隊。

字體類型選項的可用容器

您可以在其中新增 font 類型選項：

• 管理面板
• 管理選項卡
• 元盒子
• 主題定制器部分

本文的範圍不是這些容器的創建。如果你想了解的話可以參考我之前的文章。

新增此選項類型的整體過程保持不變：

• 首先透過 getInstance() 函數取得一個唯一實例。
• 然後透過 createOption() 函數新增一個選項。
• 最後，透過 getOption() 函數取得已儲存的值。

讓我們在管理面板中建立此選項。

在管理面板內建立字型類型選項

宣告範例

這是程式碼：

<?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

    ) );

我使用了 createOption() 函數（第 7 行）在管理面板中新增了 font 類型選項 $ aa_panel。此函數佔用一個參數數組。這就是為什麼這裡使用 name、id、type 和 desc 等參數。 ID 的值（即 aa_font）應該是唯一的，因為它會取得已儲存的選項值。

在上面的螢幕截圖中，有一個名為My Font Option 的font 類型選項 在管理面板Neat Options 內。有多個設定選項可以用來配置 Web 開發專案的字體設定。

用法範例

現在我將檢索已儲存的選項值。

<?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 ); 

?>

取得保存值的過程與先前的文章中討論的過程幾乎相同。在第#3 行中，使用了getInstance() 函數，該函數使用一個唯一參數，最好是您的主題名稱（即neat 中這個案例）。接下來，我使用了getOption() 函數（第6 行），該函數透過ID aa_font 取得值，然後將其儲存在新變數$aa_font_array。

之前，我們確定 font 類型選項會佔用一組參數設置，即使我們實際上沒有定義它們，因為它們的預設值設定為 true。因此，在前端顯示檢索到的值之前，讓我先列印這個完整的參數陣列。

為此，我對變數 $aa_font_array 使用了 var_dump() 函數（第 #16 行）。讓我們看看這個陣列是如何列印的：

在上面的螢幕截圖中，列出了陣列每個元素的詳細描述。它清楚地解釋瞭如何設定 Titan Framework 中的 font 類型選項。

現在這部分只是一個額外的事情 - 我們的主要目標是更改預設字體設定並在前端列印它。

將第 16 行替換為以下程式碼行：

<?php
/**
 *
 * Replace this code on line #16
 * 
 */
?>

<h3 style="font-size: <?php echo $aa_font_array['font-size']; ?>;">Pellentesque habitant morbi tristique.</h3>

在第 7 行中，我在 H3（標題 3）標記內使用了內聯 CSS 樣式。與樣式屬性相對應的值，即font-size，在前端列印。

為此，我在內聯CSS。這個階段前端是這樣的：

列印文字目前的大小為 14px。讓我們從儀表板更改此值並預覽結果。

在前端顯示結果

假設我將演示值設為 30px。

儲存此設定並查看變更。這是螢幕截圖：

增加的font-size文字清晰可見。這樣您就可以在程式碼第 16 行中輸入任何陣列元素並預覽結果。

在 Metabox 內建立字體類型選項

宣告範例

讓我們在元框中建立一個 font 類型選項，其中包含所有樣式欄位。

#

<?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

    ) );

我透過createOption() 在元框<code class="inline">$aa_metbox 新增了ID 為aa_mb_font 的font 類型選項 函數（第8行）。它出現在名稱“我的字體選項”旁邊。

這是螢幕截圖，您可以在顯示在的元框中找到我的字體選項頁面編輯畫面結束。

这是我使用 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 不是一个空数组，而是其中包含元素。
• 最终结果是第 11 行已成功检索其内容。

   如果 FALSE，则意味着：

• $aa_mb_font1_array 不是数组，或者 $aa_mb_font1_array 是一个空数组，其中没有任何元素。
• 最终结果是第 11 行无法检索其内容。

这是对字体数组的整体验证。现在我将把这个过程扩展到单个数组元素。第 #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'。

我是否跳过了任何细节？是的！我相信您一定想知道 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不同。所以，我只是总结上面写的步骤：

1. 获取一个唯一的实例。 （第 3 行）
2. 获取关联字体数组。 （第 11 行）
3. 验证字体数组是否存在并检查其状态，即它是否为空。 （第 14 行）
4. 获取关联数组中任意键的值，如果没有值则定义默认值。再检查一遍。 （第 21 行到第 27 行）
5. 打印数组元素。 （第 #38 至 #48 行）

在前端显示结果

在此阶段，如果我预览前端，它将仅显示默认设置，如下所示：

假设这些是我们的新字体设置：

以下是此新配置的屏幕截图：

两种设置之间的差异非常明显。

在主题定制器部分内创建字体类型选项

声明示例

最后，让我们在定制器中创建此选项。

<?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 参数

一般来说，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 类型选项，请参阅我之前的文章。

在管理面板中使用 CSS 参数

声明示例

让我们编写它的代码。

<?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。

在主题定制器部分中使用 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。其中有一些虚拟文本，但忽略该文本并查看它是如何自动设置样式的。

在前端显示结果

让我们从主题定制器部分设置任何演示字体设置，如下所示：

這是前端的樣子：

結論

#這就是在 Titan Framework 中使用 font 類型選項的全部內容。我已經詳細解釋了該選項的幾乎所有方面。

Titan Framework 絕對是一個直覺的腳本，它允許您透過仍然精益和平均來建立一組很酷的選項。不要過度使用這些選項－記住「決定而不是選項」的理念。

嘗試此選項，並在下面的評論框中發布您的問題或在 Twitter 上與我聯繫。

以上是新增字體類型選項：Titan 框架初學者綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！