Question

我尝试在Wordpress的bootstrap模式窗口中打开一个帖子。目标是通过Ajax加载帖子内容，因为模式窗口放在页脚中。

这就是我现在所拥有的：

在页脚中加载的

我的模板部分（modal.php）

<div class="modal fade" id="myModal-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"><?php the_title();?></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <?php the_content();?>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

如您所见，我需要将一些内容从查询传递到页脚中的div。

我的链接，即打开模态窗口：

<a href="#" class="modal-link" data-toggle="modal" data-target="#myModal-<?php the_ID(); ?>" >View more</a>

那么解决这个问题的最简洁方法是什么？

感谢您的任何建议！卡拉

Answer 1

您可以将REST API用于worpdress（http://v2.wp-api.org/），这样您就可以使用ajax加载帖子内容并将其附加到您认为合适的div中

示例：

$.get('http://demo.wp-api.org/wp-json/wp/v2/posts/470',function(data){
    data = JSON.parse( data );
    $('div.selector').html( data.content );
})

我希望这会有所帮助

Answer 2

首先，你必须在header.php或包含ajax调用的页面中声明一个ajax url：

<script type="text/javascript" language="javascript">
    var ajax_url = "<?php bloginfo('url'); ?>/wp-admin/admin-ajax.php";
</script>

然后，在你当前的主题中打开function.php并声明一个ajax调用：

function implement_ajax() {
    include(TEMPLATEPATH . '/ajax_return.php');
}

add_action('wp_ajax_my_special_action', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_action', 'implement_ajax');

现在，你必须在你想要工作的页面内设置ajax调用。

<script type="text/javascript">
jQuery(function(){
   jQuery('.modal-link').click(function(){
       var mypostid = ''; Will be contained element that allows you to manage dinamical content (such as post_id).
       jQuery.post(ajax_url, {action : 'my_special_action', post_id : mypostid}, return_function, 'JSON');
   });
});
</script>

因此，在当前主题中创建ajax_return.php。此文件将包含查询，为您的模态提供dinamical内容。例如：

query_posts('page_id=' . $_POST['id']);
if(have_posts()) while(have_post()) : the_post();
   $dinamic_post_content = get_the_content();
endwhile;

return json_encode(array('return' => $dinamic_post_content));
exit;

在jQuery.post之后，你必须调用＆＃34; return_function＆＃34;这允许您正确管理响应和设置模态：

function return_function(data)
{
    jQuery('.modal-body').html(data.return);
}

Wordpress：使用AJAX将帖子内容传递到div

2 个答案: