EMLOG学院

模板设置插件设置背景图

摘要: 2014年1月12日奇遇发布了模板...

2014年1月12日奇遇发布了模板设置插件,此插件一发布立即受到了很多开发者的喜爱,因为有了这个插件就可以随意在后台完成很多复杂的模板设置,具体请查看:https://www.lantk.com/?post=92

许久之前小编曾就模板设置插件写了一个模板开启与关闭下雪代码的功能,今天小编再为大家带来一个实用的功能,用模板设置插件轻松完成网站背景图的设置。

首先,在模板根目录建立模板设置插件文件options.php,基本格式如下:


<?php

/*@support tpl_options*/
!defined('EMLOG_ROOT') && exit('access deined!');
$options = array(

//这里是具体设置项



);?>

然后我们在options.php中写下如下代码(对于以下代码如果有不明白的地方请参考模板设置插件开发规范):


<?php

/*@support tpl_options*/
!defined('EMLOG_ROOT') && exit('access deined!');
$options = array(
//设置背景图颜色
	'body_color' => array(
		'type' => 'text',
		'name' => '设置背景颜色',
		'description' => '推荐使用网页颜色,#开头的颜色值',
		'default' => '#555',
	),
//设置背景图定位
	'body_position' => array(
		'type' => 'text',
		'name' => '设置背景图定位',
		'description' => '第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。默认为0% 0%',
		'default' => '0% 0%',
	),	
//设置背景图尺寸
	'body_size' => array(
		'type' => 'text',
		'name' => '设置背景图像的尺寸',
		'description' => '设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。默认值为空,无特殊要求可不填写,PS:该属性不支持IE6,7,8',
		'default' => '',
	),	
//如何重复背景图
	'body_repeat' => array(
		'type' => 'radio',
		'name' => '设置如何重复背景图像',
		'values' => array(
			'repeat' => '背景图像将在垂直方向和水平方向重复<br/>',
			'repeat-x' => '背景图像将在水平方向重复<br/>',
			'repeat-y' => '背景图像将在垂直方向重复<br/>',
			'no-repeat' => '背景图像将仅显示一次<br/>',
		),
		'default' => 'no-repeat',
	),
	
//背景图是否随页面滚动而滚动
	'body_attachment' => array(
		'type' => 'radio',
		'name' => '设置背景图是否随页面滚动',
        'values' => array(
			'scroll' => '背景图随页面滚动而滚动<br/>',
			'fixed' => '背景图不随页面滚动而滚动<br/>',
		),
		'default' => 'scroll',
	),
//设置背景图
	'body_img' => array(
		'type' => 'image',
		'name' => '设置背景图',
		'description' => '选择文件上传你的背景图',
		'default' => ''.TEMPLATE_URL.'images/body.gif',
	),

//是否开启背景图片
	'body_img_yes' => array(
		'type' => 'radio',
		'name' => '是否启用背景图',
		'description' => '是否启用背景图',
		'values' => array(
			'yes' => '开启背景图<br/>',
			'no' => '关闭背景图<br/>',
		),
		'default' => 'yes',
	),




);?>

如上所示,$options数组里,key为设置项的id,而value是一个数组,数组里包含若干个元素。其中type属性和name属性必选,name是设置项名字,而type用来指定设置项的类型,支持的类型如下:

  • radio: 单选按钮
  • checkbox: 复选按钮
  • text: 文本
  • image: 图片
  • page: 页面
  • sort: 分类
  • tag: 标签

然后找到我们的header.php头部文件,找到</head>,并在上面写下如下代码:


<?php
if(_g('body_attachment')=='scroll'){
    $a='scroll';
}else{
    $a='fixed';
}
if(_g('body_repeat')=='repeat'){
    $b='repeat';
}elseif(_g('body_repeat')=='repeat-x'){
    $b='repeat-x';
}elseif(_g('body_repeat')=='repeat-y'){
	$b='repeat-y';
}else{
	$b='no-repeat';

}
if(_g('body_img_yes')=="yes"){
    $c = _g('body_img');
}else{
    $c = '';
}
?>
<style>
body{
          background-color:<?php echo _g('body_color'); ?>;
	  background-position:<?php echo _g('body_position'); ?>;
	  background-size:<?php echo _g('body_size'); ?>;
	  background-repeat:<?php echo $b; ?>;
	  background-attachment:<?php echo $a; ?>;
	  background-image:url("<?php echo $c; ?>");
}
</style>


其中上面的background请参考http://www.w3school.com.cn/cssref/pr_background.asp

如果是开发者,为了完美起见最好判断一下网站是否下载了模板设置插件,如果没有下载则提示用户下载安装,找到medule.php,并写入如下代码:


<?php
if (!function_exists('_g')) {
	emMsg('请先安装 <a href="https://www.lantk.com/?post=92" target="_blank">模板设置插件</a>', BLOG_URL . 'admin/plugins.php');
}
?>


其中函数function_exists用来检测某个函数是否已经被定义,如果激活了模板设置插件那么_g函数必然是会被检测到的,如果没有激活那么_g函数将不会被检测到,从而返回一个False,从而根据返回的结果提示用户安装模板设置插件,最后附上后台设置效果图:

body.png

百度下载:模板设置插件设置背景图例程   大小:4KB

发表评论:

评论(0)