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

Question

不是代码问题，我只是不明白在这种特定情况下是如何工作的。

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

• 如果 screen.width
• 否则，如果 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 应该加载 headernav-phone.php 其中仅包含一个 wp_nav_menu(MOBILE) 调用。 如果屏幕尺寸较大，Wordpress 会加载 headernav-desktop.php，其中包含 wp_nav_menu(DESKTOP)。

这不起作用：

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

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

Answer 1

IMO，逻辑有缺陷。
一方面，there's no way to detect the screen width with PHP。

其次，如果您要生成 PHP -> JS 文件 (my-script.js.php)，you'd have to load WordPress engine two times。
_{此链接中的答案是 super-pro。您会发现使用wp-load.php 和WP_USE_THEMES 的更简单方法。}

第三，您尝试加载主题模板的方式需要“加载两次” 方法。或solving it with AJAX 和wp_localize_script。

如果我正确理解了这个问题，我认为最好的选择是相应地使用WordPress user-agent detection 和enqueue your scripts and styles。研究core function 以适应您的需求。

[更新]

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

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

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