用子主题的好处都知道:可以在使用的主题更新后,对其的更改不会被更新覆盖掉,
但是如果能为子主题增加主题选项,是不是会使子主题的使用效果更好呢,下面介绍步骤(以下仅为部分代码,后面有完整代码):
1、在子主题的“function.php”中增加以下代码,使外观菜单中增加“子主题选项”菜单,点击可进入对应标签页,各参数作用请看注释:
php
/*
在后台外观导航下增加子主题设置标签页:
[1]设置页的title、
[2]显示在外观菜单中的标题、
[3]访问这个页面需要的权限、
[4]别名(出现在地址栏中:?page=XXXXXXXXX)、
[5]执行的函数(设置页面包含的内容)
*/
add_theme_page("子主题设置", "子主题设置", "administrator", "bmqy_subTheme_opts", 'display');
效果截图:
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']); ?> /> 启用</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" /> <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、增加提交数据并保存到数据库的代码:
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&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 } ?>
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&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']); ?> /> 启用</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" /> <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']); ?> /> 启用</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']); ?> /> 启用</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" /> <a class="thickbox" title="插入图片" href="/wp-admin/media-upload.php?type=image&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(≧▽≦)ツ