Divi 블로그 게시물에 대한 읽기 진행률 표시줄을 만드는 방법(플러그인 없이)

게시 됨: 2020-07-19

블로그 게시물 템플릿에 읽기 진행률 표시줄(또는 스크롤 표시기)을 추가하는 것은 주어진 기사에 대한 사용자의 읽기 진행 상황을 보여주는 현명한 방법입니다. 아이디어는 게시물 콘텐츠에서 사용자의 스크롤 위치와 직접적인 상관관계가 있는 게시물 상단에 고정 진행률 표시줄을 표시하는 것입니다. 사용자가 기사에 도달하면 진행률 표시줄이 채워지기 시작합니다. 사용자가 기사 끝에 도달하면 진행률 표시줄이 100% 가득 찼습니다.

이 튜토리얼에서는 사용자가 전체 페이지가 아닌 실제 게시물 콘텐츠를 시작하고 끝낼 때(스크롤을 통해) 알 수 있을 만큼 스마트한 Divi 블로그 게시물 읽기 진행률 표시줄을 만드는 방법을 보여 드리겠습니다. 이렇게 하면 읽기 진행 상황이 더 정확하게 표시됩니다.

이 읽기 진행률 표시줄을 Divi 테마 빌더를 사용하여 Divi의 기본 블로그 게시물 템플릿 또는 사용자 정의 게시물 템플릿에 추가하는 방법을 보여 드리겠습니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다. 게시물 템플릿 상단에 진행률 표시줄이 어떻게 고정되어 있는지 확인하세요. 진행률 표시줄은 사용자가 실제 게시물/기사 콘텐츠에 도달하면 채워지기 시작하고 사용자가 게시물 콘텐츠를 완료하면 끝납니다.

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

섹션 레이아웃을 Divi 테마 빌더로 가져오려면 Divi 테마 빌더로 이동하십시오.

이식성 아이콘을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 템플릿이 Divi 테마 빌더에 나타납니다.

튜토리얼로 들어가 볼까요?

1부: 미리 만들어진 템플릿 가져오기

이 튜토리얼에서는 여섯 번째 테마 빌더 팩에서 미리 만들어진 몇 가지 템플릿을 사용할 것입니다. 게시물 정보 표시줄을 추가할 작업 전역 헤더를 제공하는 기본 웹사이트 템플릿을 가져올 것입니다. 그리고 블로그 게시물 템플릿을 가져와서 라이브 게시물에서 결과를 테스트할 것입니다.

중요: 라이브 사이트를 엉망으로 만들지 않도록 테스트 사이트에서 이러한 템플릿을 가져오는 것이 가장 좋습니다.

기본 웹 사이트 템플릿 가져오기

먼저 Divi용 네 번째 무료 테마 빌더 팩을 다운로드해야 합니다. 그런 다음 파일의 압축을 풉니다.

WordPress 대시보드에서 Divi > 테마 빌더로 이동합니다. 그런 다음 오른쪽 상단의 이식성 아이콘을 클릭합니다. 이식성 팝업에서 가져오기 탭을 선택합니다. 그런 다음 다운로드한 폴더에서 기본 웹사이트 템플릿 JSON 파일을 선택하고 가져오기 버튼을 클릭합니다. 그러면 전체 머리글과 바닥글이 있는 새 기본 웹사이트 템플릿을 가져옵니다.

게시물 템플릿 가져오기

이 과정을 반복하여 다운로드한 동일한 폴더에서 게시물 템플릿을 가져옵니다. 이식성 팝업을 열고 포스트 템플릿 json 파일을 선택하고 가져오기 버튼을 클릭합니다. 이렇게 하면 기본 머리글 바닥글과 함께 사이트 전체의 모든 게시물에 할당된 게시물 템플릿이 제공됩니다.

게시물 템플릿 헤더에서 전역 비활성화

게시물 템플릿의 헤더에 동적 게시물 정보 표시줄을 추가할 것입니다. 그러나 우리는 게시물 템플릿에만 게시물 정보 표시줄을 원하기 때문에 표시줄이 사이트 전체의 모든 헤더에 추가되지 않도록 헤더에서 전역을 비활성화해야 합니다. 전역 헤더에서 전역을 비활성화하려면 전역 헤더에서 설정 메뉴를 열고 "전역 비활성화"를 선택합니다.

