'부트스트랩'에 해당되는 글 29건

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%정도 미리보기가 가능합니다.

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

그동안 티스토리의 기본 스킨을 사용하여 블로그를 운영(후 방치)하고 있었는데, 다른 분들 블로그이 반응형 레이아웃을 적용하여 아주 멋지게 바뀐 것들이 많더군요. 그래서 이번에 워드프레스로 운영중인 홈페이지도 부트스트랩 기반 무료 테마로 바꾸면서 동시에 블로그 스킨에 부트스트랩3를 적용하여 새로 만들었습니다.

따로 디자인 작업 없이 스킨 제작 메뉴얼을 기초로 부트스트랩의 기본 CSS를 적용하고, Font Awesome을 적용시키는 정도에 우선 만족했습니다. 아직 이곳저곳 손 볼 곳도 많고 반응형만 구현했지 뭔가 디자인적인 면은 부족하다고 여겨지지만 조금씩 업데이트해 나가려고 합니다.

의뢰를 받아 워드프레스를 사용한 홈페이지를 제작했습니다.

클라이언트의 취향 및 요청이 90% 이상 반영된 홈페이지로, 워드프레스, 부트스트랩, 언더스코어스 로 제작되었습니다.

메뉴부분은 그냥 간단한 jQuery 소스를 찾아서 만들었는데, 약간 움직임이 끊기는 느낌...

URL

http://leehochul.org/

홈페이지 테마를 다시 리뉴얼했습니다.

기존의 것에서 스타일 수정을 좀 하고 정리를 했네요.

(기존 테마는 약간 수정해서 다른 곳에 쓰일 예정...)

부트스트랩 3.1.1을 사용하니 다양한 화면에서의 레이아웃 정렬이 더욱 간편해졌습니다. 

복잡한 줄 알았는데 전혀 그렇지 않고요.

12단에서 10단만 사용하고 7:3으로 본문, 사이드바를 나눴는데... 본문이 좀 좁아보이는게 좀 그렇군요.

URL

http://www.warpmedia.co.kr/

푸터(Footer)는 홈페이지나 웹사이트 하단부에 위치하면서 저작권 정보 및 연락처 등이 표기되는 공간입니다. 과거에는 단지 앞에서 적은 것 정도만 출력하는 경우가 많았지만 요즘은 이 외에 여러 컨텐츠를 넣고 있는 추세이고 이런 콘텐츠가 노출되는 푸터를 메가푸터(Mega Footer)라고 합니다. 아래는 Avada 테마의 메가푸터 입니다.

대부분의 유료 테마를 보면 푸터 부분에 글 모음(월별), 최근 댓글, 갤러리 썸네일, 로그인 링크 등이 들어가 있는 것을 쉽게 찾을 수 있죠.

_S 테마는 기본적인 저작권 정보(카피라이트)만 들어가 있습니다. 그것도 고치려면 footer.php 를 수정해야 하죠. 이 기본적인 푸터를 메가푸터로 업그레이드 해 보겠습니다. 방법은 푸터 영역에 사이드바 처럼 위젯을 넣을 공간을 만들어 주고 그곳에 위젯을 추가하면 됩니다.

우선 functions.php 에 다음의 코드를 추가합니다.

⁄* 푸터 위젯 영역 추가 함수 *⁄
if ( function_exists('register_sidebar') ) { 
	register_sidebar();
	register_sidebars(3, array('name'=>'Footer %d')	); 
}

푸터 부분에 사이드바 처럼 위젯을 넣을 수 있게 하는 함수입니다. 위의 코드 중 "숫자 3"이 나오는데 공간을 몇 개나 만들 것인가 정하는 부분입니다. 보통 메가푸터는 3~4 개의 단으로 구성되는 경우가 많습니다.

 

 

다음은 footer.php를 열고, 위젯을 넣을 공간을 HTML 태그로 만듭니다.

<footer id="colophon" class="site-footer" role="contentinfo"> 아래 줄에 다음의 코드를 입력합니다.

<div id="megafooter" class="row"><!-- 메가푸터:위젯 -->
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 1') ) : ?>
		<?php endif; ?>
	<⁄div>
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 2') ) : ?>
		<?php endif; ?>
	<⁄div>
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 3') ) : ?>
		<?php endif; ?>
	<⁄div>
