OptionTree是一款用于WordPress的主题选项UI生成器，让你能快速构建功能强大的管理面板，包括文本、选择、复选框等多种选项类型。它可以节省你在创建自定义管理界面上的时间，支持插件和主题模式安装，并提供了易于使用的拖放界面。
When was the last time you were excited about building an administration panel for your WordPress Theme? Chances are you’re still building it by hand, and spending a lot of time on it, too. The goal of this article is to introduce you to OptionTree, a Theme Options UI Building for WordPress.
您上一次为WordPress主题构建管理面板感到兴奋的时候是什么时候？ 您仍然有可能手动构建它，并且也花费大量时间。 本文的目的是向您介绍OptionTree，这是WordPress的主题选项用户界面构建。
OptionTree将允许您做什么 (What OptionTree Will Allow You To Do)
OptionTree will allow you to build a powerful Theme Administration page containing all kinds of functionality, from a simple text field, to Date Pickers and file upload fields. It’s also possible to create repeatable fields, tabbed sections, custom galleries, a CSS editor and many more. Think building whole administration options and custom metaboxes for your custom post types and taxonomies in under an hour. This is what OptionTree is all about, it sets at your disposal, a lot of pre-configured options types which you can use on your Themes in minutes, instead of hours.
OptionTree允许您构建功能强大的主题管理页面，其中包含从简单文本字段到日期选择器和文件上传字段的所有功能。 还可以创建可重复的字段，选项卡式部分，自定义画廊，CSS编辑器等。 考虑在一个小时内为您的自定义帖子类型和分类法构建整个管理选项和自定义元框。 这就是OptionTree的全部意义，它为您设置了许多预配置的选项类型，您可以在数分钟而不是数小时内在主题上使用它们。
OptionTree (source: https://wordpress.org/plugins/option-tree/screenshots/)
OptionTree(来源：https://wordpress.org/plugins/option-tree/screenshots/)
在您的站点上安装OptionTree (Installing OptionTree On Your Site)
There are two possible installation modes when using OptionTree. The first option is Plugin Mode, which is going to be the traditional way WordPress would like you to use plugins. Which means, OptionTree is installed and activated through the Plugins page and upgraded via the WordPress Plugins Directory. The second option is Theme Mode, this is where you include OptionTree somewhere within the directory of your theme and take advantage of the flexibility and control you’ll have over your themes upgrade path.
使用OptionTree时，有两种可能的安装模式。 第一个选项是Plugin Mode ，它将成为WordPress希望您使用插件的传统方式。 这意味着OptionTree是通过“插件”页面安装和激活的，并且是通过WordPress插件目录进行升级的。 第二个选项是“ 主题模式” ，您可以在其中将OptionTree包含在主题目录中的某个位置，并利用对主题升级路径的灵活性和控制力。
Below, I’ll walk you through setting up OptionTree for each installation mode.
下面，我将引导您为每种安装模式设置OptionTree。
插件模式 (Plugin Mode)
Install OptionTree and activate the plugin. For help with this refer to the Manage Plugins page in the WordPress Codex.
安装OptionTree并激活插件。 有关此方面的帮助，请参阅WordPress Codex中的“ 管理插件”页面。
Create the Theme Options.
创建主题选项。
Theme Options UI Builder (not recommended for premium themes).
主题选项UI构建器( 不建议用于高级主题 )。
- Simply create your Theme Options through the Theme Options UI Builder — an easy to use drag & drop interface. 只需通过主题选项UI生成器创建主题选项，这是一个易于使用的拖放界面。
Theme Options UI Builder (not recommended for premium themes).
主题选项UI构建器( 不建议用于高级主题 )。
Hand Built.
手工建造。
- Create an includes directory in your theme. 在主题中创建一个包含目录。
- Create a theme-options.php file in the new inccludes directory. 在新的包含目录中创建一个theme-options.php文件。
- Load the theme-options.php file through your functions.php file on your theme. 通过您的主题上的functions.php文件加载theme-options.php文件。
主题模式 (Theme Mode)
The two installation modes share some of the same steps, but Theme Mode has 3 key differences.
两种安装模式共享一些相同的步骤，但是主题模式有3个主要区别。
- OptionTree is included in the directory of your theme. OptionTree包含在主题的目录中。
- You must filter ot_theme_mode so it returns true. 您必须过滤ot_theme_mode，使其返回true。
- You must deactivate and/or delete the plugin version of OptionTree. 您必须停用和/或删除OptionTree的插件版本。
安装 (Installation)
- Download the latest version of OptionTree and unarchive the .zip directory. 下载最新版本的OptionTree并取消存档.zip目录。
- Put the option-tree directory in the root of your theme. For example, the server path would be /wp-content/themes/your-theme/option-tree/. 将option-tree目录放在主题的根目录中。 例如，服务器路径为/ wp-content / themes / your-theme / option-tree /。
- Add the following code to the very beginning of your functions.php so it is executed before anything else. 将以下代码添加到functions.php的开头，以便在执行其他任何操作之前执行它。
/**
* Activates Theme Mode
*/
add_filter( 'ot_theme_mode', '__return_true' );
/**
* Loads OptionTree
*/
require( trailingslashit( get_template_directory() ) . 'option-tree/ot-loader.php' );在主题中加载主题选项 (Loading Your Theme Options In Your Theme)
Load the theme-options.php file by adding the following code to your functions.php
通过将以下代码添加到functions.php来加载theme-options.php文件。
/**
* Loads Theme Options
*/
require( trailingslashit( get_template_directory() ) . 'inc/theme-options.php' );积分 (Integration)
Integration with your custom Theme Options into your theme is done through the ot_get_option() function. If no value has been saved, it returns $default or false.
通过ot_get_option()函数将与自定义主题选项集成到主题中。 如果未保存任何值，则返回$ default或false。
<?php echo ot_get_option( $option, $default ); ?>探索OptionTree选项类型 (Exploring OptionTree Option Types)
Let’s explore some of the OptionTree Option Types that shipped by default with OptionTree.
让我们研究一下OptionTree默认附带的一些OptionTree选项类型。
文本 (Text)
The Text option type is used to save mostly string values. For example, any optional or required text that is of reasonably short character length
文本选项类型用于主要保存字符串值。 例如，任何字符长度相当短的可选或必需文本
// OptionTree Text Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_text',
'label' => __( 'Text', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'text',
'section' => 'your_section',
)
// Get the value saved on Theme Options Page
$spyr_demo_text = ot_get_option( 'spyr_demo_text' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_text = get_post_meta( $post->ID, 'spyr_demo_text', true );
// Wrap the value in a P tag and echo it
echo wpautop( $spyr_demo_text );文字区 (Textarea)
The Textarea option type is a large string value used for custom code or text in the theme and has a WYSIWYG editor that can be filtered to change how it is displayed. For example, you can filter wpautop, media_buttons, tinymce, and quicktags.
Textarea选项类型是用于主题中的自定义代码或文本的大字符串值，并具有可以过滤以更改其显示方式的WYSIWYG编辑器。 例如，您可以过滤wpautop ， media_buttons ， tinymce和quicktags 。
// OptionTree Textarea Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_textarea',
'label' => __( 'Textarea', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'textarea',
'section' => 'your_section',
'rows' => '5',
)
// Get the value saved on Theme Options Page
$spyr_demo_textarea = ot_get_option( 'spyr_demo_textarea' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_textarea = get_post_meta( $post->ID, 'spyr_demo_textarea', true );
// Whether to use wpautop for adding in paragraphs
// Defaults to True
add_filter( 'ot_wpautop' , 'spyr_textarea_ot_wpautop', 10, 1 );
function spyr_textarea_ot_wpautop( $field_id ) {
if( 'spyr_demo_textarea' == $field_id ) {
return false;
}
}
// Remove the Media upload buttons for a particular field
// Defaults to True
add_filter( 'ot_media_buttons' , 'spyr_textarea_ot_media_buttons', 10, 1 );
function spyr_textarea_ot_media_buttons( $field_id ) {
if( 'spyr_demo_textarea' == $field_id ) {
return false;
}
}
// Disable the Visual and Text views for a particular field
// Defaults to True
add_filter( 'ot_tinymce' , 'spyr_textarea_ot_tinymce', 10, 1 );
function spyr_textarea_ot_tinymce( $field_id ) {
if( 'spyr_demo_textarea' == $field_id ) {
return false;
}
}简单的文本区域 (Textarea Simple)
The Textarea Simple option type is a large string value used for custom code or text in the theme. The Textarea Simple does not have a WYSIWYG editor, you could use it to store your Google Analytics code and be sure it will be displayed correctly without having p tags in it.
Textarea Simple选项类型是较大的字符串值，用于主题中的自定义代码或文本。 Textarea Simple没有WYSIWYG编辑器，您可以使用它来存储您的Google Analytics(分析)代码，并确保将正确显示其中没有p标签的代码。
// OptionTree Textarea Simple Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_textarea_simple',
'label' => __( 'Textarea Simple', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'textarea-simple',
'section' => 'your_section',
'rows' => '5',
),
// Get the value saved on Theme Options Page
$spyr_demo_textarea_simple = ot_get_option( 'spyr_demo_textarea_simple' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_textarea_simple = get_post_meta( $post->ID, 'spyr_demo_textarea_simple', true );
// Whether to use wpautop for adding in paragraphs
// Defaults to False in Textarea Simple
add_filter( 'ot_wpautop' , 'spyr_textarea_simple_ot_wpautop', 10, 1 );
function spyr_textarea_simple_ot_wpautop( $field_id ) {
if( 'spyr_demo_textarea_simple' == $field_id ) {
return true;
}
}标题为文本块 (Textblock Titled)
The Textblock Titled option type is used only on the Theme Option page. It will allow you to create & display HTML, and has a title above the text block. You can then use the Textblock Titled to add a more detailed set of instruction on how the options are used in your theme. You would never use this in your themes template files as it does not save a value.
“文本块标题”选项类型仅在“主题选项”页面上使用。 它将允许您创建和显示HTML，并在文本块上方具有标题。 然后，您可以使用“标题为文本块”来添加一组关于如何在主题中使用选项的更详细的说明。 您永远不会在主题模板文件中使用它，因为它不保存值。
无线电 (Radio)
The Radio option type displays a group of choices. It allows the user to choose one and will return that value as a string for use in a custom function or loop.
单选选项类型显示一组选项。 它允许用户选择一个，并将该值作为字符串返回以用于自定义函数或循环。
// OptionTree Radio Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_radio',
'label' => __( 'Radio', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'radio',
'section' => 'your_section',
'choices' => array(
array(
'value' => 'yes',
'label' => __( 'Yes', 'text-domain' ),
),
array(
'value' => 'no',
'label' => __( 'No', 'text-domain' ),
),
array(
'value' => 'maybe',
'label' => __( 'Maybe', 'text-domain' ),
)
)
)
// Get the value saved on Theme Options Page
$spyr_demo_radio = ot_get_option( 'spyr_demo_radio' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_radio = get_post_meta( $post->ID, 'spyr_demo_radio', true );选框 (Checkbox)
The Checkbox option type displays a group of choices. It allows the user to check multiple choices and will return that value as an array for use in a custom function or loop.
复选框选项类型显示一组选项。 它允许用户检查多个选择，并将该值作为数组返回以用于自定义函数或循环。
// OptionTree Checkbox Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_checkbox',
'label' => __( 'Checkbox', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'checkbox',
'section' => 'your_section',
'choices' => array(
array(
'value' => 'no',
'label' => __( 'No', 'text-domain' ),
),
array(
'value' => 'Yes',
'label' => __( 'Yes', 'text-domain' ),
)
)
)
// Get the value saved on Theme Options Page
// This will always return an array
$spyr_demo_checkbox = ot_get_option( 'spyr_demo_checkbox' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
$spyr_demo_checkbox = get_post_meta( $post->ID, 'spyr_demo_checkbox', true );发布复选框 (Post Checkbox)
The Post Checkbox option type displays a list of post IDs. It allows the user to check multiple post IDs for use in a custom function or loop.
“发布复选框”选项类型显示发布ID的列表。 它允许用户检查多个帖子ID，以用于自定义功能或循环。
// OptionTree Post Checkbox Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_post_checkbox',
'label' => __( 'Post Checkbox', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'post-checkbox',
'section' => 'your_section',
),
// Get the value saved on Theme Options Page
// This will always return an array
// Only the Post IDs will be returned
$spyr_demo_post_checkbox = ot_get_option( 'spyr_demo_post_checkbox' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Post IDs will be returned
$spyr_demo_post_checkbox = get_post_meta( $post->ID, 'spyr_demo_post_checkbox', true );
// Display only the latest 3 posts from a specific category (14)
add_filter( 'ot_type_post_checkbox_query', 'spyr_post_checkbox_custom_query', 10, 2 );
function spyr_post_checkbox_limit_posts( $query, $field_id ) {
if( 'spyr_demo_post_checkbox' == $field_id ) {
return array_merge( $query, array( 'posts_per_page' => 3, 'cat' => 14 ) );
}
}页面复选框 (Page Checkbox)
The Page Checkbox option type displays a list of page IDs. It allows the user to check multiple page IDs for use in a custom function or loop.
页面复选框选项类型显示页面ID列表。 它允许用户检查多个页面ID，以用于自定义功能或循环。
// OptionTree Page Checkbox Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_page_checkbox',
'label' => __( 'Page Checkbox', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'page-checkbox',
'section' => 'your_section',
),
// Get the value saved on Theme Options Page
// This will always return an array
// Only the Page IDs will be returned
$spyr_demo_page_checkbox = ot_get_option( 'spyr_demo_page_checkbox' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Page IDs will be returned
$spyr_demo_page_checkbox = get_post_meta( $post->ID, 'spyr_demo_page_checkbox', true );
// Display only top level pages
add_filter( 'ot_type_page_checkbox_query', 'spyr_page_checkbox_top_level_only', 10, 2 );
function spyr_page_checkbox_top_level_only( $query, $field_id ) {
if( 'spyr_demo_page_checkbox' == $field_id ) {
return array_merge( $query, array( 'post_parent' => 0 ) );
}
}
// Display only sub-pages from a parent page
add_filter( 'ot_type_page_checkbox_query', 'spyr_page_checkbox_sub_pages', 10, 2 );
function spyr_page_checkbox_sub_pages( $query, $field_id ) {
if( 'spyr_demo_page_checkbox' == $field_id ) {
return array_merge( $query, array( 'post_parent' => 7 ) );
}
}自定义帖子类型复选框 (Custom Post Type Checkbox)
The Custom Post Type Select option type displays a list of IDs from any available WordPress post type or custom post type. It allows the user to check multiple post IDs for use in a custom function or loop. Requires at least one valid post_type in the post_type field.
“自定义帖子类型选择”选项类型显示任何可用的WordPress帖子类型或自定义帖子类型的ID列表。 它允许用户检查多个帖子ID，以用于自定义功能或循环。 需要在post_type场至少一个有效post_type。
// OptionTree Custom Post Type Checkbox Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_custom_post_type_checkbox',
'label' => __( 'Custom Post Type Checkbox', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'custom-post-type-checkbox',
'section' => 'your_section',
'post_type' => 'movie',
)
// Get the value saved on Theme Options Page
// This will always return an array
// Only the Page IDs will be returned
$spyr_demo_page_checkbox = ot_get_option( 'spyr_demo_custom_post_type_checkbox' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Page IDs will be returned
$spyr_demo_page_checkbox = get_post_meta( $post->ID, 'spyr_demo_custom_post_type_checkbox', true );
// Add a second CPT to the list
add_filter( 'ot_type_custom_post_type_checkbox_query', 'spyr_cpt_checkbox_include_trailers', 10, 2 );
function spyr_cpt_checkbox_include_trailers( $query, $field_id ) {
if( 'spyr_demo_custom_post_type_checkbox' == $field_id ) {
return array_merge( $query, array( 'post_type' => 'movie_trailers' ) );
}
}类别复选框 (Category Checkbox)
The Category Checkbox option type displays a list of category IDs. It allows the user to check multiple category IDs and will return that value as an array for use in a custom function or loop.
类别复选框选项类型显示类别ID的列表。 它允许用户检查多个类别ID，并将该值作为数组返回以用于自定义函数或循环。
// OptionTree Category Checkbox Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_category_checkbox',
'label' => __( 'Category Checkbox', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'category-checkbox',
'section' => 'your_section',
),
// Get the value saved on Theme Options Page
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_category_checkbox = ot_get_option( 'spyr_demo_category_checkbox' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_category_checkbox = get_post_meta( $post->ID, 'spyr_demo_category_checkbox', true );
// Hide categories without a post
add_filter( 'ot_type_category_checkbox_query', 'spyr_ot_type_category_checkbox_hide_empty', 10, 2 );
function spyr_ot_type_category_checkbox_hide_empty( $query, $field_id ) {
if( 'spyr_demo_category_checkbox' == $field_id ) {
return array_merge( $query, array( 'hide_empty' => true ) );
}
}标签复选框 (Tag Checkbox)
The Tag Checkbox option type displays a list of tag IDs. It allows the user to check multiple tag IDs and will return that value as an array for use in a custom function or loop.
标签复选框选项类型显示标签ID的列表。 它允许用户检查多个标签ID，并将该值作为数组返回以用于自定义函数或循环。
// OptionTree Tag Checkbox Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_tag_checkbox',
'label' => __( 'Tag Checkbox', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'tag-checkbox',
'section' => 'your_section',
)
// Get the value saved on Theme Options Page
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_tag_checkbox = ot_get_option( 'spyr_demo_tag_checkbox' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_tag_checkbox = get_post_meta( $post->ID, 'spyr_demo_tag_checkbox', true );分类复选框 (Taxonomy Checkbox)
The Taxonomy Checkbox option type displays a list of taxonomy IDs. It allows the user to check multiple taxonomy IDs and will return that value as an array for use in a custom function or loop.
分类法复选框选项类型显示分类法ID的列表。 它允许用户检查多个分类ID，并将该值作为数组返回以用于自定义函数或循环。
// OptionTree Taxonomy Checkbox Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_taxonomy_checkbox',
'label' => __( 'Taxonomy Checkbox', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'taxonomy-checkbox',
'section' => 'your_section',
'taxonomy' => 'category,post_tag', // Comma separated list
)
// Get the value saved on Theme Options Page
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_taxonomy_checkbox = ot_get_option( 'spyr_demo_taxonomy_checkbox' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
// This will always return an array
// Only the Category IDs will be returned
$spyr_demo_taxonomy_checkbox = get_post_meta( $post->ID, 'spyr_demo_taxonomy_checkbox', true );
// Hide categories and tags not having a post
add_filter( 'ot_type_taxonomy_checkbox_query', 'spyr_ot_type_taxonomy_checkbox_hide_empty', 10, 2 );
function spyr_ot_type_taxonomy_checkbox_hide_empty( $query, $field_id ) {
if( 'demo_taxonomy_checkbox' == $field_id ) {
return array_merge( $query, array( 'hide_empty' => false ) );
}
}
// Override taxonomy via code
add_filter( 'ot_type_taxonomy_checkbox_query', 'spyr_ot_type_taxonomy_checkbox_add_genre', 10, 2 );
function spyr_ot_type_taxonomy_checkbox_add_genre( $query, $field_id ) {
if( 'demo_taxonomy_checkbox' == $field_id ) {
return array_merge( $query, array( 'taxonomy' => 'genre' ) );
}
}选择 (Select)
The Select option type is used to list anything you want that would be chosen from a select list.
“选择”选项类型用于列出要从选择列表中选择的任何内容。
// OptionTree Select Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_select',
'label' => __( 'Select', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'select',
'section' => 'your_section',
'choices' => array(
array(
'value' => 'yes',
'label' => __( 'Yes', 'text-domain' ),
),
array(
'value' => 'no',
'label' => __( 'No', 'text-domain' ),
),
array(
'value' => 'maybe',
'label' => __( 'Maybe', 'text-domain' ),
)
)
)
// Get the value saved on Theme Options Page
$spyr_demo_select = ot_get_option( 'spyr_demo_select' );
// Get the value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_select = get_post_meta( $post->ID, 'spyr_demo_select', true );发布选择 (Post Select)
The Post Select option type displays a list of post IDs. It will return a single post ID for use in a custom function or loop.
“发布选择”选项类型显示发布ID的列表。 它将返回单个帖子ID，供在自定义函数或循环中使用。
// OptionTree Post Select Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_post_select',
'label' => __( 'Post Select', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'post-select',
'section' => 'option_types',
)
// Get the ID value saved on Theme Options Page
$spyr_demo_post_select = ot_get_option( 'spyr_demo_post_select' );
// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_post_select = get_post_meta( $post->ID, 'spyr_demo_post_select', true );
// Get the Post's title
$title = get_the_title( $spyr_demo_post_select );
// Get the permalink
$link = get_permalink( $spyr_demo_post_select );
// Limit the number of posts displayed on the drop down for selection
add_filter( 'ot_type_post_select_query', 'spyr_ot_type_post_select_query_set_limit', 10, 2 );
function spyr_ot_type_post_select_query_set_limit( $query, $field_id ) {
if( 'spyr_demo_post_select' == $field_id ) {
return array_merge( $query, array( 'posts_per_page' => 10 ) );
}
}
// Populate the drop down select from posts belonging to this category (14)
add_filter( 'ot_type_post_select_query', 'spyr_ot_type_post_select_query_set_cat', 10, 2 );
function spyr_ot_type_post_select_query_set_cat( $query, $field_id ) {
if( 'spyr_demo_post_select' == $field_id ) {
return array_merge( $query, array( 'cat' => 14 ) );
}
}页面选择 (Page Select)
The Page Select option type displays a list of page IDs. It will return a single page ID for use in a custom function or loop.
页面选择选项类型显示页面ID列表。 它将返回一个页面ID，供在自定义函数或循环中使用。
// OptionTree Page Select Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_page_select',
'label' => __( 'Page Select', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'page-select',
'section' => 'option_types',
)
// Get the ID value saved on Theme Options Page
$spyr_demo_page_select = ot_get_option( 'spyr_demo_page_select' );
// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_page_select = get_post_meta( $post->ID, 'spyr_demo_page_select', true );
// Get the Post's title
$title = get_the_title( $spyr_demo_page_select );
// Get the permalink
$link = get_permalink( $spyr_demo_page_select );
// Populate the drop down select with subpages from a pre-defined Parent page (7)
add_filter( 'ot_type_page_select_query', 'spyr_ot_type_page_select_query_set_parent', 10, 2 );
function ot_type_page_select_query_set_parent( $query, $field_id ) {
if( 'spyr_demo_page_select' == $field_id ) {
return array_merge( $query, array( 'post_parent' => 7 ) );
}
}自定义帖子类型选择 (Custom Post Type Select)
The Custom Post Type Select option type displays a list of IDs from any available WordPress post type or custom post type. It will return a single post ID for use in a custom function or loop. Requires at least one valid post_type in the post_type field.
“自定义帖子类型选择”选项类型显示任何可用的WordPress帖子类型或自定义帖子类型的ID列表。 它将返回单个帖子ID，供在自定义函数或循环中使用。 需要在post_type场至少一个有效post_type。
// OptionTree Custom Post Type Select Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_custom_post_type_select',
'label' => __( 'Custom Post Type Select', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'custom-post-type-select',
'section' => 'your_section',
'post_type' => 'movie',
)
// Get the ID value saved on Theme Options Page
$spyr_demo_custom_post_type_select = ot_get_option( 'spyr_demo_custom_post_type_select' );
// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_custom_post_type_select = get_post_meta( $post->ID, 'spyr_demo_custom_post_type_select', true );
// Get the Post's title
$title = get_the_title( $spyr_demo_custom_post_type_select );
// Get the permalink
$link = get_permalink( $spyr_demo_custom_post_type_select );
// Override Custom Post Type via code
add_filter( 'ot_type_custom_post_type_select_query', 'spyr_ot_type_cpt_select_query_set_cpt', 10, 2 );
function spyr_ot_type_cpt_select_query_set_cpt( $query, $field_id ) {
if( 'spyr_demo_custom_post_type_select' == $field_id ) {
return array_merge( $query, array( 'post_type' => 'movie' ) );
}
}分类选择 (Category Select)
The Category Select option type displays a list of category IDs. It allows the user to select only one category ID and will return that value for use in a custom function or loop.
类别选择选项类型显示类别ID的列表。 它仅允许用户选择一个类别ID，并将返回该值以用于自定义功能或循环。
// OptionTree Category Select Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_category_select',
'label' => __( 'Category Select', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'category-select',
'section' => 'your_section',
)
// Get the ID value saved on Theme Options Page
$spyr_demo_category_select = ot_get_option( 'spyr_demo_category_select' );
// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_category_select = get_post_meta( $post->ID, 'spyr_demo_category_select', true );
// Get the Category name
$name = get_the_category_by_ID( $spyr_demo_category_select );
// Get the category description
$cat_desc = category_description( $spyr_demo_category_select );
// Get the Archive link for this category
$link = get_category_link( $spyr_demo_category_select );
// Hide categories with zero posts from the drop down list
add_filter( 'ot_type_category_select_query', 'spyr_ot_type_category_select_hide_cats', 10, 2 );
function spyr_ot_type_category_select_hide_cats( $query, $field_id ) {
if( 'demo_category_select' == $field_id ) {
return array_merge( $query, array( 'hide_empty' => true ) );
}
}标签选择 (Tag Select)
The Tag Select option type displays a list of tag IDs. It allows the user to select only one tag ID and will return that value for use in a custom function or loop.
标签选择选项类型显示标签ID的列表。 它仅允许用户选择一个标签ID，并将返回该值以用于自定义功能或循环。
// OptionTree Tag Select Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_tag_select',
'label' => __( 'Tag Select', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'tag-select',
'section' => 'your_section',
)
// Get the ID value saved on Theme Options Page
$spyr_demo_tag_select = ot_get_option( 'spyr_demo_tag_select' );
// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_tag_select = get_post_meta( $post->ID, 'spyr_demo_tag_select', true );
// Get the Tag's name
$tag = get_term_by( 'id', $spyr_demo_tag_select, 'post_tag', OBJECT, '' );
$name = $tag->name;
// Get the Archive link for this tag
$link = get_tag_link( $spyr_demo_tag_select );分类选择 (Taxonomy Select)
The Taxonomy Select option type displays a list of taxonomy IDs. It allows the user to select only one taxonomy ID and will return that value for use in a custom function or loop.
分类选择选项类型显示分类ID的列表。 它允许用户仅选择一个分类ID，并将返回该值以用于自定义函数或循环。
// OptionTree Taxonomy Select Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
array(
'id' => 'spyr_demo_taxonomy_select',
'label' => __( 'Taxonomy Select', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'taxonomy-select',
'section' => 'your_section',
'taxonomy' => 'category,post_tag', // Defaults to Categories and Tags
)
// Get the ID value saved on Theme Options Page
$spyr_demo_taxonomy_select = ot_get_option( 'spyr_demo_taxonomy_select' );
// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_taxonomy_select = get_post_meta( $post->ID, 'spyr_demo_taxonomy_select', true );
// Override Taxonomy via code
add_filter( 'ot_type_taxonomy_select_query', 'spyr_ot_type_taxonomy_select_set_tax', 10, 2 );
function spyr_ot_type_taxonomy_select_set_tax( $query, $field_id ) {
if( 'spyr_demo_taxonomy_select' == $field_id ) {
return array_merge( $query, array( 'taxonomy' => array( 'genre' ) ) );
}
}侧边栏选择 (Sidebar Select)
This option type makes it possible for users to select a WordPress registered sidebar to use on a specific area. By using the two provided filters, ot_recognized_sidebars, and ot_recognized_sidebars_{$field_id} we can be selective about which sidebars are available on a specific content area.
此选项类型使用户可以选择要在特定区域使用的WordPress注册侧边栏。 通过使用提供的两个过滤器ot_recognized_sidebars和ot_recognized_sidebars _ {$ field_id}，我们可以选择在特定内容区域上哪些侧边栏可用。
For example, if we create a WordPress theme that provides the ability to change the Blog Sidebar and we don’t want to have the footer sidebars available on this area, we can unset those sidebars either manually or by using a regular expression if we have a common name like footer-sidebar-$i.
例如，如果我们创建一个WordPress主题以提供更改Blog侧边栏的功能，并且我们不想在此区域使用页脚侧边栏，则可以手动或使用正则表达式来取消设置这些侧边栏。常见的名称，如footer-sidebar- $ i 。
// OptionTree Sidebar Select Option Type
// Example code when being used as a Metabox or
// Exported OptionTree file to be used in Theme Mode
// This option type will read all of your available
// Sidebars on your theme, so there is very little work to do here
array(
'id' => 'spyr_demo_sidebar_select',
'label' => __( 'Sidebar Select', 'text-domain' ),
'desc' => __( 'Your description', 'text-domain' ),
'type' => 'sidebar-select',
'section' => 'your_section',
)
// Get the ID value saved on Theme Options Page
$spyr_demo_sidebar_select = ot_get_option( 'spyr_demo_sidebar_select' );
// Get the ID value saved for a Page, Post or CPT ( Within the loop )
$spyr_demo_sidebar_select = get_post_meta( $post->ID, 'spyr_demo_sidebar_select', true );
// Call the sidebar
dynamic_sidebar( $spyr_demo_sidebar_select );结论 (Conclusion)
In this article we introduced OptionTree covering some of the most basic fields and looked at how we can access their values from the Theme Options page or from a post, page or even a Custom Post Type.
在本文中，我们介绍了OptionTree，涵盖了一些最基本的字段，并介绍了如何从“主题选项”页面或帖子，页面甚至“自定义帖子类型”中访问它们的值。
翻译自: https://www.sitepoint.com/optiontree-theme-options-ui-builder/
扫一扫
8518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
