通过AJAX动态改变Wordpress中的导航链接（下一个和前一个）

Question

我在我的wordpress站点，在single.php循环中，有一个select标签，其中的选项是通过自定义查询返回的当前类别的帖子。

关于更改选定的选项，我有很多运行良好的javascript函数，但其​​中最后一个函数（function f_next-previous）似乎不起作用。

此功能的目的是在不重新加载页面的情况下更新下一个和上一个链接。

相对于导航链接在我的模板（下一个和以前）的代码运作良好，是上面：

<div id="nav-above" class="navigation"> 

<div class="nav-previous"><?php previous_post_link('%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/previous.png" />'); ?></div> 

<div class="nav-next"><?php next_post_link('%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/next.png" />'); ?></div> 

</div><!-- #nav-above --> 

此功能的JavaScript代码：

function f_next-previous(id) 
{ 
     $.ajax({ 
     cache: true, 
     type: "GET", 
     timeout: 5000, 
     url: 'wp-content/themes/twentyten/pages/next-previous.php?p='+id, 
     success: function(msg) 
     { 

    $('#nav-above').html(msg); 

     }, 
     error: function(msg) 
     { 
      alert("Your browser broke!"); 
       return false; 
     } 
}); 

} 

文件next-previous.php内容是：

<?php 
$p=$_GET['p']; 
require('../../../wp-load.php'); 



$my_query = new WP_Query(); 
$my_query->query(array('post__in' => array($p))); 

if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?> 


<div class="nav-previous"><?php previous_post_link('%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/previous.png" />'); ?></div> 
<div class="nav-next"><?php next_post_link('%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/next.png" />'); ?></div> 

<?php 

endwhile; 
endif; 

?> 

在测试此php文件时y给p参数一个值，它在浏览器中给出逻辑结果。 jquery和函数脚本都包含在内，并且我网站上的所有AJAX都可以。我在这部作品中缺少什么？

UPDATE： 请注意，我的single.php文件的负责触发AJAX调用的部分是：

<form method="post" action=""> 

    <select class="select2" name="" id="" > 
    <option value="<?php the_ID();?>"><?php the_title();?></option> 

    <?php 
global $post; 
$paged = get_query_var('paged') ? get_query_var('paged') : 1; 
$myposts = get_posts("paged=$paged&category=4"); 

foreach($myposts as $post) :?> 

     <option value="<?php the_ID();?>"><?php the_title();?></option> 

     <?php endforeach; 
     wp_reset_postdata(); ?> 

     </select> 
     </form> 

Answer 1

首先，我想指出，我在我的问题mentionned的做法是坏根据在wordpress中谈论AJAX的几乎教程。所以我决定根据hakre的建议和他的链接http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side来改变它。

换句话说，对我来说最好的方式是使用WordPress中的内置AJAX，使用wp-admin/admin-ajax.php。 AJAX请求应该指向这个文件。我知道文件名的“管理员”部分有点让人误解。但前端（查看端）以及管理面板中的所有请求都可以在admin-ajax.php中处理，具有很多好处，特别是对于安全性。

的步骤是：

1. JavaScript代码提交AJAX请求应该是这个样子：

$(document).ready(function() { 
     $('.select2').change(function(e) { 
    e.preventDefault(); 

    var v = $('.select2 option:selected').val(); 


      $.ajax({ 
       type: "GET", 
       url: "wp-admin/admin-ajax.php", // check the exact URL for your situation 
       dataType: 'html', 
       data: ({ action: 'nextPrevious', id: v}), 
       success: function(data){ 

       $('#nav-above').html(data); 

       }, 
       error: function(data) 
       { 
       alert("Your browser broke!"); 
       return false; 
       } 

      }); 

    }); 
}); 

请注意，您应该尊重把JS的WordPress的requeriements脚本（通常在页脚。PHP之前WP-页脚（））

2-处理的操作：

在你的主题的 functions.php

（或直接在你的插件文件），添加：

add_action('wp_ajax_nextPrevious', 'nextPrevious'); 
add_action('wp_ajax_nopriv_nextPrevious', 'nextPrevious'); 

和定义同一文件nextPrevious回调函数是这样的：

function nextPrevious() { 

$p= $_GET['id']; 
$my_query = new WP_Query(); 

$my_query->query(array('post__in' => array($p))); 

if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?> 



<div class="nav-previous"><?php previous_post_link('%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/previous.png" />'); ?></div> 

<div class="nav-next"><?php next_post_link('%link', '<img height="34" src="' . get_bloginfo("template_directory") . '/images/next.png" />'); ?></div> 

<?php endwhile; 
endif;     

wp_reset_query(); 

die(); 

} 

不要忘了模具的功能，它是mandato RY。

有关Wordpress中AJAX的更多详细信息，Google首页教程都很好。