web-dev-qa-db-fra.com

Ajax template: comment gérer la tête

Je sais que c'est facile , mais je suis novice dans ce domaine et je ne comprends pas quelle est la meilleure approche.

Contexte

Le modèle sur lequel je travaille est un thème double Desktop/Mobile, basé sur UA Sniffing. Maintenant Je viens juste d'ajouter de la réactivité via enquire.js et ajax, et Everithing a changé: j'ai du mal à faire fonctionner les choses correctement, c'est la première fois que je traite avec ajax.

Scénario

Mon modèle est chargé de manière dynamique via ajax si vous essayez de redimensionner la largeur de la fenêtre en dessous de 1080px, le modèle mobile apparaîtra. (Il apparaîtra aussi sur chaque appareil mobile, mais ce n'est pas important pour nous.)

Ainsi, la réactivité a été implémentée à l'aide d'appels enquire.js et ajax (voir le code ci-dessous).

À l'origine, le modèle était statique, de sorte que pour le moment, toute la section est toujours conditionnée dans les instructions if dans le fichier functions.php. (par exemple, le script vidéo ne devrait être chargé que sur certaines pages de la version de bureau)

Problèmes

  1. Le modèle pour mobile - qui a été stylé avec la feuille de style mobile.css - ne semble pas avoir d'effet. Devrais-je changer la façon dont les feuilles de style et les scripts sont chargés en raison de la nouvelle fonctionnalité ajax/inquire?
  2. le contenu, c'est-à-dire the_content (), ne s'affiche pas. Pourquoi? Et comment le charger dans mon scénario? a trouvé! - document.write (data) était tout écrire! J'ai ajouté $ ("body"). Append (data); au lieu

Suit le code

functions.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 script

ce script au moment charge sur toutes les pages, je vais l'envelopper et l'appeler à partir du modèle de page plus tard

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() {}

});
phpajaxjavascriptmobile
2
Andrea Puiatti

Ok, vous voulez que les appareils mobiles chargent toujours les modèles mobiles. Les appareils de bureau chargent les fichiers de gabarit en fonction de la résolution: si <1080 mobiles,> 1080 de bureau.

Votre flux de travail devrait être:

  1. Sur init, vous recherchez des appareils mobiles à l'aide de wp_is_mobile. Si true, vous ajoutez un filtre de modèle qui renvoie str_replace('.php', '-mobile.php', $template);, où $template est le modèle d'origine requis. Le 'front-page-mobile.php' (ou 'page-mobile.php' et ainsi de suite) affiche le contenu des appareils mobiles. Et pour ce qui concerne les appareils mobiles, vous avez terminé.
  2. si wp_is_mobile est vrai, mettez en file d'attente les styles et les scripts mobiles. Si false, mettez en file d'attente les styles et les scripts du bureau. Les scripts de bureau doivent inclure enquire.js et un script avec vos trucs enquire.register et ajax car vous en avez besoin uniquement pour les ordinateurs de bureau.
  3. Votre script js personnalisé doit envoyer une demande ajax chaque fois que la résolution passe de 1080 + à 1080 - et vice-versa. Le changement de résolution est traité avec enquire.js. La requête ajax doit être envoyée à la même URL que celle appelée. Rappelez-vous qu'un appel ajax est simplement une demande http normale, envoyez donc à la même URL que nous lançons wp, exécutez la requête associée à l'URL, incluez un fichier modèle et obtenez le code HTML de la page. Bien sûr, depuis ajax, nous n'avons besoin que du contenu du corps, mais utiliser une astuce pour obtenir uniquement du corps est facile.

Je crée un plugin dans une classe, pour 2 raisons: possibilité d'utiliser des variables statiques et d'utiliser des fonctions courtes en évitant les collisions.

Notez que le code n'est pas testé et que vous devez le vouloir comme une preuve de concept. 

<?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: G.M.
 * Author URI: http://wordpress.stackexchange.com/users/35541/g-m
 */

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

Je pense que le code devrait être explicite et qu'il implémente essentiellement le flux de travail en 3 points défini ci-dessus.

Je prends un peu de code de ce que vous avez posté, seulement fait un peu de commande :)

Maintenant, lorsque nous ouvrons l'URL de la maison depuis un appareil mobile, grâce à un filtre, wordpress recherche le fichier front-page-mobile.php au lieu de front-page.php.

Que doit contenir ce fichier de modèle? Quelque chose comme ça:

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

Vous devez donc préparer un header.php qui doit contenir un appel wp_head() qui, grâce à la mise en file d'attente de nos scripts conditionnels, n'enregistrera que les scripts et les styles mobiles. Ensuite, vous devez préparer un homepage-mobile.php contenant la sortie pour les appareils mobiles et un fichier footer-mobile.php dans lequel placer le pied de page pour les appareils mobiles devant contenir l'appel wp_footer().

