CMS 워드프레스 트위터 부트스트랩 CSS 플러그인

[§]워드프레스 트위터 부트스트랩 CSS 플러그인

티스토리시절 마크쿼리님이 배포하던 반응형 스켈레톤 스킨을 사용했었는데 별다른 지식이 없어도 한번 커스터마이징 해놓으면 깔끔하게 컨텐츠 작성이 가능했었습니다.
남시언의 문화지식탐험
마크쿼리 스켈레톤 스킨 참고

그때 CSS에 등록해 놓았던 소스들을 다시 사용하고 싶어졌는데 현재 사용중인 테마에서는 부트스트랩 CSS가 사용되고 있질 않아 커스터마이징을 통해 적용을 시킬까 플러그인으로 적용을 시킬까 고민하다 플러그인을 택했습니다.

이렇게 또 설치된 플러그인이 늘어나는군요..;;;

부트스트랩에 관해서는 베누시안님의 포스팅을 참고하세요. 기사보기

워드프레스에 트위터 부트스트랩을 적용시켜주는 플러그인을 검색해보니 가장 다운로드수가 많은것이 WordPress Twitter Bootstrap CSS 였습니다.

스크린샷을 확인하니 라이브러리의 선택이나 기능면에서 아주 충실해보입니다만  옵션들이 많아 어떤것을 켜 놓아야 할지 모르겠더라구요. 그렇다고 전부 켜놓는것도 좀 무거워질 것 같기도 하고 테마와 충돌 일어날 것 같기도 하고 말이죠.

제가 원했던것은 사이트의 외관이 아닌 컨텐츠에만 부트스트랩의 CSS를 적용시키는 것이었습니다.

그래서 찾은 플러그인이 Content Bootstrap.

일본인이 만들었는데 제가 원했던것처럼 컨텐츠에서만 부트스트랩의 디자인 요소들을 사용할 수가 있어요.

Content Bootstrap | Firegoby
플러그인 상세보기(일본어)

 

사용방법

플러그인 인스톨 후, 에디터 화면에서 스타일을 선택하는 드롭다운 메뉴에서 선택하여 쉽게 사용이 가능합니다. 이 플러그인에서는 자바스크립트를 제외한 모든 CSS가 적용되어 있습니다만, 자주 사용되는 스타일만 드롭다운메뉴에 넣어놓았다고 하네요.

여기 드롭다운 메뉴에 없더라도 class속성만 부여해주면 사용이 가능합니다.

라벨 & 뱃지

Label과 Badge는 <span class="label label-important">Important</span>처럼 입력해주면 스타일 적용이 가능합니다만 환경에 따라 <span>태그가 삭제되는 경우가 간혹 있으니, 그럴경우엔 아래의 표를 참고하여 숏코드 형태로 사용하시면 되겠습니다.

Labels

워드프레스 트위터 부트스트랩 css

Badges

워드프레스 트위터 부트스트랩 css

부트스트랩을 이용해서 컨텐츠에 어떤 요소를 배치 할 수 있는지는 아래 글을 참고하시면 좋을듯 합니다.

티스토리 skeleton 스킨 사용시 포스트 작성에 도움이 되는 레퍼런스 | 발자취
부트스트랩 기반 테마에서 참고할만한 포스팅

그런데 플러그인을 설치하고 난후 드롭다운 메뉴가 원래 있던게 없어지고, 똑같은게 2개가 생겨버렸습니다.

워드프레스 트위터 부트스트랩 CSS 플러그인

아무래도 테마랑 충돌 나는것 같아요. 문의해 보고나서 답장오면 업데이트 하겠습니다.