你是否想像Nometet.com 这个网站一样让每篇博客文章的背景看起来都不一样呢？这个网站的设计确实是非常酷的，因为它允许作者通过上传图片来自定义文章背景，而且甚至图片的尺寸也 没有特别的规定。上传并不困难，只要在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;
- }
完成！
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
上海市南汇区 1F
用uploadify + timthumb 效果会更好，我在下一个版本里会用到
上海市浦东新区 2F
每篇一个背景?
个人认为太花哨鸟…
中国 B1
@ 雅岚 只是一个技术学习，并不一定应用
上海市 3F
挺复杂的，要是主机不好的话，会不会影响访问的速度？
中国 B1
@ 朱芳文 呵呵，加载那么大一张图片，当然会影响速度
江苏省南京市 4F
看不懂，可不可以详细说说？
广东省东莞市 5F
能否详细说说，我弄了后台可以上传，但是在单篇日志没有效果
中国 B1
@ 情蛰 这教程，也玩得转？
我未试过，这只是一篇转载的技术文章，而已
广东省东莞市 B2
@ 知更鸟 我晕，后台，上传都没问题，就是前台不显示
来自外部的引用