WordPress 主题添加设置选项 Options Framework

0 Comment

目前在用主题原本就是使用 Options Framework 选项框架,后来看到它已经好几年没有更新过,换上 WordPress 自带 Theme Customization API 主题自定义功能,官方,用起来更放心。无奈最近折腾 FastCGI_Cache 全站静态,开启前台管理员匿名,自定义功能(实时预览前端页面)就无法使用,提示错误:您需要更高级别的权限。抱歉,您不能自定义此站点。

Options Framework 在后台就能完成设置,只好花点时间把它折腾回来。不难,把设置项一个一个迁移过来就好。作者:Devin - Options Panel Framework,记录一下添加方法。

WordPress 主题添加设置选项 Options Framework

下载文件

目前最新版本 1.9.1,下载地址:GitHub备用下载

集成到主题

options-framework-theme-master.zip 文件解压,把 inc 目录以及 options.php 文件复制到主题目录下。

 1199-options-framework-files

然后把下面代码拷贝到主题 functions.php 文件:

//加载框架文件
if (!function_exists('optionsframework_init')) {
define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/' );
require_once dirname( __FILE__ ) . '/inc/options-framework.php';

// Loads options.php from child or parent theme
$optionsfile = locate_template( 'options.php' );
load_template( $optionsfile );
}
//菜单名字
add_filter( 'optionsframework_menu', 'of_options_menu_filter' );
function of_options_menu_filter( $menu ) {
$menu['mode'] = 'menu';
$menu['page_title'] = __( '主题选项', 'of' );
$menu['menu_title'] = __( '主题选项', 'of' );
$menu['menu_slug'] = 'of-theme';
return $menu;
}
//示例:添加自定义 js
add_action( 'optionsframework_custom_scripts', 'optionsframework_custom_scripts' );
function optionsframework_custom_scripts() { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#example_showhidden').click(function() {
jQuery('#section-example_text_hidden').fadeToggle(400);
});
if (jQuery('#example_showhidden:checked').val() !== undefined) {
jQuery('#section-example_text_hidden').show();
}
});
</script>
<?php
}

添加完成,如无意外,后台刷新一下,主题设置下面已经新增一个「主题选项」菜单,点击进去就可以填写配置。

 1199-options-framework-demo

大胆测试,信息随便填写,保存……至此,只是完成第一步,把设置框架引入进来了,但是主题实际上还没有使用框架里面的设置项。

使用

根据需要修改 options.php 文件添加配置项目,然后主题调用配置即可。

修改 options.php 文件

打开 options.php,依葫芦画瓢搞定。默认配置文件简单加了点注释,有需要可以参考一下▼展开

<?php
/**
* A unique identifier is defined to store the options in the database and reference them from the theme.
*/
function optionsframework_option_name() {
// Change this to use your theme slug
return 'options-framework-theme';
}

/**
* Defines an array of options that will be used to generate the settings page and be saved in the database.
* When creating the 'id' fields, make sure to use all lowercase and no spaces.
*
* If you are making your theme translatable, you should replace 'theme-textdomain'
* with the actual text domain for your theme. Read more:
* http://codex.wordpress.org/Function_Reference/load_theme_textdomain
*/

