标签: wordpress

  • WordPress后台框架OptionsFramework使用设置

    WordPress后台框架OptionsFramework使用设置

    Options Framework 是一款轻量级的主题后台设置框架, Options Framework 是国外一款非常流行的主题后台开发框架,因为其便捷性与开源免费,许多主题都是采用它作为 WordPress 主题后台。其分为主题版 Options Framework Theme 与插件版 Options Framework Plugin。Options Framework 支持几乎所有的表单(Form),安装与调用非常简单。在 options.php 定义你喜欢的选项,在后台就会自动地显示出来。

    OptionsFramework新特性

    • 轻量级
    • 基于wordpress原生api实现,提供了比较全面的常用选项
    • 界面与wordpress统一,当然也可以自己定制
    • 功能强大,使用简单

    Options Framework其实是一款主题,安装启用,就可以看到效果了,这时候会在后台→外观菜单下面多出来一个“Theme Options”的菜单(如果需要在左侧主菜单中显示该选项,可通过add_menu_page()实现),打开后即可看到所有的设置选项,下图已经修改为“主题选项”了如下图:

    Wordpress Options Framework

     

    框架使用方法

    1. 复制Options Framework主题文件夹下的inc、images文件夹和options.php,放到你的主题根目录下面
    2. 然后在你的主题的funtions.php加入以下代码(该代码在主题版的funtions.php开头):
    if (!function_exists('optionsframework_init')){
        define('OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri().'/inc/');
        require_once dirname(__FILE__).'/inc/options-framework.php';
    }
    

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

    
    add_action('optionsframework_custom_scripts', 'optionsframework_custom_scripts');
        function optionsframework_custom_scripts(){ ?>
            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20your%20javascript%20code...%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <?php
    }
    
    

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

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

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

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

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

    自定义选项

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

    <?php /* options.php line 60 */ //初始化存储选项的$options数组 $options = array(); //定义一个选项卡,标题是Basic Settings,注意type是heading $options[] = array("name" => "Basic Settings",
        "type" => "heading");
        //定义一个text类型的input box,type要设置为text,class为mini会让input长度比较短
        $options[] = array("name" => "Input Text Mini",
        "desc" => "A mini text input field.",
        "id" => "example_text_mini",
        "std" => "Default",
        "class" => "mini",
        "type" => "text");
    //同上,但没有设置class mini,input长度较长
    $options[] = array("name" => "Input Text",
        "desc" => "A text input field.",
        "id" => "example_text",
        "std" => "Default Value",
        "type" => "text");
    //输出一个textarea
    $options[] = array("name" => "Textarea",
        "desc" => "Textarea description.",
        "id" => "example_textarea",
        "std" => "Default Text",
        "type" => "textarea");
    //输出select下拉菜单,$test_array存储下拉菜单的选项,“std”表示默认选中的项
    $options[] = array( "name" => "Input Select Small",
     "desc" => "Small Select Box.",
     "id" => "example_select",
     "std" => "three",
     "type" => "select",
     "class" => "mini", //mini, tiny, small
     "options" => $test_array);
    //对应下面最后的代码
    $options[] = array(
        'name' => __('Input Checkbox Name', 'options_framework_theme'),
        'desc' => __('Check to display.'),
        'id' => 'example_checkbox_2',
        'std' => '1',
        'type' => 'checkbox'
    );
    

    其中: name – 选项的label名称

    id – 这个id很重要,区分每个选项,必须是唯一的,存储和获取选项时这个作为键使用

    type – 不同type产生不同的选项

    前台调用举例

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

    <?php echo of_get_option('example_checkbox', 'no entry' ); ?>
     
     <?php if ( of_get_option('example_uploader') ) { ?>
                <img src="<?php echo of_get_option('example_uploader'); ?>" />
                <?php } ?>
     
    <?php $multicheck = of_get_option('example_multicheck', 'none' ); ?>
                <?php print_r($multicheck); ?>
     
    <?php if ( is_array($multicheck) ) { foreach ($multicheck as $key => $value) {
                        // If you need the option's name rather than the key you can get that
                        $name = $test_array_jr[$key];
                        // Prints out each of the values
                        echo '
    <li>' . $key . ' (' . $name . ') = ' . $value . '</li>
    
    ';
                    }
                }
                else {
                    echo '
    <li>There are no saved values yet.</li>
    
    ';
                }
                ?>
    

    使用Options Framework详解

    1.入门,Options Framework(下简称框架)的设置选项以如下形式出现:

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

    比如:

    $options[] = array(
            "name"=>'网站公告:',
            "desc"=>'输入您的网站公告,不要超过50个字符。',
            "id"=>'site_notices',
            "std"=>'输入您的网站公告',
            "class"=>'mini',
            "type"=>"text"
        );
    

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

    $options[] = array(
    		'name' => '新选项卡',
    		'type' => 'heading'
        );
    

    3.调用

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

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

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

    <?php if(of_get_option("example_checkbox")){ echo "checkbox is checked"; }else{ echo "checkbox is not checked"; } ?>
    

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

    4.修改输出方式,

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

    5.主题本地化,

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

    OptionsFramework下载