WordPress如何实现整站一键变灰功能

释放双眼,带上耳机,听听看~!

前言:

我们的博客网站平时都是比较生动活泼的,颜色也比较鲜艳的,但是在一些特别悲伤的日子,或者是国难日期间,如果我们的博客网站还是那么的鲜艳就有点不好意思了,所以我们需要这样的一个功能:就是一键实现整站变灰的功能。

functions.php修改方法:

经过学习,发现其实这个功能还是挺简单的,只需要在我们主题的functions.php添加如下代码即可实现整站变灰:

//网站整体变灰
function hui_head_css() {
    $styles = "";
        $styles .= "html{overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}";
    if ($styles) {
        echo "<style>" . $styles . "</style>";
    }
}
add_action("wp_head", "hui_head_css");

如果我们所使用的主题有主题选项设置,我们也可以根据相应的格式添加一个整站变灰的选项,如默认为关闭,选择打开后,整站就变灰了,挺方便的。

style.css修改方法:

/* 网站黑白代码 */
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}

怎么使用

把以上的代码放在wordpress主题下的style.css文件最后一行,保存即可。

主题文件保存在哪

打开wordpress后台,点击 外观 - Theme Editor - 找到style.css 放入以上代码。

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