在当今这个互联网时代，网站已经成为企业、个人展示形象、拓展业务的重要平台。而WordPress作为全球最受欢迎的博客平台，其强大的功能和便捷的操作吸引了无数用户。很多WordPress用户在搭建网站时，往往忽略了加载style.css这一关键环节，导致网站加载速度慢、美观度不足。今天，就让我来为大家揭秘WordPress加载style.css的秘密，助你打造速度与美感并存的网站！
一、什么是style.css？
二、为什么加载style.css如此重要？
1. 提升网站加载速度：style.css文件包含了网站的所有样式信息，浏览器在解析HTML文档时，需要先加载style.css文件。如果加载速度慢，将会影响整个网站的加载速度。
2. 优化用户体验：良好的视觉效果可以提升用户体验，使网站更具吸引力。style.css文件中的样式定义了网站的整体风格，对提升用户体验具有重要意义。
3. 增强网站美观度：style.css文件中的样式定义了网站的颜色、字体、布局等，使网站呈现出独特的风格。通过合理运用style.css，可以打造出具有美感的网站。
三、WordPress加载style.css的常见问题及解决方法
1. 加载速度慢
原因：style.css文件过大、网络连接不稳定、服务器性能不足等。
解决方法：
* 优化style.css文件：将冗余的样式、未使用的CSS代码进行删除，减小文件体积。
* 使用CDN加速：将style.css文件部署到CDN上，提高加载速度。
* 优化服务器性能：升级服务器配置，提高服务器处理速度。
2. 样式错乱
原因：style.css文件与其他CSS文件冲突、浏览器缓存问题等。
解决方法：
* 检查CSS文件冲突：仔细检查style.css文件与其他CSS文件是否存在冲突，确保样式定义正确。
* 清除浏览器缓存：清除浏览器缓存，重新加载网站样式。
3. 兼容性问题
原因：style.css文件中的样式定义与某些浏览器不兼容。
解决方法：
* 使用兼容性前缀：在CSS代码中添加兼容性前缀，确保样式在各个浏览器中都能正常显示。
* 使用CSS前缀工具：使用在线CSS前缀工具，自动为样式添加兼容性前缀。
四、WordPress加载style.css的技巧
1. 合并CSS文件：将多个CSS文件合并为一个，减少HTTP请求次数，提高加载速度。
2. 压缩CSS文件：使用CSS压缩工具，减小文件体积，提高加载速度。
3. 使用CSS预处理器：使用Sass、Less等CSS预处理器，提高CSS代码的可维护性。
4. 利用缓存：利用浏览器缓存、服务器缓存等技术，提高网站加载速度。
WordPress加载style.css是网站速度与美感的关键。通过优化style.css文件、解决常见问题、运用技巧等方法，可以有效提升网站加载速度，优化用户体验，打造出具有美感的网站。希望本文能对你有所帮助，让你的WordPress网站焕发出新的活力！
| 技巧 | 描述 | 效果 |
|---|---|---|
| 合并CSS文件 | 将多个CSS文件合并为一个 | 减少HTTP请求次数，提高加载速度 |
| 压缩CSS文件 | 使用CSS压缩工具，减小文件体积 | 提高加载速度 |
| 使用CSS预处理器 | 使用Sass、Less等CSS预处理器 | 提高CSS代码的可维护性 |
| 利用缓存 | 利用浏览器缓存、服务器缓存等技术 | 提高网站加载速度 |
以上就是关于WordPress加载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');
};
这样就非常的好了。
以上代码参考资料：（版权归原作者所有）
