WordPress에 자습서 : 무한 스크롤 WP 사이트를 만드는 방법

  • 워드 프레스
  • 업데이트 : 7 월 29, 2014

사이트의 유용성을 향상시키기 위해 열심히 노력하여 사용자가 더 자주 행복하게되고 자주 다시 방문 할 가능성이 높습니다. 음, 구현할 수있는 개선 사항 중 하나는 무한 스크롤링 기술입니다. 그것은 기본적인 콘텐츠가 처음에 표시되는 Twitter 또는 Facebook에서 기본적으로 가지고있는 것과 동일하며, 아래로 스크롤하면 더 많은 콘텐츠가 추가됩니다. 사이트의 실적을 개선하고 (로딩 시간 단축) 버튼을 클릭하는 등 더 많은 항목을로드 할 필요가 없으므로 사용자 환경을 개선하는 것이 좋습니다.

여기에서 우리는 왜 당신 자신의 사이트에서 그것을 사용하는지를 보게 될 것입니다.

무한 스크롤링 사이트의 예

큰 사람들이 무엇을하고 있는지 항상 확인하는 것이 좋습니다. 페이스 북 (라이브 피드), Twitter, Pinterest, Feedly와 같은 많은 큰 사이트와 앱에서 이러한 종류의 효과 (눈에 띄지 않는 여러 번 힘들어하는)를 사용합니다.

Feedly의

지저귀다

무한 스크롤 –해야 할 것과하지 말아야 할 것

이 기술은 사이트의 일반 페이지 매김 링크 ( "이전 게시물"또는 게시물 이후에 번호가 매겨진 페이지)를 제거합니다. 이 기법의 큰 "프로"는 로딩 시간입니다. 처음에는로드되는 항목이 적기 때문에 훨씬 빠른 사이트를 가질 수 있고 페이지 재로드없이 더 많은 항목이 추가되기 때문에 사용자는 게시물의 10 "페이지" 귀하의 사이트에서 훨씬 더 오래 머물러 있습니다.

대부분의 사이트에 적용 할 수 있지만 콘텐츠 및 이미지가 많은 블로그 또는 포트폴리오와 같은 사이트에 더 적합하며 많은 콘텐츠로 사용자를 압도하고 싶지는 않습니다.

이 가이드는 코딩 능숙도가 필요하지 않으며 솔직히 WordPress 테마를 약간 조정하는 방법에 대해 조금 배우게 될 것입니다.

자산

우리는 Paul Irish의 JS 플러그인. 그것을 다운로드하여 테마의 js 폴더에 설치하십시오. 우리는 제안을 배우기 위해 Twenty Twelve를 사용할 것이지만 어떤 주제에서도 자유롭게 사용할 수 있습니다.

또한 "로드 중"메시지에 대해 멋진 gif 이미지가 필요합니다. 밖에있는 많은 것을 찾을 수 있지만 AjaxLoad 사이트에는 많은 미리 설정 스타일을 지원하는 훌륭한 도구가 있으며 색 구성표와 더 잘 어울리는 색을 선택할 수 있습니다.

Wp-content / themes / twentytwelve / js에 스크립트와 멋진 gif 이미지가 있으면 시작할 수 있습니다!

PHP 코드

좋습니다, 두려워하지 마세요. 복사하여 붙여 넣기 스 니펫을 제공 하겠지만 여기서는 작동시키기 위해해야 ​​할 일이 있습니다.

  • 무한 스크롤 플러그인을로드하여 내부적으로 등록하는 함수 만들기 - WordPress에서 두 번로드하고 테마 기능을 사용하지 못하게합니다.
  • 표시 할 1 이상의 게시물이있는 단일 게시물 전용 페이지가 아닌 경우에만 스크립트를로드하면 더 많은 항목을로드해야합니다.

functions.php 파일은 테마의 핵심입니다. 모든 기능은 대개 여기에 있거나 다른 파일에서 호출됩니다. 그래서 함수 파일에이 코드를 추가하여 무한 스크롤링 지원을 추가 할 수 있습니다 (파일 끝에 추가).

