WordPress站点添加背景图的两种方法

2017年11月10日 09:37:38  阅读 187 次

WordPress 主题大多数都自带有添加背景图功能,不过部分主题为了可能觉得添加一张大大的背景图会拖慢网页加载速度,所以就没有集成这个更换背景图功能,比如 Nana主题Blogs主题。不过既然有用户需要,那么今天就跟大家说一说如何为我们的 WordPress 站点添加背景图。

WordPress站点添加背景图的两种方法 技术文档 第1张

Blogs主题添加背景后的效果图

方法一:直接修改 style.css 文件

这个方法很简单,只需要将以下代码添加到当前主题的 style.css文件即可。

  1. body {
  2.     background-imageurl(http://localhost/wordpress/wp-content/uploads/2017/11/timg.jpg);
  3.     background-positioncenter center;
  4.     background-size: cover;
  5.     background-repeatno-repeat;
  6.     background-attachmentfixed;
  7. }

记得修改代码中的图片为自己的图片地址,图片大小建议为大图片,比如1920X1080。这个方法直接适用于 Nana主题和 Blogs主题,其他主题也同样适用。

方法二:在后台显示『背景』按钮

确保当前主题的 body 标签中有 body_class() 函数,没有就按方法一的方法直接添加(Nana主题和 Blogs主题可忽略此步骤)

将以下代码添加到当前主题的 functions.php 文件当中

  1. //添加背景按钮
  2. add_theme_support( 'custom-background');

此时,在我们 WordPress 站点后台 >> 外观 >> 背景 >> 背景图像 >> 添加背景图,然后设置为填满屏幕并保存发布即可。

WordPress站点添加背景图的两种方法 技术文档 第2张

如果文章对你有帮助,请赞赏支持懿古今发展!

历史上的今天:

本文地址:https://yigujin.cn/1385.html
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!
NEXT已经是最新一篇了
淘宝天猫无门槛专享优惠券

发表评论


表情

  1. 小萝博客
    小萝博客 【转正】 @回复

    偶尔换一下风格感觉不一样

  2. YaFe锋
    YaFe锋 【实习】 @回复

    我的改好了,百度搜索“磁力搬铁机”,就可以看到效果,欢迎大家参阅!
    如果改不好,把代码的body.custom-background 改为 body
    全背景改了不太好看,我下一步得改成页面最下面的黑色页尾背景试试。

    • 懿古今
      懿古今【老板】2017-11-12 17:43  回复

      @YaFe锋经过测试,还需使用方法一还是需要添加方法二的那个代码到functions.php文件中才行,所以已将方法一的body.custom-background 改为 body了。

  3. 磁力搬铁机
    磁力搬铁机 【实习】 @回复

    站长很用心在帮我解决问题,打赏了5元,谢谢!

    • 懿古今
      懿古今【老板】2017-11-12 17:45  回复

      @磁力搬铁机[害羞] 手机QQ交流,确实未能帮忙解决什么问题,都是你自己折腾解决的,所以有点受之有愧啊

  4. 烤德香
    烤德香 【主管】 @回复

    我还是喜欢纯色的背景

  5. 九哥
    九哥 【主管】 @回复

    还是主题集成比较方便,没有的话只能自己代码添加了。

  6. 雅兮网
    雅兮网 【主管】 @回复

    对于个人风格很强的纯“博客”,设置一张漂亮的背景图非常有必要,这也是当初很多部落格修改背景图的通用方法

  7. 小小参谋
    小小参谋 【试用】 @回复

    谢谢分享,虽然不会使用这个功能但很值得收藏!!!

  8. 姜辰
    姜辰 【助理】 @回复

    背景图。。。= =这个我觉得还是纯色好点。

  9. 我爱动感单车网
    我爱动感单车网 【副总】 @回复

    个人不喜欢,无论背景图是怎么样的,总感觉花里胡哨。

  10. 明月登楼
    明月登楼 【副总】 @回复

    我认为还是给个默认白色的背景给用户是最好的!比如喜欢使用浏览器扩展来改变网页浏览背景色的就很方便了!

    • 懿古今
      懿古今【老板】2017-11-10 15:12  回复

      @明月登楼不加载背景图个人认为是比较好的,不过总是有人问到所以就弄一个简单教程分享给大家折腾了

      • 明月登楼
        明月登楼 【副总】2017-11-10 15:13  回复

        @懿古今是的,并且我发现 WordPress 里加背景图片其实很简单,好像在主题预览里就可以加背景图片的!

        • 懿古今
          懿古今【老板】2017-11-10 15:18  回复

          @明月登楼[嘻嘻] 其实就是方法二,有些主题懒得加上那句代码,那么后台就看不到这个背景功能

  11. 明月学习笔记Blog
    明月学习笔记Blog 【试用】 @回复

    感觉背景图有时候的效果很不满意,至今我都没有添加背景图!

  12. 橘子书
    橘子书 【经理】 @回复

    其实, 第一种的css修改法,用伪元素最好。

  13. 土鳖哥
    土鳖哥 【实习】 @回复

    这个功能应该很多人喜欢!