function optionsframework_options() {

// 测试数据 单选菜单
$test_array = array(
'one' => __( 'One', 'theme-textdomain' ),
'two' => __( 'Two', 'theme-textdomain' ),
'three' => __( 'Three', 'theme-textdomain' ),
'four' => __( 'Four', 'theme-textdomain' ),
'five' => __( 'Five', 'theme-textdomain' )
);

// 多选
$multicheck_array = array(
'one' => __( 'French Toast', 'theme-textdomain' ),
'two' => __( 'Pancake', 'theme-textdomain' ),
'three' => __( 'Omelette', 'theme-textdomain' ),
'four' => __( 'Crepe', 'theme-textdomain' ),
'five' => __( 'Waffle', 'theme-textdomain' )
);

// 多选默认值
$multicheck_defaults = array(
'one' => '1',
'five' => '1'
);

// 背景 默认值
$background_defaults = array(
'color' => '',
'image' => '',
'repeat' => 'repeat',
'position' => 'top center',
'attachment'=>'scroll' );

// 段落默认值
$typography_defaults = array(
'size' => '15px',
'face' => 'georgia',
'style' => 'bold',
'color' => '#bada55' );

// 段落选项
$typography_options = array(
'sizes' => array( '6','12','14','16','20' ),
'faces' => array( 'Helvetica Neue' => 'Helvetica Neue','Arial' => 'Arial' ),
'styles' => array( 'normal' => 'Normal','bold' => 'Bold' ),
'color' => false
);

// 获取所有分类
$options_categories = array();
$options_categories_obj = get_categories();
foreach ($options_categories_obj as $category) {
$options_categories[$category->cat_ID] = $category->cat_name;
}

// 获取所有标签
$options_tags = array();
$options_tags_obj = get_tags();
foreach ( $options_tags_obj as $tag ) {
$options_tags[$tag->term_id] = $tag->name;
}


// 获取所有页面
$options_pages = array();
$options_pages_obj = get_pages( 'sort_column=post_parent,menu_order' );
$options_pages[''] = 'Select a page:';
foreach ($options_pages_obj as $page) {
$options_pages[$page->ID] = $page->post_title;
}

// If using image radio buttons, define a directory path
$imagepath = get_template_directory_uri() . '/images/';

$options = array();

$options[] = array( //Basic Settings 选项卡名字,改成 基础设置 试试
'name' => __( 'Basic Settings', 'theme-textdomain' ),
'type' => 'heading'// 这个表示选项卡
);

$options[] = array(
'name' => __( 'Input Text Mini', 'theme-textdomain' ),//选项名字
'desc' => __( 'A mini text input field.', 'theme-textdomain' ),//选项描述
'id' => 'example_text_mini',//选项 ID(主题通过 ID 获取配置值)
'std' => 'Default',//选项默认值
'class' => 'mini',//自定义 class
'type' => 'text'//选项类型,text、textarea、checkbox、select、radio、upload、images、background、multicheck、color、typography、editor
//各种类型区别改着试试或者看看测试数据选项就知道
);

$options[] = array(
'name' => __( 'Input Text', 'theme-textdomain' ),
'desc' => __( 'A text input field.', 'theme-textdomain' ),
'id' => 'example_text',
'std' => 'Default Value',
'type' => 'text'//文本框(单行)
);

$options[] = array(
'name' => __( 'Input with Placeholder', 'theme-textdomain' ),
'desc' => __( 'A text input field with an HTML5 placeholder.', 'theme-textdomain' ),
'id' => 'example_placeholder',
'placeholder' => 'Placeholder',
'type' => 'text'
);

$options[] = array(
'name' => __( 'Textarea', 'theme-textdomain' ),
'desc' => __( 'Textarea description.', 'theme-textdomain' ),
'id' => 'example_textarea',
'std' => 'Default Text',
'type' => 'textarea'//文本框(多行)
);

$options[] = array(
'name' => __( 'Input Select Small', 'theme-textdomain' ),
'desc' => __( 'Small Select Box.', 'theme-textdomain' ),
'id' => 'example_select',
'std' => 'three',
'type' => 'select',//下拉选择菜单
'class' => 'mini', //mini, tiny, small 菜单大小
'options' => $test_array
);

$options[] = array(
'name' => __( 'Input Select Wide', 'theme-textdomain' ),
'desc' => __( 'A wider select box.', 'theme-textdomain' ),
'id' => 'example_select_wide',
'std' => 'two',
'type' => 'select',
'options' => $test_array
);

if ( $options_categories ) {
$options[] = array(//分类选择
'name' => __( 'Select a Category', 'theme-textdomain' ),
'desc' => __( 'Passed an array of categories with cat_ID and cat_name', 'theme-textdomain' ),
'id' => 'example_select_categories',
'type' => 'select',
'options' => $options_categories
);
}

if ( $options_tags ) {//标签选择
$options[] = array(
'name' => __( 'Select a Tag', 'options_check' ),
'desc' => __( 'Passed an array of tags with term_id and term_name', 'options_check' ),
'id' => 'example_select_tags',
'type' => 'select',
'options' => $options_tags
);
}

$options[] = array(//页面选择
'name' => __( 'Select a Page', 'theme-textdomain' ),
'desc' => __( 'Passed an pages with ID and post_title', 'theme-textdomain' ),
'id' => 'example_select_pages',
'type' => 'select',
'options' => $options_pages
);

$options[] = array(//单选
'name' => __( 'Input Radio (one)', 'theme-textdomain' ),
'desc' => __( 'Radio select with default options "one".', 'theme-textdomain' ),
'id' => 'example_radio',
'std' => 'one',
'type' => 'radio',
'options' => $test_array
);

$options[] = array(
'name' => __( 'Example Info', 'theme-textdomain' ),
'desc' => __( 'This is just some example information you can put in the panel.', 'theme-textdomain' ),
'type' => 'info'
);

$options[] = array(
'name' => __( 'Input Checkbox', 'theme-textdomain' ),
'desc' => __( 'Example checkbox, defaults to true.', 'theme-textdomain' ),
'id' => 'example_checkbox',
'std' => '1',
'type' => 'checkbox'
);

$options[] = array(
'name' => __( 'Advanced Settings', 'theme-textdomain' ),
'type' => 'heading'
);

$options[] = array(
'name' => __( 'Check to Show a Hidden Text Input', 'theme-textdomain' ),
'desc' => __( 'Click here and see what happens.', 'theme-textdomain' ),
'id' => 'example_showhidden',
'type' => 'checkbox'
);

$options[] = array(
'name' => __( 'Hidden Text Input', 'theme-textdomain' ),
'desc' => __( 'This option is hidden unless activated by a checkbox click.', 'theme-textdomain' ),
'id' => 'example_text_hidden',
'std' => 'Hello',
'class' => 'hidden',
'type' => 'text'
);

$options[] = array(
'name' => __( 'Uploader Test', 'theme-textdomain' ),
'desc' => __( 'This creates a full size uploader that previews the image.', 'theme-textdomain' ),
'id' => 'example_uploader',
'type' => 'upload'//上传
);

$options[] = array(
'name' => "Example Image Selector",
'desc' => "Images for layout.",
'id' => "example_images",
'std' => "2c-l-fixed",
'type' => "images",
'options' => array(
'1col-fixed' => $imagepath . '1col.png',
'2c-l-fixed' => $imagepath . '2cl.png',
'2c-r-fixed' => $imagepath . '2cr.png'
)
);

$options[] = array(
'name' => __( 'Example Background', 'theme-textdomain' ),
'desc' => __( 'Change the background CSS.', 'theme-textdomain' ),
'id' => 'example_background',
'std' => $background_defaults,
'type' => 'background'//背景
);

$options[] = array(//多项选择
'name' => __( 'Multicheck', 'theme-textdomain' ),
'desc' => __( 'Multicheck description.', 'theme-textdomain' ),
'id' => 'example_multicheck',
'std' => $multicheck_defaults, // 多选选择默认值
'type' => 'multicheck',
'options' => $multicheck_array
);

$options[] = array(
'name' => __( 'Colorpicker', 'theme-textdomain' ),
'desc' => __( 'No color selected by default.', 'theme-textdomain' ),
'id' => 'example_colorpicker',
'std' => '',
'type' => 'color'//颜色
);

$options[] = array( 'name' => __( 'Typography', 'theme-textdomain' ),
'desc' => __( 'Example typography.', 'theme-textdomain' ),
'id' => "example_typography",
'std' => $typography_defaults,
'type' => 'typography'//段落
);

$options[] = array(
'name' => __( 'Custom Typography', 'theme-textdomain' ),
'desc' => __( 'Custom typography options.', 'theme-textdomain' ),
'id' => "custom_typography",
'std' => $typography_defaults,
'type' => 'typography',
'options' => $typography_options
);

$options[] = array(
'name' => __( 'Text Editor', 'theme-textdomain' ),
'type' => 'heading'
);

/**
* For $settings options see:
* http://codex.wordpress.org/Function_Reference/wp_editor
*
* 'media_buttons' are not supported as there is no post to attach items to
* 'textarea_name' is set by the 'id' you choose
*/

$wp_editor_settings = array(//WordPress 编辑器默认值配置
'wpautop' => true, // Default
'textarea_rows' => 5,
'tinymce' => array( 'plugins' => 'wordpress,wplink' )
);

$options[] = array(
'name' => __( 'Default Text Editor', 'theme-textdomain' ),
'desc' => sprintf( __( 'You can also pass settings to the editor. Read more about wp_editor in <a href="%1$s" target="_blank">the WordPress codex</a>', 'theme-textdomain' ), 'http://codex.wordpress.org/Function_Reference/wp_editor' ),
'id' => 'example_editor',
'type' => 'editor',//类型:编辑器
'settings' => $wp_editor_settings
);

return $options;
}

