如何在WordPress上只为移动设备加载脚本

Question

我正在尝试在WordPress移动端的头部加载一个简单的JavaScript代码。

我已经尝试了插件和编码，但似乎不在我的能力范围内，需要帮助:D

你好！

- Jung dev

---

（我指的是在header.php文件中） - Jung dev

Answer 1

function custom_load_scripts() { 
   // Load if not mobile 
   if ( ! wp_is_mobile() ) { 
      // Example script 
      wp_enqueue_script( 'script-name',get_template_directory_uri() . '/js/example.js', array (), '1.0.0', true ); 
      } 
}

add_action( 'wp_enqueue_scripts', 'custom_load_scripts' );

- sandeep kumar shaw

Answer 2

其他答案建议在enqueue脚本时使用WordPress函数wp_is_mobile()。但是要非常小心。如果您使用缓存插件或主机缓存PHP请求，则可能会使此方法无用。

相反，我建议加载JavaScript文件并使用JavaScript根据设备屏幕大小测试浏览器是否为移动设备。

这里是一个示例（使用jQuery）：

$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");

    if (isMobile.matches) {
        //Add your script that should run on mobile here
    }
 });

- Marc

Answer 3

你不应该直接将JS（或CSS）文件添加到你的header.php或footer.php文件中。

相反，你可以使用wp_enqueue_scripts钩子来排队和取消排队脚本和样式。

在该钩子上的函数内部，你将使用wp_enqueue_script()函数添加脚本。将第5个参数设置为true将把代码放在头部。

你会注意到第3个参数是一个数组，那是你的代码依赖的脚本数组，例如如果你的代码依赖于jQuery，你可以将其更改为array('jquery')

最后，WordPress有一个相对不错的检测移动设备的函数，方便地称为wp_is_mobile()。

因此，在我们排队脚本之前，我们只需要检查它是否返回true即可。

将此代码放置在您的functions.php文件中，当然在用您脚本的URL替换URL后。

add_action( 'wp_enqueue_scripts', 'jung_mobile_only_js');
function jung_mobile_only_js(){
    if( wp_is_mobile() ){
        wp_enqueue_script( 'jung-mobile-only-js', 'URL_TO_YOUR_JS_FILE_HERE', array(), '1.0', true );
    }
}

- Xhynk