<? php / *********************************************************** ***************** ******** / / * 무한 스콜링의 스크립트를 등록하고 테마에 사용하기위한 기능. * / function twentytwelve_script_infinite_scrolling () {wp_register_script ( 'infinite_scrolling', // 스크립트 이름 get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js', // 파일이 배열 ( 'jquery') 인 곳 // 이 스크립트는 jquery 스크립트가 필요합니다. null, // 스크립트 버전 번호가 없습니다. // 스크립트는 바닥 글에 배치됩니다.); if (! is_singular ()) {// 1 이상의 게시물이있는 경우 //이 스크립트를로드합니다 wp_enqueue_script ( 'infinite_scrolling'); }} // 사용자 정의 스크립트를 등록하십시오! add_action ( 'wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling'); / * 페이지에 표시 할 무한 스크롤을 설정하는 함수. * / function set_infinite_scrolling () {if (! is_singular ()) {// 다시 1 이상의 게시물이있는 경우 // 아래에 js 스크립트를 추가 하시겠습니까?> <script type = "text / javascript"> / * * / var inf_scrolling = {/ * img : 로딩 이미지 경로입니다. 멋진 GIF 로딩 아이콘을 추가하십시오. msgText : 로딩 메시지 finishedMsg : 로딩 완료 메시지 * / 로딩 : {/ img : "<? echo get_template_directory_uri ();? / images / ajax-loading.gif", msgText : "다음 게시물로드 중 ....", finishedMsg : "게시물로드 됨 !!",}, / * 다음 항목은 nextSelector를 설정하십시오. NextSelector는 페이지 탐색의 CSS 클래스입니다. 우리의 경우 # nav-below .nav-previous a * / "nextSelector": "# nav-below .nav-previous a", // navSelector는 페이지 탐색 "navSelector"의 CSS ID입니다. "# nav-below ", // itemSelector는 게시물이 표시되는 div입니다."itemSelector ":"article ", // contentSelector는 페이지 콘텐츠 (게시물)가 표시되는 div입니다."contentSelector ":"content "}; / * 마지막으로해야 할 일은 infinite-scroll.min.js에서 jquery 함수를 사용하여 contentSelector를 무한 스크롤로 구성하는 것입니다. * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling); </ script> <? }} / *이 액션을 페이지 바닥 글에 추가해야합니다. 100는 이후 실행에 해당하는 우선 순위 번호입니다. * / add_action ( 'wp_footer', 'set_infinite_scrolling', 100); ?>

대안 접근 - 페이지 및 맞춤 게시 유형로드

이전 코드는 모든 게시물을로드하지만 페이지 또는 맞춤 게시물 유형 (예 : 테마가 지원하는 경우 포트폴리오 항목)을 표시하려면 어떻게해야합니까? 코드를 조금만 수정하여 작동시킬 수도 있습니다.

인덱스, 카테고리 또는 항목을로드하는 다른 파일에 필요한 조정 만 있으면 현재 루프를 다른 코드로 바꿀 수 있습니다. 다음 코드로 루프를 식별 할 수 있습니다.

동안 (have_posts ()) :

그래서 일단 발견하면이 마법 코드를 사용할 수 있습니다 :

<div id = "content"role = "main"> <? php / * 페이지 만 무한 스크롤에 표시합니다! 비밀은 다음과 같습니다. 필요한 것을 위해 post_type을 설정할 수 있습니다. 간단합니다! 'post', 'page', 'product'와 같이 쉼표로 구분하여 원하는만큼의 게시물 유형을 추가 할 수 있습니다. * / $ args = array (// 인수를 설정하십시오. 'post_type'=> 'page', // 페이지 만); query_posts ($ args); // 루프를 시작합니다. * /?> <? php while (have_posts ()) : the_post (); // 이러한 항목을 표시하는 "일반적인"루프 코드?>

결론

이것은 단지 "워밍업"기사 일뿐입니다. 이런 종류의 접근으로 할 수있는 많은 것들이 있습니다. 예를 들어, 사용자가 스크롤 할 때 상점 (WooCommerce를 사용하여 어쩌면)에서 상품을로드하거나 JS 및 CSS 코드를 추가하여 포스트 이미지의 시차와 유사한 로더를 만들 수 있습니다.

이 기술에 대해 어떻게 생각하십니까? 너는 그것을 좋아하니? 그것을 사용 하시겠습니까? 댓글 섹션을 사용하여 의견을 공유하십시오!

로체스터 올리베이라에 대하여

나는 웹 디자이너이자 기업가 인 Itajubá (MG), Brasil입니다. 나는 모호한 주제에 대해 쓰고 멋진 것들을하는 것을 좋아합니다.