WordPress용 Ajax 기술: 플러그인과 그 목적. 끝없는 목록에 WordPress 게시물 표시 페이지를 스크롤할 때 게시물이 끝없이 로드됩니다.

Ajax Load More는 궁극의 Ajax 기반 쿼리를 사용하여 게으른 로딩 게시물, 단일 게시물, 페이지, 댓글 등을 위한 WordPress 무한 스크롤 플러그인입니다.

Ajax Load More 단축 코드 빌더를 사용하여 복잡한 사용자 정의 WordPress 쿼리를 작성한 다음 생성된 단축 코드를 콘텐츠 편집기를 통해 페이지에 추가하거나 템플릿 파일에 직접 추가하세요.

Ajax Load More는 WooCommerce 및 Easy Digital Downloads와 같은 인기 있는 전자상거래 플러그인과의 끝없는 스크롤과 호환됩니다.

특징
  • 단축 코드 작성기 — 사용하기 쉬운 단축 코드 작성기에서 다양한 WordPress 쿼리 매개변수를 조정하여 사용자 정의 Ajax Load More 단축 코드를 생성합니다(단축 코드 매개변수 참조).
  • 쿼리 매개변수 - Ajax Load More를 사용하면 다양한 콘텐츠 유형별로 WordPress를 쿼리할 수 있습니다. 게시물 유형, 게시물 형식, 날짜, 카테고리, 태그, 사용자 정의 분류, 검색어, 작성자 등을 기준으로 쿼리하세요!
  • 반복기 템플릿 — 웹 사이트의 모양과 느낌에 맞는 자신만의 반복기 템플릿을 생성하여 Ajax Load More의 기능을 편집하고 확장합니다(스크린샷 참조).
  • 다중 인스턴스 — 단일 페이지, 게시물 또는 템플릿에 Ajax Load More의 여러 인스턴스를 포함할 수 있습니다.
  • Ajax 필터링 — Ajax Load More 사용자 정의 필터링 방법을 사용하면 Ajax 쿼리 결과를 필터링하고 업데이트할 수 있습니다.
  • 다중 사이트 호환성 — 네트워크의 모든 사이트에서 리피터 템플릿을 관리합니다.
  • 설정 패널 — 다양한 플러그인 설정을 업데이트하여 Ajax Load More 버전을 사용자 정의하세요.
  • 리피터 — 리피터 템플릿을 선택합니다(추가 기능 사용 가능). 기본값 = '기본값'
  • post_type — 쉼표로 구분된 게시물 유형 목록입니다. 기본값 = '게시물'
  • sticky_posts — Ajax 목록에서 고정 게시물 순서를 유지합니다. 기본값=거짓
  • post_format — 게시물 형식으로 쿼리합니다. 기본값 = null
  • 카테고리 — 슬러그에 포함할 카테고리를 쉼표로 구분한 목록입니다. 기본값 = null
  • Category__and — ID별로 포함할 카테고리를 쉼표로 구분한 목록입니다. 기본값 = null
  • Category__not_in — ID별로 제외할 카테고리를 쉼표로 구분한 목록입니다. 기본값 = null
  • tag — 슬러그에 포함할 쉼표로 구분된 태그 목록입니다. 기본값 = null
  • tag__and — ID별로 포함할 쉼표로 구분된 태그 목록입니다. 기본값 = null
  • tag__not_in — ID별로 제외할 태그의 쉼표로 구분된 목록입니다. 기본값 = null
  • 분류 — 사용자 정의 분류 이름으로 쿼리합니다. 기본값 = null
  • Taxonomy_terms — 사용자 정의 분류 용어(슬러그)를 쉼표로 구분한 목록입니다. 기본값 = null
  • 분류_연산자
  • Taxonomy_relation — 둘 이상의 분류가 있는 경우 각 분류 간의 논리적 관계입니다. (그리고/또는). 기본값 = 'AND'
  • 일 - 요일. 기본값 = null
  • 월 – 올해의 달. 기본값 = null
  • year - 게시물의 연도입니다. 기본값 = null
  • Taxonomy_operator — 분류 용어를 (IN/NOT IN)과 비교하는 연산자입니다. 기본값 = 'IN'
  • Meta_key — 사용자 정의 필드 키(이름). 기본값 = null
  • Meta_value — 사용자 정의 필드 값입니다. 기본값 = null
  • Meta_compare — Meta_key와 Meta_value를 비교하는 연산자입니다. 기본값 = 'IN'
  • Meta_type — 사용자 정의 필드 유형. 기본값 = 'CHAR'
  • Meta_relation — 여러 사용자 정의 필드 항목(AND/OR)과 함께 사용됩니다. 기본값 = 'AND'
  • 작성자 — ID별로 쉼표로 구분된 작성자 목록입니다. 기본값 = null
  • post__in — 쿼리에 포함할 게시물 ID의 쉼표로 구분된 목록입니다. 기본값 = null
  • post__not_in — 쿼리에서 제외할 게시물 ID의 쉼표로 구분된 목록입니다. 기본값 = null
  • 검색 — 검색어('s')를 검색합니다. 기본값 = null
  • custom_args — 값:쌍 인수의 세미콜론으로 구분된 목록입니다. 예를 들어 tag_slug__and:디자인,개발; event_display:예정. 기본값 = null
  • post_status — 게시물의 상태를 선택합니다. 기본값 = '게시'
  • order — 게시물을 ASC(오름차순) 또는 DESC(내림차순) 순서로 표시합니다. 기본값 = '설명'
  • orderby — 날짜, 제목, 이름, 메뉴 순서, 작성자, 게시물 ID 또는 댓글 수를 기준으로 게시물을 정렬합니다. 기본값 = '날짜'
  • offset — 초기 쿼리(숫자)를 오프셋합니다. 기본값 = '0'
  • post_per_page — 각 Ajax 요청으로 로드할 게시물 수입니다. 기본값 = '5'
  • 스크롤 — 사용자가 페이지를 스크롤하면 더 많은 게시물을 로드합니다(true/false). 기본값 = '참'
  • scroll_distance — 스크롤하는 동안 게시물 로드를 트리거하는 화면 하단으로부터의 거리입니다. 기본값 = '150'
  • scroll_container — Ajax Load More 무한 스크롤을 상위 컨테이너로 제한합니다. 기본값 = null
  • max_pages — 사용자가 스크롤하는 동안 로드할 최대 페이지 수입니다(scroll = true인 경우 활성화됨). 기본값 = '0'
  • Pause_override — 스크롤을 허용하여 Pause 매개변수를 재정의하고 스크롤 시 게시물 로드를 트리거합니다. 기본값 = null
  • 일시 중지 — 사용자가 추가 로드 버튼을 클릭할 때까지 게시물을 로드하지 않습니다(true/false). 기본값 = '거짓'
  • 전환 — 기둥 표시 전환(페이드/석조/없음)을 선택합니다. 기본값 = '페이드'
  • Transition_container — Ajax Load More(.alm-reveal) 로딩 컨테이너를 표시합니다. 기본값 = '참'
  • Transition_container_classes — .alm-reveal 전환 div에 클래스를 추가합니다.
  • masonry_selector — 각 벽돌 항목의 대상 클래스 이름입니다. 기본값 = null
  • masonry_animation — Masonry 항목에 대한 로딩 전환 유형을 선택합니다. (기본값/축소/슬라이드업/슬라이드다운/없음). 기본값 = 기본값
  • masonry_horizontalorder — 수평 순서를 유지합니다. 기본값=true
  • Images_loaded — Ajax 로드된 콘텐츠를 표시하기 전에 모든 이미지가 로드될 때까지 기다립니다(true/false). 기본값 = '거짓'
  • destroy_after — 'n'개의 페이지가 로드된 후 ajax load more 기능을 제거합니다. 기본값 = null
  • Progress_bar — Ajax 콘텐츠를 로드하는 동안 창 상단에 진행률 표시줄 표시기를 표시합니다. 기본값 = '거짓'
  • Progress_bar_color — 진행률 표시줄의 16진수 색상을 입력하세요. 기본값 = 'ed7070'
  • 버튼_라벨 — 추가 로드 버튼의 라벨 텍스트입니다. 기본값 = '이전 게시물'
    • — 콘텐츠가 로드되는 동안 추가 로드 버튼의 텍스트를 업데이트합니다. 기본값 = null
  • 컨테이너_유형 — ALM 설정 페이지에 설정된 전역 컨테이너 유형을 재정의합니다. 기본값 = null
  • css_classes — Ajax Load More 컨테이너에 사용자 정의 CSS 클래스를 추가합니다. 기본값 = null
  • id — Ajax Load More 인스턴스의 고유 ID입니다.
  • 중첩 — 중첩된 Ajax Load More 인스턴스입니까? 기본값=거짓
