为子主题增加主题选项功能

2017-02-11 08:00:00 #子主题 #主题选项 #子主题设置 # 清学小记

用子主题的好处都知道：可以在使用的主题更新后，对其的更改不会被更新覆盖掉，

但是如果能为子主题增加主题选项，是不是会使子主题的使用效果更好呢，下面介绍步骤（以下仅为部分代码，后面有完整代码）：

1、在子主题的“function.php”中增加以下代码，使外观菜单中增加“子主题选项”菜单，点击可进入对应标签页，各参数作用请看注释：

1
2
3
4
5
6
7
8
9
/* 
在后台外观导航下增加子主题设置标签页：
[1]设置页的title、
[2]显示在外观菜单中的标题、
[3]访问这个页面需要的权限、
[4]别名（出现在地址栏中：?page=XXXXXXXXX）、
[5]执行的函数（设置页面包含的内容）
*/
add_theme_page("子主题设置", "子主题设置", "administrator", "bmqy_subTheme_opts", 'display');

效果截图：

201702121486904799720001.png

2、为“子主题设置”的标签页编写需要进行主题选项的html代码，举例“广告位设置”代码如下：

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
/* -- 子主题设置页标签面 -- */
function display() {
    add_thickbox();
    ?>
    <div class="wrap">
        <h1>子主题设置项</h1>
        <!-- 顶部推荐设置 -->
        <form method="post" action="" name="bmqy_subTheme_topRecommend" id="bmqy_subTheme_topRecommend">
            <?php
            $bstTopRecommendOptions = get_option('bmqy_subTheme_topRecommend');
            ?>
            <h2>广告位设置</h2>
            <table class="form-table">
                <tr>
                    <th scope="row"><label for="topRecommendStatus">顶部广告推荐位</label></th>
                    <td><fieldset><legend class="screen-reader-text"><span>顶部广告推荐位</span></legend><label for="topRecommendStatus"><input name="status" type="checkbox" id="topRecommendStatus" value="1" <?php checked('1', $bstTopRecommendOptions['status']); ?> />&nbsp;启用</label></fieldset></td>
                </tr>
                <tr>
                    <th scope="row"><label for="topRecommendTitle">顶部广告推荐位标题</label></th>
                    <td><input name="title" type="text" id="topRecommendTitle" value="<?php echo $bstTopRecommendOptions['title']; ?>" class="regular-text ltr" /></td>
                </tr>
                <tr>
                    <th scope="row"><label for="topRecommendLink">顶部广告推荐位链接</label></th>
                    <td><input name="link" type="text" id="topRecommendLink" value="<?php echo $bstTopRecommendOptions['link']; ?>" class="regular-text ltr" /></td>
                </tr>
                <tr>
                    <th scope="row"><label for="topRecommendImage">顶部广告推荐位图片</label></th>
                    <td><input name="image" type="text" id="topRecommendImage" aria-describedby="topRecommendImage_description" value="<?php echo $bstTopRecommendOptions['image']; ?>" class="regular-text ltr" />&nbsp;<a class="thickbox" title="插入图片" href="#">插入图片</a><p class="description" id="topRecommendImage_description">请填写图片链接地址，推荐尺寸：1198*80</p></td>
                </tr>
            </table>
            <?php submit_button('保存', 'primary', 'submit_bmqy_subTheme_topRecommend'); ?>
        </form>
    </div>
    <?php
    // 调用处理插入图片的方法
    send_to_editor();
}

效果截图：

201702121486905260183660.png

子主题设置项

3、增加提交数据并保存到数据库的代码：

1
2
3
4
5
6
7
8
9
10
// 如果有提交数据，接收并保存到数据库
if(isset($_POST['submit_bmqy_subTheme_topRecommend'])) {
    // 接收并处理数据：顶部推荐广告位
    $bstTopRecommendOptions['status'] = ($_POST['status']==1) ? (bool)true : (bool)false;
    $bstTopRecommendOptions['title'] = $_POST['title'];
    $bstTopRecommendOptions['link'] = $_POST['link'];
    $bstTopRecommendOptions['image'] = $_POST['image'];
    // 更新数据
    update_option('bmqy_subTheme_topRecommend', $bstTopRecommendOptions);
}

