主样式表(style.css)

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

来源于Wordpress官方文档:

https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

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

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

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

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

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

来源于:

http://www.lmygzs.com/archives/866.html

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

主题目录默认会带一个style.css文件,这个就是样式文件,但wordpress并不会自动加载。

加载可以有2种方式:

1. 普通的加载方式

在header.php中通过添加

<link href="<?php echo esc_url( get_template_directory_uri() ); ?>/style.css" rel="stylesheet" type="text/css"/>  

来加载这个css

2. wordpress内置的加载方式

在functions.php中添加

wp_enqueue_style('style1', get_stylesheet_directory_uri()."/style.css" , array(), '1.3', 'all');

后面的1.3就是版本号,可以用主题的版本号,也可以自己定一个。随便取个就好,就是个版本标识。第二个参数是路径

 

二、style.css的格式:

该文件开头的几行注释是要遵循一定的格式的,一般复制官方主题style.css的头部,然后照着改就行了

/*
Theme Name: stion
Theme URI: http://www.lmygzs.com/archives/113.html
Author: lmy
Author URI: https://www.lmygzs.com/
Description: 普通的企业型网站模板,可用于大多数企业网站。大多数内容可后台更换
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Details URI: http://www.lmygzs.com/changelog/stion.html
Tags: blue,  custom-header, custom-menu, 
Text Domain: stion

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.
*/

这个文件的作用是告诉wordpress当前主题的名称,作者,描述,还有版本与标签。照着改就行了。

在 后台-》外观-》主题 中,查看修改后的效果:

主样式表(style.css)

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

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

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

 

主样式表(style.css)

四、常见问题

有时候改了style.css没有生效,检查:

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

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

3. 可以用加载方式2来加载css文件,然后版本号手工改掉,这样可以让wp强制加载指定版本号的css

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

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

因主题原因,在示例代码中,有部分
C
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论