仅当用户单击选项卡的标题时,如何执行放置在选项卡中的简码。我们如何针对五个标签执行此操作?我的目标是减少我的网站的加载时间。因此,当用户单击选项卡时,仅需要加载用户想要的内容。
我相当确定执行此操作的最佳方法是利用Wordpress的admin-ajax.php。我搜了很多东西。而且,我已经找到了创建AJAX标签的大多数代码(我认为)。但是,当我启动代码时,它不会显示。相反,HTML向我们展示了,而AJAX没有向我们展示。
$(document).ready(function() {
$('.my_tabs a').click(function(e) {
e.preventDefault();
var tab_id = $('this').attr('id');
$.ajax({
type: "POST",
url: "wp-admin/admin-ajax.php",
dataType: 'html',
data: ({
action: 'my_tab_menu',
id: tab_id
}),
success: function(data) {
$('#my_tab' + tab_id).html(data);
},
error: function(data) {
alert("Error!");
return false;
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_tabs">
<a href="#my_tab1" id="my_tab_id_1">Tab 1</a>
<a href="#my_tab2" id="my_tab_id_2">Tab 2</a>
<a href="#my_tab3" id="my_tab_id_3">Tab 3</a>
<a href="#my_tab4" id="my_tab_id_4">Tab 4</a>
<a href="#my_tab5" id="my_tab_id_5">Tab 5</a>
</div>
<div class="my_section" id="my_tab1">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my_section" id="my_tab2">
<?php echo do_shortcode ('[shortcode-2]'); ?>
</div>
<div class="my_section" id="my_tab3">
<?php echo do_shortcode ('[shortcode-3]'); ?>
</div>
<div class="my_section" id="my_tab4">
<?php echo do_shortcode ('[shortcode-4]'); ?>
</div>
<div class="my_section" id="my_tab5">
<?php echo do_shortcode ('[shortcode-5]'); ?>
</div>
我使用页面构建器将所有代码直接添加到页面中。因此,我没有在我要实现的特定选项卡上使用functions.php来add_action。
我在stackover的类似文章中找到了所有代码:
Ajax tabs (wordpress)
他们将template_parts称为选项卡。我想在哪里执行简码。
我就是您所说的编码Bimbo。所有帮助将不胜感激。
谢谢。如果您设法读到这里,那么您就应该拥有愉快的一天。 :D
最佳答案
好的,所以您无法以放置template
的方式来实现它。 echo
shortcode
和浏览器呈现页面后,必须已打印shortcode
内容。您需要创建一个custom-page-template.php
,创建一个页面,并且在该页面上,您需要在通过shortcode
或tab
方法通过GET
单击POST
时立即发送ajax
处理程序。
在您的自定义模板中,您会收到[shortcode-1]
。示例代码如下所示:
<?php
/*
Template Name: Shortcode Processor
*/
$current_shortcode = $_POST['shortcode_name'];
?>
<div id="shortcode-contents">
<?php echo do_shortcode($current_shortcode); ?>
</div>
现在,您可以在Ajax Call中获得响应。现在,您可以将成功html注入所需的选项卡中。