给WP古腾堡区块添加CSS效果

悦然网络工作室的有些文章内容需要插入一些长图,但是直接把长图插入到文章中会比较影响美观,这样的文章内容就会显得特别长。

要解决这个问题的有多种方法,而添加CSS效果应该是最好的方法之一。不过单独去写CSS代码又就比较麻烦,于是我找到了一个可以直接为古腾堡区块添加CSS效果的插件,非常好用。下面就给大家分享一下吧。

一、安装插件

blocks-css

悦然网络工作室使用的插件名为blocks-css,大家可以直接向wordpress网站后台的插件中心去下载安装,免费的,体积很小,基本也不会影响网站打开速度。安装好之后赢利启动插件。

二、插件的使用

blocks-css插件的使用非常简单,启用之后它会直接出现在古腾堡编辑器的右侧,当我们编辑文章内容时可以直接使用。

如上图所示,我们添加了一张高度为2998px的长图片,我们可以使用blocks-css添加一个高度控制的CSS效果,步骤如下:

1.选中区块,然后在右侧找到Custom CSS选项。

2.然后在Custom CSS选项的代码框中输入正确的CSS代码,代码如下:

selector {
    cursor: pointer;
    height: 420px;
    width: calc(100% + 6px);
    overflow: hidden;
    overflow-y: scroll;
}

代码输入完成后直接就可以看到效果,如上图所示。

总结

虽然有很多人认为wordpress网站建设要少用插件,这有一定的道理。但是我们也不可否认插件确实可以为我们带来很多方便,而且有些插件对网站基本没有什么影响,所以插件该用时也是要用的。