WordPress非插件方式实现图片lightbox效果

WordPress插件越多，越不是好事情，非插件开发功能值得提倡。lightbox效果非插件方式集成到wordpress来看看。

引入JS需要用到 wp_enqueue_script：

wp_enqueue_script( 'jsdelivr-script','https://cdn.jsdelivr.net/combine/npm/[email protected]', array('jquery'), null, true );

引入CSS需要用到 wp_enqueue_style：

wp_enqueue_style( 'jsdelivr-lightbox2-style','https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightbox.min.css',array(),null,'all');

让文章页的图片实现lightbox效果：

$(".single .post-content img").each(function () {
  var imgWidth = $(this).width();
  var imgSrc = $(this)[0].src;
  var imgA = $(this).parent("a");
  var imgALenght = $(this).parent("a").length;
  var imgAlt = $(this).attr("alt");

  // 媒体文件增加放大镜
  if (imgWidth > 320) {
    $(this).css("cursor", "zoom-in");
  }

  // 链接到：媒体文件
  if (imgWidth > 320 && imgALenght == 1) {
    imgA.attr("data-lightbox", "lightbox");
    if (imgAlt != "") {
      imgA.attr("data-title", imgAlt);
    }
  }

  // 链接到：无，并且媒体文件 alt 不为空
  if (imgWidth > 320 && imgALenght == 0 && imgAlt != "") {
    $(this).wrap(function () {
      return '<a href=' + imgSrc + ' data-lightbox="lightbox" data-title=' + imgAlt + '></a>';
    });
  }

  // 链接到：无，并且媒体文件 alt 为空
  if (imgWidth > 320 && imgALenght == 0 && imgAlt == null) {
    $(this).wrap(function () {
      return '<a href=' + imgSrc + ' data-lightbox="lightbox"></a>';
    });
  }
});

这里有两个参数需要自己修改：.single .post-content 是文章页调用 the_content() 函数的父级 class。imgWidth > 320这是判断了大于320px的图片才增加lightbox效果，其实可以设置更大，主要考虑的是手机端，没有必要用lightbox。