Wordpress;Enquire.js-条件加载原理


Wordpress & Enquire.js - conditional loading philosophy

这不是代码的问题,我只是不知道在这种特定情况下如何工作。

我正在研究一个Wordpress主题,它应该通过javascript动态加载php代码的部分。它实际上与UA嗅探相结合,因为如果设备是移动的,无论如何都应该使用移动模板,但这不是重点。

  • 如果屏幕宽度是<1080px应该加载Wordpress主题的移动版菜单
  • 否则,如果screen.width较大,则应加载桌面菜单版本
  • 仅仅基于CSS媒体查询的解决方案是不可接受的,因为桌面版本太重了

所以我决定通过enquire.js有条件地动态加载内容我的WP-homepage-template.php的第一部分是:

enquire.register("screen and (max-width:1080px)", {
<script type="text/javascript">
    match : function() {
        $("body").load(
          "/path/headernav-phone.php"
        );
    unmatch : function() {
            $("body").load(
          "/path/headernav-desktop.php"
        );
    }
}

因此,当屏幕大小达到1080px时,Wordpress应该加载headerav-phone.php其中仅包含一个wp_nav_menu(MOBILE)呼叫。如果屏幕尺寸较大,Wordpress会加载headerav-desktop.php,其中包括wp_nav_menu(desktop)。

这不起作用:

致命错误:在第14行上调用/XX/YYY/ZZZ/webseiten/XXX.YYY/wp-content/themes/MyTheme/templates/headerav-phone.php中未定义的函数wp_nav_menu()

看起来我的代码是在CMS之前运行的,它破坏了自己的功能。

IMO,逻辑有缺陷
首先,使用PHP无法检测屏幕宽度。

其次,如果要生成一个PHP->JS文件(my-script.js.php),则必须加载WordPress引擎两次
此链接中的答案是super-pro。您会发现使用wp-load.phpWP_USE_THEMES的更简单的方法

第三,加载主题模板的方式需要"加载两次"方法。或者使用AJAXwp_localize_script解决它。

如果我正确理解了这个问题,我认为最好的办法是使用WordPress用户代理检测,并相应地将脚本和样式排队。研究核心功能以适应您的需求。

[更新]

仍然不确定是否真的需要所有这些复杂性。像这样的东西在通用header.php中工作吗?

if( wp_is_mobile() )
    wp_nav_menu(MOBILE);
else
    wp_nav_menu(DESKTOP);

但是,如果您真的需要动态地进行这些更改,那么AJAX将是您的选择。