WordPress 让特定的文章如何使用特定的CSS样式

房子修得再大也是临时住所,只有那个小木匣才是永久的家,所以,屋宽不如心宽,身安不如心安!

WP大学之前有一篇文章介绍的是采用特定php模板的方式(见:WordPress不同分类使用不同的文章模板),本文要介绍的是自定义css的方式。

今天有个人问这个问题:怎么为Wordpress的特定文章添加特定的css样式,这篇文章将会回答一下。

大致的“原理”:以post meta的方式在文章的发布/编辑页面添加自定义输入栏用以输入自定义的css,在文章详情页载入前述输入的css。

WORDPRESS自定义CSS:最简单的方式

这种方式的优点是载入的代码很少,考虑性能和安全性的话,可以考虑这种方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/*
为特定文章添加特定css最简单的方式.
*/
/*添加自定义CSS的meta box*/
add_action('admin_menu', 'cwp_add_my_custom_css_meta_box');
/*保存自定义CSS的内容*/
add_action('save_post', 'cwp_save_my_custom_css');
/*将自定义CSS添加到特定文章(适用于Wordpress中文章、页面、自定义文章类型等)的头部*/
add_action('wp_head','cwp_insert_my_custom_css');
function cwp_add_my_custom_css_meta_box() {
	add_meta_box('my_custom_css', '自定义CSS', 'cwp_output_my_custom_css_input_fields', 'post', 'normal', 'high');
	add_meta_box('my_custom_css', '自定义CSS', 'cwp_output_my_custom_css_input_fields', 'page', 'normal', 'high');
}
function cwp_output_my_custom_css_input_fields() {
	global $post;
	echo '<input type="hidden" name="my_custom_css_noncename" id="my_custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="my_custom_css" id="my_custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_my_custom_css',true).'</textarea>';
}
function cwp_save_my_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['my_custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$my_custom_css = $_POST['my_custom_css'];
	update_post_meta($post_id, '_my_custom_css', $my_custom_css);
}
function cwp_insert_my_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
		echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_my_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}

/* 为特定文章添加特定css最简单的方式. */ /*添加自定义CSS的meta box*/ add_action('admin_menu', 'cwp_add_my_custom_css_meta_box'); /*保存自定义CSS的内容*/ add_action('save_post', 'cwp_save_my_custom_css'); /*将自定义CSS添加到特定文章(适用于Wordpress中文章、页面、自定义文章类型等)的头部*/ add_action('wp_head','cwp_insert_my_custom_css'); function cwp_add_my_custom_css_meta_box() { add_meta_box('my_custom_css', '自定义CSS', 'cwp_output_my_custom_css_input_fields', 'post', 'normal', 'high'); add_meta_box('my_custom_css', '自定义CSS', 'cwp_output_my_custom_css_input_fields', 'page', 'normal', 'high'); } function cwp_output_my_custom_css_input_fields() { global $post; echo '<input type="hidden" name="my_custom_css_noncename" id="my_custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />'; echo '<textarea name="my_custom_css" id="my_custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_my_custom_css',true).'</textarea>'; } function cwp_save_my_custom_css($post_id) { if (!wp_verify_nonce($_POST['my_custom_css_noncename'], 'custom-css')) return $post_id; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id; $my_custom_css = $_POST['my_custom_css']; update_post_meta($post_id, '_my_custom_css', $my_custom_css); } function cwp_insert_my_custom_css() { if (is_page() || is_single()) { if (have_posts()) : while (have_posts()) : the_post(); echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_my_custom_css', true).'</style>'; endwhile; endif; rewind_posts(); } }

这种方式的缺点是,界面看起来很一般.

WORDPRESS自定义CSS:使用已有插件

自定义css的插件可能有许多,这里仅以CSS Plus 为例说明问题。

这类插件一般考虑到多语种用户,特别是RTL(从右到左书写)的阿拉伯语等语种,还要美化界面,所以,体量较大,载入的文件很多,代码量很大,所以,在性能和安全性上,不如第一种方式,不过使用插件可能会有比较好看的UI:

上面截图的上半部分为第一种方式的后台界面,下半部分为该插件的后台界面,看起来比前述的第一种方式要好看些,不过代价就是载入更多的文件和代码,并且据说这个插件的前期版本曾有不明链接,某用户评论:

Do not install this plugin on your WordPress site. It adds malicious js code including links to the infamous tracking site cc.chango.com. This site tracks users everywhere they go on the internet and CSS Plus adds code to every page or post, which includes the js code to contact the cc.chango.com site. Every page I tried to load from my site hung and waited as it tried to contact cc.chango.com before loading. I deactivated and deleted the CC Plus plugin and the malicious js code disappeared. DO NOT USE THIS PLUGIN!!!!!

以上就是WordPress 让特定的文章如何使用特定的CSS样式。做人要当提起时提起,当放下时放下。功名富贵放不下,生命就在功名富贵里耗费;悲欢离合放不下,生命就在悲欢离合里挣扎;放不下金钱,放不下名位,放不下人情,生命就在金钱名位人情里打滚;对是非放不下,对得失放不下,对善恶放不下,生命就在是非、善恶、得失里面,不得安宁。更多关于WordPress 让特定的文章如何使用特定的CSS样式请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
WordPress站点Gravatar头像前后台不显示的如何解决办法

WordPress做公司官网好吗?会不会显得档次很低?

WordPress主题需要支持https吗?WordPress站点如何如何实现https?

WordPress站点的页面/标签/分类URL地址如何添加.html?

WordPress站点更换了域名后数据库应该如何操作替换新旧域名?