用于Wordpress的Magnific Popup发布身体图像

时间:2016-02-09 13:40:55

标签: wordpress post tinymce magnific-popup

我正在研究一个WordPress主题,我想知道是否有一种方法可以在Magnific Popup中打开图像,这些图像由编辑器插入到帖子体上。因此,当我点击前端时,我通过TinyMCE编辑器在帖子中插入的任何图像都将在Magnific Popup上打开。

1 个答案:

答案 0 :(得分:0)

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

选项1

过滤内容并应用可以使用Magnific Popup定位的HTML属性。

我们可以take a cue from this article并利用the_content挂钩。

  

“the_content”过滤器用于过滤帖子的内容   从数据库中检索之后和​​打印之前   屏幕。

的functions.php

将以下内容添加到functions.php

function prefix_content_gallery( $content ) {
    global $post;

    $pattern     = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>';
    $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类分配给应该是图像库一部分的链接。

  1. 添加媒体发布并在“附件显示设置”下将“链接到”设置为“媒体文件”。
  2. enter image description here

    1. 将图像插入帖子后编辑图像。
    2. enter image description here

      1. 将CSS类添加到包装图像的链接。
      2. enter image description here

        JS

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

        View Example