記事をAJAX経由でポストナビゲーションで表示

Question

AJAXでポストを読み込もうとしていて、読み込まれたポストにAJAXベースのポストナビゲーションがあります。

私の質問は次のとおりです。投稿のページ設定をどのようにしてフッタを投稿する必要がありますか？ （私が意味するものを理解することが難しい場合は、linked imageをチェックしてください）。したがって、現在開いているポストのフッターからナビゲートすると、直前または次のプロジェクトをまっすぐに開くことができます。これは、ナビゲートしたものと同じdiv＃単一プロジェクトに開かれます。

同じfunctions.php関数を使用してページングデータを送信できますか、ページングデータを送信する新しい関数を作成する必要がありますか。

のfunctions.php

add_action('wp_ajax_load_post', 'working_function'); 
add_action('wp_ajax_nopriv_load_post', 'working_function'); 

    function working_function() { 
     check_ajax_referer('nonce', 'security'); 
     if (isset($_POST['id']) 
      && 'post' == get_post_type($_POST['id']) 
      && 'publish' == get_post_status($_POST['id'])) { 
      $id = (int)$_POST['id']; 
      global $post; 
      $post = get_post($id); 
      $prev_post = get_previous_post(); 
      $next_post = get_next_post(); 

      $data = array(); 
      $data['article'] = '<h1>' . apply_filters('the_title', $post->post_title) . '</h1>'; 
      $data['article'] .= apply_filters('the_content', $post->post_content); 
      $data['article'] .= '<footer>' . '<nav class="navigation pagination">' . '<div class="nav-links">' . '<div class="nav-previous">' . '<a nav-id=""' . 'href="' . apply_filters('the_permalink', get_permalink($prev_post->ID)) . '" rel="prev">Previous Article</a>' . '</div>' . '<div class="nav-next">' . '<a href="' . apply_filters('the_permalink', get_permalink($next_post->ID)) . '" rel="prev">Next Article</a>' . '</div' . '</div>' . '</nav>' . '</footer>'; 
      wp_send_json_success($data); 
     } else { 
      wp_send_json_error('Error'); 
     } 
     wp_die(); 
    } 

メインJS：

$(document).on('click', '.nav-links a', function (event) { 
      event.preventDefault(); 
     }); 

Answer 1

I：私のメインのjsファイルへ

jQuery(function ($) { 
    "use strict"; 
    $(document).ready(function() { 
     $(document).on('click', 'a.link-to', function (event) { 
      event.preventDefault(); 
      var id = $(this).data('id'); 
      $.ajax({ 
       url: ajax_url, 
       type: 'POST', 
       data: { 
        action: 'load_post', 
        security: nonce, 
        id: id 
       }, 
       success: function (data) { 
        if (data.success) { 
         var article = $(data.data.article); 
         $('.single-project').html(article); 
         $('html, body').animate({ 
          scrollTop: ($("#single-project").first().offset().top) 
         }, 400); 
        } else { 
         console.log(data.data); 
        } 
       }, 
       error: function (data) { 
        console.log('Error'); 
       } 
      }); 
     }); 
    }); 
}); 

、私は新しいクリック機能、このような何かを行う必要があります何とかそれは働いていた。私はa.link-to-click関数がloadProject関数を呼び出し、呼び出しにIDを送信するように変更しました。次に、loadProject関数は正しいIDを持つajaxを呼び出します。

前回と次回の投稿リンクの動作が変更されました。クリックすると、ポストのIDを持つpaginateProject関数が呼び出されます。 paginateProject関数は、再度loadProject関数を呼び出します。

function loadProject(projectID) { 
    "use strict"; 
    jQuery.ajax({ 
     url: ajax.ajax_url, 
     type: 'POST', 
     data: { 
      action: 'load_post', 
      security: nonce, 
      id: projectID 
     }, 
     success: function (data) { 
      if (data.success) { 
       var article = $(data.data.article); 
        jQuery(this).html(article); 
      } else { 
       console.log(data.data); 
      } 
     }, 
     error: function (data) { 
      console.log('Error_loadProject'); 
     } 
    }); 
} 

function paginateProject(slug) { 
    "use strict"; 
    var projectID = slug; 
    console.log('Clicked onclick="paginateProject(' + projectID + ')"'); 
    loadProject(projectID); 
} 

    $(document).on('click', 'a.link-to', function (event) { 
     event.preventDefault(); 
     var projectID = $(this).data('id'); 
     loadProject(projectID); 
     console.log('Clicked a.link-to ' + projectID); 
    });