WordPress, 網站架設

WordPress教學-WordPress也有使用者切換佈景主題功能

梅干 2009/06/19
梅問題-jQuery教學-動態切換佈景主題並含記憶功能
  昨天已經將梅問題的佈景改成變形金剛,但這樣感覺好像不夠有趣,昨天晚上又趁著夜深人靜時,把先前男丁老師上課的Cookie變換佈景的範例拿出來改造一下,其實那功能就有點像是Yahoo!!首頁,右手邊的地方有個,可讓使用者自行設定版型樣式的功能,於是梅干就又開始胡搞啦!也把這一個功能也加裝到Wordpress上,一來不但可快速的更換背景,二來使用者可依照自已的喜好去設定佈景主題,但昨晚只完成了切換與記憶功能,還沒辦法有標記的功能,好在今天有男丁的相助,總算完成目前已選擇的佈景主題標記的功能,現在也分享給各位,而這一個範例可直接搬到Wordpress上使用,各位也可看到在梅問題右上角,也多了一個版型設定選單,使用者可直接切換自已習慣的佈景主題。

放在<head>.....</head>之間:
<link rel="stylesheet" type="text/css" href="style/style01.css" id="mycss" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.cookie.js"></script>
<script>
$(function(){
	$(".setStyle").show();
	var myStyle = $.cookie('myStyle');
	
	function setStyle(css){
		$("span.jt").remove();
		$("#mycss").attr("href", css);
		$(".stylePanel li").each(function(){
			var _this = $(this);
			var _rel = $("a:first", _this).attr("rel");
			if(_rel==css){
				_this.html("<span class='jt'>▪ </span>"+_this.html());
				return false;
			}
		});
		$.cookie('myStyle', css);
	}
	//判斷目前Cookie中的CSS樣式
	if(myStyle!=null){
		setStyle(myStyle);
	}else{
		//設定起始值,0為第1筆,1為第2筆,,,,依此類推~
		setStyle($(".stylePanel li a:eq(1)").attr("rel"));
	}
	
	$(".trigger").click(function(){
		var _this=$(this);
		if(_this.next().is(":visible")){
			_this.html(_this.html().replace("▼","►")).next().hide();
		}else{
			_this.html(_this.html().replace("►","▼")).next().show();
		}
	});
	
	$(".stylePanel li").click(function(){
		setStyle($("a:first", $(this)).attr("rel"));
		$(".trigger").click();
		
		return false;
	});
	
	//去除連結虛線框
	$("a").focus(function(){
		$(this).blur();
	});
});
</script>
如佈景主題的起始不是第一筆預設時,可從setStyle...中的eq()裡面更改, setStyle($(".stylePanel li a:eq(1)").attr("rel")); 如果是第一筆時eq(0),第二筆為eq(1)....依此類推。

放在<head><style>.....</syle></head>之間:
body{background:#000;}
.setStyle{position:relative; font-size:12px;color:#fff;display:none;}
ul.stylePanel{
	margin:0;
	padding:3px;
	list-style-type: none;
	position:absolute;
	left:0;
	top:15px;
	z-index:100;
	display:none;
	border:1px solid #ccc;
	width:200px;
	background:#fff;
}
ul.stylePanel li{padding:0 0 0 15px; line-height:20px;color:#000;}
ul.stylePanel li a{color:#202020;}
ul.stylePanel li span{margin-left:-7px;}

放在<body>.....</body>之間:
<span class="trigger">►頁面選擇</span> <ul class="stylePanel"> <li><a href="#" rel="style/style01.css">預設</a></li> <li><a href="#" rel="style/style02.css">粉紫</a></li> <li><a href="#" rel="style/style03.css">銀灰</a></li> </ul> </div> <div class="sample"></div>

加裝到Wordpress中:
Step1
開啟wp-content\themes\佈景主題\style.css,並更改如下:
修改style.css:
/*
Theme Name: 佈景主題名稱
Theme URI: 佈景主題網址
Description:佈景主題說明文
Version: 版本
Author: 作者
Author URI: 作者網址
Tags: 欄位說明
*/
// ******************************************************** //
.setStyle{position:relative; font-size:12px;color:#fff;display:none;}
ul.stylePanel{
	margin:0;
	padding:3px;
	list-style-type: none;
	position:absolute;
	left:0;
	top:15px;
	z-index:100;
	display:none;
	border:1px solid #ccc;
	width:200px;
	background:#fff;
}
ul.stylePanel li{padding:0 0 0 15px; line-height:20px;color:#000;}
ul.stylePanel li a{color:#202020;}
ul.stylePanel li span{margin-left:-7px;}

Step2
開啟wp-content\themes\佈景主題\head.php,並更改如下:
修改head.php,放到<head>....</head>之間:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-latest.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/setstyle.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style/transformers2.css" id="mycss" />

修改head.php,放到<body>....</body>之間:
<div id="StylePanel">
<div class="setStyle">
	<span class="trigger">►版型設定</span>
	<ul class="stylePanel">
	   <li><a href="#" rel="<?php bloginfo('template_directory'); ?>/style/default.css">預設(藍版)</a></li>
	   <li><a href="#" rel="<?php bloginfo('template_directory'); ?>/style/transformers2.css">佈景主題1</a></li>	  
	</ul>
</div>
</div>

Step3
完成後,把這一個佈景主題上傳,並且啟用它,建議最好是另外再弄一個新的佈景主題,再把這功能安裝進去。
[範例預覽] [範例下載]