iT邦幫忙

0

如何實作切換使用者設定版面

  • 分享至 

  • xImage

想做有版面a,版面b,可以讓使用者管理介面設定
想到的方法為
版面A,用A.CSS 與A.JS
版面B,用B.CSS 與B.JS
如果使用者用A,就動態載入A.CSS和A.JS
這樣OK嗎?還是有其它比較好的方法呢?


wordpress原始碼下載
https://tw.wordpress.org/download/releases/

WORDPRESS靠模板來切換內容
https://tw.saowen.com/a/02517a131abc7dcd06edb4563dcafe0debc1b636d414143dad895cfc0831552e

模板怎麼做?

[key word]
WordPress 原理
WordPress 架構
WORDPRESS 原理 HOOK (這是我要的嗎?看起來不像

動態載入CSS

準備CSS

p {
    color: green;
    text-align: center;
} 

準備HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script>
        function dynamicLoadCss(url) {
            var head = document.getElementsByTagName('head')[0];
            var mycss = document.createElement('link');
            mycss.type = 'text/css';
            mycss.rel = 'stylesheet';
            mycss.href = url;
            head.appendChild(mycss);
        }
        if (1 == 1) {
            dynamicLoadCss("style.css");
        }
    </script>

    <p>This is a paragraph.</p>
</body>
</html>

ref
http://www.victsao.com/blog/81-javascript/135-javascript-linkcss
https://tw.saowen.com/a/02517a131abc7dcd06edb4563dcafe0debc1b636d414143dad895cfc0831552e

動態載入js

方法1

 dynamicLoadJS ("myscript.js");
 
    function dynamicLoadJS(url) {
        var head = document.getElementsByTagName('head')[0];
        var myscript = document.createElement("script");
        myscript.type = "text/javascript"; 
        myscript.src = url;
        head.appendChild(myscript );
    }

ref
http://www.victsao.com/blog/81-javascript/135-javascript-linkcss

方法2

if (typeof someObject == 'undefined') $.loadScript('url_to_someScript.js', function(){
    //Stuff to do after someScript has loaded
});

ref
https://ithelp.ithome.com.tw/questions/10188649
https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js

方法3

方式 1: 利用 document.write

document.write("<script type='text/javascript' src='http://phonedevelop.googlecode.com/files/snowstorm.js'></script>");

方式 2: 利用 document.createElement("script");

var jsFile = document.createElement("script");
jsFile.setAttribute("type","text/javascript");
jsFile.setAttribute("src", "http://phonedevelop.googlecode.com/files/snowstorm.js");
document.getElementsByTagName("head")[0].appendChild(jsFile)

ref
https://tomkuo139.blogspot.com/2013/12/java-script-js.html

看更多先前的討論...收起先前的討論...
froce iT邦大師 1 級 ‧ 2018-08-20 14:23:07 檢舉
用DB記錄這個帳戶用什麼版型,看他用什麼就導入什麼啊。
weiclin iT邦高手 4 級 ‧ 2018-08-20 14:37:30 檢舉
wordpress的原始碼就擺在那兒, 想看怎麼做的直接看程式就好嘍
圓頭人 iT邦研究生 5 級 ‧ 2018-08-20 15:50:27 檢舉
請教 用動態載入JS/CSS
這樣來做嗎?
froce iT邦大師 1 級 ‧ 2018-08-20 21:31:11 檢舉
動態載入是你想要使用者不刷新頁面,才需要用的。
以wordpress這種來說應該不需要,只要使用者指定好模版,資料庫記錄使用者的選擇,對應選擇後端再做輸出。
當然你要用ajax做即時的變動也行,但是我覺得這個超出你程度太多,你先學會把整套前後端概念弄清楚吧。
你程度夠的話不會對你找出的程式碼有疑問,你會看的懂。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答