[小白向教程] WordPress 网站如何实现黑白/灰白页面效果

网站页面变成灰白页面，通常是为了哀悼。在清明节、全国哀悼日以及一些有影响力的人逝世时，各大网站和APP通常会把界面设置成灰白色调以表哀思。

中国共产党中央委员会、中华人民共和国全国人民代表大会常务委员会、中华人民共和国国务院、中国人民政治协商会议全国委员会、中国共产党和中华人民共和国中央军事委员会，极其悲痛地向全党全军全国各族人民通告：我们敬爱的江泽民同志患白血病合并多脏器功能衰竭，抢救无效，于2022年11月30日12时13分在上海逝世，享年96岁。

新华社北京11月30日电

最近几天发现很多博友的博客页面都设置成黑白色调了，其中有些是全站所有页面都设置成了黑白效果，而有些则是只有首页设置设置成了黑白效果。本文将简单介绍 WordPress 网站实现灰白页面显示效果的几种方法。

文章目录：

• WordPress 全站所有页面灰白效果
• WordPress 网站实现仅首页灰屏
• WordPress 网站实现指定页面灰屏

WordPress 全站所有页面灰白效果

有多种方式可以实现 WP 网站所有页面灰白效果，下面我介绍一种对小白用户最友好的方式：

1. 登录 WordPress 管理后台，前往外观 > 额外CSS；
2. 将以下代码添加到 WordPress 主题自定义页面的额外 CSS 一栏内并发布：

html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }

WordPress 网站实现仅首页灰屏

如果只想让 WordPress 网站首页灰屏，那你可以使用「杜郎俊赏」博主写的“哀悼日首页灰屏”插件。具体方法如下：

1. 前往「杜郎俊赏」插件详情页下载 WordPress 插件：哀悼日首页灰屏到本地；
   
2. 将插件上传到 WordPress 后台并激活即可。

WordPress 网站实现指定页面灰屏

如果你想要更加精细化让特定几个页面灰屏显示，比如说，仅在首页以及特定的一个/几个文章页面灰屏，那可以使用 WPCode 插件。

WPCode 插件的前身是 Insert Headers and Footers 插件，后续的更新中加入了 Custom Code Snippets 和 WordPress Code Manager 的功能。

要在 WordPress 网站通过 WPCode 插件实现指定页面灰屏，具体做法如下：

1. 在 WordPress 插件商店搜索下载 WPCode 插件，并激活；
2. 在 WordPress 后台的左侧边栏，点击 Code Snippets > Add Snippets；
   
3. 选择 Add Your Custom Code，根据下方截图所示填入以下代码：
   html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }
   注：Code Type 请选择 CSS Snippet；
   
4. 下滑页面至 Smart Conditional Logic 一栏，打开 Enable Logic 右侧的按钮开关，按照下方截图所示设置好步骤3所填入的 CSS Snippet 的生效条件：
   
   注：上图所示的条件，指定了这一代码只会在首页（https://zblogs.top/）和指定文章页（https://zblogs.top/be-young-be-simple/）生效。
5. 上滑至页面顶部，点击 Save Snippet 按钮保存，并点击左侧的开关启用这一 Code Snippe。
6. 清除页面缓存后，或打开浏览器的无痕模式访问网站，检查这一代码是否只在指定页面生效。

---