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

Question

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

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

• 如果 screen.width 小于 1080px，则应加载我的 Wordpress 主题的移动版本菜单。
• 否则，如果 screen.width 较大，则应加载桌面菜单版本
• 仅基于 CSS 媒体查询的解决方案是 Not Acceptable ，因为桌面版本太重了。

所以我决定通过 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)。

这不起作用:

Fatal error: Call to undefined function wp_nav_menu() in /XX/YYY/ZZZ/webseiten/XXX.YY/wp-content/themes/MyTheme/templates/headernav-phone.php on line 14

看起来我的代码是在 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 专业。您会发现使用 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 将是您的选择。