模板的小调整 — Edit CSS


其实WP的内建功能真的非常强,虽然在模板自由度这部份,不比之前使用的Textcube来得高,但其模板调整的形态有它特别的运作模式,如果善于运用,其实也可以变得非常强大。

下面这我来个例子。

小梁今天向我求救,FB SEO这个插件的留言回覆区块,在展示时没有置中,破坏了整个页面工整。(看下图)检查后发现是其CSS没有把它设置成置中,所以只需增加一个CSS的语句,就可以完成调整。

wrong-visual

这时,我使用了Edit CSS这个功能。

功能位置:Appearance –> Edit CSS.

 注意:要使用Edit CSS,需要先启动Jetpack插件!

启动Jetpack的方式,可参考其介绍文章

custom-css

Edit CSS 功能需要启动的功能按键是这个,位置在第五行,第二排。

edit-css-dashboard

 

还没进入这之前,需要预先做好准备工作:

  1. 找出对应的区块名称。
  2. 找出适当的区块设置。

 

准备工作

使用View Source,调出页面源码。由于这个插件的位置是处于Comments的上面,所以要快速的话,可以直接搜寻Comments或者Response这两个关键字。找到后,把相关的控制键名记录下来。(下图)

source-code

下来,打开Comments所在的CSS档,把它的设置源码抄出来。

找出正确CSS档的小贴士:

首先,要知道CSS的链接设置,一定是以 link 开始的,而其设定中一定会有 rel=”stylesheet” id=”style-css” 这些字眼。(下图)而里面的href=”xxxxx”中的xxxxx就是它的真实储存位置。所以当找到了这个储存位置后,把它转贴到浏览器中直接开启,就可以看到代码了。

css-source

打开了CSS档后,直接搜寻Comments这个字眼。把它的整个设置抄下来。(下图框处)

comments-code

最后,进入CSS Editor,在最低处插入一行,然后把上面抄下来的代码贴上。过后,把Comments,修改成错位插件的区块键名,这里是fbSEOComments。(下图)完成后,按下Preview,看看修改成功不?如果没有问题,记得要按下Save Stylesheet才会真正储存下来哦!

edit-css-editor  

———————

后语:

其实除了插件,页面上绝大部分的设置都可以通过这方式实现微调。例如早前有蚂蚁投诉说部落Title太过大了、模板中的字体很丑等等,都可以用这方式调整哦!

自己快点实验试试。有什么心得或者疑问,贴上来大家一起参考吧!

Tags: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.