^ Back to top

WordPress主题后台制作教程

我们知道,优秀的WordPress主题肯定都有一个强大的主题后台设置,比如陌小雨正在使用的xiu主题,后台设置就很丰富

20160415123506

设置越详细,主题越容易上手,售后服务压力就更小了。那么今天陌小雨就带大家揭开WordPress主题后台制作的神秘面纱, :oops:

1、制作WordPress主题后台框架

    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') == 'xuanze2') {
           //干嘛干嘛的
        } elseif (get_option('git_hot_b') == 'xuanze3') {
           //干嘛干嘛的
        } elseif (get_option('git_hot_b') == 'xuanze4') {
    		//干嘛干嘛的
        } elseif (get_option('git_hot_b') == 'xuanze5') {
    		 //干嘛干嘛的
        } elseif (get_option('git_hot_b') == 'xuanze6') {
    		//干嘛干嘛的
        } elseif (get_option('git_hot_b') == 'xuanze7') {
          //干嘛干嘛的
        } elseif (get_option('git_hot_b') == 'xuanze8') {
           //干嘛干嘛的
        } 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.phppage=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.phppage=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.phppage=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
    }

将上述文件保存为theme-options.php放到主题根目录,然后在functions.php中引用即可,引用方式

    require get_template_directory() . '/theme-options.php';

最终效果就类似下面这样子的啦:

2016022613103466

主题文件已经打包到群文件共享中,请进入文章尾部的WordPress优秀主题交流群下载。

陌陌评论 24

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 云落
    额,有点眼熟。。。。。。。回复
    • moxiaoyu
      陌小雨
      @云落 是你分享的呀 自然眼熟了,还有你这个pretty插件代码我这边还是没有显示行号呀回复
      • 云落
        @陌小雨 QTags.addButton( 'ipre', '代码高亮', '\n\n', "" );//添加高亮代码回复
123

站内搜索

其他人正在搜