Question

所以我是一个完全菜鸟，试图构建自己的wordpress主题！

我想在页面上添加一个可以通过anime.js进行动画处理的形状。但是，我不知道如何进行操作并实际输入JavaScript来获取动画形状。

这是到目前为止我在functions.php文件中尝试过的内容：

function tabula_rasa_scripts() {

// Enqueue Google fonts Roboto
wp_enqueue_style(   'tabula_rasa-fonts', tabula_rasa_fonts_url());

//Enqueue anime.js
wp_enqueue_script( 'tabula_rasa_anime', get_template_directory_uri() . '/js/businesscard.js', array(), false, false );

wp_enqueue_style( 'tabula_rasa-style', get_stylesheet_uri() );

wp_enqueue_script( 'tabula_rasa-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

wp_enqueue_script( 'tabula_rasa-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}
}
 add_action( 'wp_enqueue_scripts', 'tabula_rasa_scripts' );

这就是索引文件中的内容（原始形状显示出来了！）

<div id="primary" class="content-area">

    <main id="main" class="site-main">

        <div id="svgAttributes">
            <svg class="businesscard" width="128" height="128" viewBox="0 0 128 128">
                <polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100 " fill=orange></polygon>
            </svg>
        </div>

这是我的JavaScript文件的外观：

/*jshint esversion: 6 */

import anime from 'animejs';

anime({
  targets: '#svgAttributes svg polygon',
  points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
 });

因此，我假设将其放在.php文件中实际上并不起作用，因为它是在标头中调用的。但是，如果不在functions.php文件中，我将不知道在哪里实际调用javascript文件。

另外，也许这很有用，但是Firefox开发工具向我抛出此错误：

SyntaxError: import declarations may only appear at top level of a module

但是，我不知道那是什么意思！

谢谢您的帮助！

Answer 1

因此，我在@ Core972的评论中提供了一些指导，从而找到了解决自己问题的方法！

如果您正在使用functions.php文件来排队脚本（这是一种很好的做法），那么在将自己的动画文件导入页脚之前，您还必须实际上导入anime.js本身。

以前，我试图导入anime.js，而没有将.zip文件提取到主题文件夹中。这次我从github下载文件，将其放在正确的文件夹中，然后从functions.php调用它。

//Introduce animejs
wp_enqueue_script( 'tabula_rasa-anime', get_template_directory_uri() . '/anime-master/anime.min.js', array(), false, true );

//Enqueue animejs businesscard
wp_enqueue_script( 'tabula_rasa-businesscard', get_template_directory_uri() . '/js/businesscard.js', array(), false, true );

请注意最后一个值如何为“ true”，该值告诉functions.php文件在页脚而不是页眉中加载该值。这也是一个好习惯，因为最后加载动画（因为它们通常是价值最低的）。

然后，您可以删除.js文件中的导入调用，这将消除Firefox调试器向您抛出的导入错误。

如何将animejs导入我的wordpress主题？

1 个答案: