如何在BST WordPress入门主题中集成baguetteBox.js？

我正在尝试为个人项目修改WordPress主题入门BST。

在其中, 我想要一个带有引导程序元素的自定义页面模板。此页面将以画廊形式显示各种图像。

我还需要导入baguetteBox.js插件, 以便可以使用其灯箱效果。

这些页面已使用html创建, 并且可以正常工作。将创建自定义页面模板, 并且设计与html变体相同。

但是, 在WordPress中导入脚本(通过使用wp enque和wp register)时, 控制台无法定义baguetteBox。所以我想我做错了。

这是安装此Bootstrap插件的官方指南：

我使用的排队代码位于bst-master / function / enqueues.php文件中：

对于baguetteBox.min.js：

wp_register_script('baguetteBox-js', get_template_directory_uri() . '/js/baguetteBox.min.js', false, null, true, array('jquery'));
wp_enqueue_script('baguetteBox-js');

我也尝试了没有array(‘jquery’)-没有变化。我也不确定在哪里/如何放置”异步”部分(由开发人员推荐)。

对于baguetteBox.min.css：

wp_register_style('baguetteBox-css', get_template_directory_uri() . '/css/baguetteBox.min.css', false, null);
wp_enqueue_style('baguetteBox-css');

问题出在<script> baguetteBox.run(‘。tz-gallery’, {filter：/.angelov。+ \。(gif | jpe？g | png | webp)/ i}); </ script>我无法弄清楚放置的方式和位置, 因此我只是尝试将其添加到页面模板php文件中以及插入页眉/页脚插件中。

#1

所以我想出了自己的解决方案。首先, 经典的(推荐的)为WordPress添加脚本的方法以某种方式失败了。因此, 我决定将脚本放置在head.close头标记之前的header.php文件中, 并且不进行异步处理。我还将脚本移到了子主题的js文件夹中。看起来像这样：

    <script src="<?php echo get_stylesheet_directory_uri();?>/js/baguetteBox.min.js"> </script>

接下来, 我将以下代码放在最后一个<div>标记之后的自定义页面模板文件中：

    <script>baguetteBox.run('.tz-gallery', {filter:/.angelov.+\.(gif|jpe?g|png|webp)/i});</script>

这一切都像魅力一样。