Collapse-O-Matic plugin_title

Collapse-O-Matic plugin : 워드프레스. 티스토리에서는 ‘더보기’, 네이버 블로그에서는 ‘요약글’, ‘접기/펼치기’라고도 불리우는 기능을 실현할 수 있는 워드프레스 플러그인

 

개요

워드프레스. 티스토리에서는 ‘더보기’, 네이버 블로그에서는 ‘요약글’, ‘접기/펼치기’라고도 불리우는 기능을 실현할 수 있는 워드프레스 플러그인입니다.

 

설치 및 활성화

Collapse-O-Matic plugin

 

사용법

 

기본 사용법

기본 사용법은 간단합니다. 

펼쳐 보여줄 컨텐츠(내용)앞에

Collapse-O-Matic plugin_1

 

 

 

을 넣어주시고, 펼쳐 보여준 컨텐츠가 끝나는 곳에

Collapse-O-Matic plugin_2

 

 

를 넣어주시면 됩니다. 

title= 에는 컨텐츠(내용)을 펼쳐볼 수 있다는 안내 문구를 swaptitle=에는 컨텐츠(내용)을 접어 볼 수 있다는 안내 문구를 넣어주세요. 

expanded=”true” 를 포함시키시면 컨텐츠(내용)이 표시됩니다.
expanded=”true” 를 빼시면 컨텐츠(내용)이 표시되지 않고, swaptitle의 내용, 즉 “컨텐츠(내용)을 접어 볼 수 있다”만 표시됩니다.
이 플러그인을 사용하는 목적이 저처럼, 지나치게 긴 컨텐츠를 짧게 하기위함이라면 expanded=”true” 를 빼주세요.

 

아래의 설정 부분에 이 플러그인으로 펼치기/접기를 구현해 보았습니다.  

 

유의 사항

여러 게시글에서 사용하다 보니 잘 되던 것이 갑자기 “내용펼치기”와 같은 안내 글이 표시되지 않거나 true 가 잘 적용되지 않아 접기 기능이 제대로 구현되지 않는 문제가 발견되었습니다. 

원인도 밝혀젔는데, 저의 경우, expand tag 를 바로 붙여넣기하여 사용했었는데, 워드프레스는 이것을 문장형태 그대로 보여주는 pre tag 로 입력하려고 합니다.

  1. html tag 입력한 문장 형태 그래도 보여주는 pre tag를 줄바꾸는 기능을 하는 p tag로 바꾸어주세요.
  2. 아래의 이미지 설명을 참조하시어 expand tag 를 1줄로 표현하세요. 이 부분이 pre tag를 불러내는 원인 같습니다. 
<pre> 태그는 Preformatted Text 의 약자입니다. <pre> 태그로 감싼 문장은 입력한 문장 형태 그대로 브라우저에 표현할 수 있습니다. 예를 들어 엔터(Enter), 탭(Tab), 스페이스바(Space) 는 pre 를 사용하지 않았을 때 무조건 공백 하나로 인식합니다. 하지만 pre 를 사용하게 되면 HTML 형태 그대로 유지가 가능합니다. 그래서 프로그램 소스를 표현하는데 많이 사용합니다.
만약 자신이 작성한 형태 그대로 유지를 하려면 어떻게 해야 할까요? <pre> 태그를 이용하면 됩니다. 그러나 <pre> 는 형태를 그대로 유지할 수 있지만 각 영역별로 서식을 꾸밀 수 없습니다.
출처: HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법

Collapse-O-Matic plugin 주의사항

 

코드 예시

위에 표시한 이미지의 내용을 포함한 코드 우측을 click하시어 열어서 복사후 사용해주세요. 

Collapse-O-Matic plugin 코드 예시

 

사용법 확장

Detailed documentation 을 방문하시면 제목 펼치기, 이미지에 펴기와 접기 기능을 넣거나 top-down 형태의 목록형태로 사용하는 기능 등 다양한 확장 사용법 예시들이 있습니다.  

살펴보시고 다양하게 활용해보시길 권합니다.  

 

Collapse O Matic WordPress Plugin tutorial (HD) 동영상(8:52)

아래의 동영상, 설치에서 사용법 예시까지 아주 상세히 설명되어 있습니다. 

 

설정

설정 상세 내용 펼쳐보기

워드프레스 관리자페이지에서 [설정] -> [Collapse-O-Matic]에서 설정하실 수 있습니다. 기본 설정으로 충분하며 추가로 설정할 부분은 없어 보입니다. 필요하신 분들은 참조하세요. Collapse-O-Matic plugin_settings

 

Style

: 배경이 밝은 사이트의 경우 Light 를 선택하십시오. 배경이 어두운 사이트의 경우 Dark 를 선택하십시오. 스타일링을 직접 처리하려면 None(없음)을 선택하십시오.

 

Collapse/Expand Duration

: 애니메이션이 실행될 시간을 결정하는 문자열 또는 숫자입니다. 기간은 밀리 초 단위로 표시됩니다. 값이 높을수록 느린 애니메이션이 아니라 빠른 애니메이션이 표시됩니다. 기본 지속 시간은 400 밀리 초입니다. ‘fast’및 ‘slow’문자열은 각각 200 및 600 밀리 초의 기간을 나타 내기 위해 제공 될 수 있습니다.

 

 

 

참고자료 : 1. 워드프레스에 더보기(요약글) 추가하기 – 한설날 – 티스토리

                  2. Collapse-O-Matic (내용 접고/펼치기)

                  3. HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.