根据窗口大小更改主题

时间:2013-08-21 作者:blaise

我想通过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次。或者我分析错了。

你会怎么做?或者如何更正我的代码。此外,您对基于窗口浏览器大小为不同主题提供服务的这种方法的反馈也很感谢。

我不喜欢使用插件,我知道它的存在。

谢谢

1 个回复
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 相反

确保不等于特定宽度,请尝试小于或等于<=.

代替== 具有<=

结束

相关推荐

Stumping-AJAX响应返回0

我似乎想不出来。无论我做什么,ajax调用都会不断给出0响应。我已经测试了我的PHP功能,它工作得很好,但每当我通过ajax调用它时,我都没有收到任何响应(只有0响应)。非常感谢您的帮助/建议。add_action(\'wp_ajax_get_ldapattr\', \'get_ldap_attr\'); add_action(\'wp_ajax_nopriv_get_ldapattr\', \'get_ldap_attr\'); function get_ldap_attr()