WordPress主题开发基础|主样式表(style.css)

作用

主样式表style.css是每个WordPress主题所需的样式表(CSS)文件,用于控制网页的演示效果(视觉设计和布局)。

位置

为了使WordPress将主题模板文件的集合识别为有效的主题,style.css文件必须位于主题的根目录中,而不是子目录下。

基本结构

WordPress使用style.css的标题注释部分在“外观(主题)”仪表板面板中显示有关主题的信息。

下面是style.css的头部分的一个典型的例子。

<!-- wp:paragraph -->
<p>/*<br>Theme Name: Twenty Seventeen</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Theme URI: https://wordpress.org/themes/twentyseventeen/</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Author: the WordPress team</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Author URI: https://wordpress.org/</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Version: 1.0</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>License: GNU General Public License v2 or later</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>License URI: http://www.gnu.org/licenses/gpl-2.0.html</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Text Domain: twentyseventeen</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready<br>This theme, like WordPress, is licensed under the GPL.<br>Use it to make something cool, have fun, and share what you've learned with others.<br>*/</p>
<!-- /wp:paragraph -->

注意:WordPress主题存储库使用此文件中“版本”之后的数字来确定主题是否具有可用的新版本。Theme Name (*): 主题名称。Theme URI: 公共网页的URL,用户可以在其中找到有关该主题的更多信息。Author (*): 开发主题的个人或组织的名称。 建议使用主题作者的wordpress.org用户名。Author URI: 创作个人或组织的网址。Description (*): 简短描述的主题。Version (*): 该版本以X.X或X.X.X格式编写。License (*): 主题的协议。License URI (*): 主题许可证的URL。Text Domain (*): 用于文本域的字符串用于翻译。Tags: 允许用户使用标签过滤器查找主题的单词或短语。

在所需的标题部分之后,style.css可以包含常规CSS文件中的任何内容。

style.css中的子主题

如果您的主题是“子主题”,则在style.css标题中需要使用如下“模板”行。/*
Theme Name: My Child Theme
Template: Twenty Seventeen
*/

有关创建子主题的更多信息,请参考官方文档。

修改style.css后不能立即生效的问题

在WordPress博客主题开发过程中,经常需要修改style.css样式,但是常常会发现它不能立即生效的问题。根本原因在于:服务器默认开启了开启了.htaccess缓存!一般来说,我们最好不要关掉这个缓存,因为开启.htaccess缓存有很多好处。

为什么要设置.htaccess缓存?

网站一般不容易变化的都是一些图片、CSS、JS脚本,而典型情况下这些内容都可以缓存到本地,例如可以设置一个缓存时间,比如30天;这样一来,访客打开你的网站就不会在从网站服务器直接下载这些数据了,而是直接从本地缓存读取这些数据,这样就大大提高了网站加载速度,减少了加载时间。

那么,能不能在不修改.htaccess缓存情况下实现修改style.css并且即时生效?测试后发现一个非常简单的方法是:把上面代码中版本号一行“Version: 1.0”中的版本号修改一下即可!道理估计你能猜出八九了吧。有兴趣的Wordpress新手可以试试。