Divi에서 포스트 예상 읽기 시간과 단어 수를 표시하는 방법(ReadingTime.js 사용)
게시 됨: 2020-10-27일부 사람들(저를 포함하여)은 블로그 게시물의 길이 또는 더 중요하게는 읽는 데 얼마나 많은 시간이 걸릴지에 대해 약간의 주의를 기울입니다. 이렇게 하는 좋은 방법은 블로그 게시물 상단에 예상 읽기 시간 및/또는 단어 수를 표시하는 것입니다. 이 기능은 medium.com과 같은 인기 블로그에서 볼 수 있습니다. 사용자가 콘텐츠에 참여하는 데 방해가 되거나 주의를 분산시킬 필요가 없습니다. 그러나 웹에서 많은 시간을 소비하는 사람들에게 멋진 UX 향상을 추가할 수 있습니다.
이 튜토리얼에서는 예상 읽기 시간과 단어 수를 Divi 블로그 게시물에 추가하는 빠르고 쉬운 방법을 보여 드리겠습니다. 우리가 사용할 readingTime.js 라이브러리는 간단하고 가벼우며 Divi 사이트에서 구현하기 쉽습니다. 또한 읽기 시간과 단어 수 배치의 스타일과 배치를 더 잘 제어할 수 있습니다. 다른 플러그인에 의존할 필요 없이 이 모든 것이 가능합니다!
Divi 테마 빌더를 사용하여 블로그 게시물 템플릿에 예상 읽기 시간과 단어 수를 추가할 것입니다. 따라서 템플릿에 추가되면 읽는 시간과 단어 수가 사이트 전체의 모든 게시물에 멋지게 표시됩니다.
시작하자.
엿보기
다음은 Divi의 게시물 템플릿에 추가할 읽기 시간과 단어 수에 대한 간략한 설명입니다.
무료로 레이아웃 다운로드
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
템플릿 업로드 방법
Divi 테마 빌더로 이동
템플릿을 업로드하려면 WordPress 웹사이트의 백엔드에서 Divi Theme Builder로 이동하십시오.
웹사이트 템플릿 업로드
그런 다음 오른쪽 상단에 두 개의 화살표가 있는 아이콘이 표시됩니다. 아이콘을 클릭합니다.
가져오기 탭으로 이동하여 이 게시물에서 다운로드할 수 있었던 JSON 파일을 업로드하고 'Divi 테마 빌더 템플릿 가져오기'를 클릭합니다.
Divi 테마 빌더 변경 사항 저장
파일을 업로드하면 모든 게시물에 할당된 새 본문 영역이 있는 새 템플릿을 볼 수 있습니다. 템플릿을 활성화하는 즉시 Divi Theme Builder 변경 사항을 저장하십시오.
이 튜토리얼을 처음부터 배울 수 있도록 튜토리얼을 시작하겠습니다.
Divi에서 포스트 예상 읽기 시간과 단어 수를 표시하는 방법
시작하는 데 필요한 것
시작하려면 다음을 수행해야 합니다.
- Divi 테마 빌더로 이동
- 페이지 오른쪽 상단의 이식성 아이콘을 클릭합니다.
- 이식성 팝업에서 가져오기 탭을 선택합니다.
- Divi 비즈니스 컨설턴트 포스트 템플릿 파일(여기에서 다운로드)을 선택/가져옵니다.
- 가져오기 버튼 클릭
그런 다음 편집할 준비가 된 게시물 템플릿을 갖게 됩니다.
포스트 템플릿에 텍스트/HTML 추가하기
게시물 템플릿을 수정하려면 사용자 정의 본문 영역에서 수정 아이콘을 클릭하세요.
포스트 레이아웃 편집기에서 레이아웃의 상단 섹션에 있는 포스트 메타 데이터를 포함하는 행 아래에 새로운 1열 행을 추가합니다.
완료되면 새 행에 텍스트 모듈을 추가합니다.
텍스트 모듈 설정에서 다음 HTML을 본문 안에 붙여넣습니다(텍스트 탭 사용).
<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>
기억해야 할 중요한 점은 "eta" 클래스가 있는 span 태그가 결국 게시물 콘텐츠의 예상 읽기 시간을 표시한다는 것입니다. 그리고 "word-count" 클래스가 있는 span 태그는 게시물 콘텐츠의 단어 수를 표시합니다.
읽기 시간 텍스트 스타일 지정
디자인 탭에서 다음과 같이 텍스트 스타일을 업데이트합니다.
- 텍스트 글꼴: Poppins
- 텍스트 글꼴 두께: 굵게
- 텍스트 글꼴 스타일: TT
- 텍스트 텍스트 색상: #ffffff
- 텍스트 텍스트 크기: 14px(데스크톱), 12px(전화)
- 텍스트 문자 간격: 2px
- 텍스트 정렬: 가운데
행 스타일링
텍스트 설정이 완료되면 행에 대한 설정을 열고 다음을 업데이트합니다.
- 거터 폭: 1
- 폭: 100%
- 최대 너비: 100%
고급 탭에서 위치를 업데이트합니다.
- 위치: 절대
- 위치: 왼쪽 하단
코드 추가
예상 읽기 시간과 단어 수를 생성하는 데 필요한 코드를 추가하려면 먼저 텍스트 모듈 아래에 코드 모듈을 추가합니다.
우리는 포스트 콘텐츠 영역, 읽기 시간 대상 클래스 eta 및 단어 수 대상 클래스 word-count 를 대상으로 하는 몇 가지 사용자 정의 코드와 함께 readingtime.js 라이브러리를 사용할 것입니다.
코드 블록에 다음 코드를 붙여넣고 스크립트 태그로 코드를 래핑합니다.
(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'),
wordsPerMinute: 275,
lang: 'en',
});
});
})( jQuery );
코드 정보
대상 클래스 et_pb_post_content 는 코드가 읽기 시간을 계산하고 추정하는 데 필요한 텍스트를 알 수 있도록 게시물 콘텐츠를 보유하는 Divi의 게시물 콘텐츠 영역을 지정하는 데 사용됩니다. 예를 들어 본문 을 대상으로 사용한 경우 코드는 기사의 내용뿐만 아니라 전체 페이지의 모든 내용/텍스트를 계산합니다.
ReadingTimeTarget 은 텍스트 모듈의 span 태그에 추가한 클래스에 해당하는 eta 클래스에 할당됩니다. 그리고 wordCountTarget 은 텍스트 모듈의 다른 span 태그에 추가한 word-count 클래스에 할당됩니다.
또한 분당 단어 수 값(현재 275개)을 자유롭게 업데이트하여 원하는 값을 나타내십시오. 이것은 물론 표시되는 판독 시간에 영향을 미칩니다. 제가 조사한 바에 따르면, 평균적인 성인은 분당 약 300단어를 읽습니다. 또한 항상 언어 값도 업데이트할 수 있습니다. 예를 들어, 텍스트를 프랑스어로 표시하려면 'fr'을 'en'으로 바꾸면 됩니다. 자세한 내용은 github의 설명서를 확인하세요.
템플릿 레이아웃과 테마 빌더를 저장합니다.
그런 다음 Divi > 테마 옵션 > 통합으로 이동합니다.
그런 다음 스크립트 태그를 사용하여 헤더 영역에 라이브러리를 추가합니다.
src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"
다음과 같이 보여야 합니다...
최종 결과
이제 사이트의 라이브 블로그 게시물을 방문하여 게시물 콘텐츠 상단에서 예상 독서 시간과 단어 수를 확인하기만 하면 됩니다.
마지막 생각들
Divi 블로그 게시물에 예상 읽기 시간과 단어 수를 추가하는 것은 놀라울 정도로 쉽습니다. 또한 게시물 템플릿에서 요소를 표시할 위치를 선택하고 내장된 Divi 디자인 설정을 사용하여 스타일을 지정할 수 있습니다. 잘만되면 이것이 유용할 것입니다!
댓글로 여러분의 의견을 기다리겠습니다.
건배!