Le truc pour votre header.php est que vous devriez placer avant tout le code quelque chose comme:

<?php if ( MyMobileWorkflow::$isajax ) return; ?><!DOCTYPE html>
....
</head><body <?php body_class('desktop'); ?>>

De cette façon, si le modèle est inclus à partir d'une requête ajax, il ne génère rien. Notez que header.php doit se terminer avec la balise body ouverte, ainsi tout le monde fait partie du corps, passez après header.php et est émis lors d'un appel ajax. Nous avons ajouté une classe 'bureau' à notre corps qui sera utile plus tard.

Pour la même raison, footer.php et footer-mobile.php devraient tous deux contenir quelque chose comme ceci:

<footer> ... </footer>
wp_footer();

<?php if ( ! MyMobileWorkflow::$isajax ) { ?>
</body></html>
<?php } ?>

De cette manière, tout est inclus dans get_header() et get_footer() est le contenu du corps et est émis sur les requêtes ajax.

Maintenant, l’important est le front-page.php (ou les autres fichiers de modèle) requis par l’URL sur les ordinateurs de bureau.

Nous savons que dans ce cas dans l'en-tête, nous aurons jquery, enquire.js et votre script personnalisé. À quoi devrait ressembler le front-page.php? Quelque chose comme ça:

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

Ainsi, notre fichier de modèle sur les demandes normales (et non ajax) des ordinateurs de bureau affichera tout le contenu des modèles de bureau.

Cependant, sur les requêtes ajax, grâce à nos astuces header.php et footer.php, notre modèle ne renvoie que le contenu compris entre <body> et </body>. Parfait!

Une fois que enquire.js a reconnu la résolution du bureau, vous devez, si nécessaire (résolution <= 1080), envoyer une demande ajax pour charger le modèle mobile.

Écrivons donc notre script js personnalisé (MyMobileWorkflow.js) pour enregistrer les points d'arrêt enquire.js et les appels ajax. Le code dans ce fichier devrait être quelque chose comme:

(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('<span class="loading">Loading...</span>');
      $.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);

Que fait ce script?

Chaque fois que la résolution passe de 1080+ à 1080- et vice versa , le script recherche la valeur dans une variable de cache. Si rien n’est trouvé, envoyez un appel ajax à l’URL actuelle, par exemple. http://site.com/some/page et transmettez des données: skip_server_check qui empêche notre classe d’exécuter wp_is_mobile sur init; et une variable template définie sur desktop ou mobile qui indique à notre fichier de modèle de charger (dans le cas d'une page d'accueil) homepage-desktop.php ou homepage-mobile.php respectivement.

Comme nous le savons déjà, étant une demande ajax, même si get_header() et get_footer() seront appelés, le modèle ne génère que le contenu du corps. Le contenu de ce corps est placé entre <body> et </body> en utilisant jQuery.html().

Après avoir récupéré via ajax, la sortie HTML est stockée dans la variable de cache, de sorte que ajax ne soit exécuté qu'une seule fois. Notez également que lorsque le document est prêt (car nous chargeons par défaut les modèles de bureau), la variable de cache pour le bureau est renseignée avec le contenu HTML actuel du corps.

Notez que homepage-mobile.php est le même fichier que nous utilisons pour les appareils mobiles. Vous devez donc écrire le code une fois pour les appareils mobiles et pour les écrans de bureau <1080px.

homepage-desktop.php est le dernier fichier que vous devez écrire et doit contenir tout le code de <body> à </body> pour des écrans de bureau supérieurs à 1080px.

Le code que j'ai posté pour les modèles ne gère que la première page (front-page.php), mais vous devez mettre en œuvre le même processus pour tous les modèles de premier niveau que vous souhaitez utiliser. (J'appelle les modèles de premier niveau ceux qui font partie de Hiérarchie de modèles de WP ).

Essayez de limiter leur nombre: front-page.php, index.php, page.php et single.php avec certaines balises conditionnelles combinées à get_template_part(), la plupart du temps, tout le travail est fait pour les besoins moyens du site.

Encore une fois, rappelez-vous que le code n’a pas été testé et que j’ai l'habitude de faire beaucoup de fautes de frappe en écrivant du code ici ...;) Mais je pense que cela devrait vous donner une direction.

Remarquer

Le code publié ici a souvent été modifié pour résoudre des bugs et des fautes de frappe , ainsi que pour donner suite aux suggestions et commentaires de OP et d’autres utilisateurs. Cette version finale prend en compte différents aspects: référencement, performances, etc., et - le plus important - semble fonctionner , mais doit bien sûr être testé " monde réel "application.

6
gmazzap