在 WordPress 的世界中，样式表（style.css）就像是网站的灵魂，它决定了网站的整体风格和布局。WordPress 是如何加载 style.css 文件的？又有哪些因素会影响 style.css 的加载速度呢？今天，我们就来揭秘 WordPress 加载 style.css 的奥秘。
一、WordPress 加载 style.css 的过程
让我们来了解一下 WordPress 加载 style.css 的基本过程。
1. 浏览器请求：当用户访问 WordPress 网站时，浏览器会向服务器发送一个请求，请求加载网站的所有资源，包括 style.css 文件。
2. 服务器响应：服务器接收到请求后，会查找网站根目录下的 style.css 文件，并将其发送给浏览器。
3. 浏览器解析：浏览器接收到 style.css 文件后，会解析其中的 CSS 规则，并将这些规则应用到页面上，从而实现网站的整体样式。
二、影响 style.css 加载速度的因素
style.css 的加载速度对网站的访问速度有着重要的影响。以下是一些可能影响 style.css 加载速度的因素：
| 序号 | 因素 | 说明 |
|---|---|---|
| 1 | 文件大小 | style.css文件越大，加载时间越长。 |
| 2 | 服务器性能 | 服务器性能越高，响应速度越快。 |
| 3 | 网络环境 | 用户所在的网络环境越好，加载速度越快。 |
| 4 | 浏览器缓存 | 如果用户之前访问过该网站，浏览器会从缓存中加载style.css文件，从而提高加载速度。 |
| 5代码优化 | 对style.css文件进行优化，如压缩、合并等，可以减少文件大小，提高加载速度。 |
三、优化 style.css 的方法
为了提高 style.css 的加载速度，我们可以采取以下几种方法：
1. 压缩文件：使用工具将 style.css 文件进行压缩，减少文件大小。
2. 合并文件：将多个 CSS 文件合并成一个，减少 HTTP 请求次数。
3. 使用CDN：将 style.css 文件部署到 CDN 上，提高加载速度。
4. 利用浏览器缓存：设置合理的缓存策略，让浏览器缓存 style.css 文件。
5. 减少外部引用：尽量避免在 style.css 中引用外部样式表，减少 HTTP 请求次数。
四、实例分析
以下是一个简单的 style.css 文件示例：
“`css
/* 样式表头部 */
@import url(‘https://example.com/style1.css’);
@import url(‘https://example.com/style2.css’);
/* 样式规则 */
body {
background-color: fff;
}
h1 {
color: 333;
}
“`
为了优化这个 style.css 文件，我们可以采取以下措施：
1. 合并文件：将 `@import url(‘https://example.com/style1.css’);` 和 `@import url(‘https://example.com/style2.css’);` 合并成一个文件，减少 HTTP 请求次数。
2. 压缩文件：使用工具将合并后的文件进行压缩，减少文件大小。
3. 利用浏览器缓存：设置合理的缓存策略，让浏览器缓存 style.css 文件。
五、总结
WordPress 加载 style.css 的过程并不复杂，但优化 style.css 的加载速度却是一个值得探讨的话题。通过以上方法，我们可以提高 style.css 的加载速度，从而提升网站的访问速度。希望本文能对您有所帮助。
如何在WordPress上正确加载Javascript和CSS
现在许多WordPress网站都开始讲要正确加载 jQuery、Javascript和 CSS到你的WordPress网站。今天来一篇更详细讲解如何使用WordPress官方推荐的方式来加载脚本/ CSS的文章。
有两种常用的 add_action钩子可以加载脚本和CSS到WordPress：
init：确保始终为您的网站头部加载脚本和CSS（如果使用home.php，index.php或一个模板文件），以及其他“前端”文章、页面和模板样式。
wp_enqueue_scripts：“适当”的钩子方法，并不总是有效的，根据你的WordPress设置。
下面的所有例子都在WordPress多站点模式、WordPress 3.4.2通过测试（如果不支持后续版本，请留言告知）
加载外部 jQuery库和主题自定义的脚本、样式
下面这个例子在 add_action钩子中使用 init。使用 init有两个原因，一是因为我们正在注销WordPress默认的jQuery库，然后加载谷歌的jQuery库；二是确保在WordPress的头部就加载脚本和CSS。
使用if(!is_admin())是为了确保这些脚本和css只在前端加载，不会再后台管理界面加载。
/** Google jQuery Library, Custom jQuery and CSS Files*/
function myScripts(){
wp_register_script('google',';);
wp_register_script('default', get_template_directory_uri().'/jquery.js');
wp_register_style('default', get_template_directory_uri().'/style.css');
if(!is_admin()){/** Load Scripts and Style on Website Only*/
wp_deregister_script('jquery');
wp_enqueue_script('google');
wp_enqueue_script('default');
wp_enqueue_style('default');
}
}
add_action('init','myScripts');
加载WP默认 jQuery库和主题自定义的脚本、样式
第3行：使用 array(‘jquery’)是为了告诉 WordPress这个 jquery.js是依赖WordPress的jQuery库文件，从而使 jquery.js在WordPress jQuery库文件后加载。
/** Add Custom jQuery and CSS files to a Theme*/
function myScripts(){
wp_register_script('default', get_template_directory_uri().'/jquery.js', array('jquery'),'');
wp_register_style('default', get_template_directory_uri().'/style.css');
if(!is_admin()){/** Load Scripts and Style on Website Only*/
wp_enqueue_script('default');
wp_enqueue_style('default');
}
}
add_action('init','myScripts');
加载 print.css到你的WordPress主题
第 3行：最后的‘print’是媒体屏幕调用，确保 print.css在网站的打印机中的文件加载时才加载。
/** Adding a Print Stylesheet to a Theme*/
function myPrintCss(){
wp_register_style('print', get_template_directory_uri().'/print.css','','','print');
if(!is_admin()){/** Load Scripts and Style on Website Only*/
wp_enqueue_style('print');
}
}
add_action('init','myPrintCss');
使用 wp_enqueue_scripts替换 init
如果你要在文章或页面加载唯一的脚本，那就应该使用 wp_enqueue_scripts替换 init。使用 wp_enqueue_scripts仅仅只会在前台加载脚本和CSS，不会在后台管理界面加载，所以没必要使用!is_admin()判断。
使用 is_single()只在文章加载脚本或CSS
第 3行的#替换为文章的ID就可以让脚本和css只加载到那篇文章。当然，如果直接使用 is_single()（不填ID），就会在所有文章加载脚本和CSS。
/** Adding Scripts To A Unique Post*/
function myScripts(){
if( is_single(#)){/** Load Scripts and Style on Posts Only*/
/** Add jQuery and/or CSS Enqueue*/
}
}
add_action('wp_enqueue_scripts','myScripts');
使用 is_page()只在页面加载脚本或CSS
第 3行的#替换为页面的ID就可以让脚本和css只加载到那个页面。当然，如果直接使用 is_single()（不填ID），就会在所有页面加载脚本和CSS。
/** Adding Scripts To A Unique Page*/
function myScripts(){
if( is_page(#)){/** Load Scripts and Style on Pages Only*/
/** Add jQuery and/or CSS Enqueue*/
}
}
add_action('wp_enqueue_scripts','myScripts');
使用 admin_enqueue_scripts加载脚本到后台
这个例子将在整个后台管理界面加载脚本和CSS。这个方法不推荐用在插件上，除非插件重建了整个后台管理区。
第 10行使用 admin_enqueue_scripts替换了 init或wp_enqueue_scripts
第 5、6行，如果你要自定义后台管理区，你可以需要禁用默认的WordPress CSS调用。
/** Adding Scripts To The WordPress Admin Area Only*/
function myAdminScripts(){
wp_register_script('default', get_template_directory_uri().'/jquery.js', array('jquery'),'');
wp_enqueue_script('default');
//wp_deregister_style('ie');/** removes ie stylesheet*/
//wp_deregister_style('colors');/** disables default css*/
wp_register_style('default', get_template_directory_uri().'/style.css', array(),'','all');
wp_enqueue_style('default');
}
add_action('admin_enqueue_scripts','myAdminScripts');
加载脚本和CSS到WordPress登录界面
第 6行：我无法弄清楚如何在在登录页面注册/排序 CSS文件，所以这行手动添加样式表。
第 10-14行：用来移除WordPress默认的样式表。
/** Adding Scripts To The WordPress Login Page*/
function myLoginScripts(){
wp_register_script('default', get_template_directory_uri().'/jquery.js', array('jquery'),'');
wp_enqueue_script('default');
?>
<link rel='stylesheet' id='default-css' href='<?php echo get_template_directory_uri().'/style.css';?>' type='text/css' media='all'/>
<?php}
add_action('login_enqueue_scripts','myLoginScripts');
/** Deregister the login css files*/
function removeScripts(){
wp_deregister_style('wp-admin');
wp_deregister_style('colors-fresh');
}
add_action('login_init','removeScripts');
将 jQuery库移动到页脚
你不能将WordPress默认的jQuery库移动到页面底部，但是你可以将自定义的jQuery或其他外部jQuery库（比如Google的）移动到底部。不要将CSS移动到页面底部。
第 3、4行：最后的‘true’告诉WordPress在页面底部加载这些脚本。
/** Moves jQuery to Footer*/
function footerScript(){
wp_register_script('jquery',(“”), false,'', true);
wp_register_script('default', get_template_directory_uri().'/jquery.js', false,'', true);
if(!is_admin()){/** Load Scripts and Style on Website Only*/
wp_deregister_script('jquery');
wp_enqueue_script('jquery');
wp_enqueue_script('default');
}
}
add_action('init','footerScript');
根据不用的用户角色和功能加载jQuery和CSS
如果你的网站有作者、编辑和其他管理员，你可能需要通过 jQuery来为他们显示不同的信息。你需要使用 current_user_can确定登录的用户的角色和功能。
下面三个例子中，如果用户已经登录，将在整个网站加载这些脚本和CSS。使用!is_admin()包装 enqueue_script确保只在前台加载，或者在 add_action使用 admin_enqueue_scripts就可以确保只在后台管理区加载。
为可以“编辑文章”的管理员加载脚本和CSS
只对超级管理员和网站管理员生效
/** Add CSS& jQuery based on Roles and Capabilities*/
function myScripts(){
if( current_user_can('edit_posts')){
/** Add jQuery and/or CSS Enqueue*/
}
}
add_action('init','myScripts');
为所有登录用户加载脚本和CSS
/** Admins/ Authors/ Contributors/ Subscribers*/
function myScripts(){
if( current_user_can('read')){
/** Add jQuery and/or CSS Enqueue*/
}
}
add_action('init','myScripts');
为管理员以外的已登录用户加载脚本和CSS
/** Disable for Super Admins/ Admins enable for Authors/ Contributors/ Subscribers*/
function myScripts(){
if( current_user_can('read')&&!current_user_can('edit_users')){
/** Add jQuery and/or CSS Enqueue*/
}
}
add_action('init','myScripts');
最后的提示
上面的很多例子如果使用相同的add_action，就可以被合并成一个单一的函数。
换句话说，您可以使用多个 if语句在一个函数中分裂了你的脚本和CSS调用，如：if_admin！if_admin，is_page，is_single和current_user_can的，因为每次使用相同的add_action的init。
wordpress主题,修改头部代码加入JS
第一步：新建header.php
在做主题文件夹wp-content\themes\goodblog下面新建一个头部文件header.php，然后将index.php中的头部代码提取(剪切)出来，写入这个文件：
第二步：修改index.php
保存好头部文件，在index.php的前面加上代码：
get_header()函数会自动载入主题文件夹中的header.php文件，所以头部文件的文件名命名为header.php然后使用get_deader()函数即可；
现在头部文件已经制作好了，接下来的工作就是编辑头部文件header.php将里面的静态html代码换成动态的php代码。
第三步：修改title
需要更改信息，一般我们将title信息改成这样的：文章页面标题|网站名称，当然用户也可以根据自己的seo只是更改，比如有的人在标题中加入网站描述。将header.php中的<title>index</title>改成下面的代码：
上面的代码通过判断将首页、文章页、分类页、404页面的<title>信息设置成不一样的形式，这样是很有必要的。
几个判断函数的解释如下：
第四步：修改css文件的路径
在header.php文件中找到下面代码：
这个样式表的路径./style.css是网站根目录。
如果用户不想让别人轻易看出用户网站是使用 wordprss程序，那么可以改变图片、样式表等文件的路径，比如本工作室，将图片、样式表都移到了网站根目录，在网页代码中就不会出现 wordprss站才有的wp-content/themes之类的路径。好了，将上面的代码改成：
bloginfo('stylesheet_url')会自动输出网站主题文件夹下style.css文件的绝对网址，如
说到这里，顺便修改一下图片路径，在index.php里有张图片路径需要修改，不过现在可改可不改，后期会自动调用文章图片；
用文本编辑器打开index.php给这些图片加上正确的URL，搜索代码，将所有的：src=”images/，批量替换成src=”<?php bloginfo('template_url');?>/images/。现在再刷新你的主页，看文章的缩略图是否可以正常显示。
第五步：关于wp_head()
wp_head函数对于要使用插件的主题来说比较重要，一般如果插件需要加载css文件和js文件，都是通过wp_head()函数输出的。在header.php文件的</head>前面添加：
在去看自己的网站，查看网页源代码，会发现<head></head>标签中多了如下代码：
wordpress代码高亮用什么插件
WordPress有很多的代码高亮插件，但是效果和使用都不是很理想，后来也就找到了一款WP-Syntax的插件，感觉还是非常不错的。
但是由于WP-Syntax插件的默认样式有些怪异，所以可以使用一下css做一个美化
/*wp_syntaxupdate：2016/04/12*/
.wp_syntax{
color:#100;
background-color:#f9f9f9;
border:1pxsolid#EBEBEB;
margin:6px0;
overflow:auto;
}
.wp_syntax{
overflow-x:auto;
overflow-y:hidden;
padding-bottom:expression(this.scrollWidth>this.offsetWidth?15:0);
width:99%;
}
.wp_syntaxtable{
border:none;
border-collapse:collapse;
margin:0;
padding:0;
width:100%!important
}
.wp_syntaxcaption{
padding:2px;
width:100%;
background-color:#def;
text-align:left;
font-family:Monaco;
font-size:13px;
line-height:20px;
}
.wp_syntaxcaptiona{
color:#1982d1;
text-align:left;
font-family:Monaco;
font-size:13px;
line-height:20px;
text-decoration:none;
}
.wp_syntaxcaptiona:hover{
color:#1982d1;
text-decoration:underline;
}
.wp_syntaxdiv,.wp_syntaxtd{
border:none;
text-align:left;
padding:0;
vertical-align:top;
}
.wp_syntaxtd.code{
background:none;
line-height:normal;
white-space:normal;
padding-left:10px;
}
.wp_syntaxpre,.wp_syntaxspan{
background:transparent;
margin:0;
padding:0;
width:auto;
float:none;
clear:none;
overflow:visible;
font-family:Monaco;
font-size:13px;
line-height:26px;
white-space:pre;
font-family:Consolas,Monaco,'MicrosoftYaHei','WenQuanYiMicroHei','LucidaConsole',monospace;
}
.wp_syntaxtd.line_numbers{
width:36px
}
.wp_syntaxtd.line_numberspre{
border-right:3pxsolid#666;
background-color:#E7E5DC;
color:gray;
padding:05px;
text-align:right;
}
你也可以将上面的代码添加到你主题的 style.css文件中，然后在 functions.php中添加下面的代码，取消 WP-Syntax加载的css文件，这样，即使你以后升级了插件，也能保留你自己的样式。
if(has_action('wp_print_styles','wp_syntax_style')){
remove_action('wp_print_styles','wp_syntax_style');
};
这样就非常的好了。
以上代码参考资料：（版权归原作者所有）
