前兩天Era給大家介紹瞭如何給WordPress小說主題新增繁簡體互譯的功能,詳細的設定你可以移步《讓你的WordPress支援繁簡體互轉》,你可以到/shuma/1798978lwo.html 檢視教程
今天Era再次給大家介紹如何給自己的WordPress小說閱讀頁面新增如背景色、字型形狀、字型大小等頁面設定,並將這些設定儲存至Cookie,這種方法是使用Jquery的方法。
工具/原料
Jquery
Cookie
方法/步驟
首先你得下載“jquery.cookie.js”,並放至你的WordPress主題資料夾內。
第二,引用兩個Jquery檔案,即jquery.min.js和jquery.cookie.js。
第三,把下面的程式碼新增至你Wordpress的footer.php中。
var options = {path: '/', expires: 10}; //定義路徑,過期時間為10天
var cookie_backColor = $.cookie("backColor"); //定義背景顏色值
var cookie_fontStyle = $.cookie("fontStyle"); //定義字型類別
var cookie_fontSize = $.cookie("fontSize"); //定義字型大小
//如果cookie裡有背景顏色、字型樣式、字型大小,就載入相應屬性。
$(function(){
if(cookie_backColor){
$('.single_bg').css('background', cookie_backColor);
}
if(cookie_fontStyle){
$('.entry p').css('font-family', cookie_fontStyle);
}
if(cookie_fontSize){
$('.entry p').css('font-size', cookie_fontSize + 'px');
}
});
//背景顏色方法
function backcolor(num){
if(num == 1){
$(".single_bg").css('background','#fef0e1'); //改變背景顏色
$.cookie("backColor", "#fef0e1", options); //把背景顏色值傳進"backColor"這個cookie裡
}
if(num == 2){
$(".single_bg").css('background','#feeaee');
$.cookie("backColor", "#feeaee", options);
}
if(num == 3){
$(".single_bg").css('background','#fdecfd');
$.cookie("backColor", "#fdecfd", options);
}
if(num == 4){
$(".single_bg").css('background','#e9f4fc');
$.cookie("backColor", "#e9f4fc", options);
}
if(num == 5){
$(".single_bg").css('background','#f3fdec');
$.cookie("backColor", "#f3fdec", options);
}
}
//字型顏色方法
function fontstyle(num){
if(num == 1){
$(".entry p").css('font-family','宋體'); //改變字型顏色
$.cookie("fontStyle", "宋體", options); //把字型顏色值傳進"fontStyle"這個cookie裡
}
if(num == 2){
$(".entry p").css('font-family','黑體');
$.cookie("fontStyle", "黑體", options);
}
if(num == 3){
$(".entry p").css('font-family','Microsoft Yahei');
$.cookie("fontStyle", "Microsoft Yahei", options);
}
if(num == 4){
$(".entry p").css('font-family','楷體');
$.cookie("fontStyle", "楷體", options);
}
}
//字型大小方法
function fontsize(num){
switch(num){
case 1:
$(".entry p").css('font-size','14px'); //改變字型大小
$.cookie("fontSize", "14", options); //把字型大小值傳進"fontSize"這個cookie裡
break;
case 2:
$(".entry p").css('font-size','16px');
$.cookie("fontSize", "16", options);
break;
case 3:
$(".entry p").css('font-size','18px');
$.cookie("fontSize", "18", options);
break;
case 4:
$(".entry p").css('font-size','20px');
$.cookie("fontSize", "20", options);
break;
}
}
//恢復預設方法
function defaultCL(){
$(".single_bg").css('background',''); //清空背景顏色
$.cookie("backColor", null, options); //把背景顏色空值傳進"backColor"這個cookie裡
$(".entry p").css('color',''); //清空字型顏色
$.cookie("fontStyle", null, options); //把字型顏色空值傳進"fontStyle"這個cookie裡
$(".entry p").css('font-size',''); //清空字型大小
$.cookie("fontSize", null, options); //把字型大小空值傳進"fontSize"這個cookie裡
}
這些檔案主要用Jquery來選擇需要修飾的小說文章頁,並把設定的內容儲存至Cookie。
第四,把下面的程式碼新增至你的single檔案內,主要是用來控制背景色、字型大小等頁面功能。
樣式如下圖所示:
小說頁面設定選項演示地址: