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

업데이트 : 29 년 2014 월 XNUMX 일 / 기사 작성자 : Rochester Oliveira

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

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

예제 os 무한 스크롤 사이트

큰 사람들이 무엇을하고 있는지 항상 확인하는 것이 좋습니다. 페이스 북 (라이브 피드), 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 파일은 테마의 핵심입니다. 모든 기능은 대개 여기에 있거나 다른 파일에서 호출됩니다. 그래서 함수 파일에이 코드를 추가하여 무한 스크롤링 지원을 추가 할 수 있습니다 (파일 끝에 추가).

    
                    
            /*
                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입니다. 나는 모호한 주제에 대해 쓰고 멋진 것들을하는 것을 좋아합니다.