wordpress 给主题添加换css 换色

2011-08-269,8377

首先给主题functions.php 写入代码 当然你也可以无视这个代码
这是php 写入Cookie的代码 可以直接点击的时候指定风格

/*wordpress php 切换风格*/
add_action('init', 'style_css');
function style_css(){
  $style_css = $_GET['style'];
  if($style_css){
  setcookie("style", $style_css, time()+604800);
  if(isset($_GET['js']))
  {
      echo $style_css;
  }
  if(strpos($_SERVER['HTTP_REFERER'],get_option('home')) !== false){
      header("Location: ".$_SERVER['HTTP_REFERER']);
exit;
}
   else {
header("Location:".get_option('home'));
exit;
}
}}

 

2.再找到需要换色的css是header.php文件夹

 

<link id="style_css" href="<?php bloginfo('template_url');
 if(!empty($_COOKIE['style'])) //检测是否有Cookie
{ $style_css = $_COOKIE['style'];}  //有就显示
else $style_css ='style';  //否则显示默认
 echo '/'. $style_css.'.css'; ?>" rel="stylesheet" type="text/css" media="screen" />

 

3.插入点击 换色效果

 

<div id="container">
        <ul id="skin">
		<!-- 这里面是js储存Cookie 的代码 无刷新
		     <li id="Black" title="黑色">黑色</li>
            <li id="Blue" title="蓝色">蓝色</li>
            <li id="Pink" title="粉红">粉红</li>
            <li id="White" title="白色">白色</li>
		 -->
		 <!--这是有刷新php储存Cookie的代码-->
	 		<a href="<?php echo get_settings('home') ?>/?style=Black" 	title="黑色">黑色</a>
			<a href="<?php echo get_settings('home') ?>/?style=Blue" title="蓝色">蓝色</a>
			<a href="<?php echo get_settings('home') ?>/?style=Pink"   title="粉红">粉红</a>
			<a href="<?php echo get_settings('home') ?>/?style=White" id="White" title="白色">粉红</a>
		<!--这是有刷新php储存Cookie的代码结束-->
        </ul>
</div>
<!--下面是js需要的-->
  <script type="text/javascript">
//网站换肤
$(function () {
    var $li = $("#skin li");  //查找到元素
    $li.click(function () {   //给元素添加事件
        switchSkin(this.id);//调用函数
    });
  
});
function switchSkin(skinName) {   
    $("#" + skinName).addClass("selected")                //当前<li>元素选中
					   .siblings().removeClass("selected");  //去掉其他同辈<li>元素的选中
    $("#style_css").attr("href", "http://www.lianyue.org/wp-content/themes/lianyue-acg/css/" + skinName + ".css"); //设置不同皮肤
    $.cookie("style", skinName, { path: '/', expires: 10 });  //保存Cookie
}
 </script>
5 1
  • 九洲鹿2011-08-26 下午 1:05 回复

    不知道说什么好,顶一个就是了

    #1  
  • 网上药店2011-08-26 下午 5:00 回复

    这个程序是比较专业的,我看不懂

    #2  
  • IM路人2011-08-26 下午 6:38 回复

    木有演示啊~~~

    #3  
    • 恋月2011-08-26 下午 8:18 回复

      我这就不是演示吗?

      #31
  • 抓花社区2011-08-26 下午 11:38 回复

    我见过最好的博文,谢谢楼主! :razz:

    #4  
  • 找情人2011-08-27 上午 7:22 回复

    正在找css的知识呢!谢谢了!

    #5  
  • Yeunmin2011-10-15 下午 8:21 回复

    哈哈…一次过把你的东西带走囖. :lol: :lol:

    #6