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
• 阿賈克斯@ jquery.js？ver = 1.11.3：5
• m。（匿名函數）@ jquery.js？ver = 1.11.3：5
• （匿名）@ my-custom.js
• 派遣@ jquery.js？ver = 1.11.3：4
• r.handle @ jquery.js？ver = 1.11.3：4

Answer 1

從您之前的帖子中，我推測您的目標是通過延遲畫廊的負擔來提高速度排名。 只需少量的PHP代碼（大約25行），即可輕松完成此操作，但是從您的評論中，我認為您尚未掌握執行此操作的技能。 但是，您可以使用一個丑陋，效率低下的技巧來解決此問題。 jQuery .load（）函數可用於僅加載HTML文檔的一部分。

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

服務器將發送完整的頁面，jQuery .load（）函數將使用jQuery選擇器從中提取畫廊的HTML，並將其插入“ #PhotoGrid”元素中。 由於服務器將構建整個頁面，並且僅需要畫廊短代碼片段，因此效率較低。 為了清楚起見，您現在需要兩個頁面，一個初始頁面帶有jQuery .load（）函數的調用，而原始頁面則帶有Gallery shortcode。 您的原始頁面永遠不會直接顯示，而是用作可提取圖庫簡碼HTML的來源。

實際上，由於原始頁面僅用作圖庫HTML的源代碼，因此您可以通過使用自定義模板刪除頁眉，頁腳和側邊欄，並且僅使用圖庫短代碼來發布內容，從而提高這一效率。 您實際上只需要可以對短碼進行正確評估的環境，而無需執行其他任何操作。 如果您這樣做，我懷疑這將執行與我接下來建議的解決方案幾乎相同的效率。

請注意，這並不像兩次加載頁面一樣低效，因為.js和.css文件僅由初始頁面加載一次。 還需要初始頁面加載所有需要的.css和.js文件，因為第二次加載將不加載任何.css或.js文件。

此技術有一個警告。 如果原始HTML頁面正在$（document）.ready（）處理程序中對圖庫進行額外處理，則由於此處理程序僅在文檔的初始加載時運行，因此您還需要在處理程序執行后在該處理程序中執行任何必要的代碼畫廊的負荷。

如果要更有效地執行此操作，則需要編寫一些棘手的PHP代碼。 主要思想是使用AJAX請求加載簡碼將進入的頁面，並使用動作'template_redirect'繞過正常的WordPress模板處理，並將其替換為對簡碼的評估。 請注意，這不是“ wp_ajax ...”操作，因為處理不會在帖子的上下文中進行。