你是否想让每篇博客文章的背景看起来都不一样呢?
这么设计网站真的很酷,因为它允许作者通过上传图片来自定义文章背景,而且甚至图片的尺寸也 没有特别的规定。
上传并不困难,只要在meta盒里执行一个上传软件就可以了,主要还是在选择图片上,让我们来看看究竟如何实现的呢?
考虑到后面需要用上传软件将图片的URL地址保存到一个自定义字段里,所以我们先将自定义字段建好,这样一来你只需要将URL收到自定义字段里并将 其显示为背景即可,代码非常简单:
<?php
$bg = get_post_custom_values(\"background\");
if ( is_array($bg) ) { ?>
<style type=\"text/CSS\" media=\"screen\">
body{ background: url(<?php echo $bg ?>) fixed no-repeat; }
</style>
<?php } ?>
不过你还得修改图片尺寸并将URL拷贝到自定义字段里。
自定义 meta上传软件
我们需要一个上传软件,究竟该如何实现呢?通过对WooThemes的研究,我发现他们的主题里有一个admin-custom.php文件(在 /functions目录下),这是他们用来加上传软件以及其他自定义meta盒的地方。
下载完之后,复制所有代码并将其粘贴到你的functions.php文件里(注意要粘贴在结束的?>标签之后)。
接着,需要启动meta盒,可以用下面的代码来实现:
$woo_metaboxes = array(
\"image\" => array (
\"name\" => \"bg\",
\"label\" => \"Background\",
\"type\" => \"upload\",
\"desc\" => \"Automatically resized/enlarged but at least 1000px x 800px for it to be big enough.\"
),
);
update_option(\'woo_custom_template\',$woo_metaboxes);
这段代码必需添 加在其他代码之后结束的?>标签之前。保存并上传文件,这样就你就有了上传软件,它会将图片保存到自定义字段 ‘bg’里。
调整图像大小
最后需要使用timthumb来调整图像的宽度为1920像素,首先下载timthumb, 并将它上传到你的主题文件里,头部的代码要遵守timbthumb的句法:
body{
background: url(<?php bloginfo(\'template_url\'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo $bg; ?>) fixed no-repeat;
}
你会发现使用上面的代码是行不通的,因为timthumb不喜欢自定义字段里的图片URL地址http://… 。
最后别人告诉我需要将URL地址编译才行,于是把上面的代码替换成:
body{
background: url(<?php bloginfo(\'template_url\'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo urlencode($bg); ?>) fixed no-repeat;
}
完成!
1. 资源都是经过站长或作者收集测试修改后发布分享。如若转载请在文内以超链形式注明狐狸库文章出处,谢谢合作!
2. 本站除原创内容,其余所有内容均收集自互联网,仅限用于学习和研究目的,本站不对其内容的合法性承担任何责任。如有版权内容,请通知我们或作者删除,其版权均归原作者所有,本站虽力求保存原有版权信息,但因众多资源经多次转载,已无法确定其真实来源,或已将原有信息丢失,所以敬请原作者谅解!
3. 本站用户所发布的一切资源内容不代表本站立场,并不代表本站赞同其观点和对其真实性负责,若您对本站所载资源作品版权归属存有异议,请留言附说明联系邮箱,我们将在第一时间予以处理 ,同时向您表示歉意!为尊重作者版权,请购买原版作品,支持您喜欢的作者,谢谢!
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客如有发现请立即向站长举报;本站资源文件大多存储在云盘,如发现链接或图片失效,请联系作者或站长及时更新。
请登录后查看评论内容