如何讓我的自定義計算器顯示在wordpress頁面上？

Question

我使用HTML5，CSS3和jQuery構建了一個自定義計算器。 我有一個基本的託管帳戶，並通過cPanel將所有文件加載到我的根目錄。這些文件包括calc.html和一個保存我的樣式表的CSS文件夾和一個保存我自定義jQuery的JS文件夾。

現在有人想把我的計算器放在他們的Wordpress網站上，我們無法弄清楚如何去做。現在我只是使用iframe在Wordpress頁面上顯示我的網站，但我們希望計算器可以從他的網站託管。 我試着將我的HTML代碼從我的calc.html文件複製粘貼到Wordpress頁面中，但是我沒有我的CSS和JS劑量函數的樣式。所以我使用了FileZilla，並用follwing路徑（public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc /）創建了一個名爲CALC的文件夾，並在其中添加了JS Sand CSS內容。

我聯繫我的CSS在我calc.html代碼頭

<link rel="stylesheet" href="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/css/mainCalc.css"> 

我聯繫我的JS對身體的calc.html結束

<script src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/js/main.js"></script> 

我瀏覽網頁和仍然有我的醜陋的HTML代碼，沒有樣式和JS功能。

即時通訊新的Wordpress /編碼，這是第一個彈出在我腦海中，所以我嘗試了它，並失敗了。

我還以爲我可以把calc.html，mainCalc.css和main.js我創建了一個calc目錄裏面（的public_html /可溼性粉劑內容/主題/ parallaxpro/cyberchimpscss/鈣 /） 然後使用iframe在wordpress頁面上顯示calc.html。我也失敗了。

我用

<iframe src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/calc.html"></iframe> 

Answer 1

你可以做創建自定義頁面模板。

基本上你會按照文檔https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/在內容部分創建一個HTML + CSS + JS的頁面。

完成後，您只需在管理部分創建一個新頁面，從發佈按鈕下的列表中選擇模板。保存它，就是這樣。 從寫一個插件它更簡單。

Answer 2

好的我已經加載了.html文件中的CSS。我加載了我的大部分JS，但最終我有一個JS代碼添加，但無法讓它工作。

這是我需要修復

<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script> 

我編輯的代碼，這

<script>window.jQuery || document.write('<script> I PASTE JS HERE <\/script>')</script> 

我在粘貼代碼很長，而且是搞亂一切。我認爲有語法錯誤，或者我不能將代碼粘貼到我正在粘貼的位置。我剛走進深水區，我不能游泳:(

所以我決定刪除

<script>window.jQuery || document.write('<script> I PASTE JS HERE <\/script>')</script> 

相反，我只是把

<script> PASTED JS CODED HERE </script> 

現在我有我所有的CSS和JS我.html文件。 我把.html放在我的桌面上，用Firefox和Chrome打開。它的作品絕對完美。

我現在複製我的.html文件中的所有代碼並粘貼到我的自定義php模板頁面的內容區域。

我在Wordpress上創建一個頁面，從頁面屬性中選擇我的自定義模板並查看頁面。

現在，它在那裏，但不像我在Firefox/Chrome中測試原始.html文件時的功能或外觀看起來一樣。

困惑。

更新**我現在要做入手腳本和樣式 將更新一次完成。這一定是我的問題！