wordpress怎么办写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主题都提供了可自定义编辑、修改功能，如：更改背景图片，背景颜色，顶部图片，还有一些主题上的小工具可以选择是否让它显示出来等等，但是并不是所有的wp主题都提供这样的功能，所以如果你不*悉wordpress主题修改，那么建议你选择wp主题的时候，尽可能选择能支持自定义编辑的主题。下面，无忧主机（***.51php****）小编将演示修改wordpress主题的style.css样式表的过程。首先如下图，登录后台点击外观-编辑-就可以看到主题的css样式表了。

主题所有的样式都是写在style.css里面的，今天就以*客文章的字体大小为例做演示。大家都知道，wp的文章是不能修改字体大小的，但是我们可以通过修改主题样式文件来达到修改字体大小的目的。我们只需要在style.css中，找到font-size:****把它改为Font-size:20px后，点更新，然后返回到*客首页，就可以看到修改后的效果。这个是很简单的一个操作。我们只需要随意修改css样式表里面的属*，就可以控制并改变wp主题的输出，非常简单强大。

操作说明：

MyCSS是一个允许您将您的个人CSS样式表到您的*客，无论你可能会使用的主题。用户需要额外的控制权的个人*客条目的介绍，通过使用自定义的CSS切换主题时，从一个到另一个类，而不必担心兼容*问题，这是非常有用的。

MyCSS插件需要一个额外的步骤，为了更好地组织您的自定义样式表添加一个新的面板下的“演示”菜单，允许你做即时的变化，很容易预览你的样式表。;)

如果您使用大量的“编辑CSS”功能在Firefox的Web开发工具栏，同时stying你的WordPress*客，那么你一定会提高您的生产力有一个额外的选项卡，开MyCSS和复制所需的CSS变化直接编辑CSS面板MyCSS文本框。保存，刷新，完成了！

具体操作：

一旦被**，您可以上传您的自定义样式表为“wp-content/plugins/MyCSS/my.css”或你的CSS代码复制并粘贴到编辑器“演示”菜单下。

确保“my.css”在您的服务器是可写的，一个“644”的权限就足够了。否则会警告，“my.css是不可写，或 my.css无法找到

须知：

元素发布使用CSS类定义的“my.css”的在您的*客将失去他们的CSS格式的RSS提要。这是由于这样的事实，不支持RSS饲料外部的样式表，因此所有的CSS类不会有任何效果的RSS阅读器。

我可以给你的秘诀之一是，你可能要使用“重要”时，你的CSS my.css显示不出来（通常是由于冲突与主题的样式表）