web-dev-qa-db-ja.com

Ajaxテンプレート：headセクションの扱い方

私はそれがeasy stuffであることを知っています、しかし私はこれに慣れていません、そして私はどちらが最善のアプローチであるか理解できません。

バックグラウンド

私が取り組んでいるテンプレートは、デュアルテーマのデスクトップ/モバイル、UAスニッフィングベースです。今私はちょうどenquire.jsとajaxを介して応答性を追加し、絶え間なく変化しました。物事を正しく機能させるのに苦労しています。

シナリオ

私の テンプレート はajaxを介して動的にロードされます実際に幅を変更しようとすると1080pxより下のウィンドウでは、モバイルテンプレートが表示されます。 （それはすべてのモバイル機器にも表示されますが、これは私たちのATMにとって重要ではありません）

そのため、 enquire.js とajax呼び出しを使用して応答性が実装されています（以下のコードを参照）。

もともとテンプレートは静的だったので、現時点ではfunctions.phpのifステートメントを通してセクション全体がまだ条件付きでロードされています。 （たとえば、ビデオスクリプトはデスクトップ版の特定のページにロードするだけです）

問題

  1. Mobile.cssスタイルシートでスタイル設定されているモバイルテンプレートは効果がありません。新しいajax /照会機能のためにスタイルシートとスクリプトのロード方法を変更する必要がありますか？
  2. 内容、つまりthe_content（）は表示されません。どうして？そして私のシナリオでそれをどのようにロードするのですか？見つけた！ - document.write（data）がすべてを書き留めていました！ $（ "body"）を追加しました。代わりに

コードに従います

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スクリプト

このスクリプトは現時点ですべてのページにロードされます。後でそれをラップし、後でpage-templateから呼び出します。

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

わかりました、あなたはモバイル機器が常にモバイルテンプレートをロードすることを望みます。デスクトップデバイスは、解像度に基づいてテンプレートファイルをロードします。モバイルデバイスが<1080の場合は、デスクトップファイルが> 1080の場合。

ワークフローは次のようになります。

  1. Initではwp_is_mobileを使ってモバイルデバイスをチェックします。 trueの場合、str_replace('.php', '-mobile.php', $template);を返すテンプレートフィルタを追加します。ここで$templateは必要な元のテンプレートです。 'front-page-mobile.php'（または 'page-mobile.php'など）は、モバイルデバイスのコンテンツを表示します。そして、モバイル機器に関しては、あなたはやっています。
  2. wp_is_mobileがtrueの場合はモバイルスタイルとスクリプトがエンキューされ、falseの場合はデスクトップスタイルとスクリプトがエンキューされます。デスクトップスクリプトにはenquire.jsと、enquire.registerおよびajaxのものを含むスクリプトを含める必要があります。これは、デスクトップにのみ必要なためです。
  3. カスタムのjsスクリプトは、解像度が1080 +から1080に変わるたびにajaxリクエストを送信します。その逆も同様です。解像度の変更はenquire.jsで処理されます。 ajaxリクエストは、魔女が呼ばれるのと同じURLに送信される必要があります。 Ajax呼び出しは単なる通常のHTTPリクエストなので、同じURLにinit wpを送信し、そのURLに関連するクエリを実行し、テンプレートファイルを含めて、ページのHTMLを取得します。もちろん、Ajaxから私たちはボディコンテンツだけを必要とします、しかしボディだけを得るトリックを使うことは簡単です。

私はクラス内でプラグインを作成します。2つの理由からです。静的変数を使用する機能と、衝突を回避して短い関数名を使用する機能です。

コードはテストされていないので、概念実証として使用する必要があります。

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

私はコードが一目瞭然であるべきだと思います、そしてそれは本質的に上で定義された3つの点のワークフローを実行します。

私はあなたが投稿したものからいくつかのコードを取ります。

今、私たちがモバイル機器から家のURLを開くとき、フィルタのおかげで、ワードプレスはfront-page-mobile.phpの代わりにファイルfront-page.phpをチェックします。

このテンプレートファイルには何を含める必要がありますか？このようなもの：

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

そのため、wp_head()呼び出しを含める必要があるheader.phpを準備する必要があります。これは、条件付きスクリプトをエンキューすることで、モバイルスクリプトとスタイルのみを有効にするためのものです。あなたはモバイルデバイス用の出力を含むhomepage-mobile.phpと、wp_footer()呼び出しを含まなければならないモバイルデバイス用のフッターを置くfooter-mobile.phpファイルを用意する必要があります。

