워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

지난 2월에 원고를 완료했지만 편집 디자인 작업과 리뷰가 다소 늦어져 4월 20일에 서점에 나옵니다. 표지 디자인이 나왔으니 이제 인쇄 작업을 거치면 책이 나오게 됩니다.


서적 예제 사이트


http://bootstrap.diywordpress.kr/


책에서 만든 사이트입니다. 다만 홈 페이지 메뉴와 One page 메뉴에서는 여러 가지 제이쿼리 플러그인의 테스트를 위해 추가한 페이지이니 서적에는 포함되지 않았습니다. 책을 이해한다면 소스를 이용해 다양한 슬라이더를 만들 수 있습니다.

 




예약 판매


Yes24


알라딘


교보문고


인터파크


11번가


강컴닷컴

 

 

동영상 보조 강좌 안내

 

 

 

 

 

 

 

트위터 부트스트랩으로 만드는 워드프레스 테마


서문


필자가 처음 부트스트랩을 접했던 것은 의뢰를 받아 웹사이트를 제작하던 때였습니다. 이 때는 기존의 방식대로 포토샵으로 이미지를 만들고 CSS로 레이아웃 배치를 했었죠. 버튼 하나하나를 포토샵으로 만들고 아이콘을 구매해 사용하면서 웹페이지의 모든 요소를 스타일시트를 적용해 일일히 배치하는 작업이 반복됐습니다. 수십 개의 웹페이지를 만드는데 몇 개월이 걸렸습니다. 여기에 사용된 스타일시트의 양만 해도 상당했습니다. 


그런데 트위터 부트스트랩을 접하고 나서는 놀라움의 연속이었습니다. 시험 삼아 제 블로그를 부트스트랩으로 만들어봤는데 기본적인 레이아웃과 요소의 배치를 하고 대략적인 블로그 스킨이 만들어지는데 하루밖에 걸리지 않았습니다. 보통의 스타일시트를 사용했다면 3일은 족히 걸리는 일이었죠. 그 이후로는 항상 부트스트랩을 사용해서 디자인을 합니다. 


부트스트랩 이전에도 여러 가지 프레임워크를 사용해봤지만 웹페이지에 사용되는 포괄적인 라이브러리를 갖추고 있는 것은 없었기에 여러 가지 라이브러리를 조합해서 사용하는데 어려움이 발생하기도 했습니다. 부트스트랩은 웹페이지에서 사용되는 모든 요소에 대해서 스타일시트를 만들어놓았기 때문에 필요한 라이브러리를 찾아 다닐 필요가 없습니다. 없으면 응용해서 사용할 수 있도록 스타일 변경도 자유롭습니다. 더구나 부트스트랩과 관련된 프로젝트가 아주 많이 있어서 다양한 프로젝트를 알고 있으면 웹사이트 제작에 많은 시간이 절약됩니다. 이러한 프로젝트는 수백 개에 이르고 대부분이 자바스크립트 플러그인화 돼있어서 스타일시트로 배치를 하고 옵션 설정만 하면 손쉽게 사용할 수 있습니다.


부트스트랩의 장점 중의 하나는 반응형 디자인이 쉽게 만들어진다는 것입니다. 버전 2.0부터는 반응형이 가능하도록 별도의 스타일시트 파일을 추가했는데 3.0에서는 반응형 디자인이 우선 적용되도록 해서 반응형은 기본이 되고 두개로 나누어진 스타일시트는 한 개로 통합됐습니다. 모바일이 인터넷을 주도할 것이기 때문에 향후 인터넷 접속은 데스크탑보다는 스마트폰, 태블릿 PC로 이루어질 것이고 이들 기기를 위한 디자인이 활성화될 것입니다. 


부트스트랩을 이용해서 디자인을 하면 정형화된 스타일로 인해 부트스트랩으로 만든 디자인이라는 것이 티가 납니다. 해외에서는 많은 디자이너들이 부트스트랩을 이용해서 디자인을 하고 있기 때문에 이를 이용한 디자인은 진정한 웹디자인이 아니라는 우려의 목소리가 나오고 있습니다. 디자인이란 창의성을 전제하고 있는데 공장에서 찍어내듯 디자인이 만들어지고 있으니 그럴 만도 하죠. 하지만 이러한 우려는 우려에 불과합니다. 