예제 Ajax 더 많은 단축 코드 로드 예제 데모
  • 기본값 — 즉시 사용 가능한 기능 및 스타일입니다.
  • 고급 사용자 정의 필드 - Ajax Load More를 사용하여 고급 사용자 정의 필드 데이터를 무한 스크롤합니다.
  • 첨부 파일 - 끝없는 스크롤 포스트 첨부 파일입니다.
  • 이후 삭제 — 'n' 페이지 이후 Ajax Load More 기능을 제거합니다.
  • 이벤트 목록 — 사용자 정의 필드 날짜별로 이벤트를 정렬하고 나열합니다.
  • 필터링 — Ajax Load More 인스턴스를 재설정하고 필터링합니다.
  • Flexbox — Flexbox를 사용하여 반응형 Ajax Load More 그리드 생성.
  • 무한 스크롤 — 새로운 로딩 기능과 스타일을 살펴보세요.
  • 로드된 이미지 — Ajax 로드된 콘텐츠를 표시하기 전에 이미지를 다운로드합니다.
  • Masonry — Masonry JS로 유연한 그리드 레이아웃 만들기
  • 다중 인스턴스 — 단일 페이지에 여러 Ajax Load More'를 포함합니다.
  • 페이징 URL — SEO 추가 기능을 사용하여 모든 Ajax Load More 쿼리에 대해 고유한 페이징 URL을 생성합니다.
  • — 사용자가 시작할 때까지 게시물이 로드되지 않습니다.
  • 미리 로드된 게시물 — 서버에 대한 Ajax 요청을 완료하기 전에 초기 게시물 세트를 쉽게 미리 로드합니다.
  • 진행률 표시줄 — 각 Ajax 요청마다 진행률 표시줄 로드 표시기를 표시합니다.
  • 검색 결과 — 검색어를 기준으로 결과를 반환합니다.
  • 스크롤 컨테이너 - Ajax Load More를 상위 컨테이너로 제한합니다.
  • SEO 및 페이징 – 이 두 가지 추가 기능을 결합하여 하나의 강력한 탐색 시스템을 만듭니다.
  • 슬라이드쇼 갤러리 — Ajax로 게시물 갤러리 만들기 더 보기 그리고페이징 추가 기능.
  • 테이블 레이아웃 - Ajax Load More는 쿼리 결과를 테이블 형식으로 표시합니다.

