我想通过AJAX向服务器发送浏览器信息(窗口宽度)。服务器不需要响应任何数据,但是,只需根据窗口宽度更改主题即可。
这是我的尝试:
javascript
var $ = jQuery;
$(document).ready(function() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$.ajax( {
type: "POST",
url: ".../wp-admin/admin-ajax.php",
data: {
action: \'ajax_action\',
windowWidth: windowWidth,
},
success: function(data, textStatus, XMLHttpRequest) {
alert(\'success \' + data); // might not be useful.
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
functions.php
function mmf_enqueue_scripts() {
if( !is_admin() ):
wp_enqueue_script(\'winsize-detect\');
endif;
}
add_action( \'wp_print_scripts\', \'mmf_enqueue_scripts\' );
function ajax_action() {
if( isset( $_POST[\'windowWidth\'] ) ) {
return $_POST[\'windowWidth\'];
}
return 0;
}
function mmf_change_theme($theme) {
// to make AJAX run only before this function
add_action(\'wp_ajax_ajax_action\', \'ajax_action\');
add_action(\'wp_ajax_nopriv_ajax_action\', \'ajax_action\');
$width = ajax_action();
if( $width == 320 ) {
$theme = \'twentytwelve\';
// if I echo the width here I get: 3203203203200 (if width=320)
}
else {
$theme = \'twentythirteen\';
// if I echo the width here I get: 7707707707700 (if width=770)
}
return $theme;
}
add_filter(\'template\', \'mmf_change_theme\');
add_filter(\'option_template\', \'mmf_change_theme\');
add_filter(\'option_stylesheet\', \'mmf_change_theme\');
我很难处理函数
mmf_change_theme
被钩住了,所以被称为3次。或者我分析错了。
你会怎么做?或者如何更正我的代码。此外,您对基于窗口浏览器大小为不同主题提供服务的这种方法的反馈也很感谢。
我不喜欢使用插件,我知道它的存在。
谢谢
SO网友:Rahil Wazir
您的代码实际上适合我,它正在根据当前宽度更改主题。
但我认为您应该进行如下调整:
对于您的JavaScript:
var $ = jQuery;
$(document).ready(function() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$.ajax( {
type: "POST",
url: "http://example.com/wp-admin/admin-ajax.php", // Must use absolute url
data: {
action: \'ajax_action\',
windowWidth: windowWidth,
},
success: function(data, textStatus, XMLHttpRequest) {
alert(\'success \' + data); // might not be useful.
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
使用绝对URL,有时它找不到
admin-ajax.php
文件,因为相对URL的处理不正确。
对于functions.php
function mmf_enqueue_scripts() {
if( !is_admin() ):
wp_enqueue_script(\'winsize-detect\');
endif;
}
add_action( \'wp_enqueue_scripts\', \'mmf_enqueue_scripts\' ); // Use `wp_enqueue_scripts` instead of `wp_print_scripts`
function ajax_action() {
if( isset( $_POST[\'windowWidth\'] ) ) {
return $_POST[\'windowWidth\'];
}
return 0;
}
function mmf_change_theme($theme) {
// to make AJAX run only before this function
add_action(\'wp_ajax_ajax_action\', \'ajax_action\');
add_action(\'wp_ajax_nopriv_ajax_action\', \'ajax_action\');
$width = ajax_action();
//use \'<=\'
// This might be your mistake, it worked for me.
if( $width <= 320 ) {
$theme = \'twentytwelve\';
// if I echo the width here I get: 3203203203200 (if width=320)
}
else {
$theme = \'twentyteleven\';
// if I echo the width here I get: 7707707707700 (if width=770)
}
return $theme;
}
add_filter(\'template\', \'mmf_change_theme\');
add_filter(\'option_template\', \'mmf_change_theme\');
add_filter(\'option_stylesheet\', \'mmf_change_theme\');
不使用
wp_print_scripts
因为不推荐。使用
wp_enqueue_scripts
相反
确保不等于特定宽度,请尝试小于或等于<=
.
代替==
具有<=