Wordpress＆Enquire.js-條件加載原理

Question

與代碼無關，我只是不知道在這種特定情況下事情如何工作。

我正在使用Wordpress主題，該主題應通過javascript動態加載部分php代碼。 它實際上可以與UA嗅探結合使用，因為如果設備是移動設備，則無論如何都應使用移動模板，但這不是重點。

• 如果screen.width <1080px，則應加載我的Wordpress主題的移動版本菜單。
• 否則，如果screen.width較大，則應加載桌面菜單版本
• 由於桌面版本太重，因此僅基於CSS Media查詢的解決方案是不可接受的。

因此，我決定有條件地通過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

海事組織，邏輯有缺陷。
首先， 無法使用PHP檢測屏幕寬度 。

其次，如果要生成my-script.js.php > JS文件（ my-script.js.php ）， 則必須加載WordPress引擎兩次 。

第三，您嘗試加載主題模板的方式將需要“兩次加載”方法。 或者用AJAX和wp_localize_script 解決 。

如果我正確理解了問題，我認為最好的選擇是使用WordPress用戶代理檢測並相應地排入腳本和樣式 。 研究核心功能以適應您的需求。

[更新]

仍然不確定是否真的需要所有這些復雜性。 這樣的事情在通用的header.php嗎？

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

但是，如果您確實需要動態地進行此更改，則可以選擇AJAX。