国家哀悼日4月4日如何把整个网站变灰色？

2020年4月4日
EBRP研究
网站建设

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院今天（4月3日）发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。
我们的网站平时都是比较生动活泼的，颜色也比较鲜艳的，但是在一些特别悲伤的日子，或者是国难日期间，如果我们的网站还是那么的鲜艳就有点不好意思了，所以我们需要这样的一个功能：就是一键实现整站变灰的功能。
其实这个功能还是挺简单的，只需要在我们主题的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");
//国家哀悼日把网站整体变灰的代码

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

如知更鸟的HotNews主题，我们只需要在theme_options.php里面的首页设置中，放入以下代码：

array(  "name" => "网站整体变灰",
    "desc" => "说明：在特别的日子里，一键设置网站整体变灰，支持IE、Chrome，基本上覆盖了大部分用户。",
    "id" => $shortname."_site_gray",
    "type" => "checkbox",
    "std" => "false",
    "section" => '<div class="part"></div>'),

然后把刚才添加到functions.php文件中的函数加一个判断语句，即可在后台实现一键让整站变灰，具体代码如下：

//网站整体变灰
function hui_head_css() {
    $styles = "";
    if (get_option('swt_site_gray') == 'true') {
        $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");

PS：function hui_head_css()函数代码来自于大前端的XIU主题。

代码部分引用：boke112.com/post/1098.html/mip/
延伸阅读：
2021是头牛，品牌握在手，客户交朋友
 从聚名快速转出域名到万网的流程是什么？
SEOer合伙人 – SEO合作加盟 – SEO军校
SEO供应商如何提高客户品牌价值？

Post Views: 300