부트스트랩은 하나의 도구일 뿐입니다. 이를 이용하는 목적은 웹디자인을 쉽고 빠르게 하기 위한 것입니다. 부트스트랩으로 디자인해서 사용자 스타일을 적용하지 않고 그대로 사용한다면 말 그대로 공장에서 찍어낸 디자인밖에 안됩니다. 뼈대는 부트스트랩이되 모양은 자신만의 스타일이 나와야합니다. 이를 만드는 것이 각자의 웹디자이너의 역량에 달려있습니다. 


부트스트랩의 이용 범위는 웹사이트뿐만 아니라 앱에서도 사용할 수 있습니다. 모든 범위에 거쳐 활용도를 넓히려면 어떤 한 부분에서 실제로 어떻게 사용되는지 알아보는 것도 중요하다고 생각됩니다. 


워드프레스는 2015년 3월 현재 전세계적으로 모든 웹사이트의 23.6%의 점유율을 기록하고 있고 계속 증가하고 있습니다. 워드프레스가 인기 있는 이유는 기능을 확장하기 위해 플러그인을 사용하고 사이트 디자인을 위해 테마를 사용하는데, 무료 플러그인과 무료 테마가 많으며 유료라 하더라도 그리 비싼 가격이 아니기 때문입니다. 무엇보다 워드프레스가 인기있는 가장 큰 이유는 사용자 커뮤니티가 활발하다는 것입니다. 


어떤 프로그램을 사용하기 위해서 문제점을 해결하거나 활용도를 넓히려면 이러한 커뮤니티의 활동은 아주 중요한 역할을 합니다. 어떤 기능을 추가하기 위해 플러그인을 찾아보면 대부분 원하는 기능의 플러그인이 존재합니다. 하지만 커스터마이징하고자 할 때 이러한 커뮤니티가 없으면 제대로 된 기능을 발휘하지 못합니다. 인기 있는 플러그인은 지속적으로 업데이트 되고 커뮤니티 활동도 활발합니다.


필자의 전작인 부트스트랩 2.0 버전을 기반으로 한 책에서는 단순한 정적인 웹사이트를 만들었기에 실제 웹사이트에서 사용하려면 어떻게 적용해야 하는지 방법을 다시 찾아야 하는 결점이 있었습니다. 그래서 생각한 것이 간단한 구조의 CMS였습니다. 찾아보니 텍스트 베이스의 CMS가 눈에 들어오더군요. 이를 며칠 사용해보고 간단한 웹사이트는 만들 수 있겠다 싶어서 실제 작업을 해봤지만 기능을 추가하는 데 한계가 많았습니다. 

워드프레스는 제가 잘 아는 분야이고 요즘은 국내에서도 기존 웹사이트를 워드프레스로 많이 전환하고 있는 추세이며 쇼핑몰도 활발히 개발되고 있습니다. 부트스트랩으로 워드프레스 웹사이트를 어떻게 만드는지 알아보는 것도 웹사이트 개발에 도움될 것이라 생각됩니다.


책의 구성


이 책의 내용은 4개의 장으로 나뉩니다.


1장은 부트스트랩의 모든 내용에 대해서 상세히 설명합니다. 부트스트랩을 이용한 웹디자인을 위해서 부트스트랩의 모든 내용을 잘 파악해야 응용이나 확장이 쉬워질 것입니다. 부트스트랩 2.0 버전에서는 웹 접근성에 대해 많이 다루지 않았지만 3.0 버전부터는 시대의 요구에 의해 많은 부분에서 웹 접근성에 관한 내용이 추가돼있어서 부트스트랩의 코드를 그대로 사용하면 웹 접근성을 쉽게 적용할 수 있습니다. 이 책에서는 부트스트랩에서 사용된 각종 웹 접근성을 위한 기본적인 내용을 설명했습니다.


2장은 워드프레스 테마 만들기입니다. 워드프레스 테마는 사이트 디자인을 위해 사용되는데 프로그래밍을 위해 PHP에 대해 잘 알아야 하는 것은 아닙니다. 워드프레스에서 사용되는 템플릿 계층 구조와 템플릿 태그에 대해 알면 테마를 만들거나 디자인 수정이 쉬워집니다. 템플릿 계층구조를 기반으로 부트스트랩에 의해 템플릿 파일을 만들고 템플릿 태그를 삽입해 만들 수 있습니다. 테마를 보다 쉽게 만들기 위해 워드프레스에 기본적으로 포함된 기본 테마를 사용합니다. 기본 테마인 Twenty Fifteen은 블로그 전용 테마로서 레이아웃과 구조가 간단합니다. 부트스트랩의 레이아웃을 위한 그리드 시스템을 추가하는 것만으로도 쉽게 테마가 만들어집니다.


