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

업데이트: 2014-07-29 / 기사 작성자: Rochester Oliveira

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

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

예제 os 무한 스크롤 사이트

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

Feedly의

트위터

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

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

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

이 가이드는 코딩 그리고 솔직히 말해서 당신은 당신의 워드 프레스 테마를 조금.

자산

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

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

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

PHP 코드

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

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

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

    
                    
            /*
                This is the inifinite scrolling setting, you can modify this at your will
            */
            var inf_scrolling = {                
                /*
                    img: is the loading image path, add a nice gif loading icon there                    
                    msgText: the loading message                
                    finishedMsg: the finished loading message
                */
                loading:{
                    img: "/images/ajax-loading.gif",
                    msgText: "Loading next posts....",
                    finishedMsg: "Posts loaded!!",
                },

                /*Next item is set nextSelector. 
                NextSelector is the css class of page navigation.
                In our case is #nav-below .nav-previous a
                */
                "nextSelector":"#nav-below .nav-previous a",

                //navSelector is a css id of page navigation
                "navSelector":"#nav-below",

                //itemSelector is the div where post is displayed
                "itemSelector":"article",

                //contentSelector is the div where page content (posts) is displayed
                "contentSelector":"#content"
            };

            /*
                Last thing to do is configure contentSelector to infinite scroll,
                with a function jquery from infinite-scroll.min.js
            */
            jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
                
    

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

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

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

동안 (have_posts ()) :

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

'page', // 페이지 만); query_posts ($ args); // 게시물로드 if (have_posts ()) :?>

결론

이것은 단지 "워밍업"기사입니다. 이러한 접근 방식으로 할 수 있는 일이 많이 있습니다. 예를 들어 상점에 제품을 로드할 수 있습니다(사용 WooCommerce, 아마도) 사용자가 스크롤할 때 또는 거기에 더 많은 JS 및 CSS 코드를 추가하여 포스트 이미지를 위한 멋진 시차와 같은 로더를 생성할 수 있습니다.

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

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

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