divi 동적 게시물 정보 표시줄

이제 헤더는 "Custom Header"라는 레이블이 있는 회색이어야 합니다. 준비가 되면 편집 아이콘을 클릭하여 헤더 레이아웃 템플릿을 편집합니다.

divi 동적 게시물 정보 표시줄

읽기 진행률 표시줄 디자인

섹션 및 행 추가

헤더 레이아웃 편집기 내에서 헤더가 있는 현재 섹션 아래에 새 일반 섹션을 만듭니다.

그런 다음 섹션에 1열을 추가합니다.

섹션 설정

섹션 설정을 열고 다음을 업데이트합니다.

패딩: 0px 상단, 0px 하단

행 설정

섹션 설정이 추가된 후 행에 대한 설정을 열고 다음을 업데이트합니다.

배경색: #2b2b2b

디자인 탭에서 다음을 업데이트합니다.

거터 폭: 1
폭: 100%
최대 너비: 100%
패딩: 0px 상단, 0px 하단

Divider 모듈로 스크롤 막대 만들기

진행률 표시줄은 빈 컨테이너/행을 차지하도록 너비가 점차 증가합니다. 이를 빌드하기 위해 사용자 정의 배경색이 있는 분할기 모듈을 사용합니다. 진행률 표시줄의 모양을 원하는 방식으로 구분선을 디자인한 후에는 페이지를 아래로 스크롤하는 동안 구분선 너비를 적절한 시간에 늘리는 데 필요한 코드를 추가합니다.

디바이더 모듈 추가

열 내부에 새 구분선 모듈을 만듭니다.

그런 다음 구분선의 가시성을 비활성화합니다. 대신 진행률 표시줄 색상으로 사용할 배경색을 추가할 것입니다. 다음을 업데이트합니다.

디바이더 표시: 아니오
배경 그라데이션 왼쪽 색상: #ff4349
배경 그라데이션 오른쪽 색상: #fe7f47
기울기 방향: 90deg

디자인 탭에서 진행률 표시줄의 높이를 업데이트합니다.

높이: 20px

고급 탭에서 다음과 같이 구분선에 맞춤 CSS ID를 지정합니다.

CSS ID: 스크롤바

나중에 jQuery의 기능을 위해 스크롤 막대를 대상으로 지정하려면 이것이 필요합니다.

진행률 표시줄 백분율 카운터 레이블 추가

진행률 표시줄 백분율 카운터 레이블을 추가하려면 구분선 모듈 아래에 텍스트 모듈을 추가합니다.

그런 다음 본문 콘텐츠에 다음 HTML을 추가합니다.

<p>Reading Progress: <span></span></p>

span 태그는 jQuery를 사용하여 span 태그를 백분율 카운터로 채울 것이기 때문에 여기에서 중요합니다.

디자인 탭에서 다음을 업데이트합니다.

텍스트 글꼴: 희보
텍스트 글꼴 두께: 굵게
텍스트 글꼴 스타일: TT
텍스트 텍스트 색상: #ffffff
텍스트 텍스트 크기: 13px
텍스트 문자 간격: 3px
텍스트 줄 높이: 1em

그런 다음 왼쪽 패딩을 약간 업데이트합니다.

패딩: 10px 왼쪽

고급 탭에서 텍스트 모듈에 열/행 중앙의 절대 위치를 지정합니다. 이렇게 하면 문서의 실제 공간을 차지하지 않고 막대 내에서 세로로 가운데에 유지됩니다.

위치: 절대
위치: 왼쪽 중앙

텍스트 모듈을 떠나기 전에 jQuery 코드로 대상을 지정할 수 있도록 CSS 클래스를 추가하십시오.

CSS 클래스: et-progress-label

jQuery 코드 추가

진행률 표시줄에 필요한 마법 같은 기능을 제공하려면 필요한 jQuery 코드를 추가해야 합니다.

이렇게 하려면 텍스트 모듈 아래에 새 코드 모듈을 추가합니다.

그런 다음 다음 코드를 붙여넣습니다.

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>

마지막 단계에서는 섹션에 고정 위치를 지정해야 합니다. 헤더 내용을 포함하는 위 섹션 뒤에 섹션을 숨길 것이기 때문에 이것을 마지막으로 저장했습니다.

진행률 표시줄이 포함된 섹션에 대한 섹션 설정을 열고 다음을 업데이트합니다.

위치: 고정
Z 인덱스: 998

그런 다음 헤더 내용이 포함된 상단 섹션의 설정을 열고 다음과 같이 Z 인덱스를 업데이트합니다.

Z 인덱스: 999

이제 진행률 표시줄이 처음에 헤더의 상단 부분 뒤에 숨겨집니다. 그런 다음 사용자가 게시물을 아래로 스크롤하면 페이지 상단에 고정된 것을 볼 수 있습니다.

변경 사항을 저장하는 것을 잊지 마십시오.

본문 영역 템플릿의 게시물 콘텐츠 모듈에 선택기(CSS 클래스)를 추가합니다.

지금 코드는 "et-post-content" 클래스가 있는 요소를 게시물의 주요 게시물 콘텐츠로 인식하도록 작성되었습니다.

게시물 본문에 사용자 지정 템플릿을 사용하고 있으므로 사용자가 게시물을 스크롤할 때 코드가 읽기 진행률을 적절하게 계산할 수 있도록 해당 CSS 클래스를 템플릿의 게시물 콘텐츠 모듈에 적용해야 합니다.

이렇게 하려면 테마 빌더에서 게시물 템플릿의 본문 영역 템플릿을 엽니다.

게시물 콘텐츠 모듈 설정을 열고 다음 CSS 클래스를 추가합니다.

CSS 클래스: et-post-content

그런 다음 변경 사항을 저장합니다.

완료되면 레이아웃과 테마 빌더에 대한 변경 사항을 저장합니다.

divi 동적 게시물 정보 표시줄

최종 결과

결과를 보려면 웹사이트에서 라이브 게시물을 엽니다. 페이지 아래로 스크롤할 수 있는 공간이 있도록 게시물에 콘텐츠가 충분한지 확인하세요.

Divi의 기본 포스트 템플릿에서 읽기 진행률 표시줄 사용(사용자 정의 템플릿 아님)

게시물에 사용자 정의 본문 템플릿을 사용하지 않고 Divi의 기본 블로그 게시물 템플릿에 읽기 진행률 표시줄을 추가하려는 경우 코드에서 단일 CSS 클래스를 업데이트하기만 하면 됩니다.

먼저 게시물 템플릿의 사용자 정의 본문 영역이 삭제되었는지 확인합니다.

그런 다음 사용자 정의 헤더 템플릿 레이아웃을 열고 이 코드 줄을 교체하여 코드 모듈을 업데이트합니다.

 var $postContent = $('.et-post-content');

이것으로…

 var $postContent = $('.entry-content');

"entry-content" 클래스는 블로그 게시물의 콘텐츠를 포함하는 기본 게시물 템플릿의 div를 대상으로 합니다(제목, 추천 이미지, 위의 메타데이터 및 기사의 실제 길이를 왜곡할 수 있는 아래의 주석 제외).

결과

다음은 기본 게시물 템플릿을 사용한 게시물의 결과입니다.

마지막 생각들

이 읽기 진행률 표시줄은 전체 페이지/문서의 스크롤 진행률을 보여주는 일반적인 스크롤 표시기보다 훨씬 더 똑똑합니다. 이 막대는 사용자가 읽을 실제 게시물 콘텐츠만을 대상으로 하여 읽기 진행 상황을 정확하게 보여줍니다. 이것은 긴 카피와 댓글이 있는 경향이 있는 블로그에 좋습니다. 나는 또한 그 학생들에게 계속해서 계속할 수 있는 추가적인 동기를 주기 위해 온라인 과정을 위해 열심히 일할 것입니다!

댓글로 여러분의 의견을 기다리겠습니다.

건배!