記事リストページページネーション
1。jQueryライブラリをロードします
それはjQuery主導のajaxであるため、jqueryライブラリをロードすることは必須です。
2。記事リスト形式
記事リストページ（ホームページindex.php、archive.php）では、次のように同様の構造があることを確認する必要があります
<！ - すべての記事を含むコンテナ - > <div id = "content"> <！ - 各記事のコンテナ - > <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <div> </div>
3.デフォルトのナビゲーションに追加します
Ajaxのページングは毎回次のページのコンテンツを取得するため、WordPressのデフォルトナビゲーションを呼び出すだけです。次のコードをindex.php（または他の記事リストページ）に追加して、デフォルトのWordPressナビゲーションを生成します。
<div id = "pagination"> <？php next_posts_link（__（ 'load more'））; ？> </div>
4.ajax次のページを取得します
トピックJSファイルに次のコードを追加します
// live（）を使用して、ajax $（ "＃pagination a"）。live（ "click"、function（）{$（this）.addclass（ "loading"）。テキスト（ "loading ..."）; $ .ajax（{type： "post"、url：$（this "）.attr（this）.attr（" href "）.attr（" href "） +"＃content "＃content"＃conter $（ "＃content .post"）; find（ "href"） $（ "＃pagination a"）。5.スクロールトリガーページターン
マウスがページの下部にスクロールするときにページを自動的にターンする場合は、コードを次のスタイルに変更できます
//スクロールイベント$（window）.bind（ "scroll"、function（）{//ウィンドウのスクロールバーがページの下部に近いかどうかを判断します。 $ .ajax（{type： "post"、url：$（this）.attr（ "href"） + "content"、success：function（data）{result = $（data）.find（ "＃content .post"）; nexthref = $（data）.find（ "＃pagination a"）。 $（ "＃content"）。 $（ "＃pagination"）。remove（）;}}}}）;6.ナビゲーションCSSを追加します
ナビゲーションにCSSセクションを追加して美化します。また、GIFダイアグラムを準備して、ロードしていることを示すこともできます。以下はメロディーのスタイルです。
#pagination {padding：20px 0 0 30px; } #pagination .nextpostslink {width：600px;色：＃333;テキスト装置：なし;表示：ブロック;パディング：9px 0;テキストアライグ：センター;フォントサイズ：14px; } #pagination .nextpostslink：hover {background-color：#cccccc;テキスト装置：なし;ボーダーラジウス：5px; -moz-border-radius：5px; -webkit-border-radius：5px; } #pagination .loading {background：url（ "images/loading.gif"）240px 9px no-repeat;色：＃555; } #pagination .loading：hover {background-color：transparent;カーソル：デフォルト; }コメントページネーション
1。準備します
jqueryライブラリをロードすると、これは説明されていません。
2。WordPressコメントページネーションを開きます
WordPressバックエンドを開く - 設定 - ディスカッション、ページをチェックして「その他のコメント設定」にコメントを表示し、コメントの数を設定します。ここでのコメントの数は主なコメントに対してのみ計算され、コメントへの返信は計算されません。ここでは、コメントページングが詳細すぎて、ユーザーが以前のコメントを読むのが不便になるため、より多くの数字（15）に記入しました。
バックグラウンドでコメントページングを開いた後、次のコードをコメントにページングナビゲーションを追加する必要がある場所に追加します。php（トピックに同様のコードがある場合は、再度追加する必要はありません。さらに、コードのNAVタグはHTML5タグです。トピックがHTML5を使用しない場合、代わりにDivを使用します。）
<nav id = "comments-navi"> <？php paginate_comments_links（ 'prev_text =？＆next_text =？'）;？> </nav>
3。コメントページングのSEO
SEOの観点から見ると、コメントページは重複したコンテンツ（ページングのコンテンツは同じであり、キーワードと説明は同じです）を引き起こすため、コンテンツが重すぎるため、多くのコメントを持つコメントを持つ多くのコメントを備えた権利を格下げするのは簡単です。したがって、SEOではいくつかの治療が必要です。最も便利で効果的な方法は、メタタグを使用することです。 header.phpの元のメタタグの下に次のコードを追加します。これにより、ページングのページが検索エンジンに含まれ、コンテンツが複製されないようにすることが禁止されます。
<？php if（is_single（）|| is_page（））{if（function_exists（ 'get_query_var'））{$ cpage = intval（get_query_var（ 'cpage'））; $ commentpage = intval（get_query_var（ 'comment-page'））; } if（！empty（$ cpage）||！empty（$ commentpage））{echo '<meta name = "robots" content = "noindex、nofollow" />'; echo "/n"; }}？>4.Ajaxのコメント
上記によると、このトピックにはコメントページングがあります。 Ajaxでコメントページングを達成するには、協力するためにJavaScriptだけが必要です。ただし、この前に、コメントリストの前に要素を最初に追加して、新しいページのコメントリストを表示するときにリストが読み込まれていることを示す必要があります。トピックテンプレートコメントのコメントモジュール構造が次のとおりであると仮定します。
<div> <h3 id = "comments-list-title"> comments </h3> <！ - 新しいコメントの読み込み - > <div id = "loading-comments"> <span> loading ... </span> </div> <！ - コメントリスト - > <ol> <li> ... </li> <li> ... </li> < id = "comments-navi"> <a href = "＃"> 1 </a> ... </nav> </div>
次のJSコードをJSファイルに追加してコメントページネーションを実装します
// paging $ body =（window.opera）？（document.compatmode == "css1compat"？$（ 'html'）：$（ 'body'））：$（ 'html、body'）; //ページングナビゲーションリンクをクリックするとページングをトリガーします$ .ajax（{type： "get"、url：$（this）.attr（ 'href'）、beforesend：function（）{$（ '＃comments-navi'）。remove（）; $（'。comment_list '）。 $（ '＃comments-list-title'）。offset（）、800）、 "html"、function（out）{out）.find（ '。comment_list'）; $（ '＃loading-comments'）。ロードバー用のCSS（参照のみ）
コードコピーは次のとおりです。
＃loading-comments {display：none;幅：100％;高さ：45px;背景：＃a0d536;テキストアライグ：センター;色：#fff;フォントサイズ：22px;ラインハイト：45px; }