轻量级主题后台选项框架推荐，使主题开发更方便！！
前言
制作主题的时候制作后台是主题的特别重要的一个方面，与其自己写后台不如直接拿一个框架使用来得实在，虽然目前主题框架，但是都是一个字：太肥！比如国外一个流行的框架 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 小技巧，你可以随时退订，欢迎订阅哦~
