如何在 wordpress 上仅为移动设备加载脚本答案

【问题标题】：How to load a script only for mobile on wordpress如何在 wordpress 上仅为移动设备加载脚本
【发布时间】：2018-03-06 20:26:33
【问题描述】：

我正在尝试在 wordpress 上加载一个简单的 javascript 代码，只是在移动设备的标题中。

我已经尝试过插件和编码，但它似乎不在我的范围内，需要帮助：D

Ciao！

【问题讨论】：

（显然是在 header.php 上）

标签： wordpress mobile

【解决方案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' );

【讨论】：

【解决方案2】：

其他答案建议在对脚本进行排队时使用 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
    }
 });

【讨论】：

【解决方案3】：

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

您可以做的是使用wp_enqueue_scripts 钩子将脚本和样式入队和出队。

在该挂钩的函数中，您将使用wp_enqueue_script() 函数添加脚本。将第 5 个参数设置为 true 会将代码放在标题中。

您会注意到第三个参数是一个数组，它是您的代码所依赖的脚本数组，例如如果您的代码依赖于 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 );
    }
}

【讨论】：