通过AJAX动态变化的导航链接(next和previous)在WordPress的(Dynamica

2019-07-20 20:26发布

我在我的WordPress网站,single.php中的循环中,选择标签中的选项是通过自定义查询返回的当前类别的职位。

在改变所选的选项,我有一个运作良好众多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;

?>

虽然给它一个值p参数测试此PHP文件,它提供了在浏览器中的逻辑结果。 jQuery和功能的脚本也包括在内,所有AJAX在我的网站就可以了。 那我在这工作缺少????

更新:请注意,我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 。

换句话说,我的情况最好的方法是使用内置的AJAX中的WordPress,使用可湿性粉剂管理员/管理员-ajax.php。 AJAX请求应被定向到这个文件。 我知道文件名的“管理”部分是有点误导。 但在前端的所有请求(观看侧),以及管理面板可以在管理员-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(一般在footer.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();

}

不要忘了模具的功能,它是强制性的。

有关AJAX在WordPress的更多详细信息,谷歌第一页的教程都不错。



文章来源: Dynamically changing navigation links (next and previous) in Wordpress via AJAX