搜尋

首頁 >CMS教程 >＆＃＆按 >選件 - 高級選項

選件 - 高級選項

William Shakespeare
William Shakespeare原創
2025-02-19 11:54:12804瀏覽

選件 - 高級選項

>在上一篇文章中，我們介紹瞭如何安裝OptionTree以及如何將其與主題集成。我們還探索了OptionTree開箱即用的許多最基本但非常有用的選項類型。可以使用OptionTree的Easy UI主題選項構建器在幾分鐘內實現這些選項，該選項是首屈一指的。

>

鑰匙要點

  • >選項的tree簡化了高級主題選項的集成，例如挑選日期選擇器和測量單元，增強自定義而無需大量編碼。
  • >高級選項，例如“日期選擇器”，“日期選擇器”和“測量”類型允許詳細的用戶輸入，並且可以通過UI主題選項構建器輕鬆管理。
    • “數字滑塊”和“ ON/OFF”開關是用戶友好的接口，用於設置數值並在主題中切換設置，從而簡化用戶體驗。
  • >選項將支持各種數據類型，包括用於日期和時間的測量和字符串的數組，確保處理主題選項的靈活性。
  • 自定義擴展到修改現有選項類型，例如更改日期格式或測量單元，從而為開發人員提供了針對特定需求量身定制功能的能力。
  • 探索一些更高級的選項
    • >
>我們現在將繼續探索您只需單擊幾下即可在主題中包含的最高級選項。不要對“高級選項”一詞感到震驚，optionTree使它們都易於集成，但是，由於需要從頭開始手動編碼它們，因此被認為是“高級”。我們去！

>日期選擇器

>“日期選擇器”選項類型與標準表單輸入字段相關聯，該輸入字段顯示一個日曆彈出窗口，該彈出窗口允許用戶選擇將焦點放在輸入字段時的任何日期。返回的值是日期格式的字符串（yyyy-mm-dd）。

>

>日期時間選擇器

