Wordpress轻量级后台框架OptionsFramework使用设置举例

OptionsFramework新特性

1.轻量级
2.基于wordpress原生api实现，提供了比较全面的常用选项
3.界面与wordpress统一，当然也可以自己定制
4.功能强大，使用简单
Options Framework其实是一款主题，安装启用，就可以看到效果了，这时候会在后台→外观菜单下面多出来一个“Theme Options”的菜单（如果需要在左侧主菜单中显示该选项，可通过add_menu_page()实现），打开后即可看到所有的设置选项，下图已经修改为“主题选项”了如下图：

OptionsFramework

框架使用方法

1、复制Options Framework主题文件夹下的inc、images文件夹和options.php，放到你的主题根目录下面
2、然后在你的主题的funtions.php加入以下代码（该代码在主题版的funtions.php开头）：

  1. if ( !function_exists( 'optionsframework_init' ) ) {
  2. 	define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/' );
  3. 	require_once dirname( __FILE__ ) . '/inc/options-framework.php';
  4. }

如果你需要在设置面板中加入javascript代码，在上面代码后面加入以下代码：

  1. add_action('optionsframework_custom_scripts', 'optionsframework_custom_scripts');
  2. function optionsframework_custom_scripts(){ ?>
  3.     <script type="text/javascript">
  4.         your javascript code...
  5.     </script>
  6. <?php
  7. }

如果你需要在设置面板后面加入自定义内容，需要在以上代码中加入以下代码：（第三页将说明如何在设置面板后面加入一个自定义面板）

  1. add_action('optionsframework_after','options_after', 100);
  2. function options_after() { ?>
  3.     your html code...
  4. <?php
  5. }

Options Framework产生的后台选项支持功能

后台页面是选项卡式的，非常美观大方，支持的功能也很多，包括：

    ◆ 表单按钮（text、checkbox、radio、select）
    ◆ 图片上传
    ◆ 背景图片和背景色
    ◆ 字体选择
    ◆ 图片选择（例如用来选择主题的layout）
    ◆ 帮助信息
    ◆ 复位按钮

自定义选项

打开options.php中，模仿以下代码能做出自己的选项。

  1. <?php
  2. /* options.php line 60 */
  3. //初始化存储选项的$options数组
  4. $options = array();
  5. //定义一个选项卡，标题是Basic Settings，注意type是heading
  6. $options[] = array("name" => "Basic Settings",
  7.     "type" => "heading");
  8.     //定义一个text类型的input box，type要设置为text，class为mini会让input长度比较短
  9.     $options[] = array("name" => "Input Text Mini",
  10.     "desc" => "A mini text input field.",
  11.     "id" => "example_text_mini",
  12.     "std" => "Default",
  13.     "class" => "mini",
  14.     "type" => "text");
  15. //同上，但没有设置class mini，input长度较长
  16. $options[] = array("name" => "Input Text",
  17.     "desc" => "A text input field.",
  18.     "id" => "example_text",
  19.     "std" => "Default Value",
  20.     "type" => "text");
  21. //输出一个textarea
  22. $options[] = array("name" => "Textarea",
  23.     "desc" => "Textarea description.",
  24.     "id" => "example_textarea",
  25.     "std" => "Default Text",
  26.     "type" => "textarea");
  27. //输出select下拉菜单，$test_array存储下拉菜单的选项，“std”表示默认选中的项
  28. $options[] = array( "name" => "Input Select Small",
  29.    "desc" => "Small Select Box.",
  30.    "id" => "example_select",
  31.    "std" => "three",
  32.    "type" => "select",
  33.    "class" => "mini", //mini, tiny, small
  34.    "options" => $test_array);
  35. //对应下面最后的代码
  36. $options[] = array(
  37.     'name' => __('Input Checkbox Name', 'options_framework_theme'),
  38.     'desc' => __('Check to display.'),
  39.     'id' => 'example_checkbox_2',
  40.     'std' => '1',
  41.     'type' => 'checkbox'
  42. );

其中： name – 选项的label名称
id – 这个id很重要，区分每个选项，必须是唯一的，存储和获取选项时这个作为键使用
type – 不同type产生不同的选项

前台调用举例