내 웹사이트에서 페이지나 카테고리로 이동하면 페이지 맨 아래에 일반적인 페이지 탐색과 함께 추가 로드 버튼이 표시되어 페이지를 새로 고치지 않고도 다음 게시물을 로드할 수 있습니다.

솔직히 말해서 내 사이트는 페이지를 탐색하는 데 다소 무속적인 방법을 사용합니다. 나는 오래 전에 이 탐색을 개발했고 아마도 그 당시에는 PHP와 jQuery에 그다지 능숙하지 않았을 것입니다. 이제 새 게시물을 비동기적으로 로드하는 기능을 사용하여 페이지 탐색을 구현하는 보다 정확하고 효과적인 방법을 보여 드리겠습니다. 즉, 내 사이트의 코드를 볼 필요는 없지만 질문이 있으면 이 게시물의 댓글에서 답변을 찾거나 비디오를 시청하세요.

우리는 표준 TwentySeventeen 테마를 사용하여 작업할 것입니다. 첫째, 이 테마는 매우 간단하고 코드를 이해하는 것이 어렵지 않으며, 둘째, WordPress 테마 저장소의 관리 패널에서 언제든지 직접 설치할 수 있습니다.

이번 포스팅에서는 무엇을 시도해 볼까요?

  • 더 보기 버튼을 클릭하면 게시물을 로드합니다.
  • 끝없는 로딩, 즉 페이지를 스크롤할 때 게시물과 댓글이 자동으로 로딩됩니다(예, VKontakte에서와 같습니다).
  • 모든 아카이브에서 게시물 로드가 작동하도록 만들어 보겠습니다.
1단계. '더 보기' 버튼 추가하기

먼저 페이지 네비게이션이 추가된 파일을 찾아야 합니다. TwentySeventeen에서 이 파일은 바로 index.php 입니다. 테마에서 어떤 파일을 찾아야 할지 잘 모르겠으면 를 살펴보는 것이 좋습니다.

저처럼 표준 테마 중 하나를 사용하기로 결정했다면 변경 사항에 사용하는 것이 좋습니다(자세한 내용은 게시물 맨 아래의 동영상 참조).

템플릿에서 while 루프 외부, 즉 게시물 출력이 끝난 후(TwentySeventeen에서 이 위치는 endwhile 직후에 있음)에서 적절한 위치를 찾고 거기에 코드를 삽입합니다.

