给 Elementor 文章列表模块添加视频弹出和无限加载效果

使用Elementor免费版实现视频弹出和无限加载效果

我是小本本，在使用WordPress的过程中，经常需要对网站进行优化和美化，其中用到的Page Builder插件也是Elementor，因为它易于上手且免费版就已经有非常多的功能。

实现视频弹出和无限加载效果所需的JavaScript库

要实现视频弹出效果和无限加载效果，我们需要借助JavaScript库。在本文中，我们使用的是MagnificPopup和jQueryInfiniteAjaxScroll这两个库。当然，我们在主题中已经注册了这两个库，所以不需要额外的注册代码。

    add_action('wp_enqueue_scripts',function()
    {
        if(is_page(178)){
            wp_enqueue_script('wprs-jquery-ias');
            wp_enqueue_style('wprs-magnific-popup');
            wp_enqueue_script('wprs-magnific-popup');
        }
    });

由于我们只需要在特定页面实现这两个效果，所以在添加代码时需要加入判断，只有当前页面是我们需要的页面时，才添加这两个JS库。

添加Popup和无限加载效果JS代码到所需的页面

由于我们已经在上面的代码中引入了所需的JavaScript库，现在将实现这两个效果的JS代码添加到对应页面的页脚即可。当然，如果您喜欢，也可以将代码添加到网站的JS文件中进行管理。

    add_action('wp_footer',function()
    {
        if(!is_page(178)){
            return;
        }
        ?>
        
            jQuery(document).ready(function($){
                function activatePopup(){
                    $('#feedback-videos.elementor-post__thumbnail__link').magnificPopup({
                        disableOn: 700,
                        type: 'iframe',
                        mainClass:'mfp-fade',
                        removalDelay:160,
                        preloader:false,
                        fixedContentPos:false,
                    });
                }
                activatePopup();
                varias=jQuery.ias({
                    container:'.elementor-posts-container',
                    item:'article.elementor-post',
                    pagination:'nav.elementor-pagination',
                    next:'nav.elementor-paginationa.next',
                });
                ias.extension(newIASSpinnerExtension());
                ias.extension(newIASTriggerExtension({offset:2}));
                ias.extension(newIASNoneLeftExtension({text:'Your reached the end'}));
                ias.extension(newIASPagingExtension({text:'ViewMoreVideos'}));
                ias.extension(newIASHistoryExtension({prev:'#paginationa.prev'}));
                ias.on('rendered',function(items){
                    activatePopup();
                });
            });
        
        <?php
    });

有了上面的代码，页面列表无限加载的效果已经实现了。不过，视频弹出还需要进行进一步的处理才能实现。

修改文章链接为视频链接

MagnificPopup弹出的视频直接使用链接中的视频地址，因此我们需要修改文章链接为视频链接地址。我们可以通过post_type_link这个Filter来修改文章链接地址。在下面的代码中，我们把「feedback」文章类型的链接修改为「_video_url」这个文章自定义字段中设置的视频链接。

    add_filter('post_type_link',function($permalink,$post,$leavename)
    {
        if($post->post_type==='feedback'){
            $video_url=get_post_meta($post->ID,'_video_url',true);
            if($video_url){
                $permalink=$video_url;
            }
        }
        return$permalink;
    },999,3);

至此，在Elementor中实现视频弹出和无限加载的功能已经全部实现，主要使用了wp_enqueue_scripts Action来加载JS库，使用wp_footer Action来添加实例JS代码，使用了post_type_link Filter来修改文章链接为视频链接。整个过程没有修改WordPress或Elementor的核心代码，因此不会影响WordPress或Elementor升级，兼容性也非常好。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。