Php 带有Wordpress的Lightbox库

我正试图使用这个lightbox项目在Wordpress中创建一个图像库。我按照指南添加了它，但它不起作用，控制台也没有显示任何错误

<div class="hvrbox product2iul">
    <a href="<?php echo get_template_directory_uri() ?>/images/granite.png" data-lightbox="image01" data-title="Granite>
      <img src="<?php echo get_template_directory_uri() ?>/images/granite.png" alt="Nature">
    </a>
    <div class="hvrbox-layer_top">
      <div class="hvrbox-text">Granite</div>
    </div>
  </div>

花岗岩

---

这是我的functions.php，除了lighbox之外，所有其他的东西都可以工作

<?php
       add_filter('show_admin_bar', '__return_false');

       function my_scripts_method() {
       wp_enqueue_script(
      'script-name1',
       get_stylesheet_directory_uri() . '/js/custom.js'
   );
       wp_enqueue_script(
       '  script-name2',
       get_stylesheet_directory_uri() . '/js/slick.js'
     );
       wp_enqueue_style(
       'script-name3',
       get_stylesheet_directory_uri() . '/css/slick.css'
    );
       wp_enqueue_style(
       'script-name4',
       get_stylesheet_directory_uri() . '/css/slick-theme.css'
    );
       wp_enqueue_script(
      'script-name5',
       get_stylesheet_directory_uri() . '/js/jquery.visible.min.js'
    );
      wp_enqueue_style(
     'script-name6',
      get_stylesheet_directory_uri() . '/css/lightbox.css'
    );
      wp_enqueue_script(
     'script-name7',
      get_stylesheet_directory_uri() . '/js/lightbox.js'
    );
 }
    add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

 <?php
       add_filter('show_admin_bar', '__return_false');

       function my_scripts_method() {
       wp_enqueue_script(
      'script-name1',
       get_stylesheet_directory_uri() . '/js/custom.js'
   );
       wp_enqueue_script(
       '  script-name2',
       get_stylesheet_directory_uri() . '/js/slick.js'
     );
       wp_enqueue_style(
       'script-name3',
       get_stylesheet_directory_uri() . '/css/slick.css'
    );
       wp_enqueue_style(
       'script-name4',
       get_stylesheet_directory_uri() . '/css/slick-theme.css'
    );
       wp_enqueue_script(
      'script-name5',
       get_stylesheet_directory_uri() . '/js/jquery.visible.min.js'
    );
      wp_enqueue_style(
     'script-name6',
      get_stylesheet_directory_uri() . '/css/lightbox.css'
    );
      wp_enqueue_script(
     'script-name7',
      get_stylesheet_directory_uri() . '/js/lightbox.js'
    );
 }
    add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>

---

在functions.php文件中包含以下内容。在不知道具体设置的情况下，可能需要进行一些调整。有关更具体的说明，请参阅

functions.php

function custom_enqueue_scripts() {

    wp_enqueue_script( 'lightbox-js', get_template_directory_uri() . '/js/lightbox.js', array('jquery'));

    wp_enqueue_style( 'lightbox-css', get_template_directory_uri() . '/css/lightbox.css');

}

add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );

这是我的functions.php，除了lighbox之外，所有其他的东西都可以工作

<?php
       add_filter('show_admin_bar', '__return_false');

       function my_scripts_method() {
       wp_enqueue_script(
      'script-name1',
       get_stylesheet_directory_uri() . '/js/custom.js'
   );
       wp_enqueue_script(
       '  script-name2',
       get_stylesheet_directory_uri() . '/js/slick.js'
     );
       wp_enqueue_style(
       'script-name3',
       get_stylesheet_directory_uri() . '/css/slick.css'
    );
       wp_enqueue_style(
       'script-name4',
       get_stylesheet_directory_uri() . '/css/slick-theme.css'
    );
       wp_enqueue_script(
      'script-name5',
       get_stylesheet_directory_uri() . '/js/jquery.visible.min.js'
    );
      wp_enqueue_style(
     'script-name6',
      get_stylesheet_directory_uri() . '/css/lightbox.css'
    );
      wp_enqueue_script(
     'script-name7',
      get_stylesheet_directory_uri() . '/js/lightbox.js'
    );
 }
    add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

 <?php
       add_filter('show_admin_bar', '__return_false');

       function my_scripts_method() {
       wp_enqueue_script(
      'script-name1',
       get_stylesheet_directory_uri() . '/js/custom.js'
   );
       wp_enqueue_script(
       '  script-name2',
       get_stylesheet_directory_uri() . '/js/slick.js'
     );
       wp_enqueue_style(
       'script-name3',
       get_stylesheet_directory_uri() . '/css/slick.css'
    );
       wp_enqueue_style(
       'script-name4',
       get_stylesheet_directory_uri() . '/css/slick-theme.css'
    );
       wp_enqueue_script(
      'script-name5',
       get_stylesheet_directory_uri() . '/js/jquery.visible.min.js'
    );
      wp_enqueue_style(
     'script-name6',
      get_stylesheet_directory_uri() . '/css/lightbox.css'
    );
      wp_enqueue_script(
     'script-name7',
      get_stylesheet_directory_uri() . '/js/lightbox.js'
    );
 }
    add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>


您是否尝试检查页面以查看您添加的javascript和css是否已排队？请向我们展示您用于将lightbox包含到wordpress的代码。您是否通过模板functions.php和插件将css和js排队？您是否确保jquery作为其依赖项加载？Wordpress需要一些额外的步骤，然后使用纯HTML才能使库正常工作。这是我添加的，添加到哪里了？在page-products.php的开头，这里是在lightbox.js队列中添加jquery依赖项的代码尝试。wp_enqueue_script（'script-name7'，get_stylesheet_directory_uri（）。/js/lightbox.js'，array（'jquery'）；但当我点击照片时，图片库不会从声音中弹出，你必须进行一些调试。我建议使用firefox或chromes inspect工具查看页面源代码，看看脚本是否被加载。根据插件文档验证所有css选择器是否正确。单击映像时检查控制台，查看事件期间是否抛出任何错误，以及上述所有操作是否正常。通过禁用所有插件和测试，确保没有插件冲突。我还注意到您缺少数据标题属性末尾的引号。目前是data title=“Granite>，应该是data title=“Granite”>