AJAX를 통해 워드프레스의 탐색 링크(다음 및 이전)를 동적으로 변경

AJAX를 통해 워드프레스의 탐색 링크(다음 및 이전)를 동적으로 변경

single.php의 루프 안에 옵션이 사용자 지정 쿼리를 통해 반환되는 현재 카테고리의 게시물인 선택 태그가 있습니다.

선택한 옵션을 변경하면 잘 작동하는 자바스크립트 기능이 많은데 그중 마지막 기능 (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 -->   

이 함수의 자바스크립트 코드는 다음과 같습니다.

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와 function 스크립트는 잘 포함되어 있고 제 웹사이트의 모든 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>

먼저, 워드프레스에서 AJAX에 대해 이야기하는 대부분의 튜토리얼에 따라 제가 질문에서 언급한 접근 방식이 나쁘다는 점에 유의하고 싶습니다.그래서 저는 의 조언에 따라 변경하기로 결정했습니다.hakre그리고 그의 링크 : http://codex.wordpress.org/AJAX_in_Plugins#Ajax_on_the_Viewer-Facing_Side .

즉, WP-admin/admin-ajax.php를 사용하여 워드프레스에 내장된 AJAX를 사용하는 것이 가장 좋은 방법입니다.AJAX 요청은 이 파일로 전송해야 합니다.파일 이름의 "admin" 부분이 약간 오해의 소지가 있다는 것을 알고 있습니다. 하지만 관리 패널뿐만 아니라 프론트엔드(보기 측)의 모든 요청은 admin-ajax.php로 처리할 수 있으며 특히 보안에 많은 이점이 있습니다.

단계는 다음과 같습니다.

1.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 스크립트(일반적으로 바닥글)를 넣을 때 워드프레스의 요구사항을 준수해야 합니다.wp-footer(wp-footer) 앞에 php (ph

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에 대한 자세한 내용은 구글 첫 페이지 튜토리얼이 좋습니다.

언급URL : https://stackoverflow.com/questions/15175020/dynamically-changing-navigation-links-next-and-previous-in-wordpress-via-ajax