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("&lt;span class='jt'&gt;▪ &lt;/span&gt;"+_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
完成後,把這一個佈景主題上傳,並且啟用它,建議最好是另外再弄一個新的佈景主題,再把這功能安裝進去。
[範例預覽] [範例下載]