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功能不再有效。

即使我按照该链接中的说明操作，我知道我做错了。

任何想法我做错了什么？

以下是我尝试在header.php上添加这些js库的方法

我的代码就在标题钩子下方。

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);
      }
   }
}

如何让我的WordPress模板识别我的JS框架？

1 个答案: