워드프레스 뉴스페이퍼 테마 읽기 진행률 표시줄 숏코드 추가

인기 뉴스, 매거진, 블로그 워드프레스 테마인 뉴스페이퍼 테마가 최근 업데이트되면서 읽기 시간 숏코드와 읽기 진행률 표시줄 숏코드가 추가되었습니다. 이 두 요소는 Single Post Cloud(싱글 포스트 클라우드) 템플릿에서 이용할 수 있습니다.

대부분의 테마에서는 읽기 진행률 표시줄 기능이 제공되지 않지만, 아래에 소개하는 플러그인을 사용하여 쉽게 구현이 가능합니다.

워드프레스에 읽기 진행률 표시줄을 추가하는 방법

해외 블로그 글을 읽다 보면 간혹 상단에 글을 얼마나 읽었는지를 알려주는 막대가 상단에 표시되는 경우가 있습니다. 이러한 것을 읽기 진행률 표시줄(Reading Progress Bar)라고 합니다.

워드프레스에서는 Reading progressbar라는 무료 플러그인을 사용하여 사용자들이 포스트를 어느 정도 읽었는지를 진행률 막대를 통해 알려줄 수 있습니다.

플러그인을 사용하여 워드프레스에 읽기 진행률 표시줄 추가하기

이 플러그인은 현재 8,000개 정도의 사이트에 설치되어 사용되고 있습니다.

플러그인 설명을 보면 이 플러그인은 <progress> HTML5 요소를 사용하며 자바스크립트(Javascript) 몇 줄로 되어 있어 매우 가볍다고 합니다.

이 플러그인에서 제공되는 옵션:

  • 진행률 막대의 높이
  • 전경색 (Foreground color)
  • 배경색 (Background color)
  • 위치 (상단, 하단, 사용자 정의)
  • 막대 조정을 위한 HTML 클래스/ID (사용자 정의 위치를 선택하는 경우)
  • 페이지 템플릿
  • 포스트 타입 (네이티브 또는 커스텀)

글 길이가 긴 경우 읽기 진행률 표시줄을 표시하면 독자가 글을 어느 정도 읽었는지를 파악할 수 있도록 하여 사용자 경험(UX)을 향상시킬 수 있을 것 같습니다.

워드프레스 뉴스페이퍼 테마 읽기 진행률 표시줄 숏코드 추가

최근 워드프레스 Newspaper 테마가 업데이트되면서 몇 가지 새로운 기능이 추가되었고 다수의 버그가 수정되었습니다. 특히, 글을 읽는 데 소요되는 시간을 표시하는 Reading Time 숏코드와 글을 어디까지 읽었는지를 파악할 수 있도록 도와주는 Reading Progress Bar 숏코드를 Single Post Cloud 템플릿에서 이용할 수 있도록 추가되었습니다.

워드프레스 뉴스페이퍼 테마 읽기 진행률 표시줄 숏코드 추가

Single Post Reading Time은 해당 글을 읽는 데 소요되는 추정 시간을 표시하고 Single Post Reading Progress Bar는 글 상단, 하단 또는 지정된 위치(인라인)에 읽기 진행 표시줄을 표시합니다.

Single Post Reading Time 요소에서는 정렬, Minutes 문구 변경(예: 분), 추가 텍스트 지정, 아이콘, 아이콘 크기 등 다양한 옵션을 설정할 수 있습니다.

뉴스페이퍼 테마 읽기 시간 요소

Single Post Reading Progress Bar 요소에서는 위치와 높이, 색상 등을 지정할 수 있습니다.

뉴스페이퍼 테마 읽기 진행률 표시줄 요소

다음 영상을 통해 뉴스페이퍼 테마의 읽기 진행률 표시줄 요소가 어떻게 작동하는지 살펴볼 수 있습니다.

영상에서는 Inline 위치를 지정했을 때 어떻게 작동하는지는 보여주지 않는데요. Inline을 선택하면 Reading Progress Bar 요소가 추가된 곳에 읽기 진행 막대가 표시됩니다.

클라우드 템플릿

이번 업데이트에 추가된 읽기 시간 요소와 읽기 진행 표시줄 요소는 개별 포스트의 레이아웃을 지정하는 싱글 포스트 클라우드 템플릿에서 추가할 수 있습니다.

뉴스페이퍼 테마는 tagDiv Cloud Library 플러그인을 통해 헤더부터 푸터까지 사이트의 모든 섹션을 커스텀할 수 있습니다. 클라우드 템플릿에 대한 자세한 내용은 "워드프레스 뉴스페이퍼 테마에서 헤더 스타일이 표시되지 않는 경우"를 참고해보시기 바랍니다.

최근 워드프레스 테마와 페이지 빌더는 테마 파일을 직접 수정하지 않고 알림판 내에서 사이트의 모든 섹션을 커스텀하는 추세로 나아가는 것 같습니다. 워드프레스 또한 블록 테마를 도입하여 궁극적으로는 대시보드 내에서 사이트의 모든 요소를 편집하는 전체 사이트 편집(Full Site Editing) 기능을 구현하는 방향으로 나아가고 있습니다.

참고


댓글 남기기

* 이메일 주소는 공개되지 않습니다.