2016-12-05 83 views
0

我有這個代碼,附加在JsFiddle中,我想知道如何將它添加到單個WordPress頁面?我嘗試了幾個插件,但他們似乎搞亂了格式化並停止了JavaScript的工作。任何幫助將不勝感激。有很多代碼,所以我只在這裏添加了一小段代碼。添加代碼到WordPress的網站頁面

<div id="top"> 
    <div class= "toptext"> 
     <span>Bet Type</span> 
     <select id = "typeoption"> 
      <option value="0">Qualifying Bet</option> 
     </select> 
    </div> 

https://jsfiddle.net/yLqwthyr/1/

+0

什麼(種)頁?您可以輕鬆將其插入模板文件。 – Roberrrt

+0

它是模板還是wp管理儀表板頁面? –

回答

1

您需要修改你的jQuery代碼運行在noConflict模式腳本。

如果您打算添加一個js文件,則需要使用wp_enqueue_script()對其進行排隊。

一個可能的方式做到這一點,假設你想你的表格結構添加到頁面(帶有ID和永久)

add_action('wp_enqueue_scripts', 'se_40975160'); 

function se_40975160(){ 
     if(is_page('your-page')){ 
      wp_enqueue_script('jquery'); 
      wp_register_script('form-js', PATHTOJS . '/js/your-js.js', array('jquery')); 

     } 
} 

對於jQuery腳本:當你入隊的腳本是依賴於jQuery的請注意,WordPress中的jQuery以noConflict模式運行,這意味着您不能使用公共$別名。您必須改用完整的jQuery。或者,將您的代碼放在noConflict包裝中,使用$快捷方式。

jQuery(document).ready(function($) { 
// $() will work as an alias for jQuery() inside of this function 
[ your code goes here ] 
}); 

要插入表單結構,可以使用add_shortcode()或者直接使用可視化編輯器。我將使用簡碼來處理php的表單響應。您可以在shortcode api頁面看到更多詳細信息。

0

步驟:1爲顯示目的創建簡碼

function mycustomcode(){ 
    /*Place your code here*/ 
} 
add_shortcode('mycustomcode','mycustomcode'); 

步驟:要顯示只使用這個簡碼2打開的文件,

在PHP filecode,

do_shortcode('mycustomcode'); 

在WYSWYG(WordPress的編輯器)中,

['mycustomcode'] 

步驟:3

恩排隊你的風格和腳本

0

要編輯頁面,你應該首先弄清楚哪些模板中使用的頁面。

您可以參考的WordPress Template Hierarchy更多細節。

或者你可以創建用於特定用途的page template,在可溼性粉劑管理員指定頁面模板頁面。

如果你仍然無法找到要修改的模板,也有像Show Current TemplateDisplay Template Name插件,以幫助你找到它。

請記住,當您編輯模板文件時,請在子主題中進行。