• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

轻量级的Git主题主题框架推荐分享

WordPress 云落 2年前 (2016-02-26) 618次浏览 已收录 6个评论
文章目录[隐藏]

轻量级主题后台选项框架推荐,使主题开发更方便!!

轻量级的 Git 主题主题框架推荐分享

前言

后台预览

轻量级的 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';

文件下载

点击下载
乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:轻量级的 Git 主题主题框架推荐分享
喜欢 (30)
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 签到成功!签到时间:2018-06-20 15:31:19,每日打卡,生活更精彩哦~
    hiyouli2018-06-20 15:31 回复 Windows 7 | Chrome 67.0.3396.87
  2. 签到成功!签到时间:2018-05-07 11:54:18,每日打卡,生活更精彩哦~
    广州网站建设2018-05-07 11:47 回复 Windows 7 | Chrome 48.0.2564.116
  3. 签到成功!签到时间:2018-03-24 15:03:07,每日打卡,生活更精彩哦~
    xacft2018-03-24 14:57 回复 Windows 7 | Chrome 55.0.2883.87
  4. 看得我流口水 :mrgreen: :mrgreen:
    VlianKevin2018-02-06 02:59 回复 Windows 7 | 搜狗浏览器 2.X
  5. 看了看,还是静静地用我的Options Framework,大佬的代码太神奇了
    狂放2017-11-03 11:12 回复 Windows 10 | Chrome 61.0.3163.100
    • 其实就是从那个最大化精简的,虽然有点问题,代码渣就不用太高端的东西了
      云落2017-11-03 12:34 回复 Windows 10 | Firefox浏览器 58.0