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
完成後,把這一個佈景主題上傳,並且啟用它,建議最好是另外再弄一個新的佈景主題,再把這功能安裝進去。
[範例預覽] [範例下載]
UAG軍規iPhone防摔殼