仅在单击时执行php函数（wordpress）

对于我的一个wordpress站点php文件，我有以下代码：

  <div class="tabs">
      <a href="#tab1" id="items_id">Items</a>
  </div>
  <div class="section" id="tab1">
    <?php get_template_part('page/tab1'); ?>            
  </div>

因此，它将调用

tab1.php

文件到

div id=“tab1”

部分

但是，我希望这样做，只有在单击

项目

选项卡时才能执行或调用

获取模板部分

调用或执行

get\u template\u part

函数的jQuery是什么

编辑：

因此，我试图实现的与Ajax类似。由于在单击

“项目”

选项卡之前不会调用

get\u template\u part

函数，因此浏览器不必调用不必要的文件并降低页面速度

如果你认为这是最好的方法，请告诉我

---

谢谢

您不能真正从javascript调用PHP函数，因为当浏览器看到页面时，PHP已经执行（或者在您的情况下，没有执行）

---

要完成所需的操作，唯一的方法是将PHP函数拆分为单独的脚本，然后使用AJAX调用该文件。让脚本回显HTML，然后将HTML插入AJAX回调中的tab1 div。

我认为最简单的解决方案是使用jQuery

load（）

函数。这是实现你所描述的目标的最简单的方法。唯一的问题是，当有人单击标题时，将延迟获取子项，因为它们还不存在（这对于延迟加载的任何情况都是如此）

HTML：

  <div class="tabs">
      <a href="#tab1" id="items_id">Items</a>
  </div>
  <div class="section" id="tab1"></div>

$(function () { 
     //wait for the page to finish loading
   $('#items_id').click (function (e){
     //watch for the items header to be clicked
   e.preventDefault();
    //prevent it from opening a link
    $('#tab1').load('tab1.php');
   //load the tab1.php file, or whatever file INTO the div
   });
})

---

虽然拉斐尔在他的回答中已经说明了背后的想法，但我想补充一些细节

将AJAX与Wordpress结合使用的最佳方法是使用其内置的处理方式，并通过向

wp admin/admin AJAX.php

发送请求（我知道文件名的“admin”部分有点误导。但是所有请求都在前端（查看端）此外，管理员可以在

admin ajax.php

中处理，这有很多好处，特别是在安全方面。对于将要执行的服务器端代码php，它应该放在

functions.php

中

您的jQuery代码如下所示：

 $(document).ready(function() {
        $('.tabs a').click(function(e) {
            e.preventDefault();

            var tab_id = $(this).attr('id'); 


            $.ajax({
                type: "GET",
                url: "wp-admin/admin-ajax.php", 
                dataType: 'html',
                data: ({ action: 'yourFunction', id: tab_id}),
                success: function(data){
                          $('#tab'+tab_id).html(data);
                },
                error: function(data)  
                {  
                alert("Error!");
                return false;
                }  

            }); 

    }); 
}); 

在主题的

functions.php

中（或直接在插件文件中），添加：

并在同一文件中定义如下回调函数：

    function yourFunction() {

// get id
    // your php code

    die();

    }

关于javascript部分，请看一看它的简写。关于使用AJAX和Wordpress的最佳实践，web上有很多教程（我会回来给你一个）。祝你好运

编辑：

正如Karl提到的，您可以使用

.load（）

而不是

ajax（）

，应该注意的是

.load（）

只是

$.ajax（）的包装器

。它添加了一些功能，允许您定义返回数据在文档中的插入位置。因此，只有在仅调用将生成HTML时才可用。它的调用与另一个略有不同，因为它是绑定到特定jQuery包装DOM元素的方法。因此，可以这样做：

$（“#divWantingContent”）.load（…）

它在内部调用

.ajax（）

---

但我最初的回答是关于如何组织有关Wordpress的php代码。

jQuery AJAX:谢谢你的回答。你能给我看一下或给我举个例子吗？我不完全理解如何实现这一点。（我想我理解为什么它不起作用，但我不能100%确定如何实现你的建议）。其他两个答案实际上都有很好的代码示例。我不会添加更多的噪音，只是简单地推荐这两个：）谢谢。我会试试这个，然后再回复给你。=）谢谢这个答案！一次编辑，你需要在你的url上添加斜杠，这样请求就可以从每个页面正确播放。

url:/wp admin/admin ajax.php”

    function yourFunction() {

// get id
    // your php code

    die();

    }