- 인터넷은 우리에게 자유를 주었습니다. 저희는 자유를 얻기 위해 지식을 통합하고 체계화하고 공유합니다. 랜선 위 정글에서 살아남기 위해 저희는 시키는 일만 하는 꿀벌 대신 고객을 위해 창조하고 혁신하는 게릴라가 되겠습니다. Seenbuy.kr is now Aiforu.kr.
- 024042463
- 01032667931
- [email protected]
Collapse-O-Matic plugin : 워드프레스. 티스토리에서는 ‘더보기’, 네이버 블로그에서는 ‘요약글’, ‘접기/펼치기’라고도 불리우는 기능을 실현할 수 있는 워드프레스 플러그인
개요
워드프레스. 티스토리에서는 ‘더보기’, 네이버 블로그에서는 ‘요약글’, ‘접기/펼치기’라고도 불리우는 기능을 실현할 수 있는 워드프레스 플러그인입니다.
- 버전: 1.7.9
- 글쓴이: twinpictures, baden03
- 최근 업데이트: 10 개월 전에
- 요구되는 워드프레스 버전: 4.7 또는 이상
- 호환되는 버전: 4.9.9
- 활성 설치: 70,000+
- WordPress.org 플러그인 페이지 »
- 플러그인 홈페이지 »
- 이 플러그인에 기부하기 »
설치 및 활성화
사용법
기본 사용법
기본 사용법은 간단합니다.
펼쳐 보여줄 컨텐츠(내용)앞에
을 넣어주시고, 펼쳐 보여준 컨텐츠가 끝나는 곳에
를 넣어주시면 됩니다.
title= 에는 컨텐츠(내용)을 펼쳐볼 수 있다는 안내 문구를 swaptitle=에는 컨텐츠(내용)을 접어 볼 수 있다는 안내 문구를 넣어주세요.
expanded=”true” 를 포함시키시면 컨텐츠(내용)이 표시됩니다.
expanded=”true” 를 빼시면 컨텐츠(내용)이 표시되지 않고, swaptitle의 내용, 즉 “컨텐츠(내용)을 접어 볼 수 있다”만 표시됩니다.
이 플러그인을 사용하는 목적이 저처럼, 지나치게 긴 컨텐츠를 짧게 하기위함이라면 expanded=”true” 를 빼주세요.
아래의 설정 부분에 이 플러그인으로 펼치기/접기를 구현해 보았습니다.
유의 사항
여러 게시글에서 사용하다 보니 잘 되던 것이 갑자기 “내용펼치기”와 같은 안내 글이 표시되지 않거나 true 가 잘 적용되지 않아 접기 기능이 제대로 구현되지 않는 문제가 발견되었습니다.
원인도 밝혀젔는데, 저의 경우, expand tag 를 바로 붙여넣기하여 사용했었는데, 이렇게 하시면 워드프레스는 이것을 문장형태 그대로 보여주는 tag인 pre tag 형식으로 입력하려고 합니다.
- html tag 입력한 문장 형태 그대로 보여주는 pre tag를 줄바꾸는 기능을 하는 p tag로 바꾸어주세요.
- 아래의 이미지 설명을 참조하시어 expand tag 를 1줄로 표현하세요. 이 부분이 pre tag를 불러내는 원인 같습니다.
|
<pre> 태그는 Preformatted Text 의 약자입니다. <pre> 태그로 감싼 문장은 입력한 문장 형태 그대로 브라우저에 표현할 수 있습니다. 예를 들어 엔터(Enter), 탭(Tab), 스페이스바(Space) 는 pre 를 사용하지 않았을 때 무조건 공백 하나로 인식합니다. 하지만 pre 를 사용하게 되면 HTML 형태 그대로 유지가 가능합니다. 그래서 프로그램 소스를 표현하는데 많이 사용합니다. 만약 자신이 작성한 형태 그대로 유지를 하려면 어떻게 해야 할까요? <pre> 태그를 이용하면 됩니다. 그러나 <pre> 는 형태를 그대로 유지할 수 있지만 각 영역별로 서식을 꾸밀 수 없습니다. 출처: HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 |
코드 예시
위에 표시한 이미지의 내용을 포함한 코드 우측을 click하시어 열어서 복사후 사용해주세요.
Collapse-O-Matic plugin expand tag 코드 예시
사용법 확장
Detailed documentation 을 방문하시면 제목 펼치기, 이미지에 펴기와 접기 기능을 넣거나 top-down 형태의 목록형태로 사용하는 기능 등 다양한 확장 사용법 예시들이 있습니다.
살펴보시고 다양하게 활용해보시길 권합니다.
Collapse O Matic WordPress Plugin tutorial (HD) 동영상(8:52)
아래의 동영상, 설치에서 사용법 예시까지 아주 상세히 설명되어 있습니다.
설정
[expand
title=”설정 상세 내용 펼쳐보기”
swaptitle=”설정 상세 내용 접기”
expanded=”true”]
워드프레스 관리자페이지에서 [설정] -> [Collapse-O-Matic]에서 설정하실 수 있습니다. 기본 설정으로 충분하며 추가로 설정할 부분은 없어 보입니다. 필요하신 분들은 참조하세요. 
Style
: 배경이 밝은 사이트의 경우 Light 를 선택하십시오. 배경이 어두운 사이트의 경우 Dark 를 선택하십시오. 스타일링을 직접 처리하려면 None(없음)을 선택하십시오.
Collapse/Expand Duration
: 애니메이션이 실행될 시간을 결정하는 문자열 또는 숫자입니다. 기간은 밀리 초 단위로 표시됩니다. 값이 높을수록 느린 애니메이션이 아니라 빠른 애니메이션이 표시됩니다. 기본 지속 시간은 400 밀리 초입니다. ‘fast’및 ‘slow’문자열은 각각 200 및 600 밀리 초의 기간을 나타 내기 위해 제공 될 수 있습니다.
[/expand]
참고자료 : 1. 워드프레스에 더보기(요약글) 추가하기 – 한설날 – 티스토리
2. Collapse-O-Matic (내용 접고/펼치기)
3. HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법
