wordpress

wordpress主题前端变灰代码,适合一些特殊日子

admin · 4月4日 · 2021年 · · 1347次已读

方法1

wordpress主题整站变灰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");

方法2

将这段代码加入主题文件夹下的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);
}

方法3

将以下代码放入 </head> 前即可让对应网页变黑灰色!

<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

方法4 指定时间有效果:

将以下代码添加至主题根目录下的functions.php文件的<?php下面保存,那么你的wordpress站点仅在2020-04-04这一天变灰。

//网站整体变灰
function make_all_page_grep(){
$dates = array("2020-04-04");
$should_show = false;
foreach ($dates as &$value) {
$should_show= $value == date('Y-m-d');
}
unset($value);
if ($should_show) {
$styles = "";
$styles .= "html{overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}";
echo "<style>" . $styles . "</style>";
}
}
add_action("wp_head", "make_all_page_grep");

如果您不需要用到这个灰白效果,那么将您之前添加的代码删掉后保存即可。保存后记得刷新本地浏览器缓存或者CDN哟