私はそれがeasy stuffであることを知っています、しかし私はこれに慣れていません、そして私はどちらが最善のアプローチであるか理解できません。
私が取り組んでいるテンプレートは、デュアルテーマのデスクトップ/モバイル、UAスニッフィングベースです。今私はちょうどenquire.jsとajaxを介して応答性を追加し、絶え間なく変化しました。物事を正しく機能させるのに苦労しています。
私の テンプレート はajaxを介して動的にロードされます実際に幅を変更しようとすると1080pxより下のウィンドウでは、モバイルテンプレートが表示されます。 (それはすべてのモバイル機器にも表示されますが、これは私たちのATMにとって重要ではありません)
そのため、 enquire.js とajax呼び出しを使用して応答性が実装されています(以下のコードを参照)。
もともとテンプレートは静的だったので、現時点ではfunctions.phpのifステートメントを通してセクション全体がまだ条件付きでロードされています。 (たとえば、ビデオスクリプトはデスクトップ版の特定のページにロードするだけです)
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() {}
});
わかりました、あなたはモバイル機器が常にモバイルテンプレートをロードすることを望みます。デスクトップデバイスは、解像度に基づいてテンプレートファイルをロードします。モバイルデバイスが<1080の場合は、デスクトップファイルが> 1080の場合。
ワークフローは次のようになります。
wp_is_mobile
を使ってモバイルデバイスをチェックします。 trueの場合、str_replace('.php', '-mobile.php', $template);
を返すテンプレートフィルタを追加します。ここで$template
は必要な元のテンプレートです。 'front-page-mobile.php'(または 'page-mobile.php'など)は、モバイルデバイスのコンテンツを表示します。そして、モバイル機器に関しては、あなたはやっています。wp_is_mobile
がtrueの場合はモバイルスタイルとスクリプトがエンキューされ、falseの場合はデスクトップスタイルとスクリプトがエンキューされます。デスクトップスクリプトにはenquire.js
と、enquire.register
および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、パフォーマンスなど、そして - 最も重要な - はうまくいくようです、もちろん、よりよくテストされるべきです実世界の "アプリケーション。