前台调用的话可以看原来主题版的index.php 。这里给出一些示例：

  1. <?php echo of_get_option('example_checkbox', 'no entry' ); ?> 
  2.  <?php if ( of_get_option('example_uploader') ) { ?>
  3.             <img src="<?php echo of_get_option('example_uploader'); ?>" />
  4.             <?php } ?> 
  5. <?php $multicheck = of_get_option('example_multicheck', 'none' ); ?>
  6.             <?php print_r($multicheck); ?> 
  7. <?php
  8.             if ( is_array($multicheck) ) {
  9.                 foreach ($multicheck as $key => $value) {
  10.                     // If you need the option's name rather than the key you can get that
  11.                     $name = $test_array_jr[$key];
  12.                     // Prints out each of the values
  13.                     echo '<li>' . $key . ' (' . $name . ') = ' . $value . '</li>';
  14.                 }
  15.             }
  16.             else {
  17.                 echo '<li>There are no saved values yet.</li>';
  18.             }
  19.             ?>

使用Options Framework详解

1.入门，Options Framework（下简称框架）的设置选项以如下形式出现：

  1. $options[] = array(
  2.         "name"    =>'',  //选填，选项名称
  3.         "desc"    =>'',  //选填，选项说明
  4.         "id"      =>'',  //必填，对应表单元素ID，该项作为唯一标识，不可与其他选项重复！
  5.         "std"     =>'',  //可选，元素默认值
  6.         "class"   =>'',  //可选，该类型元素class
  7.         "type"    =>'',  //可选，表单元素类型
  8.         "settings"=>''   //可选，仅当调用编辑器时使用
  9.     );

比如：

  1. $options[] = array(
  2.         "name"=>'网站公告：',
  3.         "desc"=>'输入您的网站公告，不要超过50个字符。',
  4.         "id"=>'site_notices',
  5.         "std"=>'输入您的网站公告',
  6.         "class"=>'mini',
  7.         "type"=>"text"
  8.     );

2.添加选项卡，在需要加入的地方加入如下代码：

  1. $options[] = array(
  2. 		'name' => '新选项卡',
  3. 		'type' => 'heading'
  4.     );

再在以上代码后面加入需要添加的选项保存预览。

3.调用
通过以上两步，后台设置部分基本完成，那么主题如何调用这些设置值呢？框架自带的主题中明确说明了每一种类型的调用方法，可参考主题中的调用方法，简单来说通过of_get_option($id,$default)即可调用保存的值，其中$id为必选值，即为需要调用元素的id值，$default为可选值，表示当所调用的元素值不存在时显示的值，如：

  1. <?php echo of_get_option('site_notices', '暂无公告信息！'); ?>

注意，of_get_option()只是返回了一个值，需要用echo输出才能在主题中显示，某些情况下，也可能需要使用如下代码：

  1. <?php
  2. if(of_get_option("example_checkbox")){
  3.     echo "checkbox is checked";
  4. }else{
  5.     echo "checkbox is not checked";
  6. } ?>

通过以上两段代码，应该能较深刻的理解为什么要用echo输出。更详细的内容说明请转至文章底部，下载作者Options Framework中文版，查看更详细的调用方式。

4.修改输出方式，
如果想修改以上函数名，找到inc/options-framework.php中478和480两行，将“of_get_option”替换为需要的函数名称即可。如替换为get_opt，则可以通过get_opt($id,$default)调用。

5.主题本地化，
如果主题需要支持多种语言，则需要在所有文件中替换“options_framework_theme”为您的主题名称或您想要使用的名称。

注意事项

options_framework默认过滤js、src等标签

OptionsFramework下载

1、Options Framework作者博客：http://wptheming.com/
2、主题版下载地址（英文）：https://codeload.github.com/devinsays/options-framework-theme/legacy.zip/master
3、插件版下载地址（英文）：https://wordpress.org/plugins/options-framework/
4、中文版主题下载地址（中文）：http://pan.baidu.com/s/1o7LXP9o

如果你觉得OptionsFramework不过专业你可以使用 WordPress最棒的后台框架Redux Framework

了解更详细的前台调用 Options Framework后台主题面板中文版设置调用详解举例

发布日期： 作者： 511遇见

所属分类： Wordpress, Wordpress 插件 标签： 　　

没有相关文章!

相关文章: