如何在WordPress中实现AJAX POST导航？

时间：2017-07-22 作者：Prisma

我正在开发一个wordpress页面模板，就像this.我已经完成了设计，并加载了模板，一旦用户使用我的模板进入这个页面。我想在此模板中打开更多文章列表中的所有帖子，而不刷新页面。但当我点击列表中的任何帖子时，它会打开一个新页面，这与我的页面模板不同。请指导我如何在模板中打开的“更多文章”列表中打开帖子。这是我到目前为止的密码。

<?php  if ( have_posts() ):
    while ( have_posts() ) :
        the_post(); ?>

  <div id="main" class="left-half" style="  background-image: url(<?php echo intrigue_get_attachment(); ?>);       width:50%; display: inline-block; float: right; position: fixed;  ">
      <h2 style="diplay:inline-block"><a href="<?php echo esc_url( home_url( \'/\' ) );?>"><?php bloginfo( \'name\' );?></a></h2> 
  <input id="morearticlesbtn" class="button" type="button" onclick="openNav()" value="More Articles "> 
  <div class="row">
  <div class="post-meta col-md-6">
      <p>July 18, 2017</p>
      By: <a href="#">James Crock </a>
      <a href="#"> Transport</a> 
  </div>
      <div class="col-md-6">
          <div class="line"></div>
      </div>
  </div>


  <div class="title-div">
      <a href="<?php echo the_permalink() ?>"> <h1 class="title"><?php the_title() ?></h1></a>
  </div>

  <div class="row">
      <div class="col-md-9" >
          <div class="line bottom-line"></div>
      </div>
  <div class="col-md-3 bottom-line-text">
  <h4>Next</h4>
  </div>

    </div>
    </div>

  <div id="right" class="right-half" style="width: 50%; display: inline-block; float:right;">
      <div class=" content-div">
       <?php the_content();?>
      </div>
      <div class="tags content-div clear-fix">
           <h6>Tags:</h6> 
           <?php echo get_the_tag_list();?>
<!--      <a href="#"><h6>Promotional</h6></a><a href="#"><h6>Pop-Ups</h6></a>-->
      </div>
</div>


 <?php endwhile;   endif;              ?>               

<!--   
THE OFFCANVAS MENU
    -->



    <div id="mySidenav" class="sidenav menu">
    <div class="hidden-menu-div">
  <input class="button close-button" type="button" onclick="closeNav()" value="Hide List "> 
  <div>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
  <a href="#search">Search</a>
  </div>
  </div>

        <?php  
                $temp = $wp_query; $wp_query= null;
        $wp_query = new WP_Query(); $wp_query->query(\'posts_per_page=6\' . \'&paged=\'.$paged);
        while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

        <div class="col-sm-6 hiden-cat-post">
            <a href="<?php echo the_permalink(); ?>" class="hidden-cat-item">
                <div class="hidden-cat-thumbnail" ><?php the_post_thumbnail(array(340, 230))?> </div>
                <div class="hidden-cat-item-text">
                    <h1 class="hidden-cat-item-title"> <?php the_title(); ?> </h1>
                    <div class="excerpt"></div>
                    <div class="hidden-item-meta">jul 10,2017</div>
                </div>
            </a>
        </div> 

   <?php endwhile; ?>
  <?php if ($paged > 1) { ?>

        <nav id="nav-posts">
            <div class="prev"><?php next_posts_link(\'&laquo; Previous Posts\'); ?></div>
            <div class="next"><?php previous_posts_link(\'Newer Posts &raquo;\'); ?></div>
        </nav>

        <?php } else { ?>

        <nav id="nav-posts">
            <div class="prev"><?php next_posts_link(\'&laquo; Previous Posts\'); ?></div>
        </nav>

        <?php } ?>

        <?php wp_reset_postdata(); ?>


    </div>  






<!--

  SCRIPT
    -->

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "50%";
    document.getElementById("main").style.marginLeft = "50%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

2 个回复

最合适的回答,由SO网友:Johansson 整理而成

您需要的是AJAX导航。这并不复杂，但也不是很容易。我为你写了一个简单的例子，希望对你有所帮助。

AJAX请求有两个步骤，首先是前端请求，当用户单击链接或元素时由浏览器发出，然后是服务器的响应。

如果我们需要在我们的网站上使用这种回应，还有第三步，那就是。。。正在使用我们网站中的响应！

根据用户需求创建AJAX请求如果用户单击链接，我们必须停止浏览器导航到该页面。我们可以通过使用jQuery函数来实现这一点，该函数名为preventDefault(). 这将阻止绑定到它的任何元素的默认操作，无论是表单还是链接。

我们需要建立一些自定义链接，以确保我们不会干扰其他链接，如社交网络。我们将向导航链接添加一个类和一个属性，以便在AJAX请求中使用它。

为了获取下一篇文章的数据，我们使用get_next_post(); 和get_previous_post();. 我们也需要身份证。因此：

$next_post = get_next_post();
$prev_post = get_previous_post();
// Check if the post exists
if ( $prev_post ) { ?>
    <div class="prev ajax-link" data-id="<?php echo $prev_post->ID; ?>"><?php _e(\'&laquo; Previous Posts\',\'text-domain\'); ?></div><?php
}
if ( $next_post ) { ?>
    <div class="next ajax-link" data-id="<?php echo $next_post->ID; ?>"><?php _e(\'Newer Posts &raquo;\',\'text-domain\'); ?></div><?php
}

现在，我们将编写一个jQuery函数并禁用自定义链接上的click事件：

(function($){
    $(\'.ajax-link\').on(\'click\',function(e){
        e.preventDefault();
        // The rest of the code goes here, check below
    });
})(jQuery);

通过使用$(this) 我们获得之前保存在中的帖子的IDdata-id:

var postId = $(this).attr(\'data-id\');

好了，现在我们有了ID，让我们创建一个AJAX请求来输出尚未写入的REST端点，并将响应放在一个DIV中，该DIV用作内容的容器：

$.get( \'http://example.com/prisma/ajax_navigation/\', {
    ajaxid: postId
}).done( function( response ) {
    if ( response.success ) {
        $( \'#content-div\' ).innerHTML( response.content );
    }
});

其中content-div 是的IDDIV 保存您的内容。它是元素的ID，而不是类，并且在整个页面中必须是唯一的。好了，是时候写服务器端端点了。

创建REST端点以返回帖子的数据

创建REST端点与下面几行一样简单：

add_action( \'rest_api_init\', function () {
    //Path to AJAX endpoint
    register_rest_route( \'prisma\', \'/ajax_navigation/\', array(
            \'methods\' => \'GET\', 
            \'callback\' => \'ajax_navigation_function\' 
    ) );
});

我们已在http://example.com/prisma/ajax_navigation/. 现在可以访问该路径，但我们仍然需要一个回调函数来返回帖子的数据。

function ajax_navigation_function(){
    if( isset( $_REQUEST[\'ajaxid\'] ) ){
        $post = get_post( $_REQUEST[\'ajaxid\'] );
        $data[\'content\'] = $post->post_content;
        $data[\'success\'] =  true;
        return $data;
    }
}

就是这样。现在，每当用户单击next post或previous post元素时，将通过AJAX获取next post或previous post的内容，并将其插入到ID为的DIV元素中content-div.

全部完成。

SO网友:Abdul Awal Uzzal

您可以简单地将代码放在单个中。php，如果您希望所有帖子都使用此模板样式。

或者，如果要将使用限制为单个post类型，可以将代码放在文件名single-{post type}中。php

*将{post type}替换为所需的post type名称。

结束

小码农CODE

如何在WordPress中实现AJAX POST导航？

创建REST端点以返回帖子的数据

相关推荐

Ajax with plugins returns 0