WordPress 三栏主题就剩头部背景和logo的处理就完成了,今天给WordPress 主题后台主题设置选项也添加了,虽然比较简单,但第一次接触不是很熟练,下面分享下代码

WordPress 后台主题设置选项添加截图

打开functions.php文件在最上面添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<?php
add_action('admin_menu', 'mytheme_page');
 
function mytheme_page (){
    if ( count($_POST) > 0 && isset($_POST['mytheme_settings']) ){
        $options = array ('keywords','description','analytics');
        foreach ( $options as $opt ){
            delete_option ( 'mytheme_'.$opt, $_POST[$opt] );
            add_option ( 'mytheme_'.$opt, $_POST[$opt] );  
        }
    }
    add_theme_page(__('ARCHY主题设置'), __('ARCHY主题设置'), 'edit_themes', basename(__FILE__), 'mytheme_settings');
}
 
function mytheme_settings(){

?>
 
<style>
 
    .wrap,textarea,em{font-family:'Century Gothic','Microsoft YaHei',Verdana;}
 
    fieldset{width:100%;border:1px solid #aaa;padding-bottom:20px;margin-top:20px;-webkit-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;-moz-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;box-shadow:rgba(0,0,0,.2) 0px 0px 5px;}
 
    legend{margin-left:5px;padding:0 5px;color:#2481C6;background:#F9F9F9;cursor:pointer;}
 
    textarea{width:100%;font-size:11px;border:1px solid #aaa;background:none;-webkit-box-shadow:rgba(0,0,0,.2) 1px 1px 2px inset;-moz-box-shadow:rgba(0,0,0,.2) 1px 1px 2px inset;box-shadow:rgba(0,0,0,.2) 1px 1px 2px inset;-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;}
 
    textarea:focus{-webkit-box-shadow:rgba(0,0,0,.2) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,.2) 0px 0px 8px;box-shadow:rgba(0,0,0,.2) 0px 0px 8px;outline:none;}
 
</style>
 
<div class="wrap">
 
<h2>ARCHY主题设置</h2>
 
<form method="post" action="">
    <fieldset>
    <legend><strong>站点信息设置</strong></legend>
        <table class="form-table">
            <tr><td>
            <em>网站关键词(Meta Keywords),中间用半角逗号隔开。如: ARCHY,Discuz模板</em>
                <textarea name="keywords" id="keywords" rows="1" cols="70"><?php echo get_option('mytheme_keywords'); ?></textarea><br />
            </td></tr>
            <tr><td>
            <em>网站描述(Meta Description),针对搜索引擎设置的网页描述。如: 我是ARCHY,分享Discuz模板,联系QQ261833848</em>
                <textarea name="description" id="description" rows="3" cols="70"><?php echo get_option('mytheme_description'); ?></textarea>
            </td></tr>
 
        </table>
 
    </fieldset>
 
    <fieldset>
 
    <legend><strong>统计代码添加</strong></legend>
        <table class="form-table">
            <tr><td>
                <textarea name="analytics" id="analytics" rows="5" cols="70"><?php echo stripslashes(get_option('mytheme_analytics')); ?></textarea>
            </td></tr>
        </table>
    </fieldset>
 
    <p class="submit">
        <input type="submit" name="Submit" class="button-primary" value="保存设置" />
        <input type="hidden" name="mytheme_settings" value="save" style="display:none;" />
    </p>
 
</form>
 
</div>
 
<?php
}

需要关注的是第4行,如果你需要添加更多的选项设置,那就得添加新的属性值。页面的HTML部分是以 fieldset 为代码段,把里面的 textarea 的 name 属性为第4行内对应的属性值。

具体WordPress主题后台选项使用方法如下:

1
2
<meta name="keywords" content="<?php echo get_option('mytheme_keywords'); ?>" />
<meta name="description" content="<?php echo get_option('mytheme_description'); ?>" />

统计代码的调取代码,先判断mytheme_analytics是否存在:

1
<?php if (get_option('mytheme_analytics')!="") { echo stripslashes(get_option('mytheme_analytics')); }?>

现在试试WordPress 主题后台主题设置选项设置,是不是可以很方便的使用了。