あなたのheader.phpのためのトリックはあなたがすべてのコードの前に置くべきであるということです：

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

このように、テンプレートがajaxリクエストから含まれている場合は、何も出力されません。 header.phpはbodyタグを開いたままにしておく必要があるので、永遠に続くことはheader.phpの後に続くbodyの一部であり、ajax呼び出しで出力されます。後で役立つように、クラスに「デスクトップ」を追加しました。

同じ理由でfooter.phpとfooter-mobile.phpは両方ともこのようなものを含むべきです：

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

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

このようにしてeverthingはget_header()からインクルードされ、get_footer()はボディコンテンツであり、ajaxリクエストで出力されます。

今重要なことはデスクトップデバイスのurlによって必要とされるfront-page.php（または他のテンプレートファイル）です。

この場合、ヘッダーにはjquery、enquire.js、およびカスタムスクリプトがあります。 front-page.phpはどのようなものですか？このようなもの：

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

したがって、デスクトップからの通常の（ajaxではない）リクエストに対するテンプレートファイルは、デスクトップテンプレートのコンテンツ全体を出力します。

しかし、ajaxリクエストでは、私たちのheader.phpとfooter.phpトリックに感謝します、私たちのテンプレートは<body>と</body>の間にある内容だけを返します。パーフェクト！

Enquire.jsがデスクトップの解像度を認識したら、必要に応じて（解像度が1080以下）、モバイルテンプレートをロードするためにajaxリクエストを送信する必要があります。

それでは、enquire.jsブレークポイントとajax呼び出しを登録するためのカスタムjsスクリプト（MyMobileWorkflow.js）を書いてみましょう。このファイルのコードは次のようになります。

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

このスクリプトは何をしますか？

毎回解像度が1080+から1080-に変わり、viceversaスクリプトはキャッシュ変数の値を検索します。何も見つからない場合は、現在のURLにAjax呼び出しを送信します。 http://site.com/some/pageとデータを渡します。skip_server_checkは、クラスがinitに対してwp_is_mobileを実行しないようにします。 （ホームページの場合は）それぞれhomepage-desktop.phpまたはhomepage-mobile.phpをロードするようにテンプレートファイルに指示する変数templateをdesktopまたはmobileに設定します。

すでに知っているように、get_header()とget_footer()が呼び出されても、ajaxリクエストであるため、テンプレートはボディコンテンツのみを出力します。この本文の内容は、jQuery.html()を使用して<body>と</body>の間に入れられます。

Ajax経由で取得した後、HTML出力はキャッシュ変数に格納されるため、Ajaxは1回だけ実行されます。また、ドキュメントの準備が整うと（デフォルトではデスクトップテンプレートが読み込まれるため）、desktopのキャッシュ変数にはbodyの現在のHTMLコンテンツが書き込まれます。

homepage-mobile.phpは、モバイルデバイス用に使用しているのと同じファイルです。そのため、モバイルデバイス用と<1080pxのデスクトップ画面用にコードを1回作成する必要があります。

homepage-desktop.phpはあなたが書かなければならない最後のファイルで、> 1080pxデスクトップスクリーンのために<body>から</body>までのすべてのコードを含まなければなりません。

私がテンプレート用に投稿したコードはフロントページ（front-page.php）のみを扱いますが、あなたが使用しようとしているすべての1レベルのテンプレートに対して同じプロセスを実装する必要があります。 （私は WPテンプレート階層 の一部である1レベルテンプレートのものと呼びます）。

それらの数を制限するようにしてください：get_template_part()と組み合わせていくつかの条件付きタグを持つfront-page.php、index.php、page.phpおよびsingle.phpは、ほとんどの場合平均的なサイトのニーズに対してすべての作業を行います。

繰り返しますが、コードはテストされていないので、ここでコードを書くときによくタイプミスをすることが多くあります...;）しかし、これで方向性がわかるはずです。

通知

ここに投稿されたコードは、バグやタイプミスを解決するため、およびOPや他のユーザーからの提案やフィードバックを達成するために、何度も編集されました。この最終版はさまざまな側面を考慮に入れています：SEO、パフォーマンスなど、そして - 最も重要な - はうまくいくようです、もちろん、よりよくテストされるべきです実世界の "アプリケーション。

6
gmazzap