Ändern Sie das Thema basierend auf der Fenstergröße

Ich möchte eine Browserinfo (Fensterbreite) über AJAX an den Server senden. Der Server muss nicht mit Daten antworten, ändern Sie das Design jedoch nur basierend auf dieser Fensterbreite.

Das ist mein Versuch:

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); } }); }); 

functionen.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'); 

Mir fällt es schwer, mit der Tatsache mmf_change_theme , dass die function mmf_change_theme süchtig ist, also wird sie dreimal aufgerufen. Oder ich analysiere falsch.

Wie würdest du es machen? Oder wie man meinen Code korrigiert. Auch Sie Feedback zu einer solchen Methode, um verschiedene Themen basierend auf Fenster-Browser-Größe zu dienen, wird geschätzt.

Ich bevorzuge es, ein Plugin zu verwenden, das ich kenne.

Vielen Dank.

Solutions Collecting From Web of "Ändern Sie das Thema basierend auf der Fenstergröße"

Ihr Code funktioniert tatsächlich für mich und ändert das Thema entsprechend der aktuellen Breite.

Aber ich denke, du solltest etwas wie unten brauchen:

Für dein 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); } }); }); 

Verwenden Sie die absolute URL, manchmal wird die Datei ” admin-ajax.php ” aufgrund der falschen relativen URL nicht gefunden.

Für 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'); 

Verwenden Sie keine wp_print_scripts da dies nicht empfohlen wird. Verwenden wp_enqueue_scripts stattdessen wp_enqueue_scripts .

Stellen Sie sicher, dass sie nicht der spezifischen Breite entspricht, versuchen Sie < = oder kleiner als oder gleich.

Nach dem Ändern == dies zu < = this. Arbeitete zu mir.