为WordPress每篇日志定义不同背景

知更鸟
知更鸟
站长
2331
文章
0
粉丝
WordPress1017,133阅读模式

你是否想像Nometet.com 这个网站一样让每篇博客文章的背景看起来都不一样呢?这个网站的设计确实是非常酷的,因为它允许作者通过上传图片来自定义文章背景,而且甚至图片的尺寸也 没有特别的规定。上传并不困难,只要在meta盒里执行一个上传软件就可以了,主要还是在选择图片上,让我们来看看究竟如何实现的呢?

考虑到后面需要用上传软件将图片的URL地址保存到一个自定义字段里,所以我们先将自定义字段建好,这样一来你只需要将URL收到自定义字段里并将 其显示为背景即可,代码非常简单:

  1. <?php
  2. $bg = get_post_custom_values("background");
  3. if ( is_array($bg) ) { ?>
  4. <style type="text/CSS" media="screen">
  5. body{ background: url(<?php echo $bg ?>) fixed no-repeat; }
  6. </style>
  7. <?php } ?>

不过你还得修改图片尺寸并将URL拷贝到自定义字段里。

自定义 meta上传软件

我们需要一个上传软件,究竟该如何实现呢?通过对WooThemes的研究,我发现他们的主题里有一个admin-custom.php文件(在 /functions目录下),这是他们用来加上传软件以及其他自定义meta盒的地方。

你可以从这 里下载此文件。

下载完之后,复制所有代码并将其粘贴到你的functions.php文件里(注意要粘贴在结束的?>标签之后)。

接着,需要启动meta盒,可以用下面的代码来实现:

  1. $woo_metaboxes = array(
  2. "image" => array (
  3. "name" => "bg",
  4. "label" => "Background",
  5. "type" => "upload",
  6. "desc" => "Automatically resized/enlarged but at least 1000px x 800px for it to be big enough."
  7. ),
  8. );
  9. update_option('woo_custom_template',$woo_metaboxes);

这段代码必需添 加在其他代码之后结束的?>标签之前。保存并上传文件,这样就你就有了上传软件,它会将图片保存到自定义字段 ‘bg’里。

调整图像大小

最后需要使用timthumb来调整图像的宽度为1920像素,首先下载timthumb, 并将它上传到你的主题文件里,头部的代码要遵守timbthumb的句法:

  1. body{
  2. background: url(<?php bloginfo('template_url'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo $bg; ?>) fixed no-repeat;
  3. }

你会发现使用上面的代码是行不通的,因为timthumb不喜欢自定义字段里的图片URL地址http://… 。

最后别人告诉我需要将URL地址编译才行,于是把上面的代码替换成:

  1. body{
  2. background: url(<?php bloginfo('template_url'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo urlencode($bg); ?>) fixed no-repeat;
  3. }

完成!

原文:http://wpshout.com/

本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
评论  10  访客  6  作者  3
    • steve
      steve 3

      用uploadify + timthumb 效果会更好,我在下一个版本里会用到

      • 雅岚
        雅岚 4

        每篇一个背景?
        个人认为太花哨鸟…

        • 朱芳文
          朱芳文 4

          挺复杂的,要是主机不好的话,会不会影响访问的速度?

            • 知更鸟
              知更鸟

              @ 朱芳文 呵呵,加载那么大一张图片,当然会影响速度

            • ellrywych
              ellrywych 0

              看不懂,可不可以详细说说?

              • 情蛰
                情蛰 2

                能否详细说说,我弄了后台可以上传,但是在单篇日志没有效果

                  • 知更鸟
                    知更鸟

                    @ 情蛰 这教程,也玩得转?
                    我未试过,这只是一篇转载的技术文章,而已

                      • 情蛰
                        情蛰 2

                        @ 知更鸟 我晕,后台,上传都没问题,就是前台不显示

                  匿名

                  发表评论

                  匿名网友
                  :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                  拖动滑块以完成验证