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

 懿古今   2017-11-12 17:43:17 更新  技术文档

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

WordPress站点添加背景图的两种方法 - 第1张 - 懿古今(www.yigujin.cn)

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张 - 懿古今(www.yigujin.cn)

本文地址:https://www.yigujin.cn/1385.html

你可能感兴趣的文章

文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请发邮件至[email protected],确认后马上更正、删除,谢谢!

发表评论

  1. 土鳖哥
    土鳖哥 @回复

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

  2. 橘子书
    橘子书 @回复

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

    • 懿古今
      懿古今2017-11-10 15:13  回复

      @橘子书其实都差不多,如果为了方便更换,方法二不错

    • 雅兮网
      雅兮网2017-11-10 18:27  回复

      @橘子书IE8说,对不起 我不支持伪元素 [偷笑]

  3. 明月学习笔记Blog
    明月学习笔记Blog @回复

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

  4. 明月登楼
    明月登楼 @回复

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

    • 懿古今
      懿古今2017-11-10 15:12  回复

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

      • 明月登楼
        明月登楼2017-11-10 15:13  回复

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

        • 懿古今
          懿古今2017-11-10 15:18  回复

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

  5. 我爱动感单车网
    我爱动感单车网 @回复

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

  6. 姜辰
    姜辰 @回复

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

    • 懿古今
      懿古今2017-11-12 17:48  回复

      @姜辰[呲牙] 我个人也比较喜欢纯色

      • 姜辰
        姜辰2017-11-12 23:24  回复

        @懿古今纯色至少有一个好处,就是,。。。不用担心别人不喜欢背景图。233

  7. 小小参谋
    小小参谋 @回复

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

  8. 雅兮网
    雅兮网 @回复

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

    • 懿古今
      懿古今2017-11-12 17:46  回复

      @雅兮网所以说青菜萝卜各有所爱,自己喜欢什么就折腾什么就好

  9. 九哥
    九哥 @回复

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

    • 懿古今
      懿古今2017-11-12 17:46  回复

      @九哥主题集成就直接使用方法二就好,还是很简单的

  10. 烤德香
    烤德香 @回复

    我还是喜欢纯色的背景

    • 懿古今
      懿古今2017-11-12 17:45  回复

      @烤德香我也喜欢纯色的,这样的加载速度会比较快

  11. 磁力搬铁机
    磁力搬铁机 @回复

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

    • 懿古今
      懿古今2017-11-12 17:45  回复

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

  12. YaFe锋
    YaFe锋 @回复

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

    • 懿古今
      懿古今2017-11-12 17:43  回复

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

  13. 小萝博客
    小萝博客 @回复

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

    • 懿古今
      懿古今2017-11-15 10:06  回复

      @小萝博客是的,不过这个很多人包括我都不太像折腾背景图

  14. 燕窝
    燕窝 @回复

    我的网站为什么下面有个 空白 应该是tag 请大神帮助看看 www .xz46.com 风格感觉不一样 应该怎么操作 求指点

    • 懿古今
      懿古今2020-05-25 20:30  回复

      @燕窝[疑问] 刚才看了贵站,没发现哪里有什么空白的。