这不是代码的问题,我只是不知道在这种特定情况下如何工作。
我正在研究一个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.php
和WP_USE_THEMES
的更简单的方法
第三,加载主题模板的方式需要"加载两次"方法。或者使用AJAX和wp_localize_script
解决它。
如果我正确理解了这个问题,我认为最好的办法是使用WordPress用户代理检测,并相应地将脚本和样式排队。研究核心功能以适应您的需求。
[更新]
仍然不确定是否真的需要所有这些复杂性。像这样的东西在通用header.php
中工作吗?
if( wp_is_mobile() )
wp_nav_menu(MOBILE);
else
wp_nav_menu(DESKTOP);
但是,如果您真的需要动态地进行这些更改,那么AJAX将是您的选择。