Ajax-Vorlage: Wie wird mit dem Kopfabschnitt verfahren?

Ich weiß, es sind leichte Dinge , aber ich bin neu und ich kann nicht verstehen, welches der beste Ansatz ist.

Hintergrund

Die Vorlage, an der ich arbeite, ist ein Dual Theme Desktop / Mobile, basierend auf UA Sniffing. Jetzt habe ich die Reaktionsfähigkeit durch enquire.js und Ajax und Everything geändert: Ich habe Probleme, die Dinge richtig zu machen, es ist das erste Mal, dass ich mit Ajax zu tun habe.

Szenario

Meine Vorlage wird dynamisch durch Ajax geladen. Wenn Sie versuchen, die Breite des Fensters unter 1080px zu ändern, wird die mobile Vorlage angezeigt. (Es wird auf jedem mobilen Gerät angezeigt, aber das ist nicht wichtig für uns atm)

Daher wurde die Reaktionsfähigkeit mit Hilfe von enquire.js und ajax Calls implementiert (siehe Code unten).

Ursprünglich war das Template statisch, so dass im Moment der gesamte Abschnitt noch bedingt durch if-statementen in functions.php geladen wird. (zB sollte das Videoskript nur auf bestimmten Seiten der Desktop-Version geladen werden)

Probleme

  1. Die mobile Vorlage, die mit dem Stylesheet mobile.css gestaltet wurde, scheint keine Wirkung zu haben. Sollte ich die Art und Weise ändern, wie Stylesheets und Skripte aufgrund der neuen Ajax / Inquire-Sache geladen werden?
  2. Der Inhalt, dh the_content (), wird nicht angezeigt. Warum? Und wie man es in meinem Szenario lädt? gefunden! – document.write (data) hat alles geschrieben! Ich habe $ (“body”) hinzugefügt. Append (data); stattdessen

Folgt dem Code

functionen.php

//Load Stylesheet function add_desktop_styles() { wp_register_style('reset', get_template_directory_uri().'/reset.css'); wp_register_style('style', get_template_directory_uri().'/style.css', array('reset') ); wp_enqueue_style('style'); //$mobile = mobile_device_detect(); //if ($mobile==true) { if (wp_is_mobile()) { wp_register_style('mobile', get_template_directory_uri().'/mobile.css', array('reset') ); wp_enqueue_style('mobile'); } } add_action('wp_head', 'add_desktop_styles', '1'); //UA Sniffing function devicecontrol() { require_once('_/inc/mobile_device_detect.php'); } add_action('wp_loaded', 'devicecontrol', '2'); //AJAX function your_function_name() { wp_enqueue_script( 'function', get_template_directory_uri().'/_/js/my_js_stuff.js', array('jquery','enquire'), true); wp_localize_script( 'function', 'my_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); } add_action('template_redirect', 'your_function_name'); function get_mobile_template() { include('templates/pages/homepage-phone.php'); die(); } add_action("wp_ajax_nopriv_get_mobile_template", "get_mobile_template"); add_action("wp_ajax_get_mobile_template", "get_mobile_template"); function get_desktop_template() { if (!wp_is_mobile()) { include('templates/pages/homepage-computer.php'); } else { include('templates/pages/homepage-phone.php'); } die(); } add_action("wp_ajax_nopriv_get_desktop_template", "get_desktop_template"); add_action("wp_ajax_get_desktop_template", "get_desktop_template"); //jQuery if ( !function_exists( 'core_mods' ) ) { function core_mods() { if ( !is_admin() ) { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', ( "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ), false); wp_enqueue_script( 'jquery' ); } } add_action( 'wp_enqueue_scripts', 'core_mods','2' ); } //Scripts Mobile function add_mobile_scripts() { wp_register_style('video-css', get_template_directory_uri().'/_/js/videojs/video-js.css'); wp_enqueue_style('video-css'); wp_register_script( 'video-js', get_template_directory_uri().'/_/js/videojs/video.js', null, false ); wp_enqueue_script( 'video-js' ); } function isMobile() { //$mobile = mobile_device_detect(); ///if ($mobile==true) if (wp_is_mobile()) { add_mobile_scripts(); } } add_action( 'wp_enqueue_scripts', 'isMobile', '1' ); //Scripts Desktop function addSlide() { /*wp_register_script( 'modernizr', get_template_directory_uri().'/_/js/modernizr.js', null, false ); wp_enqueue_script( 'modernizr' );*/ wp_register_script( 'enquire', get_template_directory_uri().'/_/js/enquire.min.js', null, false ); wp_enqueue_script( 'enquire' ); wp_register_script( 'jwplayer', get_template_directory_uri().'/_/js/jwplayer.js', null, false ); wp_enqueue_script( 'jwplayer' ); wp_register_script( 'bootstrap', get_template_directory_uri().'/_/js/bootstrap.js', array('jquery'), false ); wp_enqueue_script( 'bootstrap' ); wp_register_script( 'spk_slide', get_template_directory_uri().'/_/js/slides.js', array('jquery'), false ); wp_enqueue_script( 'spk_slide' ); } // Slider just on front page function isSlideshowPage() { if ( is_front_page() || is_page('Bankkaufmann') || is_page('Hochschulabsolvent') || is_page('Professional') || is_page('Die Prüfungsstellen') || is_page('Von Beruf Verbandsprüfer')) { addSlide(); } } add_action( 'wp_enqueue_scripts', 'isSlideshowPage' ); 

