• Page Builder의 Post Loop 위젯에 more 버튼 추가

    워드프레스 페이지를 좀 더 쉽게 관리하기 위한 용도로 Page Builder 플러그인을 사용하는 경우가 있는데, BC TOWN에서는 다음과 같은 플러그인을 주로 활용합니다. https://wordpress.org/plugins/siteorigin-panels/ Page Bulder by SiteOrigin 플러그인을 활용해서 페이지를 구성할 때, 다음과 같이 Post Loop 위젯을 활용하는 경우가 많습니다. 위 그림을 보면 개별 글 제목에는 링크가 설정되어 있는데, 카테고리 제목에는 링크를 설정할 수 없어 불편합니다. 그래서 카테고리 제목 클릭 시 해당 카테고리로 이동할 수 있는 링크를 추가하는 방법을 알아 보겠습니다. 1. basic.php 파일 수정 basic.php 파일 위치는 다음과 같습니다.

    basic.php 파일에서 다음을 수정해 줍니다.

    2. 스타일 수정 more 버튼을 감싸고 있는 so-more 클래스에 스타일을 추가할 수 있습니다. 스타일 추가는 개인적인 취향이기 때문에 각자 추가해 주면 됩니다. 3. 코드 적용 결과 1번 basic.php […]

  • 무료 사용 가능한 한글 구글웹폰트

    http://www.google.com/fonts/earlyaccess 에서 지원하는 한글 웹폰트를 소개합니다. 실제 출력되는 모습은 메이크비씨티 데모사이트에서 확인하세요. http://makebct.cafe24.com/?p=194

    본고딕 예제: http://makebct.cafe24.com/archives/631?cat=90

    zman 블로그코디 디자인 팀장입니다. http://www.blogcodi.com

  • BLOGCODI.COM 처럼 breadcrumb 네비게이션을 추가하려면?

    다음과 같이 breadcrumb 네비게이션을 추가하려면 어떻게 해야 하나요? 위 그림처럼 breadcrumb 네비게이션을 추가하려면, (BCT0008 테마에서는 기본 기능이 아니므로) BCT0008 테마의 일부 코드를 수정해야 합니다. 수정 과정은 다음과 같습니다. 1. header-default.php 파일 생성 header-default.php 내용은 다음과 같습니다.

    2. get_header 코드 수정 테마 파일에서 전반적으로 사용되는 get_header( ‘base’ ); 코드를 get_header( ‘default’ ); 코드로 교체합니다. 교체 완료된 결과는 다음과 같습니다. 위 그림의 왼쪽 상단에 현재 경로가 표시되는 것을 볼 수 있습니다. 이제 스타일을 추가해야 합니다. 3. 스타일 추가 스타일은 사이트 마다 달라질 수 있습니다. 그 중 한 예는 다음과 같습니다. 이상으로 BLOGCODI.COM 처럼 breadcrumb 네비게이션을 추가하는 과정을 살펴 보았습니다. 북극海 • (주)블로그코디 대표 • 워드프레스 교육 서비스 런칭 • 워드프레스 정보 공유 커뮤니티 make BCT 런칭 […]

  • BLOGCODI.COM 처럼 카테고리를 표시하려면 어떻게 하나요?

    BLOGCODI.COM 사이트의 다음 카테고리처럼 표시하려면 어떻게 해야 하나요? Home > THEMES > THEME GALLERY Home > PORTFOLIO > ALL 위 경우는 카테고리 메뉴에 해당하는데, BC TOWN 테마에서는 카테고리에 따라 출력 타입을 선택할 수 있습니다. 즉, Home > THEMES > THEME GALLERY 카테고리는 Webzine B Style이고, Home > PORTFOLIO > ALL 카테고리는 Webzine C Style입니다. 카테고리 설정은 다음과 같이 카테고리 편집 페이지에서 할 수 있습니다. BLOGCODI.COM 사이트의 베이스 테마는 BCT0008인데, BCT0008 테마에서는 Webzine B & C Style 카테고리 타입이 기본으로 제공되지 않습니다. 이 부분은 BLOGCODI.COM 사이트만의 별도 커스커마이징 중 하나입니다. 즉, BCT0008 테마를 사용하는 클라이언트가 이 기능을 추가 요청을 하면 Webzine B & C Style 카테고리 타입을 사용할 수 있도록 추가해 드립니다. 북극海 • (주)블로그코디 대표 • 워드프레스 교육 서비스 런칭 • […]

  • BLOGCODI.COM 사이트는 BC TOWN 테마 중 어떤 것으로 제작되었나요?

    워드프레스 기반으로 포트폴리오 웹사이트를 제작하기 원하는 기업 등에서 BLOGCODI.COM 사이트를 어떻게 제작 하였는지 궁금해 하십니다. BLOGCODI.COM 사이트는 블로그코디 테마(BCT0008) 기반이고, BLOGCODI.COM 사이트 특성에 맞게 일부 기능과 스타일을 커스커마이징해서 제작 하였습니다. BCT0008 테마 BLOGCODI.COM 사이트 어떤가요? 비슷하지 않은가요? 일부를 커스터마이징 하긴 했지만, 두 사이트는 동일한 워드프레스 테마(BCT0008)로 제작되었습니다. 북극海 • (주)블로그코디 대표 • 워드프레스 교육 서비스 런칭 • 워드프레스 정보 공유 커뮤니티 make BCT 런칭 • 한국형 워드프레스 테마 출시 • 워드프레스 홈페이지 제작 서비스 런칭 http://blogcodi.com

  • BC TOWN 워드프레스 테마 교체 시 고려사항

    BC TOWN 워드프레스 테마 중 비반응형 테마인 BCT0004번 테마를 기반으로 제작된 워드프레스 홈페이지를 1년여 동안 운영해 온 클라이언트 분이 최근 워드프레스 반응형 테마(BCT0010)를 기반으로 한 워드프레스 홈페이지로 업그레이드를 하게 되었습니다. 그 당시 사용하던 워드프레스 버전은 3.5.2 이었는데, 이전 버전의 워드프레스에서 사용하던 워드프레스 홈페이지를 최신 테마 및 최신 버전의 워드프레스로 업데이트 하는 방법을 고려할 때 가장 최적화 된 방법이 무엇인지 알아 보겠습니다. 1. 이전 워드프레스 백업 (전체 파일 및 DB) 백업은 필수 사항입니다. 2. 워드프레스 코어 업데이트 먼저, 워드프레스 코어를 업데이트 합니다. 3. 워드프레스 플러그인 업데이트, 삭제, 설치 및 설정 이전 BCT0004번 테마에서 사용하던 플러그인과 BCT0010 테마에서 사용하던 플러그인이 다를 수 있습니다. 그래서 이전 버전과 새 버전에서 공통으로 사용되는 플러그인은 최신 버전으로 업데이트 하고, 이전 버전에서만 사용되던 플러그인은 삭제, 최신 버전에서만 사용되는 플러그인은 새롭게 설치하도록 합니다. 설치 이후에는 활성화 및 설정을 별도로 진행해야 합니다. […]

  • 코멘트 작성자의 이메일 정보를 보기 위한 코드 수정 팁

    다음과 같이 BC TOWN™ 테마에서는 사용자 화면에서 코멘트 작성자의 이메일 정보를 확인할 수 없습니다. BC TOWN™ 테마 사용자 중에서 코멘트 사용자의 이메일 정보를 사용자 화면에서 볼 수 있게 해달라는 경우가 있는데, 이 때 활용할 수 있는 팁(코드 일부 수정)입니다. 수정 파일: wp-content/plugins/bct0006/includes/template-functions.php 코드 수정 내용:

    이 코드를 추가한 이후의 코멘트 화면은 다음과 같습니다. 위 그림에서 코멘트 작성자명에 링크가 걸려있고, 마우스를 가져다 대면 하단에 작성자 이메일 정보를 확인할 수 있습니다. 코멘트 작성자 링크를 클릭하면 (사용자 PC 환경에 따라) 다음과 같이 Outlook과 연결이 됩니다. 북극海 • (주)블로그코디 대표 • 워드프레스 교육 서비스 런칭 • 워드프레스 정보 공유 커뮤니티 make BCT 런칭 • 한국형 워드프레스 테마 출시 • 워드프레스 홈페이지 제작 서비스 런칭 http://blogcodi.com

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

    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

  • BC TOWN™ 테마에서 홈과 서브페이지에 다른 배경 이미지 적용하기

    make BCT 데모사이트(http://makebct.cafe24.com)의 홈과 서브페이지는 다음과 같습니다. 첫화면에 슬라이드가 배치되어 배경이미지가 보이지 않습니다. 서브페이지 배경은 그대로 두고, 첫 화면에만 배경이미지를 다르게 설정하겠습니다. 1. 이미지 업로드 [관리자] > [미디어]에 접속하여 홈 배경에 쓰일 이미지를 업로드합니다. 업로드한 이미지의 url은 ’http://makebct.cafe24.com/wp-content/uploads/2015/01/home_bgi.gif’입니다. 2. 커버에디터에 배경이미지를 불러오는 스타일 작성 [관리자] > [BCT Covers]에 접속하여 현재 세팅되어 있는 커버 편집화면에 접속합니다. 오른쪽 ’Containers’에서 1단 상자를 추가하고, ’Shortcode Widget’을 1단 상자에 끌어다 놓습니다. 다음 그림과 같이 홈에서만 출력할 배경이미지의 스타일을 작성해 줍니다.

    커버에디터에 작성한 스타일 구문은 홈에서만 불러옵니다. ’관리자’에서 설정한 배경이미지 대신 여기에 작성한 배경이미지를 출력하게 됩니다. 홈페이지에 나가보면 첫화면의 배경과 서브페이지의 배경이 다르게 출력됩니다. 데모사이트 보기 : http://makebct.cafe24.com zman 블로그코디 디자인 팀장입니다. http://www.blogcodi.com

  • PhpSword Favicon Manager 플러그인으로 홈페이지 아이콘-파비콘(favicon) 설정하기

    워드프레스 플러그인 PhpSword Favicon Manager를 이용해 홈페이지에 파비콘을 설정하겠습니다. 1. 파비콘 이미지 준비하기 파비콘을 만드려면 먼저 이미지를 준비해야 합니다. 파비콘으로 사용되는 ico 파일에 쓰이는 이미지 사이즈는 16X16, 32X32, 64X64, 128X128 정도가 기본이며, 최근에는 256X256과 512X512까지 만들기도 합니다. 일반적인 ico파일에는 여러 크기의 이미지가 포함되어 폴더의 아이콘 크기에 따라 다른 사이즈의 이미지를 보여줍니다. 파비콘으로 출력되는 크기는 16*16px의 사이즈만 쓰기 때문에 포토샵으로 한 가지 사이즈의 이미지만 만들겠습니다. make BCT 로고를 이용해 다음과 같은 아이콘을 만드려고 합니다. 파비콘 사이즈인 16*16px로 줄여보겠습니다. 사이즈를 그대로 줄여서인지 로고가 흐릿하게 보입니다. 브라우저에 출력되는 파비콘 로고가 깨끗하게 보여지게 하기위해 이미지를 확대하여 왼쪽이미지를 오른쪽 이미지와 같이 경계선을 다듬어 줍니다. 픽셀 단위로 작업해야 작은 아이콘이 선명하게 보여집니다. 완성된 이미지를 배경이 없는 투명한 PNG파일로 저장합니다. 2. ico로 변환하기 무료 온라인 ICO/PNG 파일 변환 서비스 CONVERTICO에서 만들어진 png이미지를 ico파일로 변환하겠습니다. 왼쪽의’Select File From Your Computer’에서 이미지를 업로드 후, [GO] 버튼을 클릭합니다. […]

위로이동