wordpress twenty fifteen 主题透明度调整

随着时间的推移, wordpress 的官方主题越来越丰富,其中 twenty fifteen 主题就是专门为博客而生,主题使用了近几年来流行的扁平化设计,配合多样的主题颜色,简约而不简单。自从官方推出这个主题后,我便摒弃了所有使用第三方主题的念头。

虽说 twenty fifteen 主题的官方配置已然够丰富,对于一般的使用者来说完全够用了。但是在板块颜色的选择上,默认只能选择填充颜色,而没有透明度的选项,这对于磨砂控和半透明控来说,简直不能忍。下面就来说说 twenty fifteen 该如何调整板块透明度。

对于一般主题,调整板块背景透明度,都是在 style.css 里,找到相关板块的 background-color ,然后把参数替换成 rgba(0,0,0,0.92) 之类的设置,保存刷新即可调整背景透明度。但这招在 twenty fifteen 上却不适用。不知从何时起, WP 官方主题已不把主题的 css 配置放在 style.css (之前一直用第三方主题,对官方主题没太关注),在 style.css 里改的配置,更新后多半不生效,这可以从浏览器的调试模式中看出。

画有横线的样式都是不生效的。

通过半天的分析,终于找出来了,其实真正生效的配置,在 /wp-content/themes/twentyfifteen/inc/ 目录里面,其中就有我们今天要说的主角, customizer.php 文件。

打开文件,查找 function twentyfifteen_get_color_schemes() ,你会发现,所有的主题默认配置都在里面,我们可以自行新建及自定义主题默认配置,这样的话,就可以在控制台快速切换主题了,比如下面我在默认主题下新建的一个 hzz 主题( dark 主题下面):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function twentyfifteen_get_color_schemes() {
return apply_filters( 'twentyfifteen_color_schemes', array(
'dark' => array(
'label' => __( 'Dark', 'twentyfifteen' ),
'colors' => array(
'#111111',
'#202020',
'#202020',
'#bebebe',
'#bebebe',
'#1b1b1b',
),
),
'hzz' => array(
'label' => __( 'hzz', 'twentyfifteen' ),
'colors' => array(
'#111111', //网站背景
'#202020', //侧边栏背景
'rgba(0,0,0,0.92)', //网站内容背景
'#bebebe', //网站或侧边栏字体颜色
'#bebebe', //网站或侧边栏字体颜色
'rgba(190,190,190,0.1)', //网站内容标签背景
),
),
'yellow' => array(
'label' => __( 'Yellow', 'twentyfifteen' ),
'colors' => array(
'#f4ca16',
'#ffdf00',
'#ffffff',
'#111111',
'#111111',
'#f1f1f1',
),
),
) );
}

通过配置可以看出, hzz 主题使用了半透明设置,至于字体颜色哪个对应哪个,由于本次修改没涉及,所以我也懒得去区分。

保存后刷新,就可以在主题配色方案中快速选择自定义主题了。

需要注意的是,由于1、2、4、5项在界面是采用颜色选择器进行选择的,所以如果配置半透明,会识别错误,造成配置重叠的情况,由于对 php 代码相关的内容已忘得差不多了,暂时也没找到解决办法,等 twenty fifteen 足够普及后,再等待大神们的方案吧,总之现阶段用图片背景来设置,也能蒙混一下。