<⁄div><!-- .row:메가푸터:위젯끝 -->

<DIV> 요소를 사용하여 위젯이 들어갈 공간을 만들었습니다.

 

 

 

 

관리자 메뉴의 "외모 - 위젯"으로 이동하면 Footer1, 2, 3 이라는 이름의 위젯 영역이 생성된 것을 볼 수 있습니다.

 

 

 

좌측의 "사용할 수 있는 위젯"에서 각 푸터 영역으로 위젯들을 드래그&드롭하고 각각 [저장하기]를 클릭한 다음 홈 화면을 확인해봅니다.

 

 

스케쥴, 최근 댓글, 홈페이지 이용안내 라고 하는 3개의 내용이 푸터에 추가된 것을 확인할 수 있습니다.

 

 

이제 스타일을 수정해서 조금 다듬어야 합니다. custom.css 를 열고 아래의 코드를 추가합니다.

상단의 더블라인을 가지고 배경이 밝은 회색으로 채워진 푸터가 만들어진 것을 확인할 수 있습니다.

⁄*------------------------------------------------------------
 푸터 수정
 *------------------------------------------------------------
 *⁄
⁄* 푸터 전체 모양 *⁄
.site-footer {
  margin-top: 4em;
  border-top: 3px double #aaa;
  background-color: #efefef;
}