var ajaxurl = " "; var 현재_페이지 = ; var max_pages = " "; 더 로드하기

Ajaxurl 이것은 WordPress에 있습니다. true_posts 모든 필수 요청 매개변수를 포함하는 직렬화된 배열은 입니다. 현재_페이지 번호 .

이제 버튼을 멋지게 보이게 하기 위해 몇 가지 스타일을 추가할 것입니다(스타일은 테마 폴더의 표준 style.css에 삽입할 수 있습니다).

#true_loadmore ( background-color : #ddd ; /* 회색 배경 */ border-radius : 2px; /* 모서리 둥글게 하기 */ display : block ; /* 블록 요소(사용하려는 경우) */ 텍스트 정렬 : 가운데 ; /* 텍스트 가운데 정렬 */ 글꼴 크기 : 14px; 글꼴 크기: 0.875rem; /* 글꼴 크기 */ 글꼴 무게 : 800 ; /* 스타일 */ letter-spacing : 1px; /* 문자 간격 */ 커서 : 포인터 ; /* 마우스 오버 시 마우스 커서는 링크 위에 마우스를 올렸을 때와 동일합니다. */ text-transform : 대문자 ; 패딩: 10px 0; /* 버튼 상단과 하단의 패딩 */ 전환 : background-color 0.2초 Ease-In-Out, Border-Color 0.2초 Ease-In-Out, Color 0.3초 Ease-In-Out; /* CSS 애니메이션*/ ) #true_loadmore :hover ( background-color : #767676 ; color : #fff ; )

첫 번째 단계를 성공적으로 완료하면 이와 같은 버튼이 표시되어 모든 항목 페이지에 표시되지만, 두 페이지에 항목이 충분하지 않으면 버튼이 표시되지 않습니다. , 더 많은 항목을 생성하거나 설정> 읽기로 이동하여 페이지에 표시되는 게시물 수를 변경하세요.

가장 쉬운 단계는 당신 뒤에 있습니다.

2단계. jQuery 스크립트 연결하기
var ajaxurl = "/wp-admin/admin-ajax.php"; var true_posts = " "; var 현재_페이지 = ;

둘째, CSS 스타일도 더 이상 필요하지 않습니다. 추가한 경우 완전히 제거할 수 있습니다.

셋째, loadmore.js 파일의 내용이 다음과 같이 변경됩니다.