3장은 다양한 콘텐츠 만들기입니다. 2장에서 만들어진 기본적인 테마를 바탕으로 여러 가지 콘텐츠를 다룰 수 있는 글 타입에 대해 설명합니다. 웹사이트는 블로그만 있는 것이 아니고 쇼핑몰, 호텔 사이트, 포트폴리오 사이트 등 다양합니다. 이들 사이트를 원하는 레이아웃으로 만들기 위해서는 글 타입을 추가하면 됩니다. 추가되는 글 타입에 따라 포트폴리오, 갤러리, 슬라이더 등 여러 가지 형태의 콘텐츠를 자유롭게 디자인 할 수 있습니다. 또한 이들 콘텐츠를 전면 페이지에 모두 출력하는 방법을 다룹니다.


4장은 이전 장에서 다루지 못한 사이트에서 필요한 세부적인 내용들을 설명합니다. 탑메뉴를 만들어 로그인이나 회원가입 메뉴를 배치하는 방법, 화면 전체 폭을 사용해 콘텐츠를 출력하는 방법, 추가적인 홈페이지를 만드는 방법 등을 설명합니다.


사전 지식


이 책은 웹디자인 응용서에 속하므로 웹디자인에 대한 지식이 어느 정도는 필요로 합니다. 트위터 부트스트랩 개발자도 언급하고 있듯이 부트스트랩을 사용하기 위해서는 기본적인 HTML 지식과 CSS에 대한 지식을 갖추고 있어야 합니다. 그렇다고 전문적인 지식이 필요하지는 않습니다. 웹페이지를 만들기 위한 레이아웃을 혼자서 만들 수 있는 정도의 지식만 있으면 됩니다. 부트스트랩 기초 부분을 보고 이해만 가능하다면 얼마든지 시작할 수 있습니다.


2장부터는 워드프레스 테마를 만듭니다. 따라서 워드프레스에 관한 기초지식이 필요합니다. 다른 CMS를 많이 다뤄본 분들은 바로 시작할 수도 있습니다. 









목차


01장. 부트스트랩 기초


부트스트랩이란?- 21

스타일시트의 재활용- 21

부트스트랩이 나타난 배경- 24

부트스트랩의 특징- 24

텍스트 편집기- 29

웹브라우저- 29

웹서버 환경 만들기- 31

부트스트랩 사용 환경 만들기- 36

부트스트랩 파일 내려받기- 36


CSS


그리드 시스템- 41

글자(Typography)- 49

테이블(table)- 59

폼(Forms)- 62

버튼(Buttons)- 80

이미지(Images)- 84

도움 클래스(Helper classes)- 85

반응형 선택자(Responsive utilities)- 89


구성요소(Components)


아이콘(Glyphicons)- 92

드롭다운 - 95

버튼 그룹- 98

입력상자 그룹(Input groups)- 108

냅(Navs)- 113

브레드크럼(Breadcrumb)- 124

페이지 처리(Pagination)- 124

레이블(Label)과 배지(Badge)- 127

점보트론(Jumbotron)- 128

페이지 헤더- 129

썸네일(Thumbnails)- 130

알림 메시지(Alerts)- 132

프로그레스 바(Progress Bar)- 134

미디어 오브젝트(Media Object)- 137

리스트 그룹(List group)- 140

패널(Panels)- 143

반응형 임베드(Responsive embed)- 146

웰(Wells)- 147


자바스크립트


모달(Modals)- 150

드롭다운- 157

스크롤스파이(Scrollspy)- 159

탭(Tabs)- 161

툴팁(Tooltips)- 164

팝오버(Popover)- 168

알림 메시지(Alert message)- 171

버튼- 171

체크박스와 라디오버튼- 173

콜랩스(Collapse)- 175

캐러젤(Carousel)- 178

어픽스(Affix)- 181


02장. 워드프레스 테마 만들기


워드프레스 설치하기- 188

워드프레스 내려받기- 189

데이터베이스 만들기- 190

워드프레스 설치하기-191

워드프레스 관리자 화면-193

워드프레스의 구조-194

워드프레스의 콘텐츠-194

워드프레스 설치 폴더의 내용-198

