어떻게하면 wordpress 무한 스크롤로 URL을 바꿀 수 있습니까?

Question

나는 무한 스크롤 효과를 원하는 신생 기업을위한 새로운 블로그를 만들고 있습니다. http://qz.com/

또한 앞에서 언급 한 링크와 같이 변경되는 URL을 포함시켜야합니다.

내 인생은 어떻게 끝났는지 알 수 없지만 HTML5 기록 API를 사용한다고 생각하지만 인터넷 익스플로러에서도 작동 했나요?

누군가 WordPress를 사용하여이 작업을 수행하는 방법에 대한 조언을 주시면 믿을 수 없을만큼 감사하게 생각합니다.

Answer 1

WordPress 테마에 무한 스크롤을 add some functions까지 사용할 수 있습니다. 또한 jetpack plugin을 사용하여이 기능을 활성화 할 수 있습니다. 기본적으로 AJAX를 사용하고 있습니다.

Answer 2

각 요소를 스크롤 한 후 가장 직선적 인 방법은 change the URL hash입니다. 이것을 쿠키에 저장하고 사용자가 페이지로 돌아 가면로드 할 수 있습니다.

앞서 언급 한 것처럼 History API를 사용하는 고급 버전 인 것 같습니다. here의 좋은 글이 있습니다.이 방법은 IE9 이하를 지원하지 않습니다.

Answer 3

당신은 프로젝트 Sarus

https://github.com/srijanlabs/sarus

그것은 동일한 기능을 구현하고 고도의 사용자 정의를 시도하실 수 있습니다.

AngularJS에 내장 된 프론트 엔드 프레임 워크이므로 백엔드에서 워드 프레스와 함께 사용할 수 있습니다. RSS를 공개하거나 API를 작성하기 만하면됩니다. 그렇지 않으면 wordpress html 자체에 통합하려고 할 수 있습니다.

Answer 4

제 친구가 저에게 똑같이 물었습니다. 그래서 나는 그것을위한 플러그인을 만들었다. 나는 이것이 당신이 원하는 것이라고 생각합니다.

https://github.com/wataruoguchi/clever-infinite-scroll

이

무한 스크롤을 사용하여 URL을 변경하는 방법의 과정이다.

1. 스크롤 이벤트 감상. 스크롤하면 페이지의 하단에 도달하면 Ajax는 다음 내용을 호출합니다. 링크가 다음 내용을 참조하면 제거됩니다. 무한한 두루마리의 기본입니다.
2. 다음 컨텐트가로드 될 때 URL 문자열과 페이지 제목 문자열이 포함 된 숨겨진 스팬 태그가 구현됩니다.
3. 스크롤 이벤트 감상. 스크롤 위치에 따라 내용이 표시되면 history.pushState()으로 URL을 변경하십시오. URL과 title 두 문자열 모두 숨겨진 스팬 요소에서 가져옵니다.
4. 같은 타이밍에서 페이지 제목도 변경됩니다. 사람이 워드 프레스에 무한 스크롤을 구현하기 위해 찾고 있다면

Answer 5

, 와타루의 Infinite Scroll with URL cycling Script

이 스크립트를 다운로드 바닥 글을 대기열 또는 꿀꺽 또는 그러나 당신이 그것을 사용하도록 선택할 함께 연결하여 사용합니다.

1) 구성과 같이 귀하의 게시물 내용 :

Single.php

<?php get_header(); ?> 

    <main id="post-left-col" class="relative infinite-container" role="main"> 

     <?php if (have_posts()) : while (have_posts()) : the_post(); 

        get_template_part('template-parts/post/content'); 

       endwhile; endif; 
       ?> 
       </main> 
     </div> 
<?php get_footer(); ?> 

content.php 워드 프레스에서 무한 스크롤을 구현하는 방법

,

<?php 
    /** 
    * Template part for displaying posts 
    */ 
    ?> 
    <article id="post-area" class="infinite-post"> 

<!-- Insert your post format here e.g. <h1><?php the_title; ?></h1> etc.. 

하면 content.php 포스트 템플릿의 끝에

<div class="navigation"><?php next_post_link(); ?></div> 

포함해야합니다.

2) 무한 스크롤 구성을 설정하십시오. 이것은 물론 기본 자바 스크립트 파일에 포함될 수 있습니다. 아래의 선택기는 모두 이름이 변경 될 수 있습니다.

jQuery(document).ready(function($) { 

    $('.infinite-content').cleverInfiniteScroll({ 
       contentsWrapperSelector: '.infinite-container', 
       contentSelector: '.infinite-post', 
       nextSelector: '.navigation a:first' 
      }); 
}); 

무한 스크롤 스크립트를 작성한 Paul Irish와 Wataru에게 감사드립니다.