wordpress手动合并css

1. wordpress网站怎样去合并CSS和JS文件,跪求大神指教,详细步骤

网上有很多合并js、css的工具，在线的、服务器上自动合并的，发布项目的时候自动打包合并的，甚至wordpress插件形式的都有。

自己ctrl+c、ctrl+v手工也可以合并。

我就不明白什么个人博客，小公司网站热衷于合并这个那个，减少那一点点请求有嘛用。多数这种网站一天访问量不会上万。

人家淘宝、百度这些那是一天要处理数亿的请求，光节约那点流量下来就是钱，快那0.01秒才体现得出用户体验的价值。小网站，你再打开快0.2秒，也绝定了没人看，要看的始终会看。

2. 如何给wordpress内容加上css

添加一些额外的CSS样式重新定义某篇WordPress文章的外观风格，可以直接在文章编辑器中直接添加CSS代码。

将下面代码添加到WordPress主题头部模板 header.php中：

<?php if (is_single()) {

$css = get_post_meta($post->ID, 'css', true);

if (!emptyempty($css)) { ?>

<?php echo $css; ?>

</style>

<?php }

} ?>

3. wordpress怎么更改css样式

二、确定修改重点

这里讲述的是怎么修改CSS文件，其实仔细观察Wordpress主题模板代码，不管是index.php首页还是page.php页面，或者single.php文章内页，你会发现，其实大部分主题都只是通过CSS来控制页面布局，页面本身的代码基本相同，特别是一些国外简洁明了的优秀主题更是如此。

当我们要修改某部分样式及结构时，都会直接打开Wordpress主题模板文件或在后台编辑主题，密密麻麻的代码，就是主题作者自己看了也会头晕眼花，所以会经常在关键部位加上一些注释，

php中注释一般为：

css中为：/** XXX **/

一般调整比较常见的是页面宽度、文本主体宽度、字体大小、行间距、背景颜色等。通过修改style.css文件都能够达到预期效果（部分主题会指定CSS文件，只需对应找到控制的CSS文件），部分国外主题在functions.php中加入加入大量模板函数，这不是本文讲述的重点。

三、修改Wordpress主题CSS文件

下面以Wordpress默认主题Twentyeleven修改为例

用Mozilla Firefox浏览器打开网站，首先在要修改样式的地方右键单击→查看元素。

此时浏览器自动打开DOM样式探查器

左侧是页面html源代码，右侧这部分就是控制标题文字的CSS属性，当然可以自己琢磨着对照左侧代码进行选择

我们简单地对CSS参数进行调整，可以实时预览效果，不管是字体大小，还是背景颜色都如此。

例如把color: rgb(34, 34, 34)；调整为color: rgb(345, 34, 34)；你会发现标题颜色发生改变，再加入字体参数font-size: 20px;

font-family：微软雅黑；此时发现页面中，文章标题全部都变为微软雅黑字体，字号为20px，红色，调整到满意的效果后，就应该把文件修改进CSS文件里。注意：字体如果是要使用微软雅黑等中文字体时，需要参照CSS中文字体对照表使用Unicode编码

保存方法有二种

一种是对照代码右侧位置style.css:745 用Dreamweaver软件或是记事本打开style.css文件找到第745行代码进行修改。另一种是点击style.css:745自动跳转到样式编辑器，然后选择保存CSS文件。

4. 如何在WordPress上正确加载Javascript和CSS

下面这个例子在 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', '/ajax/libs/jquery/1.8.2/jquery.js' ); 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' ); ?> ' 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的）。

5. 如何在WordPress上正确加载Javascript和CSS

有两种常用的 add_action 钩子可以加载脚本和CSS到WordPress: init：确保始终为您的网站头部加载脚本和CSS（如果使用home.php,index.php或一个模板文件），以及其他“前端”文章、页面和模板样式。

wp_enqueue_scripts：“适当”的钩子方法，并不总是有效的，根据你的WordPress设置。下面的所有例子都在WordPress多站点模式、WordPress 3.4.2 通过测试（如果不支持后续版本，请留言告知）加载外部 jQuery 库和主题自定义的脚本、样式下面这个例子在 add_action 钩子中使用 init。

