'Bootstrap'에 해당되는 글 3건

http://underscores.me/ 에서 언더스코어스 테마(워드프레스 스타터 테마)를 다운로드 합니다. 텍스트 입력 폼에 생성할 테마의 이름을 정해 입력을 하고 GENERATE 버튼을 클릭하면 됩니다.

언더스코어스 홈페이지

다운로드된 압축파일을 풉니다.

언더스코어스 테마 파일

http://getbootstrap.com/getting-started/#download 에서 부트스트랩 프레임워크를 다운로드 합니다.

Download Bootstrap

다운로드 된 파일의 압축을 풉니다. 압축이 풀어진 폴더를 클립보드에 복사(ctrl+c)한 후 언더스코어스 테마 폴더(직접 설정한 테마명)에 붙여넣고, 폴더명을 'bootstrap'으로 수정합니다(예: bootstrap-3.3.6-dist를 bootstrap으로 수정).

부트스트랩 압축 파일 풀기

언더스코어스 테마에 부트스트랩 폴더 붙여넣기

테마 파일 폴더에 있는 미리보기 이미지 'screenshot.png' 파일을 포토샵, 김프 등의 이미지 편집기를 사용하여 편집하고 저장합니다.

그래픽 프로그램에서 screenshot.png 파일 편집

screenshot.png 편집 완료

언더스코어스 테마 폴더에 있는 PHP 파일 중에서 functions.php 파일을 텍스트 에디터에서 엽니다.

functions.php 파일

functions.php 파일의 코드 가장 아래에 다음의 소스 코드를 붙여 넣습니다.

/**
 * Add Bootstrap3 style and script
 */
function bootstrap_styles() {
wp_enqueue_style('bootstrap-stylesheet', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.css');
wp_enqueue_script('bootstrap-script', get_stylesheet_directory_uri() . '/bootstrap/js/bootstrap.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'bootstrap_styles');

부트스트랩 추가 소스 코드

"스텝 바이 스텝 워드프레스 테마 쉽게 만들기"를 전자책으로 발매하였습니다.

부트스트랩3와 언더스코어스 테마를 가지고 직접 디자인한 홈페이지를 만드는 방법을 다루었으며, 텍소노미, 커스텀 포스트 타입 등으로 콘텐츠를 분류하여 포스팅하고 이를 출력하는 것을 배울 수 있습니다. 구글 북스에서는 20%정도 미리보기가 가능합니다.

워드프레스 테마 쉽게 만들기

새 버전이 나왔어도 부트스트랩 2.3.2를 쭈욱~ 사용해 왔는데, 얼마전 홈페이지를 가 보니 더 이상 지원을 하지 않는다는군요. 구차니즘을 벗어 던지고 살펴봤는데... 사용상에는 큰 차이 없다는 결론을 내렸습니다.

좀 더 좋아진 것은 전체적으로 틀이 더욱 잘 잡혀서 글꼴 크기 수정 정도만 하면 홈페이지 제작에 바로 써먹을 수 있지 않을까 라는 생각이 듭니다. 부트스트랩 2.3.2는 자잘하게 손 댈곳이 꽤나 많았습니다(예를 들면 a:hover 등의 마우스 롤오버 스타일 등).

그래서 "연구&심화" 포스팅은 부트스트랩 3을 사용해서 포트폴리오 홈페이지를 만들어보는 방향으로 잡아보려고 생각 중이고, "연구&개발"과 "워프기초" 포스팅이 끝나면 약간의 텀을 가지고 시작할 예정입니다.

(저 자신도 계속 연구하면서 정리하는 마음으로 포스팅을 하는 것이라 빠르게 올리기는 당장은 힘들 듯...)