Npcink Blog
切换菜单

主要样式表（style.css）

style.css 是每个 WordPress 主题所需的样式表（CSS）文件。它控制网站页面的呈现（视觉设计和布局）。

最后更新于
本页目录6 节

style.css 是每个 WordPress 主题所需的样式表（CSS）文件。它控制网站页面的呈现（视觉设计和布局）。

位置

为了让 WordPress 将主题模板文件集识别为有效主题，style.css 文件需要位于主题的根目录中，而不是子目录中。

有关如何在主题中包含 style.css 文件的更详细说明，请参阅排队脚本和样式的“样式表”部分。

基本结构

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

示例

这是 style.css 的标题部分的示例。

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
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.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
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
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/ *
主题名称：二十七岁
主题URI：https：//wordpress.org/themes/twentyseventeen/
作者：WordPress团队
作者URI：https：//wordpress.org/
描述：Twenty Seventeen通过身临其境的精选图像和微妙的动画将您的网站变为现实。它专注于商业网站，它在首页上有多个部分，包括小部件，导航和社交菜单，徽标等。使用自定义配色方案个性化其不对称网格，并使用帖子格式展示您的多媒体内容。我们2017年的默认主题适用于多种语言，任何能力和任何设备。
版本：1.0
许可证：GNU通用公共许可证v2或更高版本
许可证URI：http：//www.gnu.org/licenses/gpl-2.0.html
文字域名：二十七岁
标签：单列，双列，右侧边栏，灵活标题，可访问性，自定义颜色，自定义标题，自定义菜单，自定义徽标，编辑器样式，特色图像，页脚小部件，后格式，rtl语言支持，粘贴帖子，主题选项，线程评论，翻译就绪
像WordPress这样的主题是根据GPL许可的。
用它来制作一些很酷的东西，玩得开心，并与他人分享你学到的东西。
* /

WordPress 主题库中的主题需要用（*）表示的项目。

注意：

WordPress 主题存储库使用此文件中“版本”之后的数字来确定主题是否具有可用的新版本。

  • 主题名称（*）：主题的名称。
  • 主题 URI：公共网页的 URL，用户可以在其中找到有关主题的更多信息。
  • 作者（*）：开发主题的个人或组织的名称。建议使用主题作者的 WordPress.org 用户名。
  • 作者 URI：创作个人或组织的 URL。
  • 描述（*）：主题的简短描述。
  • 版本（*）：版本，以 XX 或 XXX 格式编写。
  • 许可证（*）：主题的许可证。
  • 许可证 URI（*）：主题许可证的 URL。
  • Text Domain（*）：用于 textdomain 的字符串转换。
  • 标签：允许用户使用标签过滤器查找主题的单词或短语。完整的标签列表位于主题评论手册中。
  • 域路径：使用以便 WordPress 在禁用主题时知道在何处查找翻译。默认为/languages。

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

用于子主题的 Style.css

如果您的主题是子主题，则  style.css 标题中需要模板行。

/*
Theme Name: My Child Theme
Template: Twenty Seventeen
*/


/ *
主题名称：我的孩子主题
模板：二十七岁
* /

有关创建子主题的更多信息，请访问子主题页面。

来源于 WordPress 官方文档：查阅

补充

一、 style.css 文件的加载方式

主题目录默认会带一个 style.css 文件，这个就是样式文件，

三、为什么要把所有样式写在 style.css 里面

1. 对于一些不复杂的网站，可以把所有的样式都放在这个 style.css 文件里面，然后统一压缩，这样可以减少 http 请求数，从而提高网页加载速度。

2. style.css 可以通过后台直接修改， 这样修改后不用重新上传文件，直接就能生效。

四、常见问题

有时候改了 style.css 没有生效，检查：

1. 更新 wp supercache 缓存，有些网站都用这个缓存插件，记得更新缓存

2. 有些浏览器会缓存 css 文件，比如像 360.所以只需清空浏览器缓存即可

本文地址：http://www.lmygzs.com/archives/866.html

版权说明：如非注明，本站文章均为 蓝蚂蚁工作室 原创，转载请注明出处和附带本文链接。

想知道一个网站用的啥主题，通过这个文件就知道了，下面这篇文章就能教你如何打开这个文件。