はじめに:
AJAX を介して投稿を動的に読み込むことは、一般的に求められています。 WordPress開発における機能の後。これにより、ユーザーはページ全体をリロードすることなく、より多くのコンテンツを探索できるようになり、ユーザー エクスペリエンスが向上します。この記事では、AJAX を使用して読み込みを増やす投稿を実装するときに多くの人が直面する一般的な問題について説明します。
ユーザーは AJAX を使用してページネーションを実装しようとしましたが、問題が発生し、目に見える変化が生じませんでした。ページと「さらに読み込む」ボタンの誤動作。要素を検査し、jQuery で予想される動作を観察したにもかかわらず、投稿はページに追加されませんでした。
提供されたコード スニペットを分析したところ、いくつかの潜在的な問題が明らかになりました。 :
テンプレート ファイル (index.php):
// Calculate the offset for page 2 onwards $offset = ( isset( $_GET['page'] ) && $_GET['page'] > 1 ) ? ( $_GET['page'] - 1 ) * $postsPerPage : 0; $args = [ 'post_type' => 'post', 'posts_per_page' => $postsPerPage, 'cat' => 1, 'offset' => $offset, ];
AJAX 関数(functions.php):
function more_post_ajax(){ $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3; $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0; header("Content-Type: text/html"); $args = array( 'suppress_filters' => true, 'post_type' => 'post', 'posts_per_page' => $ppp, 'cat' => 1, 'paged' => $page + 1, // Increase the page by 1 since offset is already calculated in the template file ); $loop = new WP_Query($args); $out = ''; if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post(); // Generate HTML for the post $out .= '<div class="small-12 large-4 columns">'; $out .= '<h1>'.get_the_title().'</h1>'; $out .= '<p>'.get_the_content().'</p>'; $out .= '</div>'; endwhile; endif; wp_reset_postdata(); die($out); } // Localize the 'more_post_ajax' script wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'noposts' => __('No older posts found', 'twentyfifteen'), )); add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
ajax.js:
$(document).ready(function() { var ppp = 3; var cat = 8; var pageNumber = 1; function load_posts(){ pageNumber++; var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax'; $.ajax({ type: "POST", dataType: "html", url: ajax_posts.ajaxurl, data: str, success: function(data){ var $data = $(data); if($data.length){ $("#ajax-posts").append($data); $("#more_posts").attr("disabled",false); } else { $("#more_posts").attr("disabled",true); } }, error : function(jqXHR, textStatus, errorThrown) { $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown); } }); return false; } $("#more_posts").on("click",function(){ $("#more_posts").attr("disabled",true); load_posts(); }); });
これらの問題に慎重に対処することで、AJAX を使用した他の投稿機能を正常に実装できます。オフセット式と WordPress スクリプトのローカリゼーションは、JavaScript コード内の適切なページネーションと WordPress 変数へのアクセスを保証する上で重要な役割を果たします。これらの修正により、ページに追加の投稿を動的に読み込む、完全に機能する「さらに読み込む」ボタンが作成されるはずです。
以上がWordPress の「もっと投稿を読み込む」ボタンが AJAX で動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。