对于我的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"部分。
tab1.php
div id="tab1"
但是,我要使其get_template_part仅在Items单击选项卡时执行或调用。
get_template_part
Items
调用或执行该get_template_part函数的jQuery是什么?
编辑:
因此,我想要实现的目标类似于Ajax。由于在单击选项卡get_template_part之前不会调用该函数"Items",因此浏览器不必调用不必要的文件并降低页面速度。
"Items"
让我知道您是否认为这是最好的方法。
谢谢!
尽管拉斐尔(Raphael)在回答中已经说明了背后的想法,但我还是想补充一些细节。
将AJAX与Wordpress结合使用的最佳方法是使用其内置的处理方式,并且通过将请求发送到wp-admin/admin- ajax.php(我知道文件名的“ admin”部分有点误导。但是所有请求都位于前面,可以在其中处理终端(查看端)和管理员admin- ajax.php,这有很多好处,尤其是在安全方面;对于将要执行的服务器端代码php,应将其放置在中functions.php。
wp-admin/admin- ajax.php
admin- ajax.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回调函数中定义如下:
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()。
.load()
ajax()
$.ajax()
$('#divWantingContent').load(...)
.ajax()
但是我最初的答案是关于如何按照WordPress 最佳实践来组织php代码。