主题调用配置

比如需要调用 id 为 example_text 的值:

$options[] = array(
'name' => __( 'Input Text', 'theme-textdomain' ),
'desc' => __( 'A text input field.', 'theme-textdomain' ),
'id' => 'example_text',
'std' => 'Default Value',
'type' => 'text'//文本框(单行)
);

方法:

$oox = of_get_option( 'example_text', 'Empty');

若改选项未定义或者为空,返回 Empty。

of_get_option 在 options-framework.php 中定义,可以根据需要修改。

if ( ! function_exists( 'of_get_option' ) ) :
function of_get_option( $name, $default = false ) {

$option_name = '';

// Gets option name as defined in the theme
if ( function_exists( 'optionsframework_option_name' ) ) {
$option_name = optionsframework_option_name();
}

// Fallback option name
if ( '' == $option_name ) {
$option_name = get_option( 'stylesheet' );
$option_name = preg_replace( "/\W/", "_", strtolower( $option_name ) );
}

// Get option settings from database
$options = get_option( $option_name );

// Return specific option
if ( isset( $options[$name] ) ) {
return $options[$name];
}

return $default;
}
endif;

-- 完 --

除非注明,常阳时光文章均为原创,本文地址 https://cyhour.com/1199/ 转载时必须以链接形式注明原始出处。
Vultr 送$25,搬瓦工年付最低$49,优惠码 BWH34QMFYT2R,更多推荐VPS信息,或支持老杨
Views: 82 Tags:  , 

Comments:0

发表留言

Vultr 送$25,搬瓦工年付最低$49,优惠码 BWH34QMFYT2R,更多推荐VPS信息