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

17 年 2 月 12 日 星期日 (已编辑)
1947 字
10 分钟

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

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

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

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

效果截图：

201702121486904799720001.png

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

php
/* -- 子主题设置页标签面 -- */
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、增加提交数据并保存到数据库的代码：

php
// 如果有提交数据，接收并保存到数据库
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、增加插入图片功能的处理代码：

php
/* -- 接收并处理上传的图片信息 -- */
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、前台调用时的代码如下：

php
<?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"两位博主分享的教程编写代码如下，再次感谢两位博主的分享！感谢！

php
/** 子主题增加设置项 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(≧▽≦)ツ

欢迎关注我的其它发布渠道
公众号小程序

文章标题：为子主题增加主题选项功能

文章作者：bmqy

文章链接：https://bmqy.net/1465.html[复制]

最后修改时间：

商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，您可以自由地在任何媒体以任何形式复制和分发作品，也可以修改和创作，但是分发衍生作品时必须采用相同的许可协议。
本文采用CC BY-NC-SA 4.0进行许可。