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

html wordpress

圓頭人 2018-08-20 14:20:36 ‧ 2398 瀏覽

想做有版面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做即時的變動也行，但是我覺得這個超出你程度太多，你先學會把整套前後端概念弄清楚吧。
你程度夠的話不會對你找出的程式碼有疑問，你會看的懂。

登入發表討論