Question

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

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

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

这些页面是用html创建的，它们都有效。创建自定义页面模板，设计与html变体相同。

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

Here is the official guide安装此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');

我也试过没有数组（'jquery'） - 没有变化。我也不确定在哪里/如何放置“async”部分（根据开发人员的建议）。

对于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文件中以及插入标题/中页脚插件。

Answer 1

所以我想出了自己的解决方案。首先，为WordPress添加脚本的经典（和推荐）方式是以某种方式失败。所以我决定将脚本放在header.php文件中，然后关闭head标签并且不使用异步。我还将脚本移动到子主题的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>

这一切都像魅力一样。

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

1 个答案: