wordpress主题后台设置框架Options Framework

对于很多刚开始写wordpress主题的新手来说,想给主题加上一些设置选项,方便使用者灵活选择和定制,这时候后台框架就成了一个绕不过的话题,一般方法无外乎两种,一种是自己动手,丰衣足食,一种采用框架,不重复制造轮子。既然是新手,前者门槛就相对高些,在这里推荐使用框架,省事省力,性能上也能得到保证。

在这里,作者推荐Options Framework,Options Framework是一款轻量级的主题后台设置框架,与其他同类框架相比,该框架最大的特点是:

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

Options Framework其实是一款主题,别着急,先往下看,作者在主题前台列举了框架设置的调用方法,从官方下载后以主题的形式安装启用,就可以看到效果了,这时候会在后台→外观菜单下面多出来一个“Theme Options”的菜单(如果需要在左侧主菜单中显示该选项,可通过add_menu_page()实现),打开后即可看到所有的设置选项,如下图:

如果需要在自己的主题中使用该框架,复制Options Framework主题下的inc、images文件夹和options.php,放到你的主题根目录下面,在你的主题主函数functions.php中加入以下代码即可(该代码位于Options Framework主题的functions.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. }

现在就可以使用了,快看看后台→外观菜单下面是不是多出来一个“Theme Options”菜单呢,点击进去看看吧。

wordpress主题后台设置框架Options Framework

如果你需要在设置面板中加入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. }

下载OptionsFramework中文版.zip

现在我们的准备工作就做好了,接下来就是如何使用Options Framework

打开options.php,所有的设置选项配置都在optionsframework_options函数中,我们修改或者添加相应的选项即可:

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. &lt?php echo of_get_option('site_notices', '暂无公告信息!'); ?>

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

  1. &lt?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)调用。

下面讲在设置面板右侧加入一个自定义面板,用来显示说明、捐赠或者其他信息等

前面提到了Options Framework一些基本的使用方法,一般的,主题作者都会在主题设置中加入一些公共说明信息,主题更新,捐赠等等的信息,现在我们来了解如何在Options Framework设置面板后面加入一个自定义面板,来显示这些信息。完成后示例如下:

wordpress主题后台设置框架Options Framework

文章上面提到了在设置面板面板后面加入html代码,自定义面板也是通过此方法来实现,在主函数中加入如下代码:

  1. add_action('optionsframework_after','options_after_panel', 100);
  2. function options_after_panel() { ?<
  3.     <div class="metabox-holder" id="custom-panel">
  4.        <div class="postbox>
  5.             <h3><span>自定义面板</span></h3>
  6.             <div class="inside">
  7.                 <p>Options Framework是一款很不错的轻量级主题后台设置框架!</p>
  8.             </div>
  9.        </div>
  10.     </div>
  11. <?php
  12. }

再在inc/css/optionsframework.css添加以下自定义面板样式保存预览:

  1. #custom-panel{
  2.     position: relative;
  3.     z-index: 0;
  4.     max-width: 782px;
  5.     background: #fff;
  6. }
  7. #custom-panel h3{
  8.     cursor: default;
  9. }

以上方法适合新手使用,简单方便,当然我们也可以通过修改框架代码来在右侧或其他位置加入自定义面板,具体不再赘述。

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 快速入门 wordpress主题后台设置框架Options Framework https://www.mbxzb.com/blog/file/rumen/3128.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务