Js Skript

Dieses Skript lädt im Moment alle Seiten, ich werde es umhüllen und später aus der Seitenvorlage aufrufen

 enquire.register("screen and (max-width:1080px)", { // OPTIONAL // If supplied, triggered when a media query matches. match : function() { jQuery.ajax({ url: my_ajax_script.ajaxurl, data: ({action : 'get_mobile_template'}), success: function(data) { document.write(data); } }); }, unmatch : function() {$("body").empty();}, // OPTIONAL // If supplied, triggered once, when the handler is registered. setup : function() {}, // OPTIONAL, defaults to false // If set to true, defers execution of the setup function // until the first time the media query is matched deferSetup : true, // OPTIONAL // If supplied, triggered when handler is unregistered. // Place cleanup code here destroy : function() {} }); enquire.register("screen and (min-width:1081px)", { // OPTIONAL // If supplied, triggered when a media query matches. match : function() { jQuery.ajax({ url: my_ajax_script.ajaxurl, data: ({action : 'get_desktop_template'}), success: function(data) { document.write(data); } }); }, unmatch : function() {$("body").empty();}, // OPTIONAL // If supplied, triggered once, when the handler is registered. setup : function() {}, // OPTIONAL, defaults to false // If set to true, defers execution of the setup function // until the first time the media query is matched deferSetup : true, // OPTIONAL // If supplied, triggered when handler is unregistered. // Place cleanup code here destroy : function() {} }); 

Solutions Collecting From Web of "Ajax-Vorlage: Wie wird mit dem Kopfabschnitt verfahren?"

Ok, Sie möchten, dass mobile Geräte immer mobile Vorlagen laden. Desktop-Geräte laden Vorlagendateien basierend auf der Auflösung: wenn <1080 mobile,> 1080 Desktop-Dateien.

Ihr Workflow sollte folgendermaßen aussehen:

  1. Bei der wp_is_mobile Sie mit wp_is_mobile nach mobilen Geräten. Wenn wahr, fügen Sie einen Vorlagenfilter hinzu, der str_replace('.php', '-mobile.php', $template); wo $template ist die ursprüngliche Vorlage erforderlich. Die ‘front-page-mobile.php’ (oder ‘page-mobile.php’ und so weiter) zeigt den Inhalt für mobile Geräte. Und in Bezug auf mobile Geräte sind Sie fertig.
  2. Wenn wp_is_mobile wahr ist, werden die mobilen Stile und Skripts in die Warteschlange eingereiht, wenn die Desktopstile und -skripts falsch in die Warteschlange eingereiht werden. Desktop-Skripte müssen enquire.js und ein Skript mit Ihrem enquire.register und ajax-Zeug enthalten, da Sie sie nur für Desktops benötigen.
  3. Ihr benutzerdefiniertes js-Skript sollte bei jeder Änderung der Auflösung von 1080 + auf 1080 – und umgekehrt – eine Ajax-Anfrage senden. Die Änderung der Auflösung wird mit enquire.js durchgeführt. Die Ajax-Anfrage muss an die gleiche URL gesendet werden, von der aus aufgerufen wird. Denken Sie daran, dass ein Ajax-Aufruf nur eine normale HTTP-Anfrage ist, also senden Sie an dieselbe URL, die wir init wp starten, führen Sie die Abfrage in Bezug auf die URL aus, fügen Sie eine Vorlagendatei hinzu und beziehen Sie den HTML-Code für die Seite. Natürlich brauchen wir nur den Körperinhalt, aber einen Trick, nur Körper zu bekommen, ist einfach.

Ich erstelle aus zwei Gründen ein Plugin in einer class: die Fähigkeit, statische Variablen zu verwenden, und die Möglichkeit, kurze functionen zu verwenden, um Kollisionen zu vermeiden.

Beachten Sie, dass Code nicht getestet ist und Sie ihn als Proof of Concept interpretieren müssen.

 < ?php /** * Plugin Name: GM Mobile Workflow * Plugin URI: http://wordpress.stackexchange.com/questions/111751/ajax-template-how-to-handle-head-section/ * Description: A Desktop / Mobile Workflow for WPSE. * Author: GM * Author URI: http://wordpress.stackexchange.com/users/35541/gm */ class MyMobileWorkflow { static $ismobile = false; static $desktop_template = 'desktop'; static $isajax = false; static function init() { self::$isajax = ( ! empty($_SERVER['HTTP_X_REQUESTED_WITH']) && ( strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ) ); add_action('init', array( __CLASS__, 'check'), 1 ); add_action('wp_loaded', array( __CLASS__, 'add_assets') ); if ( ! self::$isajax ) add_filter('template_include', array( __CLASS__, 'filter_template') ); if ( self::$isajax ) self::$desktop_template = isset($_POST['template']) && $_POST['template'] ? $_POST['template'] : 'desktop'; if ( ! in_array( self::$desktop_template, array('desktop', 'mobile') ) ) self::$desktop_template = 'desktop'; } static function check() { if ( ! isset($_POST['skip_server_check']) || ! $_POST['skip_server_check'] ) { self::$ismobile = wp_is_mobile(); } } static function filter_template( $template ) { if ( ! self::$isajax && self::$ismobile ) return str_replace('.php', '-mobile.php', $template); return $template; } static function add_assets( ) { add_action('wp_enqueue_scripts', array( __CLASS__, 'add_core_assets') ); if ( self::$ismobile ) { add_action('wp_enqueue_scripts', array( __CLASS__, 'add_mobile_assets') ); } else { add_action('wp_enqueue_scripts', array( __CLASS__, 'add_desktop_assets') ); } } static function add_core_assets () { wp_enqueue_style('reset', plugins_url('/css/reset.css', __FILE__) ); wp_enqueue_style('main', plugins_url('/css/style.css', __FILE__)); } static function add_mobile_assets ( $from_desktop = false ) { wp_enqueue_style('mobile', plugins_url('/css/style-mobile.css', __FILE__), array('main'), null ); $deps = $from_desktop ? array('spk_slide') : array(); wp_enqueue_style('videojs-css', plugins_url('/js/video-js.css', __FILE__), $deps, null ); wp_enqueue_script('videojs-js', plugins_url('/js/videojs/video.js', __FILE__), $deps, null ); } static function add_desktop_assets () { wp_enqueue_script( 'enquire', plugins_url('/js/enquire.min.js', __FILE__), array('jquery'), null ); wp_enqueue_script( 'jwplayer', plugins_url('/js/jwplayer.js', __FILE__), array('jquery'), null ); wp_enqueue_script( 'bootstrap', plugins_url('/js/bootstrap.js', __FILE__), array('jquery'), null ); wp_enqueue_script( 'spk_slide', plugins_url('/js/slides.js', __FILE__), array('jquery'), null ); self::add_mobile_assets( true ); wp_enqueue_script( 'MyMobileWorkflow', plugins_url('/js/MyMobileWorkflow.js', __FILE__), array('jquery', 'enquire'), null ); } } add_action('after_setup_theme', array('MyMobileWorkflow', 'init') ); 

Ich denke, Code sollte selbsterklärend sein und im Wesentlichen den oben definierten 3-Punkte-Workflow implementieren.

Ich nehme etwas Code von dem, was du gepostet hast, machte nur ein bisschen Ordnung 🙂

Jetzt, wenn wir von einem Mobilgerät aus die Home-URL öffnen, prüft WordPress dank eines Filters die Datei front-page-mobile.php statt front-page.php .

Was sollte diese Vorlagendatei enthalten? Etwas wie das:

 get_header(); get_template_part( 'homepage-mobile' ); get_footer('mobile'); 

Sie müssen also eine header.php vorbereiten, die einen wp_head() Aufruf enthalten muss, der dank unserer bedingten Skripte in die Warteschlange gestellt wird und nur mobile Skripte und Stile anzeigt. homepage-mobile.php müssen Sie eine homepage-mobile.php mit der Ausgabe für mobile Geräte und eine Datei footer-mobile.php wo die Fußzeile für mobile Geräte, die den Aufruf wp_footer() enthalten müssen, wp_footer() .

Der Trick für Ihre header.php ist, dass Sie vor dem gesamten Code etwas wie:

 < ?php if ( MyMobileWorkflow::$isajax ) return; ?>< !DOCTYPE html> .... > 

Wenn die Vorlage von einer Ajax-Anfrage enthalten ist, wird auf diese Weise nichts ausgegeben. Beachten Sie, dass header.php mit dem body-Tag open enden muss, also ist everithing ein Teil von body go after header.php und wird bei einem Ajax-Aufruf ausgegeben. Wir haben unserem Körper einen classn-Desktop hinzugefügt, der später nützlich sein wird.

Aus dem gleichen Grund sollten footer.php und footer.php footer-mobile.php beide etwas enthalten:

 
...
wp_footer(); < ?php if ( ! MyMobileWorkflow::$isajax ) { ?> < ?php } ?>

Auf diese Weise ist get_header() von get_header() und get_footer() ist der Body-Inhalt und wird auf Ajax-Anfragen ausgegeben.

Jetzt ist das Wichtigste die front-page.php (oder die anderen Vorlagendateien), die von der URL auf Desktop-Geräten benötigt werden.

Wir wissen, dass wir in diesem Fall im Header jquery, enquire.js und Ihr benutzerdefiniertes Skript haben. Wie sollte die front-page.php aussehen? Etwas wie das:

 get_header(); if ( MyMobileWorkflow::$desktop_template == 'mobile' ) { get_template_part( 'homepage-mobile' ); get_footer('mobile'); } else { get_template_part( 'homepage-desktop' ); get_footer(); } 

Also, unsere Template-Datei auf normalen (nicht Ajax) Anfragen von Desktops wird den gesamten Inhalt der Desktop-Templates ausgeben.

Bei unseren header.php Anfragen geben wir jedoch header.php footer.php Tricks header.php und footer.php nur den Inhalt zurück, der zwischen und . Perfekt!

Nachdem enquire.js die Desktopauflösung erkannt hat, muss bei Bedarf (Auflösung < = 1080) eine Ajax-Anfrage zum Laden der mobilen Vorlage gesendet werden.

Lassen Sie uns unser benutzerdefiniertes js-Skript (MyMobileWorkflow.js) schreiben, um die Breakpoints enquire.js und die Ajax-Aufrufe zu registrieren. Der Code in dieser Datei sollte etwa lauten:

 (function($) { MyMobileWorkflow = {} MyMobileWorkflowCache = { desktop: "", mobile: "" } MyMobileWorkflow.load_template = function( ismobile ) { var template = ismobile ? 'mobile' : 'desktop'; if ( $('body').data('nowTemplate') && $('body').data('nowTemplate') == template ) return false; $('body').data('nowTemplate', template ); if ( MyMobileWorkflowCache[template] ) { $('body').html( MyMobileWorkflowCache[template] ); } else { $('body').html('Loading...'); $.ajax({ url: window.location.href, type: 'POST', dataType: 'html', data: ( { skip_server_check : '1', template: template } ), success: function( htmlData ) { MyMobileWorkflowCache[template] = htmlData; $('body').html( htmlData ); } }); } } $().ready(function(e) { if ( $('body').hasClass('desktop') ) MyMobileWorkflowCache['desktop'] = $('body').html(); }); enquire.register("screen and (max-width:1080px)", { match : function() { $('body').removeClass('desktop'); MyMobileWorkflow.load_template(true); }, unmatch : function() { MyMobileWorkflow.load_template(false); } }); })(jQuery); 

Was macht dieses Skript?

Jedes Mal, wenn sich die Auflösung von 1080+ auf 1080- und umgekehrt ändert, sucht das Skript den Wert in einer Cache-Variablen. Wenn nichts gefunden wird, sende einen Ajax-Aufruf an die aktuelle URL, zB http://site.com/some/page und übergebe einige Daten: skip_server_check , was skip_server_check , dass unsere class wp_is_mobile auf init wp_is_mobile ; und eine variable template auf desktop oder mobile unserer Template-Datei mitteilt, dass sie (im Falle einer Homepage) homepage-desktop.php bzw. homepage-mobile.php .

Wie wir bereits wissen, ist eine Ajax-Anfrage, auch wenn get_header() und get_footer() aufgerufen wird, die Vorlage nur den Body-Inhalt. Dieser Body-Inhalt wird mithilfe von jQuery.html() zwischen und jQuery.html() .

Nach dem Abrufen über AJAX wird die HTML-Ausgabe im Cache Variabe gespeichert, so dass AJAX nur einmal ausgeführt wird. Beachten Sie auch, dass im Dokument ready (weil wir standardmäßig die Desktop-Vorlagen laden) die Cache-Variable für den Desktop mit dem aktuellen HTML-Inhalt von body gefüllt wird.

Beachten Sie, dass homepage-mobile.php die gleiche Datei ist, die wir für mobile Geräte verwenden. Sie müssen also einmal Code für mobile Geräte und für <1080px Desktop-Bildschirme schreiben.

homepage-desktop.php ist die letzte Datei, die Sie schreiben müssen und muss den gesamten Code von bis für> 1080px Desktop-Bildschirme enthalten.

Code, den ich für Templates gepostet habe, behandelt nur die Titelseite ( front-page.php ), aber Sie müssen den gleichen process für alle Vorlagen der ersten Ebene implementieren, die Sie verwenden front-page.php . (Ich rufe Vorlagen der ersten Ebene an, die Teil der WP-Vorlagenhierarchie sind ).

Versuchen Sie, die Anzahl von ihnen zu begrenzen: front-page.php , index.php , page.php und single.php mit einigen bedingten Tags in Kombination mit get_template_part() , die meiste Zeit machen die Arbeit für durchschnittliche Website-Bedürfnisse.

Erinnern Sie sich, dass der Code noch nicht getestet wurde und ich normalerweise eine Menge Tipperrors mache, um hier Code zu schreiben ...;) Aber ich denke, das sollte Ihnen eine Richtung geben.


Beachten

Der hier veröffentlichte Code wurde viele Male bearbeitet, um Bugs und Tipperrors zu beheben und um einige Vorschläge und Rückmeldungen von OP und anderen Benutzern zu erhalten. Diese finale Version berücksichtigt verschiedene Aspekte: SEO, Performance und so weiter, und - am wichtigsten - scheint zu funktionieren , sollte aber natürlich besser und in einer "echten" Anwendung getestet werden.