如何快速切换WordPress里的背景图

2020年2月19日11:26:28 10 315 views 1240字阅读4分8秒

用过WordPress主题建站的人多半都切换过背景图,就拿本人来说,之前用鸟哥这款Begin主题的时候,就为了追求各种美化加过网站背景图与评论区背景图,还加过自定义鼠标样式,但后期还是因为想要简单简洁化,从而取消了。

如何快速切换WordPress里的背景图

但我相信很多人还是喜欢各式各样的美化折腾效果的,今天在久伴博客久伴博客久伴博客(重要的事情说三遍 :???: )里看到看到一个关于WordPress的背景图美化,觉得挺不错的。重要的是它能够快速的切换,你想要几种背景,复制几行代码多添加几种图片即可,如果有喜欢的朋友不妨看看。

把以下js放到wordpress header.php文件head标签之间

    <script>
            window.onload = jb;
            function jb(){
                var bgcolor=document.getElementById('bg');
                bgcolor.onchange=function(){
                    var num=bgcolor.value;
                    console.log(num);
                    document.body.className="body";
     
                    if(num=="1"){
                        document.body.className="bodya";
                    }
                    else if(num=="2"){
                        document.body.className="bodyb";
                    }
                    else if(num=="3"){
                        document.body.className="bodyc";
                    }
              else {
     
                     document.body.className="null";
     
                    }
                }
     
            }
        </script>

将一下样式放在你的style.css样式文件种(部分主题可能命名不一样)样式中得图片自行替换(注意图片路径)

         .bodya {
                background-image: url("img/1.jpg");
                background-repeat: no-repeat;
                background-size: cover;
            }
            .bodyb {
                background-image: url("img/2.jpg");
                background-repeat: no-repeat;
                background-size: cover;
            }
            .bodyc {
                background-image: url("img/3.jpg");
                background-repeat: no-repeat;
                background-size: cover;
            }

Html Code

    <select name="" id="bg">
        <option value="">请选择</option>
        <option value="1">壁纸一</option>
        <option value="2">壁纸二</option>
        <option value="3">壁纸三</option>
    </select>

最后,切换选项放在那个位置,得你自己定,至于演示效果可以百度搜索久伴博客,并在左上角登陆查看演示。确定好是否自己喜欢之后再进行添加,因为本人比较追求简洁、简单效果,所以故此没有添加,也就在本站看不到演示效果。

叶先生
  • 本文由 发表于 2020年2月19日11:26:28
如何为WordPress主题添加文章字数和阅读时间 WordPress

如何为WordPress主题添加文章字数和阅读时间

折腾的路上永不止,很奇怪对于一篇文章内的字数和阅读时间有啥用呢,这我也不知道,也不敢问。不过有朋友说人家的主题里都有,叶先生你知道怎么加一个吗?说实话我是不知道的,不过在鸟叔这里看到了这个教程,所以今...
WordPress如何设置只允许游客浏览指定的分类文章 WordPress

WordPress如何设置只允许游客浏览指定的分类文章

有朋友会问,WordPress如何设置只允许游客浏览指定的分类文章,因为有些分类的文章我不想未登录的用户能够浏览。 不知道是心里作怪,还是好奇心里,感叹这个世界奇葩的人还真不少,不过能有什么办法呢,谁...
如何判断网站是否采用织梦Dedecms搭建 网站建设

如何判断网站是否采用织梦Dedecms搭建

今天有朋友来问叶先生,怎么才能够知道一个网站是否采用织梦Dedecms搭建。坦白说,这个不算太高深的技术,一是凭自己的建站经验,二来是从中看一些细节。只要稍微熟悉一点dedecms的站长或者技术人员都...
用PhpStudy如何在本地搭建WordPress WordPress

用PhpStudy如何在本地搭建WordPress

以前在还没用WordPress建站的时候一直想进行尝试,但后面发现不会在本地搭建,只能够购买域名和服务器进行搭建。但是因为网站上线之初因胡乱修改网站版面,导致网站整体崩溃无法进行恢复,所以只能选择删库...
匿名

发表评论

匿名网友 填写信息

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

评论:10   其中:访客  5   博主  5
    • 风也温柔 风也温柔 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市二七区 郑州铁路局小区 2

      也可以采用随机图片api,用js监听加载,每次打开都不一样 :cool:

        • 叶先生 叶先生 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 电信

          回复 风也温柔 你这种效果我也有在其他博主里看到过,效果也很不错 :smile:

        • 趣知识 趣知识 来自天朝的朋友 火狐浏览器 Windows 7 北京市 联通 3

          我还木有用过!

            • 叶先生 叶先生 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 电信

              回复 趣知识 我也没用,就是分享给有需要的朋友

            • 167素材网 167素材网 来自天朝的朋友 谷歌浏览器 Windows 7 上海市 联通 1

              到后期你会发现,当初很多自定义的功能最后都选择放弃,还是当初的最简单的最好 :grin:

                • 叶先生 叶先生 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 电信

                  回复 167素材网 我也是同感,不过你去折腾了也好,起码你知道该怎么操作,学会了实践能力

                • 爱笑啦 爱笑啦 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省 电信 3

                  新年好,爱笑啦前来报到,互动一下

                    • 叶先生 叶先生 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 电信

                      回复 爱笑啦 晚来的新年快乐哈

                    • 简单生活 简单生活 来自天朝的朋友 谷歌浏览器 Windows 10 甘肃省兰州市 电信 2

                      我已经去除了很多无意义的还影响速度美观的东西了…

                        • 叶先生 叶先生 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 电信

                          回复 简单生活 我也是,留下来的东西都是非常简洁的了