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

Question

对于我的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_template_part仅在Items单击选项卡时执行或调用。

调用或执行该get_template_part函数的jQuery是什么？

编辑：

因此，我想要实现的目标类似于Ajax。由于在单击选项卡get_template_part之前不会调用该函数"Items"，因此浏览器不必调用不必要的文件并降低页面速度。

让我知道您是否认为这是最好的方法。

谢谢！

Answer 1

尽管拉斐尔（Raphael）在回答中已经说明了背后的想法，但我还是想补充一些细节。

将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您的主题中（或直接在您的插件文件中），添加：

add_action('wp_ajax_yourFunction', 'yourFunction');
add_action('wp_ajax_nopriv_yourFunction', 'yourFunction');

并在相同的文件yourFunction回调函数中定义如下：

    function yourFunction() {

// get id
    // your php code

    die();

    }

对于javascript部分，请看ajax（）及其简写get（）。对于将AJAX与Wordpress结合使用的最佳做法，网络上有很多教程（我会再提供一个）。祝好运

编辑：

正如Karl所提到的，您可以使用.load()代替ajax()，应该注意的.load()是只是包装$.ajax()。它添加了功能，使您可以定义将返回的数据插入到文档中的何处。因此，仅在调用仅会导致HTML时才真正可用。它的名称与其他名称略有不同，因为它是与特定的jQuery包装的DOM元素绑定的方法。因此，可以这样做：$('#divWantingContent').load(...)内部调用.ajax()。

但是我最初的答案是关于如何按照WordPress
最佳实践来组织php代码。