如何讓我的WordPress模板識別我的JS框架？

Question

我創建了一個名爲Contact-Us的自定義模板並將其上傳到我的WordPress主題目錄。

創建了名爲Contact-Us.php的模板，可以使用AngularJS動態添加更多行。

它還使用Bootstrap框架進行頁面佈局。

一切看起來和工作良好。

將它上傳到我的WordPress主題文件夾之前，我知道我必須將內聯和外部引用的樣式分開。

我也知道我必須做AngularJS和Boostrap框架以及jQuery庫。

我跟着從以下鏈接中的說明：

http://www.catswhocode.com/blog/how-to-create-a-built-in-contact-form-for-your-wordpress-theme

的問題是完成該頁面未對齊和動態創建和刪除新角色AngularJS功能不再工作。

我知道我做錯了事，即使我按照該鏈接的指示。

任何想法我做錯了什麼？

下面是我嘗試添加那些JS庫上的header.php

我的代碼只是頭鉤下方。

addrows.js是創建動態行的Angular代碼。

夥計們，我仍然需要您對此代碼的幫助。

我已經更新了代碼。現在，我沒有得到任何錯誤。

但是，代碼沒有做它應該做的事情。

首先，它應該像HTML版本那樣很好地佈置頁面。

其次，代碼應該允許用戶點擊添加其他文本框。

當您單擊添加更多按鈕時，沒有任何反應。

所有這些讓我相信js和css文件沒有被識別。

下面的腳本放在function.php中。

有人可以看看腳本，看看你能告訴我爲什麼我的CSS和JS文件不被識別？

add_action('wp_enqueue_scripts', 'scripts_styles'); 
function scripts_styles(){ 
    if (!is_admin()){ 
    if(is_page_template('Contact-Us.php')){ 
     wp_enqueue_style('bootstrapcss', 'http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css', array(), '3.3', 'all'); 
     wp_enqueue_style('maincss', BASE_URL . '/css/main.css'); 
     wp_enqueue_script('jquery'); 
     wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), null, true); 
     wp_enqueue_script('handlebars', 'https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js', array(), null, true); 
     wp_enqueue_script('addrows', get_template_directory_uri() . '/js/addrows.js', array(), null, true); 
     } 
    } 
} 

Answer 1

正確的方法來添加樣式表和腳本是使用內置函數WordPress的，wp_enqueue_scripts和wp_enqueue_styles。

在你的情況下添加腳本，你可以按照下面的代碼，並把它放在你的functions.php文件。

add_action('wp_enqueue_scripts', 'theme_scripts_and_styles', 999); 
functions theme_scripts_and_styles() { 
    if (!is_admin()) { 
    if(is_page_template('Contact-Us.php') { 
     wp_enqueue_script('jquery'); 
     wp_enqueue_script('bootstrap', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array('jquery'), null, true); 
     wp_enqueue_script('handlebars', get_stylesheet_directory_uri() . '/js/handlebars.min.js', array(), null, true); 
     wp_enqueue_script('addrows', get_stylesheet_directory_uri() . '/js/addrows.js', array(), null, true); 
     } 
    } 
}