javascript - Glidejs 与 Wordpress

Question

我想为我的 Wordpresse 网站使用 Glide.JS。我阅读了文档，并为 WP 转置了解释。

https://glidejs.com/docs/setup/

我在我的主题文件夹中安装了“npm”，并且在我的 fonction.php 文件夹中编写了代码：

我在 single.php 中的代码：

                    <div class="glide">
                    <?php 
                        $images = get_field('galery');
                        if( $images ): ?>
                            <div class="glide__track" data-glide-el="track">
                                <ul class="glide__slides">
                                    <?php foreach( $images as $image ): ?>
                                        <li class="glide__slide">
                                            <a href="<?php echo esc_url($image['url']); ?>">
                                                <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                                            </a>
                                            <p><?php echo esc_html($image['caption']); ?></p>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                            <div class="glide__arrows" data-glide-el="controls">
                                <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
                                <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
                            </div>
                            
                        <?php endif; ?>
                    </div>
                    <script>
                        import Glide from '@glidejs/glide'
                        new Glide('.glide').mount()
                    </script>

我有一个结果，但我的控制台中有这个错误：

未捕获的语法错误：导入声明只能出现在模块的顶层

我相信我的问题是在这个解释中，我不知道如何为 Wordpress

谢谢 ！

标签： javascriptwordpresssyntax-errorglidejs

Answer 1

这是因为您在 single.php 的 script 标签中使用了 import 语句。如屏幕截图所示，您只能在 ES 模块中使用 import 语句。

因为您在functions.php 中将脚本排入队列，所以glide.js 是全局可用的，您应该从脚本标签中删除import 语句并且glide 将被初始化。

或者，您可以利用此处描述的 CDN https://glidejs.com/docs/setup/来托管代码。