WordPress 使用 jQuery / AJAX 按需加载 PHP 插件？

Question

我需要使用 jQuery / Ajax / PHP 按需加载 WordpPress 插件短代码，仅在我们按下按钮时。这是我尝试过的：

1) 我有一个带有按钮和 DIV 的 HTML 代码：

<a href="#" class="LoadBtn">Load Gallery Plugin</a>
<div id="PhotoGrid">Plugin shortcode should be loaded here</div>

2) 当我按下按钮时，以下 jQuery 代码运行。这与 PHP 文件通信并尝试将短代码“插入”到 DIV：

$(function() {
  $('.LoadBtn').on('click', function() {

    var url = "http://localhost:8888/studio/ajax.php";
    $.post(url, function(data) {
        $("#PhotoGrid").html(data).show();
    });

  });
});

3) PHP 代码：

echo do_shortcode('[wonderplugin_gridgallery id=1]');

但我遇到了错误。 在 jQuery 代码中，有一个 html(data) 字符串。也许这就是问题所在，因为短代码不是 hmtl 而是完整的插件代码？我是 PHP 新手，写什么，怎么写？

我在控制台中收到的错误消息：

• 发送@jquery.js?ver=1.11.3:5
• 发送@jquery.js?ver=1.11.3:5
• ajax@jquery.js?ver=1.11.3:5
• m.(匿名函数)@jquery.js?ver=1.11.3:5
• （匿名）@my-custom.js
• dispatch @jquery.js?ver=1.11.3:4
• r.handle@jquery.js?ver=1.11.3:4

Answer 1

从您的earlier post 我推测您的目标是通过延迟库的负载来提高速度排名。这可以通过少量的 PHP 代码很容易地完成 - 大约 25 行，但从你的 cmets 我推测你还没有获得这样做的技能水平。但是，您可以使用一个丑陋、低效的技巧来规避这个问题。 jQuery .load() function 可用于仅加载 HTML 文档的片段。

$("#PhotoGrid").load( "<url of page with gallery shortcode>", "<jQuery selector of the gallery HTML" );

服务器将发送完整的页面，jQuery .load() 函数将从该页面中使用 jQuery 选择器提取图库的 HTML，并将其插入到“#PhotoGrid”元素中。这有点低效，因为服务器构建了完整的页面并且只需要图库短代码片段。为了清楚起见，您现在需要两个页面，一个是调用 jQuery .load() 函数的初始页面，另一个是带有画廊短代码的原始页面。您的原始页面永远不会直接显示，而是用作可以从中提取画廊短代码 HTML 的来源。

事实上，由于原始页面仅用作图库 HTML 的来源，您可以通过使用自定义模板删除页眉、页脚和侧边栏并仅使用图库短代码的帖子内容来提高效率。您实际上只需要正确评估短代码的环境，不需要其他任何东西。如果你这样做，我怀疑这将与我接下来建议的解决方案一样高效。

请注意，这并不像加载页面两次那样低效，因为 .js 和 .css 文件在初始页面仅加载一次。初始页面还需要加载所有需要的 .css 和 .js 文件，因为第二次加载不会加载任何 .css 或 .js 文件。

这种技术有一个警告。如果原始 HTML 页面在 $(document).ready() 处理程序中对图库进行额外处理，那么由于此处理程序仅在文档的初始加载时运行，您还需要在该处理程序中执行任何必要的代码画廊的负载。

如果你想更有效地做到这一点，你需要编写一些棘手的 PHP 代码。主要思想是使用 AJAX 请求加载简码所在的页面，并使用操作“template_redirect”绕过正常的 WordPress 模板处理，并将其替换为对简码的评估。请注意，这不是“wp_ajax ...”操作，因为该处理不会在帖子的上下文中完成。