워드프레스에서 더보기, 요약글, 접기/펼치기 기능 사용 방법

티스토리에서는 ‘더보기‘, 네이버 블로그에서는 ‘요약글‘, ‘접기/펼치기‘라고도 불리우는 기능을 실현할 수 있는 워드프레스 플러그인(Collapse-O-Matic) 소개 및 활용법을 설명한다.

더보기, 요약글, 접기/펼치기 기능

워드프레스에서 글을 쓰다보면, 부연 설명을 하게 되는 내용이 생기게 되는데, 부연설명 내용이 길어지면 전체 글의 흐름이 한눈에 안들어오고, 독자들이 글을 읽다가 이미 알고 있는 내용이나 별로 알고 싶지 않은 복잡한 내용을 읽게 되는 것은 별로 바람직하지 않다. 이럴 때, 해당 부연설명의 내용은 기본적으로 접어 두었다가 독자가 원한다면 해당 부연설명 내용을 읽을 수 있도록 한다면 글을 읽는 독자가 전체글 내용을 편안하게 파악하는데 도움이 될 것 같다. 이 기능은 ‘감추기 기능’으로 표현될 수도 있겠다. 글 전체의 큰 흐름을 파악하기 쉽도록 꼭 읽어야 하는 내용이 아니라면 접어두고(감줘두고), 독자기 더 상세한 정보를 알고 싶을 때 클릭해서 세부 정보를 읽을 수 있도록 하는 기능으로 활용한다면 글의 가독성을 높이는데 도움이 될 것이다.

티스토리에서 [더보기] 기능

티스토리에는 더보기 기능이 기본 탑재되어 있다

티스토리에서의 이 기능에 대해서 알고 싶다면 ‘클릭’

티스토리에서 [더보기]기능 적용하는 방법

아래 티스토리 편집에서 … 부분을 클릭하면, [접은글] 메뉴가 나온다. 이것을 이용하면 된다.

아래 티스토리 편집 메뉴에서 초기에 감추고 싶은 보충설명내용을 블록으로 선택한 후에 […] 메뉴에서 [접은글]기능을 선택하면된다.

접은글 기능을 선택하면 편집화면에서 아래와 같은 모양으로 바뀐다.

이 상태로 저장을 하고 미리보기를 해 보면 아래와 같이 보인다.

이 화면상태에서 [더보기]를 클릭하면 감췄던 내용이 아래와 같이 보이게 된다.

위의 화면에서 보는 것처럼, 숨겨졌던 내용이 보이게 된다.

이렇게 보여지는 형식은 티스토리에 적용한 스킨에 따라서 세부 표현방식은 다르지만 작용 방식이나 기본적이 형태는 같다.

티스토리에서 [더보기]기능 해제하는 방법

다시 편집 화면으로 들어가서, 감추고 싶은 내용을 블록 선택을 하고 이 […]메뉴에서 [접은글]기능을 선택하면 된다.

그러면 접은글로 표시되었던 점선 박스가 사라진다.

이 상태로 저장을 하고 다시 미리보기를 하면, 아래와 같이 [접은글] 기능이 적용 안된 상태로 보여지게 된다.

티스토리는 이처럼 접은글 기능이 기본 내장되어 있어서, 쉽게 적용할 수 있다. 자신이 사용하는 스킨 종류에 따라서 표현 방식만 조금씩 다르다.

워드프레스에서 ‘더보기’ 기능 구현 방법

티스토리에 기본 탑재되어 있는 기능을 워드프레스에서 구현해 보려고 티스토리의 CSS 내용을 분석해서 워드프레스에 적용하는 방법도 가능은 하겠다. 하지만 HTML이나 CSS에 익숙하지 않다면 쉽지 않은 일이다.

다행히, 이러한 기능을 제공하는 워드프레스의 플러그인이 있다. “Collapse-O-Matic” 라는 플러그인이다.

“Collapse-O-Matic” 플러그인 설치

워드프레스 관리화면으로 들어가서 [플러그인]메뉴에서 [Add New Plugin]을 선택한다.

Collapse-O-Matic 을 검색한다.

저 같은 경우에는 이미 설치했기 때문에 활성상태이다.

처음 검색하면 아래와 같이 나오는데, [지금 설치] 버튼을 클릭한다.

설치 후 활성화를 하면, 관리화면 플러그인을 보면 아래와 같이 설치된 것을 확인할 수 있다.

“비활성화”라고 표시된 것이 이미 활성화 되고 있다는 의미이다.

“Collapse-O-Matic” 플러그인 사용

워드프레스 편지화면에서 왼쪽 위에 있는 [+] 아이콘 클릭하면….

아래와 같이 “상세정보”라는 것이 생겨 있다. 마우스를 갖다 대면, 오른쪽처럼 간단한 설명 내용이 나온다.

적용하고 싶은 블록 위치에 커서를 놓고 “상세정보”를 클릭하면 ” ▼요약 작성 …” 라는 것이 보인다.

“숨겨지 블록을 추가하려면 /를 입력하시오” 라는 부분에 원하는 내용의 블록을 입력하면 된다.

혹은, 이미 작성된 내용 중에서 숨겨두었다고 필요하면 열어보도록 할 내용을 이곳에 붙여 넣어도 된다. (제목을 포함한 여러개의 블록을 복사해 넣어도 된다.)

나는 아래와 같이 입력을 해 보았다.

▼ 옆의 내용은 감춰졌을 때 보여지는 내용이다.

“숨겨지 블록을 추가하려면 /를 입력하시오” 부분에 원하는 블록들의 내용을 복사해 넣었다.

그리고 저장하고 미리보기로 내용을 보면 아래와 같이 처음에는 감춰진 상태로 보이고, ▶ 를 클릭하면 감췄던 내용이 보이게 된다.

이렇게 하면 [더보기]기능 구현이 완료 된 것이다.

Collapse-O-Matic 플러그인을 설치하여, 매끄러운 글을 작성하는데 활용하면 좋을 것 같다.