4、增加插入图片功能的处理代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* -- 接收并处理上传的图片信息 -- */
function send_to_editor(){
    ?>
    <script>
        jQuery(document).ready(function() {
            var win = window.dialogArguments || opener || parent || top;
            var sendToEditorTarget;

            jQuery('.thickbox').click(function() {
                sendToEditorTarget = jQuery(this).prev('input[name=image]');
                tb_show('请选择图片', '/wp-admin/media-upload.php?type=image&amp;TB_iframe=true');
                return false;
            });
            win.send_to_editor = function(html) {
                imgurl = jQuery('img',html).attr('src');
                jQuery(sendToEditorTarget).val(imgurl);
                tb_remove();
            }
        });
    </script>
    <?php
}

5、前台调用时的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// 获取顶部推荐配置项
$bstTopRecommendOptions = get_option('bmqy_subTheme_topRecommend');
if ( $bstTopRecommendOptions['status'] == 1) {
?>
	<!-- 顶部推荐内容 begin -->
	<div id="topRecommend" class="top-recommend">
	   <a href="<?php echo $bstTopRecommendOptions['link']; ?>" title="<?php echo $bstTopRecommendOptions['title']; ?>">
	      <img src="<?php echo $bstTopRecommendOptions['image']; ?>" alt="<?php echo $bstTopRecommendOptions['title']; ?>">
	   </a>
	</div>
	<!-- 顶部推荐内容 end -->
<?php } ?>

