悼念時(shí)刻讓網(wǎng)站變灰白 – WordPress美化

明天就是4月4號(hào)了，根據(jù)有關(guān)通知精神，在這個(gè)特殊的時(shí)刻，作為一名普通的站長(zhǎng)，我們也能通過(guò)一些行動(dòng)，來(lái)表達(dá)自己沉痛的心情，讓你的網(wǎng)站變成黑白吧。這一節(jié)的wordpress美化教程就教你如何讓網(wǎng)站變成灰白色。

• 參考資料：CSDN
• 參考資料：新浪博客

根據(jù)相關(guān)資料，通用的做法是在適當(dāng)?shù)奈恢媒o你的網(wǎng)站添加幾行CSS樣式即可。

• 菜鳥(niǎo)教程：CSS3 filter(濾鏡) 屬性

我測(cè)試了以下瀏覽器，均有效。

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

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

如果您的網(wǎng)站是通過(guò)wordpress搭建的，您可以在主題根目錄下的style.css底部添加以下代碼：

/*網(wǎng)站整體灰白*/
html {
    -webkit-filter: grayscale(100%); /* webkit */
    -moz-filter: grayscale(100%); /*firefox*/
    -ms-filter: grayscale(100%); /*ie9*/
    -o-filter: grayscale(100%); /*opera*/
    filter: grayscale(100%);
}

我只想圖片變灰白：

/*網(wǎng)站圖片灰白 - Npcink*/
body img{
    -webkit-filter: grayscale(100%); /* webkit */
    -moz-filter: grayscale(100%); /*firefox*/
    -ms-filter: grayscale(100%); /*ie9*/
    -o-filter: grayscale(100%); /*opera*/
    filter: grayscale(100%);
}

我只想首頁(yè)變灰白：

在主題根目錄下的index.php文件的

<?php
get_footer();

上面添加以下代碼即可：

<style type="text/css">
/*網(wǎng)站整體灰白 - Npcink*/
body {
    -webkit-filter: grayscale(100%); /* webkit */
    -moz-filter: grayscale(100%); /*firefox*/
    -ms-filter: grayscale(100%); /*ie9*/
    -o-filter: grayscale(100%); /*opera*/
    filter: grayscale(100%);
}
</style>

我對(duì)IE情有獨(dú)鐘：

/*網(wǎng)站整體灰白 - Npcink*/
body {
    -webkit-filter: grayscale(100%); /* webkit */
    -moz-filter: grayscale(100%); /*firefox*/
    -ms-filter: grayscale(100%); /*ie9*/
    -o-filter: grayscale(100%); /*opera*/
    filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

我是Typecho:

您可以將以下代碼添加至主題的footer.php文件底部</body>標(biāo)簽前保存即可。

<style type="text/css">
/*網(wǎng)站整體灰白 - Npcink*/
body {
    -webkit-filter: grayscale(100%); /* webkit */
    -moz-filter: grayscale(100%); /*firefox*/
    -ms-filter: grayscale(100%); /*ie9*/
    -o-filter: grayscale(100%); /*opera*/
    filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
</style.css>

我是……

方法大同小異，重要的是這幾行CSS代碼和注釋?zhuān)唧w的方法還請(qǐng)您自行研究。

指定時(shí)間有效果：

將以下代碼添加至主題根目錄下的functions.php文件的<?php下面保存,那么你的wordpress站點(diǎn)僅在2020-04-04這一天變灰。

//網(wǎng)站整體變灰
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");

我不想用這個(gè)效果了:

如果您不需要用到這個(gè)灰白效果，那么將您之前添加的代碼刪掉后保存即可。

保存后記得刷新本地瀏覽器緩存或者CDN喲

---

如果您感覺(jué)加代碼太麻煩了，可用試試這款wordpress主題，不需要加代碼，跟著文本簡(jiǎn)單設(shè)置下就好了：