WordPress中安装Magnific Popup后，如何点击图片直接打开灯箱？

核心思路 #

要实现点击图片直接打开Magnific Popup灯箱（跳过默认的图片预览/附件页跳转），需确保图片链接指向原图，并通过JS绑定灯箱事件、阻止默认跳转行为。

方法1：自定义JS绑定灯箱事件 #

将以下代码添加到WordPress的自定义JS区域（可通过外观 → 自定义 → 额外JS，或使用代码片段插件）：

jQuery(document).ready(function($) {
  // 匹配所有指向图片文件的链接（包含img子元素）
  $('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]').has('img').each(function() {
    // 添加Magnific Popup标记类并初始化
    $(this).addClass('magnific-lightbox').magnificPopup({
      type: 'image',
      closeOnContentClick: true, // 点击图片关闭灯箱
      closeBtnInside: false,     // 关闭按钮在灯箱外部
      mainClass: 'mfp-fade'      // 可选：添加淡入淡出过渡效果
    });

    // 阻止默认链接跳转，直接触发灯箱
    $(this).on('click', function(e) {
      e.preventDefault();
      $(this).magnificPopup('open');
    });
  });
});

方法2：适配Gutenberg编辑器图片块 #

如果使用古腾堡编辑器插入图片，可先通过PHP代码给图片链接自动添加灯箱类，再配合上述JS：
将以下代码添加到主题的functions.php文件中：

function add_magnific_class_to_gutenberg_images($block_content, $block) {
  // 仅处理古腾堡图片块，且链接指向媒体文件的情况
  if ($block['blockName'] === 'core/image' && isset($block['attrs']['linkDestination']) && $block['attrs']['linkDestination'] === 'media') {
    $block_content = str_replace('<a ', '<a class="magnific-lightbox" ', $block_content);
  }
  return $block_content;
}
add_filter('render_block', 'add_magnific_class_to_gutenberg_images', 10, 2);

方法3：解决默认行为冲突 #

若WordPress默认的图片跳转逻辑干扰灯箱触发，可先移除默认事件：

jQuery(document).ready(function($) {
  // 移除WordPress原生图片链接的点击事件
  $('body').off('click', 'a.wp-block-image__link');
  
  // 重新初始化Magnific Popup
  $('a.magnific-lightbox').magnificPopup({
    type: 'image'
  });
});

注意事项 #

• 确保Magnific Popup插件已激活，且JS/CSS资源正常加载。
• 修改代码后需清除网站缓存（若使用缓存插件）。
• 若主题自带其他灯箱插件，需先禁用避免冲突。

内容的提问来源于stack exchange，提问作者Andrea Parancola