/** Google jQuery Library, Custom jQuery and CSS Files */ function myScripts() { wp_register_script( 'google', '/ajax/libs/jquery/1.8.2/jquery.js' ); 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。

第 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文件，所以这行手动添加样式表。

6. 如何自定义wordpress菜单css样式

参考下面方法CSS 背景属性（Background）background 在一个声明中设置所有的背景属性。

1 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1 background-color 设置元素的背景颜色。

1 background-image 设置元素的背景图像。 1 background-position 设置背景图像的开始位置。

1 background-repeat 设置是否及如何重复背景图像。 1 CSS 边框属性（Border 和 Outline）border 在一个声明中设置所有的边框属性。

1 border-bottom 在一个声明中设置所有的下边框属性。 1 border-bottom-color 设置下边框的颜色。

2 border-bottom-style 设置下边框的样式。 2 border-bottom-width 设置下边框的宽度。

1 border-color 设置四条边框的颜色。 1 border-left 在一个声明中设置所有的左边框属性。

1 border-left-color 设置左边框的颜色。 2 border-left-style 设置左边框的样式。

2 border-left-width 设置左边框的宽度。 1 border-right 在一个声明中设置所有的右边框属性。

1 border-right-color 设置右边框的颜色。 2 border-right-style 设置右边框的样式。

2 border-right-width 设置右边框的宽度。 1 border-style 设置四条边框的样式。

1 border-top 在一个声明中设置所有的上边框属性。 1 border-top-color 设置上边框的颜色。

2 border-top-style 设置上边框的样式。 2 border-top-width 设置上边框的宽度。

1 border-width 设置四条边框的宽度。 1 outline 在一个声明中设置所有的轮廓属性。

2 outline-color 设置轮廓的颜色。 2 outline-style 设置轮廓的样式。

2 outline-width 设置轮廓的宽度。 2 CSS 文本属性（Text）color 设置文本的颜色。

1 direction 规定文本的方向 / 书写方向。 2 letter-spacing 设置字符间距。

1 line-height 设置行高。 1 text-align 规定文本的水平对齐方式。

1 text-decoration 规定添加到文本的装饰效果。 1 text-indent 规定文本块首行的缩进。

1 text-shadow 规定添加到文本的阴影效果。 2 text-transform 控制文本的大小写。

1 unicode-bidi 设置文本方向。 2 white-space 规定如何处理元素中的空白。

1 word-spacing 设置单词间距。 1 CSS 字体属性（Font）font 在一个声明中设置所有字体属性。

1 font-family 规定文本的字体系列。 1 font-size 规定文本的字体尺寸。

1 font-size-adjust 为元素规定 aspect 值。 2 font-stretch 收缩或拉伸当前的字体系列。

2 font-style 规定文本的字体样式。 1 font-variant 规定是否以小型大写字母的字体显示文本。

1 font-weight 规定字体的粗细。 1 CSS 外边距属性（Margin）margin 在一个声明中设置所有外边距属性。

1 margin-bottom 设置元素的下外边距。 1 margin-left 设置元素的左外边距。

1 margin-right 设置元素的右外边距。 1 margin-top 设置元素的上外边距。

1 CSS 内边距属性（Padding）padding 在一个声明中设置所有内边距属性。 1 padding-bottom 设置元素的下内边距。

1 padding-left 设置元素的左内边距。 1 padding-right 设置元素的右内边距。

1 padding-top 设置元素的上内边距。 1 CSS 列表属性（List）list-style 在一个声明中设置所有的列表属性。

1 list-style-image 将图象设置为列表项标记。 1 list-style-position 设置列表项标记的放置位置。

1 list-style-type 设置列表项标记的类型。 1 marker-offset 2 内容生成（Generated Content）content 与：before 以及：after 伪元素配合使用，来插入生成内容。

2 counter-increment 递增或递减一个或多个计数器。 2 counter-reset 创建或重置一个或多个计数器。

2 quotes 设置嵌套引用的引号类型。 2 CSS 尺寸属性（Dimension）height 设置元素高度。

1 max-height 设置元素的最大高度。 2 max-width 设置元素的最大宽度。

2 min-height 设置元素的最小高度。 2 min-width 设置元素的最小宽度。

2 width 设置元素的宽度。 1 CSS 定位属性（Positioning）bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。

2 clear 规定元素的哪一侧不允许其他浮动元素。 1 clip 剪裁绝对定位元素。

2 cursor 规定要显示的光标的类型（形状）。 2 display 规定元素应该生成的框的类型。

1 float 规定框是否应该浮动。 1 left 设置定位元素左外边距边界与其包含块左边界之间的偏移。

2 overflow 规定当内容溢出元素框时发生的事情。 2 position 规定元素的定位类型。

2 right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 2 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。

2 vertical-align 设置元素的垂直对齐方式。 1 visibility 规定元素是否可见。

2 z-index 设置元素的堆叠顺序。 2 CSS 打印属性（Print）orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。

2 page-break-after 设置元素后的分页行为。 2 page-break-before 设置元素前的分页行为。

2 page-break-inside 设置元素内部的分页行为。 2 widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。

2 CSS 表格属性（Table）border-collapse 规定是否合并表格边框。 2 border-spacing 规定相。

转载请注明出处51数据库 » wordpress手动合并css