我正在尝试在WordPress移动端的头部加载一个简单的JavaScript代码。
我已经尝试了插件和编码,但似乎不在我的能力范围内,需要帮助:D
你好!
我已经尝试了插件和编码,但似乎不在我的能力范围内,需要帮助:D
你好!
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' );
其他答案建议在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
}
});
你不应该直接将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 );
}
}