随便说说SBTalk

前篇有讲到利用自定义css来修饰段落文本块, 实现文字的灵活多样,以及突出重点．

因为修改样式是在theme(模板)的style sheet部分,因此当我们想切换模板时,如果仍然要实现这些样式,就必须在模板间copy&paste自定义的样式.事实上,我们可以将自定义样式涉及的css和图片单独存放一个目录,再用plugin的方式设置一个wp_head的事件触发.这个事件触发函数不做其他事情,仅用php的echo函数 输出一句style sheet的引用,该样式表就被引用在webpage的头部了.具体方法如下:

编辑一个mycss.css ,包含所有的自定义样式,如:

.mcs_answer {
background: #CFEBF7 url(’images/answer.gif’) 8px 6px no-repeat;
border: 1px solid #2580B2;
border-top: 4px solid #2580B2;
margin-top: 0px;
margin-bottom: 10px;
padding: 7px 10px 5px 32px;
}
.mcs_question {
background: #FFF6BF url(’images/question.gif’) 8px 8px no-repeat;
border: 1px solid #FFD324;
border-top: 4px solid #FFD324;
text-align: left;
margin-bottom: 0px;
margin-top: 10px;
padding: 7px 10px 5px 32px;
}

图片使用url()保证处在css所在的相对路径,样式加前缀mcs_避免和将来未知的模板样式冲突.

再编辑一个mycss.php 如下:

<?php
/*
Plugin Name: My-CSS
Plugin URI: http://www.sbtalk.com.cn/tag/plugin
Description: Adds portable and personal CSS style.
Version: 0.1
Author: Yang Jie Yang Zi(央街浪子)
Author URI: http://www.sbtalk.com.cn/
*/
add_action(’wp_head’, ‘my_css’);
function my_css() {
echo “n”.’<!– MyCSS Start –>’.”n”;
echo ‘<link rel=”stylesheet” href=”‘.get_option(’siteurl’).’/wp-content/plugins/mycss/mycss.css” type=”text/css” media=”screen” />’.”n”;
echo ‘<!– MyCSS End –>’.”n”;
}
?>

将文件mycss.css和mycss.php所在的目录命名为mycss,并在此目录下建images目录,将样式中所要用到的图片放入. 插件目录就准备好了. 将mycss目录上传至wp-content/plugins目录下,打开后台,激活此插件.如下:

好啦,一切就都搞定了.可以试试看在不同模板间引用mycss中的样式 ,只要这个插件一直是激活状态,即使是在不同模板间切换,样式依然有效:)

可以右键查看本文段落文字修饰框前的小图标,是从plugins/mycss/images来的, 如果查看页面源文件的话,注释语句<!– MyCSS Start –> 和<!– MyCSS End –>出现在html body之前.

上述自定义css的具体效果可以查看文章 自定义css修饰段落

—阅读本主题的博客原贴