In the previous article we covered how to install OptionTree and how to integrate it with your theme. We also explored many of the most basic, but incredibly useful option types that OptionTree provides out of the box. These options can be implemented in a matter of minutes using OptionTree’s easy UI theme options builder, which is second to none.
在上一篇文章中，我们介绍了如何安装OptionTree以及如何将其与您的主题集成 。 我们还探讨了OptionTree开箱即用提供的许多最基本但极其有用的选项类型。 使用OptionTree的易用UI主题选项构建器，可以在几分钟内实现这些选项，这是首屈一指的。
We are now going to continue exploring some of the most advanced options you can include in your theme with just a few clicks. Don’t be alarmed by the term ‘Advanced Options’, OptionTree makes them all easy to integrate, however, it’s considered ‘Advanced’ because of the need to code these by hand from scratch. Here we go!
现在，我们将继续探索一些最高级的选项，只需单击几下就可以将其包含在主题中。 不要对术语“高级选项”感到震惊，OptionTree使它们都易于集成，但是，由于需要从头开始手工编写这些代码，因此被认为是“高级”。 开始了！
The ‘Date Picker’ option type is tied to a standard form input field which displays a calendar pop-up that allow the user to pick any date when focus is given to the input field. The returned value is a date formatted string (YYYY-MM-DD).
“日期选择器”选项类型与标准表单输入字段绑定，该标准表单输入字段显示日历弹出窗口，允许用户在将焦点放在输入字段时选择任何日期。 返回的值是日期格式的字符串(YYYY-MM-DD)。
array( 'id' => 'spyr_demo_date_picker', 'label' => __( 'Date Picker', 'text-domain' ), 'desc' => __( 'Your description', 'text-domain' ), 'type' => 'date-picker', 'section' => 'your_section', ) // Get the value saved on Theme Options Page $spyr_demo_date_picker = ot_get_option( 'spyr_demo_date_picker' ); // Get the value saved for a Page, Post or CPT ( Within the loop ) $spyr_demo_date_picker = get_post_meta( $post->ID, 'spyr_demo_date_picker', true ); // Checking if the date has passed $date = new DateTime( ot_get_option( 'spyr_demo_date_picker' ) ); $now = new DateTime( "now" ); // Compare the 2 dates // Not that this example assumes you have not changed the date format // through the ot_type_date_picker_date_format filter like shown below if( $now > $date ) { echo 'Date is in the past'; } else { echo 'Date has not passed yet'; } // Change displayed format and returnd value // Defaults to yy-mm-dd // Not recommended but it's possible add_filter( 'ot_type_date_picker_date_format', 'spyr_modify_date_picker_date_format', 10, 2 ); function spyr_modify_date_picker_date_format( $format, $field_id ) { if( 'spyr_demo_date_picker' == $field_id ) { return 'mm-dd-yy'; } }The ‘Date Time Picker’ option type is tied to a standard form input field which displays a calendar pop-up that allows the user to pick any date and time when focus is given to the input field. The returned value is a date and time formatted string (YYYY-MM-DD HH:MM).
“ Date Time Picker”(日期时间选择器)选项类型绑定到标准表单输入字段，该字段显示日历弹出窗口，允许用户在将焦点放在输入字段时选择任何日期和时间。 返回的值是日期和时间格式的字符串(YYYY-MM-DD HH：MM)。
// OptionTree Date Time Picker Option Type // Example code when being used as a Metabox or // Exported OptionTree file to be used in Theme Mode array( 'id' => 'spyr_demo_date_time_picker', 'label' => __( 'Date Time Picker', 'text-domain' ), 'desc' => __( 'Your description', 'text-domain' ), 'std' => '', 'type' => 'date-time-picker', 'section' => 'your_section', ) // Get the value saved on Theme Options Page $spyr_demo_date_time_picker = ot_get_option( 'spyr_demo_date_time_picker' ); // Get the value saved for a Page, Post or CPT ( Within the loop ) $spyr_demo_date_time_picker = get_post_meta( $post->ID, 'spyr_demo_date_time_picker', true ); // Checking if the date has passed $date = new DateTime( ot_get_option( 'spyr_demo_date_time_picker' ) ); $now = new DateTime( "now" ); // Compare the 2 dates // Not that this example assumes you have not changed the date format // through the ot_type_date_time_picker_date_format filter like shown below if( $now > $date ) { echo 'Date is in the past'; } else { echo 'Date has not passed yet'; } // Change displayed format and returnd value // Defaults to yy-mm-dd // Not recommended but it's possible add_filter( 'ot_type_date_time_picker_date_format', 'spyr_modify_date_time_picker_date_format', 10, 2 ); function spyr_modify_date_time_picker_date_format( $format, $field_id ) { if( 'spyr_demo_date_time_picker' == $field_id ) { return 'mm-dd-yy'; } }The ‘Measurement’ option type is a mix of input and select fields. The text input accepts a value and the select field lets you choose the unit of measurement to add to that value. Currently the default units are px, %, em, and pt. However, you can change these with the ot_measurement_unit_types filter.
“度量”选项类型是输入字段和选择字段的混合。 文本输入接受一个值，选择字段可让您选择要添加到该值的度量单位。 当前的默认单位是px，％，em和pt。 但是，您可以使用ot_measurement_unit_types过滤器进行更改。
// OptionTree Measurement Option Type // Example code when being used as a Metabox or // Exported OptionTree file to be used in Theme Mode array( 'id' => 'spyr_demo_measurement', 'label' => __( 'Measurement', 'text-domain' ), 'desc' => __( 'Your description', 'text-domain' ), 'type' => 'measurement', 'section' => 'your_section', ) // Get the value saved on Theme Options Page // Returns an array $spyr_demo_measurement = ot_get_option( 'spyr_demo_measurement' ); // Get the value saved for a Page, Post or CPT ( Within the loop ) // Returns an array $spyr_demo_measurement = get_post_meta( $post->ID, 'spyr_demo_measurement', true ); // Displaying the result side by side echo $spyr_demo_measurement[0] . $spyr_demo_measurement[1]; // Adding a new measurement option to the list add_filter( 'ot_measurement_unit_types', 'spyr_ot_measurement_unit_types', 10, 2 ); function spyr_ot_measurement_unit_types( $measurements, $field_id ) { if( 'demo_measurement' == $field_id ) { return array_merge( $measurements, array( 'rem' => 'rem' ) ); } } // Override list of measurements add_filter( 'ot_measurement_unit_types', 'spyr_ot_measurement_override_unit_types', 10, 2 ); function spyr_ot_measurement_override_unit_types( $measurements, $field_id ) { if( 'demo_measurement' == $field_id ) { return array( 'rem' => 'rem' ); } }The ‘Numeric Slider’ option type displays a jQuery UI slider. It will return a single numerical value for use in a custom function or loop.
“数字滑块”选项类型显示jQuery UI滑块。 它将返回一个数字值，供在自定义函数或循环中使用。
// OptionTree Numeric Slider Option Type // Example code when being used as a Metabox or // Exported OptionTree file to be used in Theme Mode array( 'id' => 'spyr_demo_numeric_slider', 'label' => __( 'Numeric Slider', 'text-domain' ), 'desc' => __( 'Your description', 'text-domain' ), 'type' => 'numeric-slider', 'section' => 'your_section', 'min_max_step'=> '-500,5000,100', ) // Get the value saved on Theme Options Page $spyr_demo_numeric_slider = ot_get_option( 'spyr_demo_numeric_slider' ); // Get the value saved for a Page, Post or CPT ( Within the loop ) $spyr_demo_numeric_slider = get_post_meta( $post->ID, 'spyr_demo_numeric_slider', true );The ‘On/Off’ option type displays a simple switch that can be used to turn things ‘on’ or ‘off’. The saved return value is either ‘on’ or ‘off’.
“开/关”选项类型显示一个简单的开关，可用于将事物“打开”或“关闭”。 保存的返回值是“ on”或“ off”。
// OptionTree On/Off Option Type // Example code when being used as a Metabox or // Exported OptionTree file to be used in Theme Mode array( 'id' => 'spyr_demo_on_off', 'label' => __( 'On/Off', 'text-domain' ), 'desc' => __( 'Your description', 'text-domain' ), 'type' => 'on-off', 'section' => 'your_section', ) // Get the value saved on Theme Options Page $spyr_demo_on_off = ot_get_option( 'spyr_demo_on_off' ); // Get the value saved for a Page, Post or CPT ( Within the loop ) $spyr_demo_on_off = get_post_meta( $post->ID, 'spyr_demo_on_off', true ); // Checking whether it's On or Off if( 'off' != $onoff ) { echo 'It\'s On'; } else { echo 'It\'s Off'; }The ‘Gallery’ option type saves a comma separated list of image attachment IDs. You will need to create a front-end function to display the images in your theme. You will be able to get any image size that your theme may have added through add_image_size().
“图片库”选项类型保存以逗号分隔的图片附件ID列表。 您将需要创建一个前端功能来显示主题中的图像。 您将能够通过add_image_size()获得主题可能添加的任何图像大小。
// OptionTree Gallery Option Type // Example code when being used as a Metabox or // Exported OptionTree file to be used in Theme Mode array( 'id' => 'spyr_demo_gallery', 'label' => __( 'Gallery', 'text-domain' ), 'desc' => __( 'Your description', 'text-domain' ), 'type' => 'gallery', 'section' => 'your_section', ) // Get the value saved on Theme Options Page // Return a comma separated list of image attachment IDs $spyr_demo_gallery = ot_get_option( 'spyr_demo_gallery' ); // Get the value saved for a Page, Post or CPT ( Within the loop ) // Return a comma separated list of image attachment IDs $spyr_demo_gallery = get_post_meta( $post->ID, 'spyr_demo_gallery', true ); // Get the list of IDs formatted into an array // and ready to use for looping through them $gallery_img_ids = wp_parse_id_list( $spyr_demo_gallery );The ‘Slider’ option type allows you to create a slider in a matter of minutes. You can then use these repeatable fields to hold information which you’ll later use to populate your slider. This option is being deprecated soon in favor of the more flexible ‘List Item’ option.
“滑块”选项类型使您可以在几分钟内创建一个滑块。 然后，您可以使用这些可重复字段来保存信息，稍后将使用这些信息来填充滑块。 不久将不推荐使用此选项，而希望使用更灵活的“列表项”选项。
// OptionTree Slider Option Type // Example code when being used as a Metabox or // Exported OptionTree file to be used in Theme Mode array( 'id' => 'spyr_demo_slider', 'label' => __( 'Slider', 'text-domain' ), 'desc' => __( 'Your description', 'text-domain' ), 'type' => 'slider', 'section' => 'your_section', ) // Get the value saved on Theme Options Page // Returns an array $spyr_demo_slider = ot_get_option( 'spyr_demo_slider' ); // Get the value saved for a Page, Post or CPT ( Within the loop ) // Returns an array $spyr_demo_slider = get_post_meta( $post->ID, 'spyr_demo_slider', true ); // Loop through the array to build your Slider. // Note that every slider is different // We have access to the following array keys // title, description, image and link echo '<ul class="slides">'; foreach( $spyr_demo_slider as $slide ) { echo '<li><a href="'. $slide['link'] .'"><img src="'. $slide['image'] .'" width="960" height="300" alt="'. $slide['description'] .'" title="'. $slide['title'] .'" /></a></li>'; } echo '</ul>';The ‘List Item’ option type allows for a great deal of customization. You can add settings to the ‘List Item’ and those settings will be displayed to the user when they add a new ‘List Item’. Typically, this is used for creating sliding content or blocks of code for custom layouts. The slider is a ‘List Item’ option type with four predefined fields so you can build an image slider in minutes. The ‘List Item’ option type allows you to define your own fields, their ID’s and these fields can even have their own option type. The possibilities are endless.
“列表项”选项类型允许进行大量自定义。 您可以将设置添加到“列表项”，当他们添加新的“列表项”时，这些设置将显示给用户。 通常，这用于为自定义布局创建滑动内容或代码块。 滑块是“列表项”选项类型，具有四个预定义字段，因此您可以在数分钟内构建图像滑块。 “列表项”选项类型允许您定义自己的字段，它们的ID，并且这些字段甚至可以具有自己的选项类型。 可能性是无止境。
Here’s an example of a ‘List Item’ set-up.
这是“列表项”设置的示例。
The ‘Upload’ option type is used to upload any WordPress supported media. After uploading, users are required to press the ‘Send to OptionTree’ button in order to populate the input with the URI of that media. There is one caveat of this feature. If you import the theme options and have uploaded media on one site, the old URI will not reflect the URI of your new site. You will have to re-upload or FTP any media to your new server and change the URIs if necessary.
“上传”选项类型用于上传任何WordPress支持的媒体。 上传后，用户需要按“发送到OptionTree”按钮，以使用该媒体的URI填充输入。 此功能有一个警告。 如果导入主题选项并在一个站点上上传了媒体，则旧的URI将不会反映新站点的URI。 您将必须将任何媒体重新上传或FTP到新服务器，并在必要时更改URI。
The ‘Upload’ option type can also be saved as an attachment ID by adding ot-upload-attachment-id to the class attribute. This will allow you to get any image size registered through add_image_size(). The returned value will be either an attachment ID or the source link to an image, depending on whether or not ot-upload-attachment-id has been added to the CSS Class field.
通过将ot-upload-attachment-id添加到class属性，还可以将“ Upload”选项类型另存为附件ID。 这将允许您获取通过add_image_size()注册的任何图像大小。 返回的值将是附件ID或图像的源链接，具体取决于ot-upload-attachment-id是否已添加到CSS Class字段。
// OptionTree Upload Option Type // Example code when being used as a Metabox or // Exported OptionTree file to be used in Theme Mode array( 'id' => 'spyr_demo_upload', 'label' => __( 'Upload', 'text-domain' ), 'desc' => __( 'Your description', 'text-domain' ), 'type' => 'upload', 'section' => 'your_section', 'class' => 'ot-upload-attachment-id', // Optional CSS Class ) // Get the value saved on Theme Options Page $spyr_demo_upload = ot_get_option( 'spyr_demo_upload' ); // Get the value saved for a Page, Post or CPT ( Within the loop ) $spyr_demo_upload = get_post_meta( $post->ID, 'spyr_demo_upload', true );The ‘Tab’ option type allows you to group together a set of fields which would normally expand down the page. You’ll find yourself using this option over and over again. There are no return values for this field. As usual, implementing this option takes only a few clicks and the UI looks amazing for you and your customer.
“制表符”选项类型使您可以将通常在页面下方扩展的一组字段组合在一起。 您会发现自己一次又一次地使用此选项。 该字段没有返回值。 像往常一样，实现此选项仅需单击几下，用户界面对于您和您的客户来说都很棒。
To create tabs via the Theme Options UI Builder, all you have to do is make sure the ‘Tab’ option type sits above the group of fields that you want to group. You can add more ‘Tabs’ by doing the same to the other options you want to group. A ‘Tab’ ends when it encounters another ‘Tab’ or the beginning of a new section.
要通过“主题选项” UI构建器创建选项卡，所有要做的就是确保“制表符”选项类型位于要分组的字段组的上方。 您可以通过对要分组的其他选项执行相同的操作来添加更多“标签”。 当“标签”遇到另一个“标签”或新部分的开头时，该标签即告结束。
To help you visualize this, let’s take a look at the UI Builder with a real world example:
为了帮助您直观地看到这一点，让我们看一个带有真实示例的UI Builder：
When you visit the Theme Options page under ‘Appearance’, this is what you’ll get from those options.
当您访问“外观”下的“主题选项”页面时，您将从这些选项中获得收益。
The ‘Color Picker’ option type saves a hexadecimal color code for use in CSS. Use it to modify the color of something in your theme.
“颜色选择器”选项类型保存一个十六进制颜色代码以在CSS中使用。 用它来修改主题中某物的颜色。
// OptionTree Color Picker Option Type // Example code when being used as a Metabox or // Exported OptionTree file to be used in Theme Mode array( 'id' => 'spyr_demo_colorpicker', 'label' => __( 'Colorpicker', 'text-domain' ), 'desc' => __( 'Your description', 'text-domain' ), 'type' => 'colorpicker', 'section' => 'your_section', ) // Get the value saved on Theme Options Page $spyr_demo_colorpicker = ot_get_option( 'spyr_demo_colorpicker' ); // Get the value saved for a Page, Post or CPT ( Within the loop ) $spyr_demo_colorpicker = get_post_meta( $post->ID, 'spyr_demo_colorpicker', true );Even though these are some of the most advanced features of OptionTree, the best is yet to come.
尽管这些是OptionTree的一些最高级的功能，但是最好的还没有出现。
OptionTree makes it really simple to enhance your typography, allowing you and your customers to style your HTML elements with ease.
OptionTree使增强版式变得非常简单，使您和您的客户可以轻松地设置HTML元素的样式。
In a future article, we’ll take a look at working with CSS and creating the ‘Background’ and ‘Typography’ option types which will take your WordPress themes to a whole new level.
在以后的文章中，我们将介绍如何使用CSS并创建“背景”和“版式”选项类型，这些类型将使您的WordPress主题达到一个全新的水平。
翻译自: https://www.sitepoint.com/optiontree-advanced-options/
相关资源：jdk-8u281-windows-x64.exe