WordPress主题额外CSS的实现

观察到最近的版本中,WordPress在主题自定义页面添加了一个功能:额外CSS。之前许多第三方主题自带了这个功能,而WordPress官方是如何实现这个功能的呢。

首先,主题的配置文件只存在于两处:

  • /wp-content/themes/主题目录/
  • 数据库wp_options表

而此类的输入型属性一般都是在数据库中存储,所以我重点关注了下数据库。执行查询:

select option_id, option_name from wp_options where option_name like "%theme%" order by option_id;

果然找到其中一条关于我正在使用的主题twentyfifteen的记录

+-----------+--------------------------------------------------+
| option_id | option_name              |
+-----------+--------------------------------------------------+
|     32154 | theme_mods_twentyfifteen |

下面我们来看看这条记录具体的内容

select * from wp_options where option_id = 32154;

查到结果中的option_value的值如下:

a:6:{s:18:"nav_menu_locations";a:2:{s:7:"primary";i:6;s:6:"social";i:102;}s:16:"background_color";s:6:"efefef";s:12:"color_scheme";s:7:"default";s:17:"sidebar_textcolor";s:7:"#ffffff";s:23:"header_background_color";s:7:"#303030";s:18:"custom_css_post_id";i:1371;}

这是一条序列化了的记录,不过还是注意到了最后有一个custom_css_post_id,这不就是我们的自定义css吗!key名中含有post id,难道是以文章的形式存储的?于是带着这个id的值”1371″,我到文章表wp_posts中查找。

select post_content from wp_posts where ID = 1371;

得到的内容如下:

html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input {
        font-family: Microsoft YaHei, Century Gothic !important;
}

果然,真相大白,新版的WordPress中自定义CSS的配置被以文章形式存储在了数据库中。

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注