悼念时刻让网站变灰白 - WordPress 美化

在这个特殊的时刻，作为一名普通的站长，我们也能通过一些行动来表达自己沉痛的心情，让你的网站变成黑白吧。这一节的 wordpress 美化教程教你如何让你的 wordpress 网站变成灰白色

最后更新于 2023-08-31

本页目录7 节

明天就是 4 月 4 号了，根据有关通知精神，在这个特殊的时刻，作为一名普通的站长，我们也能通过一些行动，来表达自己沉痛的心情，让你的网站变成黑白吧。这一节的 WordPress 美化教程就教你如何让网站变成灰白色。

参考资料：CSDN
参考资料：新浪博客

根据相关资料，通用的做法是在适当的位置给你的网站添加几行 CSS 样式即可。

菜鸟教程：CSS3 filter(滤镜) 属性

我测试了以下浏览器，均有效。

谷歌浏览器（80.0.3987.149（正式版本））
火狐浏览器（74.0）
QQ 浏览器（10.5.2）
360 浏览器（12.1.2248.0）
Microsoft Edge（……）
IE（11.719.18362.0）

1
<style>
2
html{overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
3
-webkit-filter: grayscale(100%);}
4
</style>

如果您的网站是通过 WordPress 搭建的，您可以在主题根目录下的style.css底部添加以下代码：

1
/*网站整体灰白*/
2
html {
3
    -webkit-filter: grayscale(100%); /* webkit */
4
    -moz-filter: grayscale(100%); /*firefox*/
5
    -ms-filter: grayscale(100%); /*ie9*/
6
    -o-filter: grayscale(100%); /*opera*/
7
    filter: grayscale(100%);
8
}

我只想图片变灰白：

1
/*网站图片灰白 - Npcink*/
2
body img{
3
    -webkit-filter: grayscale(100%); /* webkit */
4
    -moz-filter: grayscale(100%); /*firefox*/
5
    -ms-filter: grayscale(100%); /*ie9*/
6
    -o-filter: grayscale(100%); /*opera*/
7
    filter: grayscale(100%);
8
}

我只想首页变灰白：

在主题根目录下的index.php文件的

1
<?php
2
get_footer();

上面添加以下代码即可：

1
<style type="text/css">
2
/*网站整体灰白 - Npcink*/
3
body {
4
    -webkit-filter: grayscale(100%); /* webkit */
5
    -moz-filter: grayscale(100%); /*firefox*/
6
    -ms-filter: grayscale(100%); /*ie9*/
7
    -o-filter: grayscale(100%); /*opera*/
8
    filter: grayscale(100%);
9
}
10
</style>

我对 IE 情有独钟：

1
/*网站整体灰白 - Npcink*/
2
body {
3
    -webkit-filter: grayscale(100%); /* webkit */
4
    -moz-filter: grayscale(100%); /*firefox*/
5
    -ms-filter: grayscale(100%); /*ie9*/
6
    -o-filter: grayscale(100%); /*opera*/
7
    filter: grayscale(100%);
8
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
9
}

我是 Typecho:

您可以将以下代码添加至主题的footer.php文件底部</body>标签前保存即可。

1
<style type="text/css">
2
/*网站整体灰白 - Npcink*/
3
body {
4
    -webkit-filter: grayscale(100%); /* webkit */
5
    -moz-filter: grayscale(100%); /*firefox*/
6
    -ms-filter: grayscale(100%); /*ie9*/
7
    -o-filter: grayscale(100%); /*opera*/
8
    filter: grayscale(100%);
9
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
10
}
11
</style.css>

我是……

方法大同小异，重要的是这几行 CSS 代码和注释，具体的方法还请您自行研究。

指定时间有效果：

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

1
//网站整体变灰
2
function make_all_page_grep(){
3
    $dates = array("2020-04-04");
4
    $should_show = false;
5
    foreach ($dates as &$value) {
6
        $should_show= $value == date('Y-m-d');
7
    }
8
    unset($value);
9
    if ($should_show) {
10
        $styles = "";
11
        $styles .= "html{overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
12
            -webkit-filter: grayscale(100%);}";
13
        echo "<style>" . $styles . "</style>";
14
    }
15
}
16
add_action("wp_head", "make_all_page_grep");

我不想用这个效果了:

如果您不需要用到这个灰白效果，那么将您之前添加的代码删掉后保存即可。

保存后记得刷新本地浏览器缓存或者 CDN 哟

如果您感觉加代码太麻烦了，可用试试这款 WordPress 主题，不需要加代码，跟着文本简单设置下就好了：

阅读偏好

工具