AJAX模板：如何处理Head部分

时间：2013-08-26 作者：Andrea Puiatti

我知道这很容易，但我对这方面还不熟悉，我不知道哪种方法是最好的。

背景我正在使用的模板是一个基于UA嗅探的双主题桌面/移动平台<现在，我只是通过询问增加了响应能力。js和ajax，一切都变了：我正在努力让事情正常工作，这是我第一次处理ajax。

方案

车型年款template 是通过ajax动态加载的，事实上，如果您尝试将窗口宽度调整到1080px以下，将显示移动模板。（它也会出现在每个移动设备上，但这对美国atm并不重要）

因此，在enquire.js 和ajax调用（请参见下面的代码）。

最初，模板是静态的，因此目前，整个部分仍然通过函数中的if语句有条件地加载。php。（例如，视频脚本应仅加载到桌面版本的某些页面上）

发布手机模板-该模板已与手机一起设计。css样式表-似乎没有任何效果。由于新的ajax/Inquire，我是否应该更改样式表和脚本的加载方式

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

这个脚本现在加载到所有页面上，我将包装它，稍后从页面模板调用它

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

});

1 个回复
最合适的回答,由SO网友:gmazzap 整理而成

好的，您希望移动设备始终加载移动模板。桌面设备根据分辨率加载模板文件：if<；1080个移动电话，>1080个桌面电话。

您的工作流应该是：

在初始化时，您可以使用wp_is_mobile. 如果为true，则添加一个返回str_replace(\'.php\', \'-mobile.php\', $template); 哪里$template 是否需要原始模板。“首页手机”。php（或“page mobile.php”等）显示移动设备的内容。以及您在移动设备方面所做的工作wp_is_mobile 为true时，将移动样式和脚本排入队列；为false时，将桌面样式和脚本排入队列。桌面脚本必须包括enquire.js 还有一个脚本enquire.register 还有ajax之类的东西，因为您只需要在台式机上使用它们

Note that code is untested and you have to intend it as a proof of 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\') );
我认为代码应该是不言自明的，它基本上实现了上面定义的3点工作流。

我从您发布的内容中获取了一些代码，只是做了一点排序：）

现在，当我们从移动设备打开主页url时，感谢一个过滤器，wordpress会检查文件front-page-mobile.php 而不是front-page.php.

此模板文件应包含哪些内容？类似这样：

get_header();
get_template_part( \'homepage-mobile\' );
get_footer(\'mobile\');
所以你必须准备header.php 必须包含wp_head() 多亏了我们的条件脚本排队，将只在头上放移动脚本和样式。你必须准备一个homepage-mobile.php 包含移动设备的输出和文件footer-mobile.php 其中放置移动设备的页脚，移动设备必须包含wp_footer() 呼叫

您的header.php 您应该在所有代码之前放置以下内容：

<?php if ( MyMobileWorkflow::$isajax ) return; ?><!DOCTYPE html>
....
</head><body <?php body_class(\'desktop\'); ?>>
这样，如果模板包含在ajax请求中，则不会输出任何内容。请注意header.php 必须在身体标签打开的情况下结束，所以所有东西都是身体的一部分header.php 并在ajax调用中输出。我们在正文中添加了一个类“desktop”，以后会很有用。

出于同样的原因footer.php 和footer-mobile.php 两者都应该包含以下内容：

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

<?php if ( ! MyMobileWorkflow::$isajax ) { ?>
</body></html>
<?php } ?>
通过这种方式，所有内容都包含在get_header() 和get_footer() 是正文内容，在ajax请求上输出。

现在重要的是front-page.php 桌面设备上url所需的（或其他模板文件）。

我们知道，在这种情况下，在标题中，我们将使用jquery，inquire。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>. 完美的

询问后。js识别桌面分辨率，如果需要（分辨率为<；=1080），必须发送ajax请求以加载移动模板。

因此，让我们编写自定义js脚本（MyMobileWorkflow.js）来注册查询。js断点和ajax调用。此文件中的代码应类似于：

(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-并且脚本搜索缓存变量中的值。如果没有找到任何内容，则向当前url发送ajax调用，例如：。http://site.com/some/page 并传递一些数据：skip_server_check 这让我们的课无法运行wp_is_mobile 在初始化时；还有一个变量template 设置为desktop 或mobile 这会告诉我们要加载的模板文件（如果是主页）homepage-desktop.php 或homepage-mobile.php 分别地

我们已经知道，作为ajax请求，即使get_header() 和get_footer() 将被调用，模板只输出正文内容。此正文内容放在<body> 和</body> 使用jQuery.html().

通过ajax检索后，html输出存储在缓存variabe中，因此ajax只运行一次。还请注意，在document ready（因为默认情况下我们加载桌面模板）上，desktop的缓存变量填充了正文的当前html内容。

请注意homepage-mobile.php 与我们用于移动设备的文件相同，因此您必须为移动设备和<；1080px桌面屏幕。

homepage-desktop.php 是您必须编写的最后一个文件，并且必须包含来自<body> 到</body> 对于>1080px桌面屏幕。

我在首页发布的模板句柄代码(front-page.php) 但您必须对所有打算使用的第一级模板实施相同的过程。（我称第一级模板为WP Template Hierarchy).

尽量限制其数量：front-page.php, index.php, page.php 和single.php 与一些条件标记结合使用get_template_part(), 大多数时候，所有的工作都是为了满足一般的站点需求。

同样，请记住代码是未经测试的，我通常在这里编写代码时会有很多拼写错误…；）但我认为这应该给你一个方向。

请注意此处张贴的代码was edited a lot of times to solve bugs and typos, 并完成OP和其他用户的一些建议和反馈。这个最终版本考虑了不同的方面：搜索引擎优化、性能等，最重要的是-seems to work, 但当然，应该在“真实世界”的应用程序中进行更好的测试。

结束
标签： php   ajax   javascript   mobile   小码农  

相关推荐

在PHP中使用自定义值选项

我目前正在使用一个名为“开发”的自定义字段来显示一个新闻故事是否是一个正在开发的故事。自定义字段有两个值：一个空白选项（表示它没有开发）、“是”和“正在开发”这是我用来在新闻故事标题前显示“开发”一词的代码：<?php if (get_meta(\'developing\') != \"\") { ?>Developing: <?php } ?> 当我点击Yes时，它显示“正在开发”，当我将选项更改为“Was Developing”时，它也显示“正在开发”我假设这是因为我