• 俊硕博客公告栏:深圳俊硕专注于SEO优化培训,免费给深圳SEO爱好者提供SEO技术培训教程,兼深圳地区公司网站排名优化等服务!

WordPress主题后台制作教程

哈喽,大家好我是深圳SEO俊硕今天来介绍下WordPress主题后台制作教程。设置越详细,主题越容易上手,售后服务压力就更小了。那么今天陌小雨就带大家揭开的WordPress主题后台制作的神秘面纱。

WordPress主题后台制作教程

1,制作WordPress的主题后台框架

    阵列(
            '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 {
            //干嘛干嘛的
        }
    ?>

另外,一个最简单的文字框的代码是这样的

    阵列(
            'name'=>'文字选项',
            'desc'=>'这里是输入框的描述文字',
            'id'=>'hot_list_title',
            'type'=>'text',
            'std'=>'主题预留文字'
        )

调用方式如下:

<?php echo get_option('hot_list_title'); ?>

完整代码:

    <?PHP
    $ options = array(
        //开始第一个选项标签数组
        阵列(
            'title'=>'选项一',//标签显示的文字
            'id'=>'panel_general',//标签的ID
            'type'=>'panelstart'//顶部标签的类型
        )
    	阵列(
            'name'=>'数字选择框',
            'desc'=>'这个是数字输入框',
            'id'=>'git_linkpage_cat',
            'type'=>'number',
            'std'=>'2'//最后一个数组不需要逗号
        )
    	阵列(
            'name'=>'选择选项',
            'desc'=>'勾选选项的描述文字',
            'id'=>'git_thumbnail_b',
            'type'=>'checkbox'//复选框
        )
    	阵列(
            'name'=>'单选项设置',
            'desc'=>'选择一个参数作为排序的根据,可以给与几个选择并且选择一个,可以预留选项'
            'id'=>'git_hot_b',
            'type'=>'radio',
            'options'=> array(
                '选择一'=>'xuanze1',
                '选择二'=>'xuanze2',
    			'选择三'=>'xuanze3',
    			'选择四'=>'xuanze4',
    			'选择五'=>'xuanze5',
    			'选择六'=>'xuanze6',
    			'选择七'=>'xuanze7',
                '选择八'=>'xuanze8'
            )
            'std'=>'xuanze1'
        )
    	阵列(
            'name'=>'复选项设置',
            'desc'=>''
            'id'=>'git_hot_b4',
            'type'=>'checkboxs',
            'options'=> array(
                'xuanze14'=>'选择一'
    			'xuanze24'=>'选择二',
    			'xuanze34'=>'选择三',
    			'xuanze44'=>'选择四',
    			'xuanze54'=>'选择五'
            )
            'std'=>'xuanze14'
        )
    	阵列(
            'name'=>'单选项设置',
            'desc'=>'选择一个参数作为排序的根据,可以给与几个选择并且选择一个,可以预留选项'
            'id'=>'git_hot_b5',
            'type'=>'select',
            'options'=> array(
                'xuanze12'=>'选择一',
    			'xuanze22'=>'选择二',
    			'xuanze32'=>'选择三',
    			'xuanze42'=>'选择四',
    			'xuanze52'=>'选择五'
            )
            'std'=>'xuanze52'
        )
    	阵列(
            'name'=>'密码选项输入框',
            'desc'=>'这是一个密码输入框,所以不可见'
            'id'=>'git_wbpasd_b',
            'type'=>'password',
            'std'=>''
        )
        阵列(
            'title'=>'这是一个分段,也是一个二级标题',//二级标题,只显示文字,没有选项
            'type'=>'subtitle'//二级标题的类型
        )
        阵列(
            'name'=>'文字选项',
            'desc'=>'这里是输入框的描述文字',
            'id'=>'hot_list_title',
            'type'=>'text',
            'std'=>'主题预留文字'
        )
        阵列(
            'name'=>'文本框选项',
            'desc'=>'这里是输入框的描述文字',//这里可以随便写的
            'id'=>''git_tui',// ID是保存数据的值,保持唯一性
            'type'=>'textarea',//设置选项的类型
            'std'=>'这里是选项的默认数据'//选项的默认数据
        )
        阵列(
            'name'=>'文字选项设置',
            'desc'=>'选项的描述文字',
            'id'=>'git_tougao_mailto',
            'type'=>'text',
            'std'=> get_bloginfo('admin_email')//亮点是默认值里面可以用函数调用
        )
        阵列(
            'type'=>'panelend'//标签段的结束
        )
        阵列(
            'title'=>'选项二',
            'id'=>'panel_seo',
            'type'=>'panelstart'
        )
        阵列(
            'name'=>'文本框选项',
            'desc'=>'描述文字',
            'id'=>'git_demo1',
            'type'=>'textarea',
            'std'=>''
        )
        阵列(
            'type'=>'panelend'//标签段的结束
        )
        阵列(
            'title'=>'选项三',
            'id'=>'panel_aritical',
            'type'=>'panelstart'
        )
        阵列(
            'name'=>'文本框选项',
            'desc'=>'描述文字',
            'id'=>'git_demo2',
            'type'=>'textarea',
            'std'=>''
        )
        阵列(
            'type'=>'panelend'
        )
        阵列(
            'title'=>'选项四',
            'id'=>'panel_stylish',
            'type'=>'panelstart'
        )
    	阵列(
            'name'=>'文本框选项',
            'desc'=>'描述文字',
            'id'=>'git_demo3',
            'type'=>'textarea',
            'std'=>''
        )
        阵列(
            'type'=>'panelend'
        )
        阵列(
            'title'=>'选项五',
            'id'=>'panel_slide',
            'type'=>'panelstart'
        )
        阵列(
            'name'=>'文本框选项',
            'desc'=>'描述文字',
            'id'=>'git_demo4',
            'type'=>'textarea',
            'std'=>''
        )
        阵列(
            'type'=>'panelend'
        )
        阵列(
            'title'=>'选项六',
            'id'=>'panel_cat',
            'type'=>'panelstart'
        )
        阵列(
            'name'=>'文本框选项',
            'desc'=>'描述文字',
            'id'=>'git_demo5',
            'type'=>'textarea',
            'std'=>''
        )
        阵列(
            'type'=>'panelend'
        )
        阵列(
            'title'=>'选项七',
            'id'=>'panel_social',
            'type'=>'panelstart'
        )
        阵列(
            'name'=>'文本框选项',
            'desc'=>'描述文字',
            'id'=>'git_demo6',
            'type'=>'textarea',
            'std'=>''
        )
        阵列(
            'type'=>'panelend'
        )
        阵列(
            'title'=>'选项八',
            'id'=>'panel_footer',
            'type'=>'panelstart'
        )
        阵列(
            'name'=>'文本框选项',
            'desc'=>'描述文字',
            'id'=>'git_demo7',
            'type'=>'textarea',
            'std'=>''
        )
        阵列(
            'type'=>'panelend'
        )
        阵列(
            'title'=>'选项九',
            'id'=>'panel_ads',
            'type'=>'panelstart'
        )
        阵列(
            'name'=>'文本框选项',
            'desc'=>'描述文字',
            'id'=>'git_demo8',
            'type'=>'textarea',
            'std'=>''
        )
        阵列(
            'type'=>'panelend'
        )
        阵列(
            'title'=>'选项十',
            'id'=>'panel_plugin',
            'type'=>'panelstart'
        )
        阵列(
            'name'=>'文本框选项',
            'desc'=>'描述文字',
            'id'=>'git_demo9',
            'type'=>'textarea',
            'std'=>''
        )
        阵列(
            'type'=>'panelend'
        )
        阵列(
            'title'=>'选项十一',
            'id'=>'panel_advence',
            'type'=>'panelstart'
        )
        阵列(
            'name'=>'文本框选项',
            'desc'=>'描述文字',
            'id'=>'git_demo10',
            'type'=>'textarea',
            'std'=>''
        )
        阵列(
            'type'=>'panelend'
        )
    );
    //主题后台设置已完成,下面可以不用看了
    function git_add_theme_options_page(){
        全局$选项;
        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($值[ 'ID']);
                    }
                }
                update_option('git_options_setup',true);
                标题('Location:themes.php?page = theme-options.php&update = true');
                死;
            } else if('reset'== $ _REQUEST ['action']){
                foreach($ options as $ value){
                    delete_option($值[ 'ID']);
                }
                delete_option( 'git_options_setup');
                header('Location:themes.php?page = theme-options.php&reset = true');
                死;
            }
        }
        add_theme_page('主题选项','主题选项','edit_theme_options',basename(__ FILE__),'git_options_page');
    }
    add_action('admin_menu','git_add_theme_options_page');
     
    function git_options_page(){
        全局$选项;
        $ 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 ++;
    }
    回覆'<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 ++;
            打破;
        案件“组合”:
            echo'</ table> </ div>';
            打破;
        case'subtitle':
            echo'<tr> <th colspan =“2”> <h3>'。$ value ['title']。'</ H3> </次> </ TR>';
            打破;
        case'text':
    ?>
    <TR>
        <th> <label for =“<?php echo $ value ['id'];?>”> <?php echo $ value ['name']; ?> </标签> </次>
        <TD>
            <标签>
            “<= name =”<?php echo $ value ['id'];?>“class =”regular-text“id =”<?php echo $ value ['id'];?> 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']; ?> </跨度>
            </标签>
        </ TD>
    </ TR>
    <?PHP
        打破;
        案件编号':
    ?>
    <TR>
        <th> <label for =“<?php echo $ value ['id'];?>”> <?php echo $ value ['name']; ?> </标签> </次>
        <TD>
            <标签>
            “?”?“”?“”=“?”“=”“ value =“<?php if($ optionsSetup || get_option($ value ['id'])!=''){echo get_option($ value ['id']);} else {echo $ value ['std' ];}?>“/>
            <span class =“description”> <?php echo $ value ['desc']; ?> </跨度>
            </标签>
        </ TD>
    </ TR>
    <?PHP
        打破;
        案例'密码':
    ?>
    <TR>
        <th> <label for =“<?php echo $ value ['id'];?>”> <?php echo $ value ['name']; ?> </标签> </次>
        <TD>
            <标签>
            “<= 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']; ?> </跨度>
            </标签>
        </ TD>
    </ TR>
    <?PHP
        打破;
        case'textarea':
    ?>
    <TR>
        <th> <?php echo $ value ['name']; ?> </次>
        <TD>
            <p> <label for =“<?php echo $ value ['id'];?>”> <?php echo $ value ['desc']; ?> </标签> </ 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
        打破;
        case'select':
    ?>
    <TR>
        <th> <label for =“<?php echo $ value ['id'];?>”> <?php echo $ value ['name']; ?> </标签> </次>
        <TD>
            <标签>
                <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; ?>
                    </选项>
                    <?php endforeach; ?>
                </选择>
                <span class =“description”> <?php echo $ value ['desc']; ?> </跨度>
            </标签>
        </ TD>
    </ TR>
     
    <?PHP
        打破;
        案件“无线电”:
    ?>
    <TR>
        <th> <label for =“<?php echo $ value ['id'];?>”> <?php echo $ value ['name']; ?> </标签> </次>
        <TD>
            <?php foreach($ value ['options'] as $ name => $ option):?>
            <标签>
                <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; ?>
            </标签>
            <?php endforeach; ?>
            <p> <span class =“description”> <?php echo $ value ['desc']; ?> </跨度> </ p>
        </ TD>
    </ TR>
     
    <?PHP
        打破;
        case'checkbox':
    ?>
    <TR>
        <th> <?php echo $ value ['name']; ?> </次>
        <TD>
            <标签>
                <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']; ?> </跨度>
            </标签>
        </ TD>
    </ TR>
     
    <?PHP
        打破;
        case'checkboxs':
    ?>
    <TR>
        <th> <?php echo $ value ['name']; ?> </次>
        <TD>
            <?php $ checkboxsValue = get_option($ value ['id']);
            if(!is_array($ checkboxsValue))$ checkboxsValue = array();
            foreach($ value ['options'] as $ id => $ title):?>
            <标签>
                <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; ?>
            </标签>
            <?php endforeach; ?>
            <span class =“description”> <?php echo $ value ['desc']; ?> </跨度>
        </ TD>
    </ TR>
    <?PHP
        打破;
    }
    }
    ?>
    <! - 结束建立选项类型 - >
    <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;顶部:-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(){
            $(本).addClass( “NAV-制表活性”)的兄弟姐妹()removeClass( “NAV-制表活性”)。。
            $( “面板”。)隐藏()。
            $($(本).attr( “HREF”))显示()。
            返回假;
        });
     
        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( “搜索”);
                    themeOptionsFilter.text(“。wrap.searching .panel tr [data-searchtext * ='”+ text +“'] {display:block}”);
                } else {
                    wrap.removeClass( “搜索”);
                    themeOptionsFilter.text( “”);
                };
            });
        };
    });
    </ SCRIPT>
    <?PHP
    }
    //启用主题后自动跳转至选项页面
    全球$ pagenow;
        if(is_admin()&& isset($ _GET ['activated'])&& $ pagenow =='themes.php')
        {
            wp_redirect(admin_url('themes.php?page = theme-options.php'));
        出口;
    }
    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({
                内容:'<h3>恭喜,你的主题安装成功!</ h3> <p>该主题支持选项,请访问主题选项页面进行配置。</ p>
                职位:{
                    边:“左”,
                    对齐:“中心”
                },
                close:function(){
                    $ .post(ajaxurl,{
                        指针:“git_options_pointer”,
                        动作:“dismiss-wp-pointer”
                    });
                }
            })。pointer(“open”)。pointer(“widget”)。find(“a”)。eq(0).click(function()
                var href = $(this).attr(“href”);
                $ menuAppearance.pointer( “亲密”);
                的setTimeout(函数(){
                    location.href = href;
                },700);
                返回假;
            });
     
            $(window).on(“resize scroll”,function(){
                $ menuAppearance.pointer( “复位”);
            });
            $(“#collapse-menu”)。click(function(){
                $ menuAppearance.pointer( “复位”);
            });
        });
        </ SCRIPT>
     
    <?PHP
    }

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

    需要get_template_directory()。'/theme-options.php';

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

WordPress主题后台制作教程


深圳SEO俊硕博客申明版权隶属:深圳SEO(http://www.junsuk.com/)

转载请注明:深圳SEO俊硕博客 » WordPress主题后台制作教程

喜欢 (1)
支付宝[]
分享 (0)
俊硕博主
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到