6、本站点结合”露兜博客 http://www.ludou.org/wordpress-add-theme-options.html“和”阿树工作室http://www.ashuwp.com/courses/optionpage/206.html"两位博主分享的教程编写代码如下，再次感谢两位博主的分享！感谢！

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
/** 子主题增加设置项 begin **/
class BmqySubThemeOptions {
    /* -- 初始化 -- */
    function init() {
        // 如果有提交数据，接收并保存到数据库
        if(isset($_POST['submit_bmqy_subTheme_topRecommend'])) {
            // 接收并处理数据：顶部推荐广告位
            $bstTopRecommendOptions['status'] = ($_POST['status']==1) ? (bool)true : (bool)false;
            $bstTopRecommendOptions['title'] = $_POST['title'];
            $bstTopRecommendOptions['link'] = $_POST['link'];
            $bstTopRecommendOptions['image'] = $_POST['image'];
            // 更新数据
            update_option('bmqy_subTheme_topRecommend', $bstTopRecommendOptions);
        }
        if(isset($_POST['submit_bmqy_subTheme_copyright'])) {
            // 接收并处理数据：版权信息
            $bstCopyrightOptions['status'] = ($_POST['status']==1) ? (bool)true : (bool)false;
            $bstCopyrightOptions['content_tpl'] = esc_html($_POST['content_tpl']); // 转义提交的html
            $bstCopyrightOptions['inCateList'] = $_POST['inCateList'];
            // 更新数据
            update_option('bmqy_subTheme_copyright', $bstCopyrightOptions);
        }
        if(isset($_POST['submit_bmqy_subTheme_taobaoShops'])) {
            // 接收并处理数据：淘宝店铺
            $bstTaobaoShopsOptions['status'] = ($_POST['status']==1) ? (bool)true : (bool)false;
            $bstTaobaoShopsOptions['title'] = $_POST['title'];
            $bstTaobaoShopsOptions['image'] = $_POST['image'];
            $bstTaobaoShopsOptions['desc'] = esc_html($_POST['desc']); // 转义提交的html
            $bstTaobaoShopsOptions['inCateList'] = $_POST['inCateList'];
            // 更新数据
            update_option('bmqy_subTheme_taobaoShops', $bstTaobaoShopsOptions);
        }

        // 在后台外观导航下增加子主题设置标签页：[1]设置页的title、[2]显示在外观菜单中的标题、[3]访问这个页面需要的权限、[4]别名（出现在地址栏中：?page=XXXXXXXXX）、[5]执行的函数（设置页面包含的内容）
        add_theme_page("子主题设置", "子主题设置", "administrator", "bmqy_subTheme_opts", array('BmqySubThemeOptions', 'display'));
    }
    /* -- 接收并处理上传的图片信息 -- */
    function send_to_editor(){
        ?>
        <script>
            jQuery(document).ready(function() {
                var win = window.dialogArguments || opener || parent || top;
                var sendToEditorTarget;

                jQuery('.thickbox').click(function() {
                    sendToEditorTarget = jQuery(this).prev('input[name=image]');
                    tb_show('请选择图片', '/wp-admin/media-upload.php?type=image&amp;TB_iframe=true');
                    return false;
                });
                win.send_to_editor = function(html) {
                    imgurl = jQuery('img',html).attr('src');
                    jQuery(sendToEditorTarget).val(imgurl);
                    tb_remove();
                }
            });
        </script>
        <?php
    }
    /* -- 子主题设置页标签面 -- */
    function display() {
        add_thickbox();
        ?>
        <div class="wrap">
            <h1>子主题设置项</h1>
            <div class="catlist">
                <h2>网站分类ID</h2>
                <p><?php echo bmqy_show_category(); ?></p>
            </div>

            <hr>
            <!-- 顶部推荐设置 -->
            <form method="post" action="" name="bmqy_subTheme_topRecommend" id="bmqy_subTheme_topRecommend">
                <?php
                $bstTopRecommendOptions = get_option('bmqy_subTheme_topRecommend');
                ?>
                <h2>广告位设置</h2>
                <table class="form-table">
                    <tr>
                        <th scope="row"><label for="topRecommendStatus">顶部广告推荐位</label></th>
                        <td><fieldset><legend class="screen-reader-text"><span>顶部广告推荐位</span></legend><label for="topRecommendStatus"><input name="status" type="checkbox" id="topRecommendStatus" value="1" <?php checked('1', $bstTopRecommendOptions['status']); ?> />&nbsp;启用</label></fieldset></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="topRecommendTitle">顶部广告推荐位标题</label></th>
                        <td><input name="title" type="text" id="topRecommendTitle" value="<?php echo $bstTopRecommendOptions['title']; ?>" class="regular-text ltr" /></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="topRecommendLink">顶部广告推荐位链接</label></th>
                        <td><input name="link" type="text" id="topRecommendLink" value="<?php echo $bstTopRecommendOptions['link']; ?>" class="regular-text ltr" /></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="topRecommendImage">顶部广告推荐位图片</label></th>
                        <td><input name="image" type="text" id="topRecommendImage" aria-describedby="topRecommendImage_description" value="<?php echo $bstTopRecommendOptions['image']; ?>" class="regular-text ltr" />&nbsp;<a class="thickbox" title="插入图片" href="#">插入图片</a><p class="description" id="topRecommendImage_description">请填写图片链接地址，推荐尺寸：1198*80</p></td>
                    </tr>
                </table>
                <?php submit_button('保存', 'primary', 'submit_bmqy_subTheme_topRecommend'); ?>
            </form>

            <hr>
            <!-- 文章尾部版权信息设置 -->
            <form method="post" action="" name="bmqy_subTheme_copyright" id="bmqy_subTheme_copyright">
                <?php
                $bstCopyrightOptions = get_option('bmqy_subTheme_copyright');
                // 默认设置
                if(!is_array($bstCopyrightOptions)){
                    $bstCopyrightOptions['status'] = true;
                    $bstCopyrightOptions['content_tpl'] = esc_html('注：原创文章，转载请注明出自 <a href="" title="">⟪⟫</a> ，Thank you！');
                    $bstCopyrightOptions['inCateList'] = '12,15,22,45,52,154';
                }
                ?>
                <h2>文章尾部版权信息设置</h2>
                <table class="form-table">
                    <tr>
                        <th scope="row"><label for="copyrightStatus">版全信息</label></th>
                        <td><fieldset><legend class="screen-reader-text"><span>版全信息</span></legend><label for="copyrightStatus"><input name="status" type="checkbox" id="copyrightStatus" value="1" <?php checked('1', $bstCopyrightOptions['status']); ?> />&nbsp;启用</label></fieldset></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="copyrightContentTpl">版全信息模板</label></th>
                        <td><input name="content_tpl" type="text" id="copyrightContentTpl" aria-describedby="copyrightContentTpl_description" value="<?php echo stripslashes($bstCopyrightOptions['content_tpl']); ?>" class="regular-text ltr" /><p class="description" id="copyrightContentTpl_description">版权信息模板：为文章标题、为文章链接</p></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="copyrightInCateList">启用的文章分类ID</label></th>
                        <td><input name="inCateList" type="text" id="copyrightInCateList" aria-describedby="copyrightInCateList_description" value="<?php echo $bstCopyrightOptions['inCateList']; ?>" class="regular-text ltr" /><p class="description" id="copyrightInCateList_description">设置哪些分类的文章下显示，多个ID以英文逗号分隔</p></td>
                    </tr>
                </table>
                <?php submit_button('保存', 'primary', 'submit_bmqy_subTheme_copyright'); ?>
            </form>

            <hr>
            <!-- 文章尾部淘宝店铺设置 -->
            <form method="post" action="" name="bmqy_subTheme_taobaoShops" id="bmqy_subTheme_taobaoShops">
                <?php
                $bstTaobaoShopsOptions = get_option('bmqy_subTheme_taobaoShops');
                // 默认设置
                if(!is_array($bstTaobaoShopsOptions)){
                    $bstTaobaoShopsOptions['status'] = true;
                    $bstTaobaoShopsOptions['title'] = '北门清燕淘宝小店';
                    $bstTaobaoShopsOptions['image'] = 'http://gqrcode.alicdn.com/img?type=cs&shop_id=117869181&seller_id=279690537&w=140&h=140&el=q&v=1';
                    $bstTaobaoShopsOptions['desc'] = '<h5>北门清燕仿站服务</h5>
                  <p>扫一扫，去淘宝小店下单吧</p><p>我的淘宝小店，优惠活动进行中，欢迎来店洽谈咨询哦！</p>
                  <p><a rel="nofollow" href="http://shop117869181.taobao.com/" title="北门清燕淘宝小店">立即进店</a>，或者在这里留言给我。</p>';
                    $bstTaobaoShopsOptions['inCateList'] = '248';
                }
                ?>
                <h2>文章尾部淘宝店铺设置</h2>
                <table class="form-table">
                    <tr>
                        <th scope="row"><label for="taobaoShopsStatus">淘宝店铺</label></th>
                        <td><fieldset><legend class="screen-reader-text"><span>淘宝店铺</span></legend><label for="taobaoShopsStatus"><input name="status" type="checkbox" id="taobaoShopsStatus" value="1" <?php checked('1', $bstTaobaoShopsOptions['status']); ?> />&nbsp;启用</label></fieldset></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="taobaoShopsTitle">淘宝店铺标题</label></th>
                        <td><input name="title" type="text" id="taobaoShopsTitle" value="<?php echo $bstTaobaoShopsOptions['title']; ?>" class="regular-text ltr" /></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="taobaoShopsImage">淘宝店铺图片</label></th>
                        <td><input name="image" type="text" id="taobaoShopsImage" aria-describedby="image_description" value="<?php echo $bstTaobaoShopsOptions['image']; ?>" class="regular-text ltr" />&nbsp;<a class="thickbox" title="插入图片" href="/wp-admin/media-upload.php?type=image&amp;TB_iframe=true">插入图片</a><p class="description" id="taobaoShopsImage_description">请填写淘宝店铺二维码图片地址，推荐尺寸：140*140</p></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="taobaoShopsDesc">淘宝店铺描述</label></th>
                        <td><textarea name="desc" id="taobaoShopsDesc" aria-describedby="taobaoShopsDesc_description" rows="10" cols="50" class="regular-text code"><?php echo stripslashes($bstTaobaoShopsOptions['desc']); ?></textarea><p class="description" id="taobaoShopsDesc_description">可填加html标签，最终以显示 3 行为宜</p></td>
                    </tr>
                    <tr>
                        <th scope="row"><label for="taobaoShopsInCateList">启用的文章分类ID</label></th>
                        <td><input name="inCateList" type="text" id="taobaoShopsInCateList" aria-describedby="taobaoShopsInCateList_description" value="<?php echo $bstTaobaoShopsOptions['inCateList']; ?>" class="regular-text ltr" /><p class="description" id="taobaoShopsInCateList_description">设置哪些分类的文章下显示，多个ID以英文逗号分隔</p></td>
                    </tr>
                </table>
                <?php submit_button('保存', 'primary', 'submit_bmqy_subTheme_taobaoShops'); ?>
            </form>
        </div>
        <?php
        // 调用处理插入图片的方法
        BmqySubThemeOptions::send_to_editor();
    }
}
// 注册并初始化方法
add_action('admin_menu', array('BmqySubThemeOptions', 'init'));
/** 子主题增加设置项 end **/

整体效果截图：

201702121486906693366680.png

子主题设置项

7、参考以上设置，相信您能让您的子主题功能更加强大o( _≧▽≦)ツ，最后再次感谢所有分享代码的朋友们，感谢o(_≧▽≦)ツ

上一页
2017-02-11 08:00:00 #子主题 #主题选项 #子主题设置 # 清学小记
下一页