Wordpress的壮观弹出窗口发布身体图像 [英] Magnific Popup for Wordpress post body images

问题描述

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

I am working on a WordPress theme and I was wondering if there is a way of opening images in Magnific Popup which are inserted on a post body by the editor. So, any image I insert in a post through TinyMCE editor will open on Magnific Popup when clicked on the front end.

推荐答案

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

There are a few different approaches to this question. I've outlined a couple below.

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

Filter the content and apply a HTML attribute that can be targeted with Magnific Popup.

我们可以从本文并利用 the_content 钩子.

We can take a cue from this article and leverage the_content hook.

"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 = '<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
    }
});

查看示例

另一种选择是有选择地将CSS类分配给应该属于图片库的链接.

Another option would be to selectively assign a CSS class to links which should be part of the image gallery.

1. 添加要发布的媒体，然后在附件显示设置"下将链接到"设置为媒体文件".

1. 将图像插入帖子后，对其进行编辑.

1. 在包装图像的链接中添加CSS类.

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

查看示例

这篇关于Wordpress的壮观弹出窗口发布身体图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！