轻量级主题后台选项框架推荐,使主题开发更方便!!
前言
制作主题的时候制作后台是主题的特别重要的一个方面,与其自己写后台不如直接拿一个框架使用来得实在,虽然目前主题框架,但是都是一个字:太肥!比如国外一个流行的框架 options tree 框架就是在主题里面完全潜入一个插件,而这个插件好像就 1M 多,可想而知这主题的体积。云落在在对 git 主题开发的时候就用对主题框架进行了选择,最后看中了小影主题的后台,感觉非常简单而且使用效果不错,就拿来使用,在这里整理一下推荐给其他需要的朋友。
后台预览
主题后台简单好用,代码也很少,虽然支持的选项类型不多,但是好在使用,类似于那些取色器,文件上传之类的都是没有的,支持的类型截图基本都有了,标签式的选项分类可以让一些新用户很好的掌握一个主题。
基础代码
框架是用一个数组构建一个选项的,比如一个单选的项目就是用下面的代码的
array( 'name' => '单选项设置', 'desc' => '选择一个参数作为排序的根据,可以给与几个选择并且选择一个,可以预留选项', 'id' => 'git_hot_b', 'type' => 'radio', 'options' => array( '选择一' => 'xuanze1', '选择二' => 'xuanze2', '选择三' => 'xuanze3', '选择四' => 'xuanze4', '选择五' => 'xuanze5', '选择六' => 'xuanze6', '选择七' => 'xuanze7', '选择八' => 'xuanze8' ), 'std' => 'xuanze1' ),
数组根据从上到下,从左往右的顺序排的,很简单的
主题的数据调用也比较简单,上面单选的调用方式如下
<?php if (get_option('git_hot_b') == 'xuanze1') { //干嘛干嘛的 } elseif (get_option('git_hot_b') == 'xuanze1') { //干嘛干嘛的 } elseif (get_option('git_hot_b') == 'xuanze1') { //干嘛干嘛的 } elseif (get_option('git_hot_b') == 'xuanze1') { //干嘛干嘛的 } elseif (get_option('git_hot_b') == 'xuanze1') { //干嘛干嘛的 } elseif (get_option('git_hot_b') == 'xuanze1') { //干嘛干嘛的 } elseif (get_option('git_hot_b') == 'xuanze1') { //干嘛干嘛的 } elseif (get_option('git_hot_b') == 'xuanze1') { //干嘛干嘛的 } else { //干嘛干嘛的 } ?>
另外,一个最简单的文字框的代码是这样的
array( 'name' => '文字选项', 'desc' => '这里是输入框的描述文字', 'id' => 'hot_list_title', 'type' => 'text', 'std' => '主题预留文字' ),
调用方式如下
<?php echo get_option('hot_list_title'); ?>
完整代码
<?php $options = array( //开始第一个选项标签数组 array( 'title' => '选项一',//标签显示的文字 'id' => 'panel_general',//标签的 ID 'type' => 'panelstart' //顶部标签的类型 ), array( 'name' => '数字选择框', 'desc' => '这个是数字输入框', 'id' => 'git_linkpage_cat', 'type' => 'number', 'std' => '2'//最后一个数组不需要逗号 ), array( 'name' => '选择选项', 'desc' => '勾选选项的描述文字', 'id' => 'git_thumbnail_b', 'type' => 'checkbox'//复选框 ), array( 'name' => '单选项设置', 'desc' => '选择一个参数作为排序的根据,可以给与几个选择并且选择一个,可以预留选项', 'id' => 'git_hot_b', 'type' => 'radio', 'options' => array( '选择一' => 'xuanze1', '选择二' => 'xuanze2', '选择三' => 'xuanze3', '选择四' => 'xuanze4', '选择五' => 'xuanze5', '选择六' => 'xuanze6', '选择七' => 'xuanze7', '选择八' => 'xuanze8' ), 'std' => 'xuanze1' ), array( 'name' => '复选项设置', 'desc' => '', 'id' => 'git_hot_b4', 'type' => 'checkboxs', 'options' => array( 'xuanze14' => '选择一', 'xuanze24' => '选择二', 'xuanze34' => '选择三', 'xuanze44' => '选择四', 'xuanze54' => '选择五' ), 'std' => 'xuanze14' ), array( 'name' => '单选项设置', 'desc' => '选择一个参数作为排序的根据,可以给与几个选择并且选择一个,可以预留选项', 'id' => 'git_hot_b5', 'type' => 'select', 'options' => array( 'xuanze12' => '选择一', 'xuanze22' => '选择二', 'xuanze32' => '选择三', 'xuanze42' => '选择四', 'xuanze52' => '选择五' ), 'std' => 'xuanze52' ), array( 'name' => '密码选项输入框', 'desc' => '这是一个密码输入框,所以不可见', 'id' => 'git_wbpasd_b', 'type' => 'password', 'std' => '' ), array( 'title' => '这是一个分段,也是一个二级标题',//二级标题,只显示文字,没有选项 'type' => 'subtitle'//二级标题的类型 ), array( 'name' => '文字选项', 'desc' => '这里是输入框的描述文字', 'id' => 'hot_list_title', 'type' => 'text', 'std' => '主题预留文字' ), array( 'name' => '文本框选项', 'desc' => '这里是输入框的描述文字',//这里可以随便写的 'id' => '’git_tui',//ID 是保存数据的值,保持唯一性 'type' => 'textarea',//设置选项的类型 'std' => '这里是选项的默认数据'//选项的默认数据 ), array( 'name' => '文字选项设置', 'desc' => '选项的描述文字', 'id' => 'git_tougao_mailto', 'type' => 'text', 'std' => get_bloginfo( 'admin_email' ) //亮点是默认值里面可以用函数调用 ), array( 'type' => 'panelend'//标签段的结束 ), array( 'title' => '选项二', 'id' => 'panel_seo', 'type' => 'panelstart' ), array( 'name' => '文本框选项', 'desc' => '描述文字', 'id' => 'git_demo1', 'type' => 'textarea', 'std' => '' ), array( 'type' => 'panelend'//标签段的结束 ), array( 'title' => '选项三', 'id' => 'panel_aritical', 'type' => 'panelstart' ), array( 'name' => '文本框选项', 'desc' => '描述文字', 'id' => 'git_demo2', 'type' => 'textarea', 'std' => '' ), array( 'type' => 'panelend' ), array( 'title' => '选项四', 'id' => 'panel_stylish', 'type' => 'panelstart' ), array( 'name' => '文本框选项', 'desc' => '描述文字', 'id' => 'git_demo3', 'type' => 'textarea', 'std' => '' ), array( 'type' => 'panelend' ), array( 'title' => '选项五', 'id' => 'panel_slide', 'type' => 'panelstart' ), array( 'name' => '文本框选项', 'desc' => '描述文字', 'id' => 'git_demo4', 'type' => 'textarea', 'std' => '' ), array( 'type' => 'panelend' ), array( 'title' => '选项六', 'id' => 'panel_cat', 'type' => 'panelstart' ), array( 'name' => '文本框选项', 'desc' => '描述文字', 'id' => 'git_demo5', 'type' => 'textarea', 'std' => '' ), array( 'type' => 'panelend' ), array( 'title' => '选项七', 'id' => 'panel_social', 'type' => 'panelstart' ), array( 'name' => '文本框选项', 'desc' => '描述文字', 'id' => 'git_demo6', 'type' => 'textarea', 'std' => '' ), array( 'type' => 'panelend' ), array( 'title' => '选项八', 'id' => 'panel_footer', 'type' => 'panelstart' ), array( 'name' => '文本框选项', 'desc' => '描述文字', 'id' => 'git_demo7', 'type' => 'textarea', 'std' => '' ), array( 'type' => 'panelend' ), array( 'title' => '选项九', 'id' => 'panel_ads', 'type' => 'panelstart' ), array( 'name' => '文本框选项', 'desc' => '描述文字', 'id' => 'git_demo8', 'type' => 'textarea', 'std' => '' ), array( 'type' => 'panelend' ), array( 'title' => '选项十', 'id' => 'panel_plugin', 'type' => 'panelstart' ), array( 'name' => '文本框选项', 'desc' => '描述文字', 'id' => 'git_demo9', 'type' => 'textarea', 'std' => '' ), array( 'type' => 'panelend' ), array( 'title' => '选项十一', 'id' => 'panel_advence', 'type' => 'panelstart' ), array( 'name' => '文本框选项', 'desc' => '描述文字', 'id' => 'git_demo10', 'type' => 'textarea', 'std' => '' ), array( 'type' => 'panelend' ) ); //主题后台设置已完成,下面可以不用看了 function git_add_theme_options_page() { global $options; if ($_GET['page'] == basename(__FILE__)) { if ('update' == $_REQUEST['action']) { foreach($options as $value) { if (isset($_REQUEST[$value['id']])) { update_option($value['id'], $_REQUEST[$value['id']]); } else { delete_option($value['id']); } } update_option('git_options_setup', true); header('Location: themes.php?page=theme-options.php&update=true'); die; } else if( 'reset' == $_REQUEST['action'] ) { foreach ($options as $value) { delete_option($value['id']); } delete_option('git_options_setup'); header('Location: themes.php?page=theme-options.php&reset=true'); die; } } add_theme_page('主题选项', '主题选项', 'edit_theme_options', basename(__FILE__) , 'git_options_page'); } add_action('admin_menu', 'git_add_theme_options_page'); function git_options_page() { global $options; $optionsSetup = get_option('git_options_setup') != ''; if ($_REQUEST['update']) echo '<div class="updated"><p><strong>设置已保存。</strong></p></div>'; if ($_REQUEST['reset']) echo '<div class="updated"><p><strong>设置已重置。</strong></p></div>'; ?> <div class="wrap"> <h2>主题选项</h2> <input placeholder="筛选主题选项…" type="search" id="theme-options-search" /> <form method="post"> <h2 class="nav-tab-wrapper"> <?php $panelIndex = 0; foreach ($options as $value ) { if ( $value['type'] == 'panelstart' ) echo '<a href="#' . $value['id'] . '" class="nav-tab' . ( $panelIndex == 0 ? ' nav-tab-active' : '' ) . '">' . $value['title'] . '</a>'; $panelIndex++; } echo '<a href="#about_theme" class="nav-tab">关于主题</a>'; ?> </h2> <!-- 开始建立选项类型 --> <?php $panelIndex = 0; foreach ($options as $value) { switch ( $value['type'] ) { case 'panelstart'://最高标签 echo '<div class="panel" id="' . $value['id'] . '" ' . ( $panelIndex == 0 ? ' style="display:block"' : '' ) . '><table class="form-table">'; $panelIndex++; break; case 'panelend': echo '</table></div>'; break; case 'subtitle': echo '<tr><th colspan="2"><h3>' . $value['title'] . '</h3></th></tr>'; break; case 'text': ?> <tr> <th><label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label></th> <td> <label> <input name="<?php echo $value['id']; ?>" class="regular-text" id="<?php echo $value['id']; ?>" type='text' value="<?php if ( $optionsSetup || get_option( $value['id'] ) != '') { echo stripslashes(get_option( $value['id'] )); } else { echo $value['std']; } ?>" /> <span class="description"><?php echo $value['desc']; ?></span> </label> </td> </tr> <?php break; case 'number': ?> <tr> <th><label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label></th> <td> <label> <input name="<?php echo $value['id']; ?>" class="small-text" id="<?php echo $value['id']; ?>" type="number" value="<?php if ( $optionsSetup || get_option( $value['id'] ) != '') { echo get_option( $value['id'] ); } else { echo $value['std']; } ?>" /> <span class="description"><?php echo $value['desc']; ?></span> </label> </td> </tr> <?php break; case 'password': ?> <tr> <th><label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label></th> <td> <label> <input name="<?php echo $value['id']; ?>" class="regular-text" id="<?php echo $value['id']; ?>" type="password" value="<?php if ( $optionsSetup || get_option( $value['id'] ) != '') { echo get_option( $value['id'] ); } else { echo $value['std']; } ?>" /> <span class="description"><?php echo $value['desc']; ?></span> </label> </td> </tr> <?php break; case 'textarea': ?> <tr> <th><?php echo $value['name']; ?></th> <td> <p><label for="<?php echo $value['id']; ?>"><?php echo $value['desc']; ?></label></p> <p><textarea name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" rows="5" cols="50" class="large-text code"><?php if ( $optionsSetup || get_option( $value['id'] ) != '') { echo stripslashes(get_option( $value['id'] )); } else { echo $value['std']; } ?></textarea></p> </td> </tr> <?php break; case 'select': ?> <tr> <th><label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label></th> <td> <label> <select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"> <?php foreach ($value['options'] as $option) : ?> <option value="<?php echo $option; ?>" <?php selected( get_option( $value['id'] ), $option); ?>> <?php echo $option; ?> </option> <?php endforeach; ?> </select> <span class="description"><?php echo $value['desc']; ?></span> </label> </td> </tr> <?php break; case 'radio': ?> <tr> <th><label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label></th> <td> <?php foreach ($value['options'] as $name => $option) : ?> <label> <input type="radio" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="<?php echo $option; ?>" <?php checked( get_option( $value['id'] ), $option); ?>> <?php echo $name; ?> </label> <?php endforeach; ?> <p><span class="description"><?php echo $value['desc']; ?></span></p> </td> </tr> <?php break; case 'checkbox': ?> <tr> <th><?php echo $value['name']; ?></th> <td> <label> <input type='checkbox' name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="1" <?php echo checked(get_option($value['id']), 1); ?> /> <span><?php echo $value['desc']; ?></span> </label> </td> </tr> <?php break; case 'checkboxs': ?> <tr> <th><?php echo $value['name']; ?></th> <td> <?php $checkboxsValue = get_option( $value['id'] ); if ( !is_array($checkboxsValue) ) $checkboxsValue = array(); foreach ( $value['options'] as $id => $title ) : ?> <label> <input type="checkbox" name="<?php echo $value['id']; ?>[]" id="<?php echo $value['id']; ?>[]" value="<?php echo $id; ?>" <?php checked( in_array($id, $checkboxsValue), true); ?>> <?php echo $title; ?> </label> <?php endforeach; ?> <span class="description"><?php echo $value['desc']; ?></span> </td> </tr> <?php break; } } ?> <!-- 结束建立选项类型 --> <div class="panel" id="about_theme"> <h2>其他事项说明</h2> <p>这里可以加入主题的使用文档</p> </div> <p class="submit"> <input name="submit" type="submit" class="button button-primary" value="保存选项"/> <input type="hidden" name="action" value="update" /> </p> </form> <form method="post"> <p> <input name="reset" type="submit" class="button button-secondary" value="重置选项" onclick="return confirm('你确定要重置选项吗?重置之后您的全部设置将被清空,您确定您没有搞错?? ');"/> <input type="hidden" name="action" value="reset" /> </p> </form> </div> <style>.panel{display:none}.panel h3{margin:0;font-size:1.2em}#panel_update ul{list-style-type:disc}.nav-tab-wrapper{clear:both}.nav-tab{position:relative}.nav-tab i:before{position:absolute;top:-10px;right:-8px;display:inline-block;padding:2px;border-radius:50%;background:#e14d43;color:#fff;content:"\f463";vertical-align:text-bottom;font:400 18px/1 dashicons;speak:none}#theme-options-search{display:none;float:right;margin-top:-34px;width:280px;font-weight:300;font-size:16px;line-height:1.5}.updated+#theme-options-search{margin-top:-91px}.wrap.searching .nav-tab-wrapper a,.wrap.searching .panel tr,#attrselector{display:none}.wrap.searching .panel{display:block !important}#attrselector[attrselector*=ok]{display:block}</style> <style id="theme-options-filter"></style> <div id="attrselector" attrselector="ok" ></div> <script> jQuery(function ($) { $(".nav-tab").click(function () { $(this).addClass("nav-tab-active").siblings().removeClass("nav-tab-active"); $(".panel").hide(); $($(this).attr("href")).show(); return false; }); var themeOptionsFilter = $("#theme-options-filter"); themeOptionsFilter.text("ok"); if ($("#attrselector").is(":visible") && themeOptionsFilter.text() != "") { $(".panel tr").each(function (el) { $(this).attr("data-searchtext", $(this).text().replace(/\r|\n/g, '').replace(/ +/g, ' ').toLowerCase()); }); var wrap = $(".wrap"); $("#theme-options-search").show().on("input propertychange", function () { var text = $(this).val().replace(/^ +| +$/, "").toLowerCase(); if (text != "") { wrap.addClass("searching"); themeOptionsFilter.text(".wrap.searching .panel tr[data-searchtext*='" + text + "']{display:block}"); } else { wrap.removeClass("searching"); themeOptionsFilter.text(""); }; }); }; }); </script> <?php } //启用主题后自动跳转至选项页面 global $pagenow; if ( is_admin() && isset( $_GET['activated'] ) && $pagenow == 'themes.php' ) { wp_redirect( admin_url( 'themes.php?page=theme-options.php' ) ); exit; } function git_enqueue_pointer_script_style( $hook_suffix ) { $enqueue_pointer_script_style = false; $dismissed_pointers = explode( ',', get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) ); if( !in_array( 'git_options_pointer', $dismissed_pointers ) ) { $enqueue_pointer_script_style = true; add_action( 'admin_print_footer_scripts', 'git_pointer_print_scripts' ); } if( $enqueue_pointer_script_style ) { wp_enqueue_style( 'wp-pointer' ); wp_enqueue_script( 'wp-pointer' ); } } add_action( 'admin_enqueue_scripts', 'git_enqueue_pointer_script_style' ); function git_pointer_print_scripts() { ?> <script> jQuery(document).ready(function($) { var $menuAppearance = $("#menu-appearance"); $menuAppearance.pointer({ content: '<h3>恭喜,您的主题安装成功!</h3><p>该主题支持选项,请访问主题选项页面进行配置。</p>', position: { edge: "left", align: "center" }, close: function() { $.post(ajaxurl, { pointer: "git_options_pointer", action: "dismiss-wp-pointer" }); } }).pointer("open").pointer("widget").find("a").eq(0).click(function() { var href = $(this).attr("href"); $menuAppearance.pointer("close"); setTimeout(function(){ location.href = href; }, 700); return false; }); $(window).on("resize scroll", function() { $menuAppearance.pointer("reposition"); }); $("#collapse-menu").click(function() { $menuAppearance.pointer("reposition"); }); }); </script> <?php }
使用方式
必须将框架载入主题里面才可以的,在函数文件里面调用下就可以的
require get_template_directory() . '/theme-options.php';
文件下载
为了防止切换主题或者代码高亮有问题,所以顺便打包了一下,给需要的朋友下载,顺便试试下载单页这玩意
点击下载
-- 完 --
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~