<span>array(
</span>    <span>'id'          => 'spyr_demo_date_picker',
</span>    <span>'label'       => __( 'Date Picker', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'date-picker',
</span>    <span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_date_picker = ot_get_option( 'spyr_demo_date_picker' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_date_picker = get_post_meta( $post->ID, 'spyr_demo_date_picker', true );
</span>
<span>// Checking if the date has passed
</span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_picker' ) );
</span><span>$now  = new DateTime( "now" );
</span>
<span>// Compare the 2 dates
</span><span>// Not that this example assumes you have not changed the date format
</span><span>// through the ot_type_date_picker_date_format filter like shown below
</span><span>if( $now > $date ) {
</span>    <span>echo 'Date is in the past';
</span><span>} else {
</span>    <span>echo 'Date has not passed yet';
</span><span>}
</span>
<span>// Change displayed format and returnd value
</span><span>// Defaults to yy-mm-dd
</span><span>// Not recommended but it's possible
</span><span>add_filter( 'ot_type_date_picker_date_format', 'spyr_modify_date_picker_date_format', 10, 2 );
</span><span>function spyr_modify_date_picker_date_format( $format, $field_id ) {
</span>    <span>if( 'spyr_demo_date_picker' == $field_id ) {
</span>        <span>return 'mm-dd-yy';
</span>    <span>}
</span><span>}</span>
>“日期時間選擇器”選項類型與標準表單輸入字段相關聯，該輸入字段顯示一個日曆彈出窗口，該彈出窗口允許用戶選擇將焦點放在輸入字段時的任何日期和時間。返回的值是日期和時間格式化的字符串（Yyyy-MM-DD HH：MM）。

測量

<span>// OptionTree Date Time Picker Option Type
</span>
<span>// Example code when being used as a Metabox or
</span><span>// Exported OptionTree file to be used in Theme Mode
</span>
<span>array(
</span><span>'id'          => 'spyr_demo_date_time_picker',
</span><span>'label'       => __( 'Date Time Picker', 'text-domain' ),
</span><span>'desc'        => __( 'Your description', 'text-domain' ),
</span><span>'std'         => '',
</span><span>'type'        => 'date-time-picker',
</span><span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_date_time_picker = ot_get_option( 'spyr_demo_date_time_picker' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_date_time_picker = get_post_meta( $post->ID, 'spyr_demo_date_time_picker', true );
</span>
<span>// Checking if the date has passed
</span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_time_picker' ) );
</span><span>$now  = new DateTime( "now" );
</span>
<span>// Compare the 2 dates
</span><span>// Not that this example assumes you have not changed the date format
</span><span>// through the ot_type_date_time_picker_date_format filter like shown below
</span><span>if( $now > $date ) {
</span>    <span>echo 'Date is in the past';
</span><span>} else {
</span>    <span>echo 'Date has not passed yet';
</span><span>}
</span>
<span>// Change displayed format and returnd value
</span><span>// Defaults to yy-mm-dd
</span><span>// Not recommended but it's possible
</span><span>add_filter( 'ot_type_date_time_picker_date_format', 'spyr_modify_date_time_picker_date_format', 10, 2 );
</span><span>function spyr_modify_date_time_picker_date_format( $format, $field_id ) {
</span>    <span>if( 'spyr_demo_date_time_picker' == $field_id ) {
</span>        <span>return 'mm-dd-yy';
</span>    <span>}
</span><span>}</span>
“測量”選項類型是輸入和選擇字段的混合。文本輸入接受一個值，並且選擇字段可讓您選擇測量單元以添加到該值。目前，默認單元是PX，％，EM和PT。但是，您可以使用

> ot_measurement_unit_types

過濾器更改這些。

> 數字滑塊

<span>// OptionTree Measurement Option Type
</span>
<span>// Example code when being used as a Metabox or
</span><span>// Exported OptionTree file to be used in Theme Mode
</span>
<span>array(
</span>    <span>'id'          => 'spyr_demo_measurement',
</span>    <span>'label'       => __( 'Measurement', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'measurement',
</span>    <span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>// Returns an array
</span><span>$spyr_demo_measurement = ot_get_option( 'spyr_demo_measurement' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>// Returns an array
</span><span>$spyr_demo_measurement = get_post_meta( $post->ID, 'spyr_demo_measurement', true );
</span>
<span>// Displaying the result side by side
</span><span>echo $spyr_demo_measurement[0] . $spyr_demo_measurement[1];
</span>
<span>// Adding a new measurement option to the list
</span><span>add_filter( 'ot_measurement_unit_types', 'spyr_ot_measurement_unit_types', 10, 2 );
</span><span>function spyr_ot_measurement_unit_types( $measurements, $field_id ) {
</span>    <span>if( 'demo_measurement' == $field_id ) {
</span>        <span>return array_merge( $measurements, array( 'rem' => 'rem' ) );
</span>    <span>} 
</span><span>}
</span>
<span>// Override list of measurements
</span><span>add_filter( 'ot_measurement_unit_types', 'spyr_ot_measurement_override_unit_types', 10, 2 );
</span><span>function spyr_ot_measurement_override_unit_types( $measurements, $field_id ) {
</span>    <span>if( 'demo_measurement' == $field_id ) {
</span>        <span>return array( 'rem' => 'rem' );
</span>    <span>} 
</span><span>}</span>
“數字滑塊”選項類型顯示jQuery UI滑塊。它將返回單個數值，以用於自定義函數或循環。

>
<span>array(
</span>    <span>'id'          => 'spyr_demo_date_picker',
</span>    <span>'label'       => __( 'Date Picker', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'date-picker',
</span>    <span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_date_picker = ot_get_option( 'spyr_demo_date_picker' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_date_picker = get_post_meta( $post->ID, 'spyr_demo_date_picker', true );
</span>
<span>// Checking if the date has passed
</span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_picker' ) );
</span><span>$now  = new DateTime( "now" );
</span>
<span>// Compare the 2 dates
</span><span>// Not that this example assumes you have not changed the date format
</span><span>// through the ot_type_date_picker_date_format filter like shown below
</span><span>if( $now > $date ) {
</span>    <span>echo 'Date is in the past';
</span><span>} else {
</span>    <span>echo 'Date has not passed yet';
</span><span>}
</span>
<span>// Change displayed format and returnd value
</span><span>// Defaults to yy-mm-dd
</span><span>// Not recommended but it's possible
</span><span>add_filter( 'ot_type_date_picker_date_format', 'spyr_modify_date_picker_date_format', 10, 2 );
</span><span>function spyr_modify_date_picker_date_format( $format, $field_id ) {
</span>    <span>if( 'spyr_demo_date_picker' == $field_id ) {
</span>        <span>return 'mm-dd-yy';
</span>    <span>}
</span><span>}</span>

開/關

>“開/關”選項類型顯示一個簡單的開關，可用於打開“ ON”或“ OFF”的事物。保存的返回值要么是“ on”或“ off”。

> 

<span>// OptionTree Date Time Picker Option Type
</span>
<span>// Example code when being used as a Metabox or
</span><span>// Exported OptionTree file to be used in Theme Mode
</span>
<span>array(
</span><span>'id'          => 'spyr_demo_date_time_picker',
</span><span>'label'       => __( 'Date Time Picker', 'text-domain' ),
</span><span>'desc'        => __( 'Your description', 'text-domain' ),
</span><span>'std'         => '',
</span><span>'type'        => 'date-time-picker',
</span><span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_date_time_picker = ot_get_option( 'spyr_demo_date_time_picker' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_date_time_picker = get_post_meta( $post->ID, 'spyr_demo_date_time_picker', true );
</span>
<span>// Checking if the date has passed
</span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_time_picker' ) );
</span><span>$now  = new DateTime( "now" );
</span>
<span>// Compare the 2 dates
</span><span>// Not that this example assumes you have not changed the date format
</span><span>// through the ot_type_date_time_picker_date_format filter like shown below
</span><span>if( $now > $date ) {
</span>    <span>echo 'Date is in the past';
</span><span>} else {
</span>    <span>echo 'Date has not passed yet';
</span><span>}
</span>
<span>// Change displayed format and returnd value
</span><span>// Defaults to yy-mm-dd
</span><span>// Not recommended but it's possible
</span><span>add_filter( 'ot_type_date_time_picker_date_format', 'spyr_modify_date_time_picker_date_format', 10, 2 );
</span><span>function spyr_modify_date_time_picker_date_format( $format, $field_id ) {
</span>    <span>if( 'spyr_demo_date_time_picker' == $field_id ) {
</span>        <span>return 'mm-dd-yy';
</span>    <span>}
</span><span>}</span>
畫廊

>“畫廊”選項類型保存了逗號分隔的圖像附件列表。您將需要創建一個前端功能才能在主題中顯示圖像。您將能夠獲得主題可能已通過

add_image_size（）。

滑塊
<span>// OptionTree Measurement Option Type
</span>
<span>// Example code when being used as a Metabox or
</span><span>// Exported OptionTree file to be used in Theme Mode
</span>
<span>array(
</span>    <span>'id'          => 'spyr_demo_measurement',
</span>    <span>'label'       => __( 'Measurement', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'measurement',
</span>    <span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>// Returns an array
</span><span>$spyr_demo_measurement = ot_get_option( 'spyr_demo_measurement' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>// Returns an array
</span><span>$spyr_demo_measurement = get_post_meta( $post->ID, 'spyr_demo_measurement', true );
</span>
<span>// Displaying the result side by side
</span><span>echo $spyr_demo_measurement[0] . $spyr_demo_measurement[1];
</span>
<span>// Adding a new measurement option to the list
</span><span>add_filter( 'ot_measurement_unit_types', 'spyr_ot_measurement_unit_types', 10, 2 );
</span><span>function spyr_ot_measurement_unit_types( $measurements, $field_id ) {
</span>    <span>if( 'demo_measurement' == $field_id ) {
</span>        <span>return array_merge( $measurements, array( 'rem' => 'rem' ) );
</span>    <span>} 
</span><span>}
</span>
<span>// Override list of measurements
</span><span>add_filter( 'ot_measurement_unit_types', 'spyr_ot_measurement_override_unit_types', 10, 2 );
</span><span>function spyr_ot_measurement_override_unit_types( $measurements, $field_id ) {
</span>    <span>if( 'demo_measurement' == $field_id ) {
</span>        <span>return array( 'rem' => 'rem' );
</span>    <span>} 
</span><span>}</span>

“滑塊”選項類型允許您在幾分鐘內創建滑塊。然後，您可以使用這些可重複的字段保存信息，以後您將使用這些信息來填充滑塊。此選項很快就會被棄用，而支持更靈活的“列表項目”選項。

>

>列表項目
<span>// OptionTree Numeric Slider Option Type
</span>
<span>// Example code when being used as a Metabox or
</span><span>// Exported OptionTree file to be used in Theme Mode
</span>
<span>array(
</span>    <span>'id'          => 'spyr_demo_numeric_slider',
</span>    <span>'label'       => __( 'Numeric Slider', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'numeric-slider',
</span>    <span>'section'     => 'your_section',
</span>    <span>'min_max_step'=> '-500,5000,100',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_numeric_slider = ot_get_option( 'spyr_demo_numeric_slider' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_numeric_slider = get_post_meta( $post->ID, 'spyr_demo_numeric_slider', true );</span>

>“列表項目”選項類型允許進行大量自定義。您可以將設置添加到“列表項目”中，這些設置將在添加新的“列表項目”時向用戶顯示。通常，這用於為自定義佈局創建滑動內容或代碼塊。滑塊是帶有四個預定義字段的“列表項目”選項類型，因此您可以在幾分鐘內構建圖像滑塊。 “列表項目”選項類型允許您定義自己的字段，其ID和這些字段甚至可以具有自己的選項類型。可能性是無限的。

以下是“列表項目”設置的示例。

>

上傳選件 - 高級選項

>“上傳”選項類型用於上傳任何WordPress支持的媒體。上傳後，需要用戶按“發送到選項樹”按鈕，以便使用該媒體的URI填充輸入。此功能有一個警告。如果您導入主題選項並將媒體上傳到一個站點，則舊的URI將不會反映您新網站的URI。您將必須重新上傳或FTP到新服務器上的任何媒體，並在必要時更改URI。

“上傳”選項類型也可以通過將

ot-upload-attachment-id

添加到類屬性來保存為附件ID。這將使您可以通過add_image_size（）獲得任何圖像大小。返回的值將是附件ID或圖像的源鏈接，具體取決於是否已添加到CSS類字段中。

選項卡 >“ TAB”選項類型允許您將通常會向下擴展頁面擴展的一組字段組合在一起。您會發現自己一遍又一遍地使用此選項。該字段沒有返回值。像往常一樣，實現此選項只需單擊幾下，UI對您和您的客戶來說看起來很棒。 >

>要通過主題選項UI構建器創建選項卡，您要做的就是確保“ TAB”選項類型位於要分組的一組字段上方。您可以通過對要分組的其他選項進行相同的操作來添加更多“標籤”。當“標籤”遇到另一個“選項卡”或新部分的開頭時結束。 >

為了幫助您可視化這一點，讓我們以一個現實世界的示例來看一下UI構建器：

選件 - 高級選項>當您訪問“外觀”下的主題選項頁面時，這就是您從這些選項中獲得的。

>

選件 - 高級選項彩色拾取器

>“彩色拾取器”選項類型保存了用於CSS中的十六進制顏色代碼。使用它來修改主題中某些內容的顏色。 

<span>array(
</span>    <span>'id'          => 'spyr_demo_date_picker',
</span>    <span>'label'       => __( 'Date Picker', 'text-domain' ),
</span>    <span>'desc'        => __( 'Your description', 'text-domain' ),
</span>    <span>'type'        => 'date-picker',
</span>    <span>'section'     => 'your_section',
</span><span>)
</span>
<span>// Get the value saved on Theme Options Page
</span><span>$spyr_demo_date_picker = ot_get_option( 'spyr_demo_date_picker' );
</span>
<span>// Get the value saved for a Page, Post or CPT ( Within the loop )
</span><span>$spyr_demo_date_picker = get_post_meta( $post->ID, 'spyr_demo_date_picker', true );
</span>
<span>// Checking if the date has passed
</span><span>$date = new DateTime( ot_get_option( 'spyr_demo_date_picker' ) );
</span><span>$now  = new DateTime( "now" );
</span>
<span>// Compare the 2 dates
</span><span>// Not that this example assumes you have not changed the date format
</span><span>// through the ot_type_date_picker_date_format filter like shown below
</span><span>if( $now > $date ) {
</span>    <span>echo 'Date is in the past';
</span><span>} else {
</span>    <span>echo 'Date has not passed yet';
</span><span>}
</span>
<span>// Change displayed format and returnd value
</span><span>// Defaults to yy-mm-dd
</span><span>// Not recommended but it's possible
</span><span>add_filter( 'ot_type_date_picker_date_format', 'spyr_modify_date_picker_date_format', 10, 2 );
</span><span>function spyr_modify_date_picker_date_format( $format, $field_id ) {
</span>    <span>if( 'spyr_demo_date_picker' == $field_id ) {
</span>        <span>return 'mm-dd-yy';
</span>    <span>}
</span><span>}</span>
結論

>即使這些是OptionTree最先進的功能，但最好的還尚未到來。 OptionTree使增強排版非常簡單，使您和您的客戶可以輕鬆設計您的HTML元素。 在將來的文章中，我們將研究與CSS合作並創建“背景”和“排版”選項類型，這些選項將使您的WordPress主題達到一個全新的層面。

>

>關於選項的經常詢問的問題

>如何在WordPress網站上安裝OptionTree？

>在您的WordPress站點上安裝OptionTree是一個簡單的過程。首先，導航到WordPress儀表板上的“插件”部分。單擊“添加新”，然後在搜索欄中搜索“ OptionTree”。找到插件後，單擊“立即安裝”，然後單擊“激活”。現在，該插件應該可以在您的網站上使用。

>

如何使用OptionTree UI構建器？

> optionTree UI構建器是一個強大的工具，可以創建自定義主題選項。要使用它，請導航到WordPress儀表板上的“選項樹”部分。單擊“設置”，然後單擊“ UI構建器”。從這裡，您可以將部分，設置和選項添加到主題中。記得完成後要保存更改。

>如何更新OptionTree中的數據？

>更新選項中的數據很簡單。導航到WordPress儀表板上的“選項樹”部分。單擊“設置”，然後單擊要更新的選項。進行更改，然後單擊“ Update”保存它們。

在哪裡可以找到optionTree中變量的實際值？您的WordPress儀表板上的選件部分。單擊“設置”，然後單擊您感興趣的選項。變量的值將顯示在屏幕的右側。

>如何將自定義CSS添加到我的OptionTree主題中？

將自定義CSS添加到您的OptionTree主題中，導航到WordPress儀表板上的“ optionTree”部分。單擊“設置”，然後單擊“自定義CSS”。在這裡，您可以添加自定義CSS代碼。記得完成完成後要保存更改。

>如何將optiontree與子主題使用？

>

將optionTree與子主題一起使用，您需要先安裝和激活孩子您的WordPress網站上的主題。然後，導航到WordPress儀表板上的“ optionTree”部分。單擊“設置”，然後單擊“孩子主題”。從這裡，您可以為孩子主題配置設置。

>我如何對optionTree的問題進行故障排除？

>

如果您遇到了選項的問題，第一步是檢查是否是否檢查插件是最新的。如果不是這樣，請進行更新。如果問題持續存在，請嘗試停用和重新激活插件。如果您仍在遇到問題，則可能需要聯繫插件的支持團隊以獲取進一步的幫助。

>

>如何卸載optionTree？

以卸載optionTree，導航到“插件”部分在您的WordPress儀表板上。在安裝插件列表中找到“選項樹”，然後單擊“停用”。插件被停用後，您可以單擊“刪除”以從您的網站中刪除它。

我可以在非wordpress站點上使用optiontree嗎？

optiontree是WordPress特定的插件，因此，它不能在非媒介網站上使用。但是，對於提供類似功能的其他內容管理系統也有類似的工具。 與所有WordPress主題兼容？ optionTree被設計為與大多數WordPress主題兼容。但是，某些主題可能不支持所有OptionTree的功能。如果您遇到兼容性問題，則可能需要與主題的開發人員聯繫以尋求幫助。

以上是選件 - 高級選項的詳細內容。更多資訊請關注PHP中文網其他相關文章！

jquery css html String define if switch for select date include try Calendar Filter continue using class Attribute delete function default this display background input ui issue WordPress Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：掌握WordPress Cron進行調度事件下一篇：掌握WordPress Cron進行調度事件

相關文章

看更多