给WordPress中的文章添加黑幕

黑幕是个啥呢...如果你去过萌娘百科一类的地方你绝对有见到

比如说就像这个233

不许偷看哦 >∀< ~

いぃ~神人好色~果然还是让你变成焦炭比较好吧！！
以上纯属本人瞎编，仿照自精灵使的剑舞中女主克雷尔233

那么...怎么实现的呢？

其实很简单，这个也完全用不着去改你的wordpress的代码

尤其是主题的代码...更新一次自己修改的全都没了....

[改过的都懂...相信和我一样不怎么喜欢改代码的人有很多吧...]

不过这个只支持区块编辑器，因为用到了其中的一个名为 自定义html 的区块

代码在这里

css

.heimu,.heimu a{
    background-color: #252525;
    color:#252525;
    text-shadow: none;
}::selection{
    background:#9ab0c0;
    color:#fff;
}
.heimu:hover,.heimu:hover a{
     transition:color .13s linear;
     color:#fff;
}

html

<span class="heimu" title="你知道的太多辣~">いぃ~神人好色~果然还是让你变成焦炭比较好吧！！</span>
<br>
<span class="heimu" title="你知道的太多辣~">以上纯属本人瞎编，仿照自精灵使的剑舞中女主克雷尔233</span>

啥？你问我这不是 自定义html 的区块吗？css写哪？

<style></style>：你看不起我是不是？

233

由于html标准中允许我们在任意位置声明css和js，所以我们可以把它插入到我们的文章中

还有，没有学过html前端的萌新们记得css和js的引用是有顺序问题的，不要放到下面以免出bug

还有就是...写在区块里的话css在上面声明一遍就行...
声明多了虽然不影响但是还是会拖慢网页加载的啦 = =

而且...其实wp也支持针对某个区块设置css，所以写到那里也是可以的233

最终的代码如下

<style>
.heimu,.heimu a{
    background-color: #252525;
    color:#252525;
    text-shadow: none;
}::selection{
    background:#9ab0c0;
    color:#fff;
}
.heimu:hover,.heimu:hover a{
     transition:color .13s linear;
     color:#fff;
}
</style>
<span class="heimu" title="你知道的太多辣~">いぃ~神人好色~果然还是让你变成焦炭比较好吧！！</span>
<br>
<span class="heimu" title="你知道的太多辣~">以上纯属本人瞎编，仿照自精灵使的剑舞中女主克雷尔233</span>

一些废话

那么...这篇文章差不多也就是这个样子了

大家可以去试试~

顺便安利一波区块编辑器，虽然很多人讨厌这玩意...不过这东西除了渲染某些bug多点和不能直接让图片和文字并排以外其实真的挺好用的2333

[不过对某些插件的兼容性是真心感人...

好像插件适配的都还是传统编辑器多一些...]

参考资料

https://www.cnblogs.com/hoshifurisosogu/p/heimu.html