Ajax选项卡，用于在用户更改选项卡时加载和运行不同的短代码的Wordpress
Ajax选项卡，用于在用户更改选项卡时加载和运行不同的短代码的Wordpress
提问于 2018-01-13 12:10:27
只有当用户单击tab的标题时，才能执行放在选项卡中的短代码。我们要怎么做五个标签呢？我的目标是减少我的网站的加载时间。因此，只有用户想要的内容才必须在单击选项卡时加载。
我相当肯定，最好的方法是利用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。当我想要执行一个短代码的时候。
我就是你所谓的编码贱人。所有的帮助都将不胜感激。
谢谢。如果你一直读到这里，你应该有一个愉快的一天。:D
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-19 14:59:34
好吧，所以你不能用你放置template的方式来实现它。一旦echo shortcode和浏览器呈现页面，shortcode内容就必须打印出来。您需要创建一个custom-page-template.php，创建一个页面，在该页面上，您需要在使用ajax通过GET或POST方法单击tab时立即发送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调用中得到了响应。现在，您可以在所需的选项卡中插入成功的html。
Stack Overflow用户
发布于 2018-01-13 13:37:36
试一试
<button class="tabs" id="my-tabid1" data-target=".my-section1.box">Tab 1</button>
<button class="tabs" id="my-tabid2" data-target=".my-section2.box">Tab 2</button>
<button class="tabs" id="my-tabid3" data-target=".my-section3.box">Tab 3</button>
<div class="my_section1 box active" id="my-tab1">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my-section2 box" id="my-tab2">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my-section3 box" id="my_tab3">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<style>
.box {
display: none;
}
.box.active {
display: block;
}
</style>
<script>
$('.tabs').on('click', function(){
var $target = $($(this).data('target'));
$target.siblings().removeClass('active');
$target.addClass('active');
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48239740
复制相关文章
相似问题
腾讯云开发者
