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

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

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

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

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

效果截图:

子主题设置菜单

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

/* -- 子主题设置页标签面 -- */
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();
}

效果截图:

子主题设置项

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

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

/* -- 接收并处理上传的图片信息 -- */
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
         // 获取顶部推荐配置项
         $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”两位博主分享的教程编写代码如下,再次感谢两位博主的分享!感谢!

/** 子主题增加设置项 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="{{ link }}" title="{{ title }}">⟪{{ 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">版权信息模板:{{ title }}为文章标题、{{ link }}为文章链接</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 **/

整体效果截图:

子主题设置项

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

您可能喜欢的

作者: 北门清燕

注:原创文章,转载请注明出自 ⟪为子主题增加主题选项功能⟫ ,Thank you!