jQuery(function ($) ( $(window).scroll (function () ( var BottomOffset = 2000 ; // 사용자가 새 게시물을 로드하려면 스크롤해야 하는 사이트의 아래쪽 테두리에서 들여쓰기 var data = ( "action " : " loadmore" , "query" : true_posts, "page" : current_page ) ; if ( $(document).scrollTop() > ($(document).height() - BottomOffset) && ! $("body" ) ) ( $ .ajax (( url: ajaxurl, data: data, type: "POST" , beforeSend: function ( xhr) ( $("body" ) ; ) , 성공: function (data) ( if ( data ) ( $ ("# true_loadmore" ) ​​​​.before (data) ; $("body" ) ; current_page++; ) ) ) ) ; ) ) ; ) ) ;

function.php 파일(2단계와 4단계)은 변경하지 않고 그대로 둡니다.

우리 모두는 한 달을 선택할 때 해당 달의 항목이 있는 페이지로 리디렉션되는 아카이브를 본 적이 있습니다. WordPress에서 이러한 아카이브 링크 표시는 wp_get_archives() 함수를 사용하여 구현됩니다. 일반 WordPress 카테고리를 표시할 때 유사한 게시물 아카이브가 얻어지며 게시물만 카테고리별로 그룹화됩니다.

오늘은 동적 아카이브 페이지를 만드는 방법을 알려드리고자 합니다. "동적"은 월을 선택하면 결과가 AJAX - Javascript 기술을 사용하여 동일한 페이지에 표시된다는 것을 의미합니다. jQuery 라이브러리는 Ajax 작업에 편리한 API를 제공하므로 이 프레임워크를 사용하겠습니다. 게다가 jQuery가 없었다면 오늘날 우리는 어디에 있을까요? 항상 사용되며 아마도 이미 프로젝트에 연결되어 있을 것입니다.

이 기사를 쓰기 전에 이 블로그에 대한 동적 아카이브 페이지를 만들었습니다. 한 번 살펴보시기 바랍니다(DEMO).

동적 아카이브를 구현하려면 다음 4단계를 거쳐야 합니다.

예제를 사용하여 동적 아카이브 페이지 생성을 보여 드리겠습니다. 기본 테마워드프레스: "스물십".

1. WordPress에서 jQuery 연결하기

jQuery 스크립트를 연결하는 올바른 방법은 wp_enqueue_script() 함수를 사용하는 것입니다. 이 연결은 플러그인에서 동일한 스크립트를 연결할 때 발생하는 충돌로부터 사용자를 보호합니다. 스크립트가 한 번 연결됩니다.

이 코드를 테마의 function.php 파일에 삽입해야 합니다.

옵션 2

첫 번째 옵션에서는 WordPress 파일에서 사용할 수 있는 서버의 스크립트를 연결했습니다. 그러나 jQuery 파일에 대한 링크를 변경하고 Google의 CDN에서 연결할 수 있습니다. 이 접근 방식의 장점은 이 파일이 방문자의 브라우저에 이미 로드된 경우 방문자가 귀하의 사이트를 방문할 때 브라우저가 더 이상 스크립트/페이지 로딩을 다운로드하지 않는다는 것입니다. 또한 스크립트는 압축된 형식으로 CDN에 전송되므로 파일이 몇 킬로바이트 더 가벼워집니다.

함수 my_scripts_method() ( wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); wp_enqueue_script("jquery" ); ) add_action("wp_enqueue_scripts", "my_scripts_method");

옵션 3

jQuery를 연결하기 위한 가장 오래되고 소위 "하드" 옵션은 태그 내부의 header.php 템플릿 파일에 링크를 작성하는 것입니다. 다음 HTML 코드를 붙여넣으세요.

2. 이미지 프리로더 로드

대기 기간 동안 AJAX를 사용하여 요청이 서버로 전송되면 이미지를 표시하여 사용자에게 무슨 일이 일어나고 있는지 알려야 합니다. 아마도 인터넷에서 이러한 사진을 한 번 이상 본 적이 있을 것입니다. 이러한 사진에 대한 대안은 "로드 중..."이라는 텍스트입니다.

앞으로는 그러한 사진을 갖게 되므로 예를 들어 여기에서 다운로드해 보겠습니다. 애니메이션 gif(서비스가 마음에 들었습니다), 이름을 ajax-loader.gif로 바꾸고 다음 위치에 있는 이미지 폴더에 업로드합니다. WordPress 테마의 디렉터리입니다. 결과적으로 우리는 http://example.com/wp-content/themes/twentyten/images/ajax-loader.gif 그림까지 포함하여 다음과 같은 것을 얻게 됩니다. 아래에서는 코드에서 이를 사용합니다.

3. 영구 페이지 템플릿 만들기

WordPress의 영구 페이지의 경우 별도의 템플릿을 사용할 수 있으므로 다른 페이지와 완전히 다른 구조의 페이지를 만들 수 있습니다. 우리가 만든 파일이 영구 페이지용 템플릿임을 WordPress에 나타내려면 이 파일의 시작 부분에 다음 코드를 작성해야 합니다.

“Archives Template”은 템플릿의 이름으로, 영구 페이지를 생성할 때 WordPress 관리 패널에 표시됩니다.

만들어 보자 새로운 파일 tpl_archive.php라는 테마 폴더에 위의 코드를 붙여넣습니다. 다음으로 WordPress 관리 패널로 이동하여 영구 페이지를 만들고 방금 만든 템플릿을 할당해 보겠습니다.

이제 이 파일을 필요한 코드로 채워보겠습니다.

1. 먼저 드롭다운 목록을 표시해야 하며 WordPress 함수인 wp_get_archives() 및 wp_dropdown_categories()를 사용하여 목록을 생성합니다.

월 - 제목

get_header(); 그리고 get_footer(); 템플릿의 머리글과 바닥글을 각각 가져옵니다. get_sidebar(); 코드 이해에 방해가 되지 않도록 일부러 잘라냈습니다. 나머지 코드는 월 및 범주 드롭다운 목록을 표시합니다.

빈 블록은 쿼리 결과가 표시되는 컨테이너입니다. 기록.

2. CSS를 사용하여 드롭다운 목록을 디자인해 보겠습니다. 이를 위해 헤더() 호출 직후에 다음 코드를 추가합니다.

#archive_browser >

이 단계에서 나는 다음을 얻었습니다.


3. 서버에 요청하고 이를 archive_pot 블록에 출력하는 JavaScript 코드를 추가합니다(CSS 스타일 뒤에 코드를 추가합니다).

공유하다: