기사 목록 페이지 페이지 매김
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>
3. 기본 탐색에 추가하십시오
Ajax 페이징은 매번 다음 페이지의 내용을 가져 오기 때문에 WordPress의 기본 탐색 만 호출하면됩니다. 기본 WordPress 탐색을 생성하려면 index.php (또는 기타 기사 목록 페이지)에 다음 코드를 추가하십시오.
<div id = "Pagination"> <? php next_posts_link (__ ( 'load more')); ?> </div>
4. Ajax 다음 페이지를 얻습니다
주제 js 파일에 다음 코드를 추가하십시오
// live ()를 사용하여 ajax $ ( "#pagination a"). live ( "click", function () {$ (this) .addclass ( "loading"). text ( "loading ..."); $ .ajax ({type : "post", url : $ (this) .attt ( "href") + "#content (function)", function ") $ (data). "#content .post" {#pagination a ") att ("href ", nexthref) {// 링크가 없으면 내비게이션을 제거합니다.5. 스크롤 트리거 페이지 회전
마우스가 페이지 하단으로 스크롤 할 때 페이지를 자동으로 돌리려면 코드를 다음 스타일로 변경할 수 있습니다.
// scroll event $ (wind 유형 : url : $ (this) .attr ( "href") + "#content", success (data) {result = $ (data) .find ( "#axthref") $ ( "#content"). $ ( "#Pagination"). remove ();}});6. 내비게이션 CS를 추가하십시오
내비게이션에 CSS 섹션을 추가하여 아름답게하십시오. GIF 다이어그램을 준비하여로드 중임을 나타냅니다. 다음은 멜로디의 스타일입니다.
#Pagination {패딩 : 20px 0 30px; } #pagination .nextpostsLink {너비 : 600px; 색상 : #333; 텍스트 결정 : 없음; 디스플레이 : 블록; 패딩 : 9px 0; 텍스트 정렬 : 센터; 글꼴 크기 : 14px; } #pagination .nextpostsLink : 호버 {배경색 : #cccccc; 텍스트 결정 : 없음; Border-Radius : 5px; -Moz 국경 Radius : 5px; -webkit-border-radius : 5px; } #Pagination .LOWDING {배경 : URL ( "images/loading.gif") 240px 9px no-Repeat; 색상 : #555; } #pagination .loading : 호버 {배경색 : 투명; 커서 : 기본값; }댓글이 페이지 매김
1. 준비
jQuery 라이브러리로드하면 설명되지 않습니다.
2. WordPress 주석 페이지 매김을 열어줍니다
WordPress 백엔드 열기 - 설정 - 토론, 페이지를 확인하여 "기타 주석 설정"에 주석을 표시하고 주석 수를 설정하십시오. 여기의 의견 수는 주요 의견에 대해서만 계산되며 의견에 대한 답변은 계산되지 않습니다. 여기서 나는 댓글 페이징이 너무 상세하고 사용자가 이전 주석을 읽는 데 불편하게 만들 것이기 때문에 더 많은 수 (15)를 채웠다.
백그라운드에서 댓글 페이징을 열면 댓글에 페이징 탐색을 추가 해야하는 위치에 다음 코드를 추가하십시오.
<nav id = "comment-navi"> <? php pagitinate_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" />'; 에코 "/n"; }}?>4. ajax 댓글
위의 내용에 따르면, 주제에는 주석 페이징이 있습니다. Ajax에서 댓글 페이징을 달성하려면 협력하기 위해 자바 스크립트 만 있으면됩니다. 그러나 그 전에는 먼저 주석 목록 앞에 요소를 추가하여 새 페이지 주석 목록을 표시 할 때 목록이로드되고 있음을 나타냅니다. 주제 템플릿 주석의 주석 모듈 구조가 다음과 같습니다.
<div> <h3 id = "Comments-List-Title"> 의견 </h3> <!-새로운 주석 표시-> <div id = "span div id ="span hoading ... </span> </div> <!-댓글 목록-> <ol> <li> ... </li> <li> ... </li> ... </li> </ol> < "naf id =" "nafiation avination-navination </ol> < <a href = "#"> 1 </a> ... </nav> </div>
주석 페이지 매김을 구현하려면 JS 파일에 다음 JS 코드를 추가하십시오.
// 댓글 paging paging paging $ body = (window.opera)? (docum $ .ajax ({type : "get", url : $ (this) .attr ( 'href'), beforeSend : beforeSend : function () {$ ( '##comments-navi'). remove (); $ ( '. comment_list'). remain ( '##loading-comments'). slidedown (); $ body.animate ({scrolltop : ^. $ ( '#comments-list-title'). Offset (). Top-65}, datatype : "html", function (out) {ontam_link = $ ( '#comments-navi'); $ ( '#loading-comments').로딩 바를위한 CSS (참조 만)
코드 사본은 다음과 같습니다.
#로드 코멘트 {디스플레이 : 없음; 너비 : 100%; 높이 : 45px; 배경 : #A0D536; 텍스트 정렬 : 센터; 색상 : #fff; 글꼴 크기 : 22px; 라인 높이 : 45px; }