使用JS代码为WordPress加入Fancybox与滚动横幅

本文最后更新于 395 天前，其中的信息可能已经有所发展或改变。

这几天折腾RGN的时候，突然发现博客的Lightbox似乎有问题，局部载入后的图片并没有lightbox的标记，因此无法弹出幻灯片。之前使用了Lightbox插件，因此现在想办法使用代码来替代它。

首先在header/footer.php中引入js与css

<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.css">
<script src="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.js"></script>
					<script type="text/javascript">
    $(document).ready(function () {
        $( ".fancybox").fancybox();
    });
</script>

JavaScript

注意默认主题已经引入了jquery.min.js，初始化后所有附有data-fancybox="gallery"标记的图片都将应用fancybox，如果需要将之前的图片全部替换，这里就用到了正则，将下面代码加入function.php

function add_fancybox_to_images($content) {
    $pattern = '/(<img.*?src="([^"]*)".*?class="[^"]*wp-image[^"]*".*?>)/i';
    $replacement = '<a href="$2" data-fancybox="gallery">$1</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter('the_content', 'add_fancybox_to_images');

JavaScript

刷新缓存后可以发现fancybox已经生效，将初始化代码修改如下：

<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.css">
<script src="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $( ".fancybox").fancybox();
    });
</script>

JavaScript

RGN为了展示最新评测，通常在首页展示滚动横幅，之前也是图省事用了插件，现在改成代码的形式：

<!-- Bootstrap CSS -->
    <link href="https://772123.xyz/cdn/RGN%20%E5%AE%98%E6%96%B9%E7%BD%91%E7%AB%99%20-%20Ripple%20Games%20Network_files/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery and Bootstrap JS -->    
    <link rel="stylesheet" href="https://772123.xyz/cdn/RGN%20%E5%AE%98%E6%96%B9%E7%BD%91%E7%AB%99%20-%20Ripple%20Games%20Network_files/bootstrap.min.css">
    <script src="https://772123.xyz/cdn/RGN%20%E5%AE%98%E6%96%B9%E7%BD%91%E7%AB%99%20-%20Ripple%20Games%20Network_files/popper.min.js"></script>
<style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
      background-color: #f5f5f5;
    }

    
    .carousel img {
      max-height: 400px;
      object-fit: contain;
      width: 100%;
    }
   
</style>


<div class="content-wrapper">

  

    <section class="latest-review">
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://772123.xyz/uploads/2023/03/1679883655-%E9%9C%8D%E6%A0%BC%E6%B2%83%E8%8C%A8.png-webm" class="d-block w-100 carousel" alt="...">
          </div>
          <div class="carousel-item">
            <img src="https://772123.xyz/uploads/2023/03/1679883619-9-8.png-webm" class="d-block w-100 carousel" alt="...">
          </div>
          <div class="carousel-item">
            <img src="https://772123.xyz/uploads/2023/03/1679720302-weixin-2.png-webm" class="d-block w-100 carousel" alt="...">
          </div>

        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

    </section>

      </div>
 <!-- Scripts -->
<script src="https://772123.xyz/cdn/RGN%20%E5%AE%98%E6%96%B9%E7%BD%91%E7%AB%99%20-%20Ripple%20Games%20Network_files/popper.min.js"></script>
<script src="https://772123.xyz/cdn/RGN%20%E5%AE%98%E6%96%B9%E7%BD%91%E7%AB%99%20-%20Ripple%20Games%20Network_files/bootstrap.min.js"></script>