如何为仅限移动设备加载特定的 Slider Revolution？答案

【问题标题】：How to load a specific Slider Revolution for mobile-only?如何为仅限移动设备加载特定的 Slider Revolution？
【发布时间】：2016-10-06 14:14:37
【问题描述】：

我知道revolution-slider 有一个响应式功能，但不幸的是它仍然会在桌面上加载所有移动资产，反之亦然，从而增加了页面加载时间。

所以我希望有 2 个不同的滑块，每个设备一个。

什么是最好的解决方案？

【问题讨论】：

标签： revolution-slider javascript php wordpress responsive revolution-slider

【解决方案1】：

这取决于您如何在页面中设置revslider。

我认为实现你真正想要（需要）的最好方法是使用带有条件规则的 php：

1) 在您的模板中使用基于移动检测的条件。这样可以避免同时加载 2 个revslider。

您可以为此目的使用wp_is_mobile() 条件wordpress 函数：

<?php
    if ( !wp_is_mobile() ) {
        echo do_shortcode('[rev_slider alias="my_desktop_slider"]');
    } 
    else
    {
        // mobile devices
        echo do_shortcode('[rev_slider alias="my_mobile_slider"]');
    }
?>

2) 在具有该条件的自定义短代码中：

if( !function_exists('rev_slider_detection') ) {

    function rev_slider_detection( $atts ) {

        extract(shortcode_atts(array(
            'alias' => '' // the alias name of your desktop rev-slider
        ), $atts));

        $output = '[rev_slider alias="';

        if ( !wp_is_mobile() ) {
            // For desktop only
            $output .= $alias . '"]';
        } else {
            // For mobile only
            $output .= $alias . '_mob"]';
        }

        return $output;
        // or (because untested)
        // return do_shortcode('" . $output . "');
    }

    add_shortcode('my_rev', 'rev_slider_detection');
}

您将这样使用它：[my_rev alias="my_revslider_alias_slug"] 并且您需要有 2 个 rev 滑块实例，第一个用于具有一些别名的桌面（例如 home），第二个用于具有相同名称的移动设备别名+ "_mob"（例如home_mob）。

参考：

您还可以制定更准确的脚本来检测平板电脑和手机，然后将其用作不同设备类型的条件。

【讨论】：

我认为应该提到的是，虽然这个答案中的一般方法是正确的，但wp_is_mobile() 是一个几乎没用的功能。它不应该是当前形式的 WordPress 的一部分。

【解决方案2】：

这对我有用。普通/桌面版只需要一个[短代码]，_mob 版本将被自动选择。

if( !function_exists('rev_slider_detection') ) {

    function rev_slider_detection( $atts ) {

        extract(shortcode_atts(array(
            'alias' => ''
        ), $atts));

        $output = '[rev_slider alias="';

        if ( !wp_is_mobile() ) {
            // For desktop only
            $output .= $alias . '"]';
        } else {
            // For mobile only
            $output .= $alias . '_mob"]';
        }

        return do_shortcode($output);
        // or (try this if not working)
        // return $output;
    }

    add_shortcode('my_rev', 'rev_slider_detection');
}

【讨论】：

【解决方案3】：

echo do_shortcode($output); // 适合我

【讨论】：