⁄*푸터 위젯 제목 및 리스트 크기 *⁄
#megafooter li { list-style: none; }
.widgettitle { font-size: 1.6em; border-bottom: 1px solid #aaa; }

 

 

모양이 좀 많이 별루지만... 메가푸터 맞습니다;;; 스타일 수정을 더 하면 멋지게 나오겠죠.

 

부족한 글이나마 도움이 되었다면 "좋아요" 부탁드립니다.

 

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

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

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

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

스타일을 수정해서 사이드바의 텍스트를 좀 정리합니다.

구글 크롬의 요소 검사를 통해 클래스명을 살펴보니 <h1> 요소에 "widget-title"로 정의되어 있습니다.

관리자 메뉴의 "외모 - WP Editor"를 통해서 custom.css 를 열고, 위젯 제목 텍스트 크기를 줄이기 위해 아래의 스타일을 추가합니다.

.widget-title { font-size: 1.6em; }

리스트의 점을 없애고 좌측 마진을 좀 줄이기 위해 아래의 스타일을 추가합니다.

.widget ul li { list-style: none; }

.widget ul { margin-left: 10px; }

<수정 전>

<수정 후>

추가로 클래스 widget-title을 아래와 같이 수정하여 위젯 제목과 리스트 사이에 가로선을 넣어서 구분을 짓도록 하겠습니다.

.widget-title { font-size: 1.6em; border-bottom: 1px solid #eee; }

이제 위젯 구성을 좀 바꾸보겠습니다.

검색창, 최근 글, 카테고리만 남기고 나머지는 모두 삭제하고 최신 글의 제목을 "최신 상품"으로, 카테고리 제목을 "제품 카테고리"로 수정한 후 [저장하기]를 클릭하여 적용합니다.

사이드바 가장 아래에 베너이미지를 추가하도록 하겠습니다.

플러그인 검색을 통해 "image widget"을 검색하고, 설치 후 활성화 합니다.

Image Widget

https://wordpress.org/plugins/image-widget/

관리자 메뉴의 "외모 - 위젯"을 선택하고 <Image Widget>을 사이드바 영역으로 넣습니다(드래그 & 드롭).

[Select an Image] 버튼을 클릭하고 이미지 라이브러리(로컬 파일 업로드 가능)의 이미지를 불러옵니다.

Title에 적당한 이름을 넣은 후 Link 에 연결될 인터넷 주소를 넣고 아래쪽 풀다운 메뉴에서 Open New Window 를 선택합니다.

또 Size는 Custom 으로 설정하고 Width, Height 모두 0으로 입력합니다. Align은 center로 설정합니다.

(가로, 세로 사이즈를 넣지 않아야 브라우저의 가로 사이즈가 줄었을 때 자동으로 사이즈가 줄어듭니다)

[저장하기]를 클릭하고 홈페이지의 변경된 모습을 확인합니다.

브라우저 크기가 줄어도 이미지의 크기가 자동으로 조절됩니다(Responsive).

<1024*768>

<800*600>

글의 내용이 늘어나면 그 사이를 이동하는 것도 만만치 않은 일입니다. 그래서 일반적으로 페이지 번호를 달아서 이를 해결하는 데 _S 로 만든 테마는 그런 기능이 없이 그냥 이전글, 다음글로만 이동할 수 있게 되어 있습니다.

그래서 플러그인을 통해 페이지 번호를 달아보겠습니다.

플러그인 검색에서 pagination 으로 검색을 해보면 TW Pagination 이라는 플러그인이 검색됩니다. 업데이트 된 지도 오래되었고 버전도 1.0 으로 끝인데, 별이 다섯개. 그리고 검색 최상단에 위치하고 있네요.

http://wordpress.org/plugins/tw-pagination/

플러그인을 설치하고 활성화 한 후 설정페이지로 갑니다. 관리자 메뉴의 "설정 - TW Pagination"입니다.

다른 것은 건들지 않고, Pagination Label 부분은 빈 칸으로 만듭니다. 굳이 라벨까지 달 필요는 없으니...

Previous Page(이전 페이지), Next Page(다음 페이지) 부분은 << 와 >>로 되어 있는데 ◀ 와 ▶ 로 바꿉니다. 눈에 확 띄게요.

특수문자 입력은 검색엔진에서 검색하셔도 되고 한글의 초성 (ㄱ,ㄴ,ㄷ,ㄹ,ㅁ,...)만 누르고 "한자"키를 누르면 각 초성마다 지정된 특수문자를 선택할 수 있습니다.

Advanced Settings 에서 Before Markup 부분은 페이지 번호 부분을 감싸는 요소 사용자가 지정할 수 있는데, 

기본값인 <div class="navigation">을 <div class="page-navi">로 고칩니다.

아래로 스크롤 하면 플러그인의 사용방법이 나옵니다.

쉽게 말하면 페이지 번호가 들어가 부분인 포스트(글)과 코멘트(댓글) 부분에 각각 

<?php if(function_exists('tw_pagination')) tw_pagination(); ?> 와

<?php if(function_exists('tw_pagination_comments')) tw_pagination_comments(); ?> 를 넣으면 된다는 뜻입니다.

관리자 메뉴에서 "외모 - WP Editor"를 선택하고, home.php를 엽니다.

<?php aca_paging_nav(); ?> 를 지우거나 주석으로 처리하고(사용자마다 함수명은 다를 것입니다), 

<?php if(function_exists('tw_pagination')) 

tw_pagination();

?>

를 넣고 저장합니다. 이제 홈페이지에 페이지 번호가 들어간 것을 확인합니다.

만들어진 페이지 번호를 중앙정렬 하기 위해 custom.css를 열고 스타일을 추가합니다.

/* 페이지 번호 */

.page-navi { text-align: center; }

.page-navi .tw-pagination { display: inline-block; }

코멘트 부분에도 페이지 번호를 넣기 위해 comments.php 파일을 엽니다. 코드를 살펴보면 코멘트 네비게이션 부분이 두 곳이 있습니다. 두 곳을 지우고 대신 

<?php if(function_exists('tw_pagination_comments')) tw_pagination_comments(); ?>

를 넣고 저장합니다(혹시 모르니 원래의 코드들은 따로 복사해서 저장해 놓으세요).

코멘트에도 페이지 번호가 들어간 것을 확인할 수 있습니다. 위 아래 두 군데에 넣는 것은 댓들이 길어져서 스크롤하기 어려울 때를 대비한 것으로 보입니다.

회사소개 마지막에 있는 오시는길 페이지에 구글지도를 넣겠습니다. 비록 동해를 일본해라고 표기하는 괘씸한 부분은 있지만 (국내한정 '동해' 표기로 알고 있는데 맞는지...) 이 외에 쓸만한 서비스가 보이지 않는지라 어쩔 수 없습니다.

국내 돈 많이 벌고 있는 주요 포털 사이트는 뭐하고 있는지...

주소 : 서울특별시 마포구 공일동 123-45

전화 : 02-123-4567

핸드폰 : 101-123-4567

대충 입력해 봤습니다. 주소 부분 아래쪽에 구글에서 지도를 가져와 넣을 것입니다.

구글지도에 접속해서 주소를 입력한 후 위치를 찾습니다.

우측 하단의 "톱니바퀴 모양"의 아이콘을 클릭하고, "지도 공유 및 삽입"을 선택합니다.

"지도 삽입"탭을 클릭하고 지도 크기 항목을 "크게(800*600)"로 설정하면 그에 맞춘 미리보기를 출력해줍니다.

iframe 소스 코드를 클릭해서 클립보드로 복사합니다(ctrl+c).

오시는 길 페이지 편집에서 "텍스트" 모드를 선택하고 주소 내용 하단에 붙여넣습니다(ctrl+v).

저장 후 페이지 보기로 확인합니다.

회사소개 부분의 두 개의 서브메뉴(페이지)에 각 페이지 성격에 맞는 내용을 생각해서 작성합니다.

일반적인 글쓰기로 넣어도 상관은 없지만 부트스트랩의 몇가지 기능을 사용하면 더 좋습니다. 이와 관련된 내용들은 부트스트랩 2.3.2 사이트에 가면 포스팅을 위해 사용할 만한 CSS, Componets, JavaScript 등이 예제로 잘 나와 있습니다.

http://getbootstrap.com/2.3.2/

인사말 부분은 "비주얼" 모드에서 아래의 내용을 넣었습니다. 생각대로 나오지는 않을 것입니다만 그냥 입력하고 이후 수정합니다.

사랑스러운 나의 고양이를 위한 만족스러운 제품을 제공하는 회사. “냐옹(NyaOng)” 홈페이지를 방문해주셔서 감사합니다.

“냐옹”은  2012년 설립 이래로 애묘인을 위한 제품에 대한 끊임없는 고민을 통해 가장 좋은 제품을 합리적이고 경제적인 가격으로 제공하는 것만을 생각하고 있으며, 다양한 제품들을 테스트하고 엄선하여 판매하고 있습니다.

“냐옹”은 각종 인터넷 쇼핑몰, 오픈마켓 등을 통해 제품을 판매하고 있으며 아래의 링크를 통해 판매처로 이동하실 수 있습니다.

“냐옹”의 공식 홈페이지에서는 취급하는 상품 및 상품에 대한 정보 그리고 각종 지원을 통해 고객과 가까이 하고자 합니다.

항상 집사님의 건강, 애묘의 건강을 위해 노력하는 “냐옹”이 되겠습니다. 감사합니다.

냐옹 대표 아무개

<브라우저>

<HTML 소스>

<p>사랑스러운 나의 고양이를 위한 만족스러운 제품을 제공하는 회사. "냐옹(NyaOng)" 홈페이지를 방문해주셔서 감사합니다.<⁄p>
<p><blockquote>"냐옹"은  2012년 설립 이래로 애묘인을 위한 제품에 대한 끊임없는 고민을 통해 가장 좋은 제품을 합리적이고 경제적인 가격으로 제공하는 것만을 생각하고 있으며, 다양한 제품들을 테스트하고 엄선하여 판매하고 있습니다.<⁄blockquote><⁄p>
<p><blockquote>"냐옹"은 각종 인터넷 쇼핑몰, 오픈마켓 등을 통해 제품을 판매하고 있으며 아래의 링크를 통해 판매처로 이동하실 수 있습니다.<⁄blockquote><⁄p>
<p><blockquote>"냐옹"의 공식 홈페이지에서는 취급하는 상품 및 상품에 대한 정보 그리고 각종 지원을 통해 고객과 가까이 하고자 합니다.<⁄blockquote><⁄p>
<p>항상 집사님의 건강, 애묘의 건강을 위해 노력하는 "냐옹"이 되겠습니다. 감사합니다.<⁄p>
<p>냐옹 대표 아무개<⁄p>

blockquote 들여쓰기 부분이 위에 처럼 세로선으로 표시되는 것은 부트스트랩 스타일 때문입니다. 주의할 점은 "비주얼" 상태에서 blockquote 를 넣게 되면 세 부분으로 나뉘어 나오지 않고, 하나로 묶여 나오기 때문에 내용을 입력한 후 '텍스트' 모드로 들어가서 소스를 수정해 줘야 한다는 것입니다. 
비주얼 모드와 텍스트 모드에서 서로 차이가 발생하는 것은 워드프레스 포스팅에서 자주 일어나는 일이기때문에 포스팅할 때는 항상 생각대로 출력되는지 확인을 꼭 해보는 습관이 필요합니다.

연혁 페이지의 내용들은 "탭(tab)" 방식으로 넣을 것입니다. 부트스트랩에서 기본적으로 제공하고 있으며 보다 쉬운 포스팅을 위한 "부트스트랩 쇼트코드 플러그인"들도 많지만 우선은 기본적인 하드코딩 방식으로 넣을 것입니다.

부트스트랩 홈페이지에서 Component 부분에 보면 Navs 라는 항목이 있습니다. 그곳에서 아래쪽으로 좀 더 스크롤하면 
"Tabbable nav"라는 항목이 있습니다. 이 부분의 소스를 복사합니다.

연혁 페이지로 돌아와서 "텍스트"모드에서 복사한 소스를 [ctrl+v]로 붙여넣습니다. 그 후 내용을 수정합니다.

소스를 잘 보면 위쪽에 제목, 아래쪽에 내용이 들어가는 것을 알 수 있습니다. 그래서 위쪽에 년도, 아래쪽에 사업 활동내용을 넣었습니다. 2012년 입력을 위해 요소를 하나씩 더 추가한 것도 보입니다.

사실상 이것만으로는 매우 썰렁한 페이지입니다만 페이지 타이틀과 내용 사이에 대표이미지를 넣거나 하는 방법을 통해 좀 더 보기 좋은 페이지로 업그레이드 할 수도 있을 것입니다.

페이지나 포스트 하단에는 댓들을 달 수가 있게 되어 있습니다. 언더스코어스의 기본 댓글 부분의 폼 입력부분의 크기를 contact form 7 처럼 고치려고 합니다. 우선 구글 크롬 브라우저를 통해 해당 폼들의 id나 class 를 알아봅니다.

폼에서 마우스 우측클릭을 하고 "요소 검사"를 선택하면, 크롬 브라우저 하단에 도큐먼트의 소스를 볼 수 있는 창이 나타납니다. 다른 탭은 건들지 말고 Elements(요소) 탭에서 텍스트 입력폼 중 하나가 선택된 것을 확인합니다.

우측에 Styles 탭이 있는데, 선택된 요소 부분이 검은색으로 눈에 띄게 보여지고 있습니다. input[type="text"] 라는 부분입니다. 그 스타일 요소를 보면 height: 20px; 라는 것이 있는데 이 부분이 text 입력폼의 높이입니다. 앞쪽의 체크를 했다-풀었다하면 입력폼의 높이가 변하는 것을 확인할 수 있습니다.

높이값 20px을 2em 으로 바꿔보고 브라우저의 변경되는 모습을 확인해봅니다.

그 다음 댓글 입력부분의 요소를 확인해 봅니다. 우측 Styles 탭에 보면 textarea 라는 스타일 요소가 활성화(검은색) 된 것을 알 수 있습니다. 그중에서 넓이 요소를 찾아봅니다.

넓이값 width: 206px; 부분의 체크를 풀어보고 가로 크기를 확인해 봅니다. 거의 가로 영역 전체를 다 차지하게 됩니다.

넓이값을 따로 지정해도 되지만 100%로 보여지게 해봅니다. width: 100%; 로 수정합니다.

이제 이 두 부분을 고려해서, custom.css에 스타일을 추가합니다.

이름, 이메일, 웹사이트 및 내용 부분의 높이는 2em, 댓글 부분의 넓이는 100% 로 고쳐보겠습니다.

/* 코멘트수정 */
input[type="text"], input[type="email"], input[type="url"] { height: 2em; }

textarea { width: 100%; }

이름, 이메일, 웹사이트 부분의 높이가 변경되었고, 댓글의 가로 크기가 전체 영역으로 커졌습니다.