워드프레스 템플릿 계층구조(Tamplate Hierarchy)-199

템플릿 파일과 템플릿 태그-200

워드프레스 템플릿 태그의 종류-202

워드프레스 템플릿 태그-204

워드프레스 기본 테마-206

템플릿 파일의 연결 구조-208

테마 만들기-212

테마 제작 내용-212

자식 테마 만들기-216

부트스트랩 관련 파일 등록하기-220

레이아웃 만들기-224

콘텐츠 추가하기-234

작업 환경 만들기-239

사이트 레이아웃 정리-243

사이드바 수정-245

content.php 파일 수정-253

글 목록 페이지 레이아웃 변경 및 포스트 썸네일 다루기- 257

싱글 페이지 수정하기- 262

사이드바 있는 페이지 템플릿 만들기- 275

블로그 페이지 제목 만들기- 277


03장. 다양한 콘텐츠 만들기


사용자 정의 글 타입(Custom Post Type)- 297

워드프레스 코덱스 페이지의 예제- 297

Custom Post Type UI 플러그인- 301

고급 사용자 정의 필드(Advanced Custom Fields) 플러그인 사용하기- 310

single-portfolio.php 파일 만들기- 314

Attachment 플러그인 사용하기- 319

라이트박스 플러그인 사용하기- 331

이미지 제목과 캡션 추가하기- 334

사이드바 배치하기- 337

포트폴리오 목록 페이지 만들기- 340

콘텐츠 레이아웃 만들기- 347

무한 스크롤 기능 추가하기- 351

브레드크럼과 옵션 프레임워크 사용하기- 353

갤러리 페이지 만들기- 367

갤러리 이미지 만들기 - 368

템플릿 파일 수정하기- 369

갤러리 글 만들기- 371

갤러리 페이지 만들기- 374

슬라이더 글 타입 만들기- 378

single-slider.php 파일 만들기- 379

슬라이더 글 만들기- 381

전면 페이지 만들기- 382

전면 페이지 헤더- 384

스타일 수정- 385

포트폴리오 코드 블록 추가- 387

갤러리 코드 블록 추가- 389

부트스트랩 스크롤 스파이 이용하기- 390

팀원 글 타입 페이지 만들기- 393

팀원 페이지 만들기- 393

page-team.php 파일 만들기- 395

관리자 화면에서 페이지 만들기- 401

전면 페이지에 코드 블록 삽입하기- 402

회사 소개 페이지 만들기- 404

page-about.php 템플릿 만들기- 404

전면 페이지 코드 블록 만들기- 410

웨이포인트와 애니메이션 스타일시트 사용하기- 412

그리드 블로그 글 타입- 416

page-gridblog.php 템플릿 만들기- 416

블로그 글 타입 변경하기- 418

부트스트랩 모달 기능 추가하기- 419

전면 페이지에 코드 블록 추가하기- 422

게시판 페이지 만들기- 425

page-board.php 템플릿 만들기- 426

게시판 싱글 페이지 수정하기- 427

템플릿으로 페이지 만들기- 428

템플릿 추가 수정- 431

content.php 템플릿 수정하기- 433

content-page.php 파일 수정하기- 434

게시판 추가 설정- 435

게시판 스타일 수정- 437

드롭다운 버튼 문제 해결 방법- 439

영어로 나타나는 문제 해결 방법- 442


04장.디테일


메뉴바 만들기- 448

로고 추가하기- 448

메뉴바 수정- 449

WP-Members 플러그인 사용하기- 452

WP-Members 관련 페이지 만들기- 456

탑메뉴 만들기- 458

이용약관 페이지 만들기 - 466

컨택트 페이지 만들기- 469

Contact Form 7 사용하기- 469

컨택트 폼 페이지 만들기- 472

구글 맵 사용하기- 473

파일 내려받아 설치하기- 473

전면 페이지에 코드 블록 만들기- 475

푸터 만들기- 479

두 번째 홈페이지 푸터- 479

전면 페이지 푸터- 483

사용자 정의 필드 만들기- 484

콘텐츠 영역을 전체 너비로 사용하기- 484

갤러리 템플릿 수정- 485

와이드 갤러리 페이지 만들기- 486

두 번째 홈페이지 만들기- 489

캐러젤 만들기- 489

캐러젤 글 만들기- 491

home-page.php 템플릿 만들기- 492

스타일 정리- 497