• 반응형 홈페이지에 맞추어 출력되는 동영상 삽입하기

    Advanced Responsive Video Embedder 라는 플러그인은 유튜브나 Vimeo 동영상 삽입을 위한 플러그인입니다. 예제 보기 : http://makebct.cafe24.com/?p=188 1. 유튜브 공유-소스코드로 동영상 삽입하기 기존 유튜브의 ‘공유’ 기능을 통해 아래와 같은 코드를 본문에 작성하여 동영상을 삽입해 왔습니다.

    2. Advanced Responsive Video Embedder 플러그인으로 동영상 삽입하기 [새 글 쓰기]를 클릭하여 글 작성창에 보면 아래와 같이 ‘Advanced Responsive Video Embedder’ 플러그인의 [Embed Video]라는 버튼이 보입니다. 동영상을 삽입할 위치에 커서를 위치시킨 후, [Embed Video] 버튼을 클릭하면 다음과 같은 동영상 삽입 창이 보여지고, 다음 그림에 보이는 것과 같이 원하시는 동영상의 주소를 입력하고 나머지 항목을 입력합니다. 동영상이 있는 페이지의 웹주소창의 주소를 입력해도 되고, 공유에서 지원하는 짧은 주소를 입력해도 됩니다. 3. 동영상 출력 위의 두 가지 방법으로 동영상을 본문에 삽입하였을 경우 아래의 그림과 같이 별 차이가 없어 보입니다. 하지만 모바일 환경에서 보면 다릅니다. 유튜브의 ‘공유’ 코드를 이용해 삽입된 동영상의 경우 세로 […]

  • 사이드바에 이미지배너 배치하기

    Simple Image Widget으로 사이드바에 이미지 배너를 배치하고 링크를 걸 수 있습니다. 1. 배너 이미지 준비 make BCT 데모사이트의 테마 BCT0009의 서브페이지 사이드바에 이미지배너를 만들겠습니다. PC화면에서의 사이드바 가로폭은 285px입니다. 하지만 모바일에서 사이드바의 가로폭은 550px 정도가 됩니다. 원래 만드려던 285*80px 사이즈의 배너이미지를 다음과 같이 550*154px로 만들었습니다. 2. Simple Image Widget으로 사이드바에 배치하기 [관리자] > [외모] > [위젯]에 접속합니다. 왼쪽의 ‘사용할 수 있는 위젯’에서 [Image]라는 위젯을 ‘Sidebar’ 영역의 위젯 상자에 배치합니다. 배치된 ‘Image’ 위젯에서 [choose an image]를 클릭하여 ‘미디어 라이브러리’가 열립니다. 새로운 이미지를 업로드하거나 기존에 업로드 해 놓은 이미지를 세팅할 수 있습니다. 아래의 ‘Link’옵션란에 배너를 클락했을때 이동할 url을 적고, 새 창에서 띄우기 위해 ‘Open in new window?’ 에 체크했습니다. 홈페이지에 나가보면 사이드바에 이미지 배너가 배치되었습니다. 배너 위치를 이동하려면 관리자의 [위젯] 설정으로 돌아가 배치된 위젯을 끌어다 다른 위치에 배치하면 됩니다. zman블로그코디 디자인 팀장입니다. http://www.blogcodi.com

  • easy columns 플러그인으로 본문 내용을 가로로 나누어 배치하기

    easy columns 플러그인을 이용해 본문 내용을 가로로 나누어 배치해 보겠습니다. [관리자] 또는 툴바의 [새로 추가]를 클릭하여 [새 글 쓰기] 또는 [새 페이지 추가하기]에 접속합니다. 1. easy columns에서 Column 코드 삽입하기 ’글 작성 화면’에서 easy columns 버튼을 클릭합니다. (워드프레스의 에디터 설정에 따라 easy columns 버튼이 다른 위치에 있을 수도 있습니다.) easy columns으로 삽입할 수 있는 Column 폼들이 보입니다. 페이지를 반반으로 나누기 위해 ’1/2, 1/2’ 로 나우어진 column을 삽입해 보겠습니다. 본문에 column 코드가 삽입되었습니다. ezcol_1half ~ /ezcol_1half라는 코드로 쌓여져있는 위치에 내용을 채우면 됩니다. 2. 내용 채우기 위에서 삽입된 코드들에 내용을 채우기 쉽게 하기위해 다음과 같이 줄을 나누었습니다. 코드로 쌓여진 위치에 ’Half Column’이라는 글자를 지우고 다음과 같이 내용을 채웠습니다. 위와 같은 방법으로 다른 비율의 column 폼도 삽입하여 다음과 같이 배치해 보았습니다. 홈페이지에 나가보면 column이 나누어진 본문 내용을 확인할 수 있습니다. 예제보기 : http://makebct.cafe24.com/?p=118 […]

  • 플러그인 설정하기

    플러그인 메뉴에서는 워드프레스의 방대한 플러그인을 추가 설치하여 기능을 확장할 수 있습니다. BC TOWN™에서 구축하는 워드프레스 웹사이트에는 BC TOWN™에서 직접 개발한 전용 플러그인과 테스트를 거쳐 웹사이트를 운영하는데 꼭 필요한 필수 플러그인이 이미 설치되어 있습니다. (1) 설치된 플러그인 보기 [워드프레스 관리자] – [플러그인] 메뉴를 클릭합니다. 플러그인 목록에는 현재 설치되어 있는 플러그인들을 확인하고 플러그인을 활성화하거나 비활성화, 삭제할 수 있습니다. BC TOWN™ 전용 테마를 위한 플러그인이 기본으로 설치되어 있습니다. (BCT, BCT000x, BCT Cover Editor, BCT Submenu) (2) 플러그인 추가하기 [워드프레스 관리자] – [플러그인] – [플러그인 추가하기] 메뉴를 클릭합니다. 워드프레스 추천 플러그인을 보여주고 있습니다. 우측 상단의 [플러그인 검색]에 키워드나 플러그인 이름을 검색해서 원하는 플러그인을 설치하여 사용할 수 있습니다. 상단의 추천/인기/추천됨/즐겨찾기 등을 통해 여러가지 플러그인을 둘러볼 수 있습니다. 검색하여 찾아낸 플러그인 목록에서 [더 많은 상세]를 클릭하여 해당 플러그인의 정보를 살펴보거나, [지금 설치하기] 버튼을 클릭하여 설치합니다. 설치된 플러그인은 위의 (1) 항목의 ‘설치된 플러그인’에서 […]

위로이동