用于 Wordpress post body 图片的 Magnific Popup

Question

我正在开发一个 WordPress 主题，我想知道是否有一种方法可以在 Magnific Popup 中打开编辑器插入 post body 的图像。因此，我通过 TinyMCE 编辑器在 post 中插入的任何图像都将在前端单击时在 Magnific Popup 上打开。

Answer 1

这个问题有几种不同的方法。我在下面概述了一些。

选项 1

过滤内容并应用 HTML 属性，该属性可以通过 Magnific Popup 定位。

我们可以take a cue from this article and leverage the_content挂钩。

The "the_content" filter is used to filter the content of the post after it is retrieved from the database and before it is printed to the screen.

functions.php

将以下内容添加到 functions.php。

function prefix_content_gallery( $content ) {
    global $post;

    $pattern     = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
    $replacement = '<ahref=. rel="lightbox" title="'.$post->post_title.'">';
    $content     = preg_replace( $pattern, $replacement, $content );

    return $content;
}
add_filter( 'the_content', 'prefix_content_gallery' );

JS

$('.entry-content').magnificPopup({
    type: 'image',
    delegate: '[rel="lightbox"]',
    gallery: {
        enabled: true
    }
});

View Example

---

选项 2

另一种选择是有选择地将 CSS class 分配给 link，这应该是图库的一部分。

1. 将媒体添加到 post 并在附件显示设置下将 "Link To" 设置为 "Media File"。

2. 将图像插入 post 后编辑图像。

3. 将 CSS class 添加到环绕图像的 link。

JS

$('.entry-content').magnificPopup({
    type: 'image',
    delegate: '.entry-gallery',
    gallery: {
        enabled: true
    }
});

View Example