通过 AJAX 在 Wordpress 中动态更改导航链接(下一个和上一个) [英] Dynamically changing navigation links (next and previous) in Wordpress via AJAX

问题描述

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

在更改所选选项时，我有许多运行良好的 javascript 函数，但其​​中的最后一个函数(function f_next-previous)似乎不起作用.

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

这是模板中导航链接(下一个和上一个)的代码:

<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({缓存:真实，类型:获取"，超时:5000，url: 'wp-content/themes/twentyten/pages/next-previous.php?p='+id,成功:功能(味精){$('#nav-above').html(msg);},错误:函数(味精){alert("你的浏览器坏了！");返回假；}});}

文件next-previous.php内容是:

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终了；万一;?>

在通过给 p 参数赋值来测试这个 php 文件时，它会在浏览器中给出逻辑结果.很好地包含了 Jquery 和函数脚本，并且我网站中的所有 AJAX 都可以.我在这项工作中缺少什么????

更新:请注意，我的 single.php 文件中负责触发 AJAX 调用的部分是:

 
<select class="select2" name="" id="" ><option value="<?php the_ID();?>"><?php the_title();?></option><?php全球 $post;$paged = get_query_var('paged') ?get_query_var('分页'): 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();?></选择></表单>

解决方案

首先，我想指出，根据几乎在 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"部分有点误导.但是前端(查看端)以及管理面板中的所有请求都可以在 admin-ajax.php 中处理，有很多好处，尤其是在安全方面.

步骤是:

1.提交 AJAX 请求的 JavaScript 代码应如下所示:

 $(document).ready(function() {$('.select2').change(function(e) {e.preventDefault();var v = $('.select2 option:selected').val();$.ajax({类型:获取"，url: "wp-admin/admin-ajax.php",//根据你的情况检查准确的 URL数据类型:'html'，数据:({动作:'nextPrevious'，id:v})，成功:功能(数据){$('#nav-above').html(data);},错误:函数(数据){alert("你的浏览器坏了！");返回假；}});});});

注意你应该尊重Wordpress在放置JS脚本时的要求(通常在wp-footer()之前的footer.php中)

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;万一;wp_reset_query();死();}

不要忘记 die 函数，它是必需的.

有关 Wordpress 中 AJAX 的更多详细信息，谷歌首页教程很好.

Inside the loop of single.php, I have a select tag in which the options are the posts of the current category returned via a custom query.

On changing selected option, I have many javascript functions that are working well, but the last function among them (function f_next-previous), doesnt seem to work.

The aim of this function is to update the next and previous links without reloading the page.

Here is the code for navigation links (next and previous) in template:

<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 -->   

The javascript code of this function is:

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;
        }  
});

}

The file next-previous.php content is :

<?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;

?>

While testing this php file by giving it a value to the p parameter, it gives logical result in the browser. Jquery and function scripts are well included and all AJAX in my website is ok. What am I missing in this work????

UPDATE: Note that the part of my single.php file responsible of triggering the AJAX call is:

   <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>

解决方案

First, I want to note that the approach I mentionned in my question is bad according to almost tutorials talking about AJAX in wordpress. So I decided to change it based on the advice of hakre and his link : http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side.

In other words, the best way for my situation is to use the built-in AJAX in Wordpress, using the wp-admin/admin-ajax.php. AJAX requests should be directed to this file. I know the "admin" part of the file name is a bit misleading. but all requests in the front-end (the viewing side) as well as the admin panel can be processed in admin-ajax.php, with a lot of benefits, especially for security.

The steps are:

1.The JavaScript code that submits the AJAX request should look something like this:

    $(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;
                }  

            }); 

    }); 
}); 

Note that you should respect the requeriements of Wordpress in putting the JS script (generally in footer.php before wp-footer() )

2- Handling the action:

in functions.php of your theme (or directly in your plugin file), add:

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

and define in the same file nextPrevious callback function like this:

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();

}

Do not forget the die function, it is mandatory.

For more details about AJAX in Wordpress, Google first page tutorials are good.

这篇关于通过 AJAX 在 Wordpress 中动态更改导航链接(下一个和上一个)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！