仅当用户单击选项卡的标题时,如何执行放置在选项卡中的简码。我们如何针对五个标签执行此操作?我的目标是减少我的网站的加载时间。因此,当用户单击选项卡时,仅需要加载用户想要的内容。

我相当确定执行此操作的最佳方法是利用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,创建一个页面,并且在该页面上,您需要在通过shortcodetab方法通过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注入所需的选项卡中。

10-05 20:50
查看更多