작성일자
카테고리 워드프레스/워드프레스 일반

지난 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



저작자 표시 비영리 변경 금지
신고
Jay Hong

정말 우연의 일치인가요? 워드프레스로 웹사이트를 작성하기로 마음먹고 이것저것 찾아보다가 님의 사이트를 알게 되었습니다. 조금 더 고급기능의 책을 찾고 있었는데 다행히 이달 16경에 한국에 잠깐 몇주간 가게 되는데 그때 서점에서 구해야 겠네요. 두고두고 베개삼아 탐독하고자 합니다. 서점에서 책을 볼 때가 기다려지네요.

BlogIcon 베누시안

공부하시는데 도움이 됐으면 합니다. 감사합니다.

고재영

수고 하셨습니다. 항상 감사합니다. 제 페이스 북에 공유 하겠습니다 혹시 불편하시면 말씀해 주세요

BlogIcon 베누시안

거의 마무리 돼가고 있는데요. 아마 다음 달이나 늦으면 6월 초에는 서점에 나올 것으로 예상합니다. 테마가 7.2 버전으로 되면서 기능이 너무 많이 추가돼서 거의 테마 관련 내용만 들어갈 듯 합니다. 이래도 될지 싶네요.

Jay Hong

아마 6월경에나 책이 나오는 건가요? 아무래도 해외에서 주문해서 봐야겠네요. 실사용 목적으로 그러니까 테마 제작이 아닌 웹사이트 빠르게 제작하려면 이전에 나온 책이 나을려나요? 5월 11일에 다시 한국을 떠나게 되어 아쉽네요

BlogIcon 베누시안

6월에 나오는 책은 the7 테마를 이용한 웹사이트 만들기이고요. 부트스트랩 워드프레스 테마 만들기 책은 예정대로 4월 20일에 나옵니다. 현재 예약 판매 중입니다. 위에 예약 사이트 링크 있습니다. 어제 출판사에 확인했더니 예정대로 나온다고 합니다.

고재영

선생님 감사합니다. 좋은 책 만들어 주셔서, 책이 나올날만 기다리고 있습니다

BlogIcon 베누시안

빨리 나오도록 노력하겠습니다.

아롱복

빨리 만나보고 싶은 서적이네요

BlogIcon 베누시안

마음에 들었으면 좋겠습니다.

gilliankim

저도 워드프레스 테마 제작에 관심이 많은데 부트스트랩을 이용해서 만들 수 있으면 더 좋을 것 같네요. 기대됩니다^^

BlogIcon 베누시안

마음에 드실지 모르겠습니다.

igroup

http://diywordpress.kr에서 회원가입을 했는데 메일이 오지 않아 활성화를 못해 부득이 여기에 질문합니다.
신간을 구매하려고 하는데, 메뉴에서 서브메뉴가 아래로 나열 되는데 옆으로 서브메뉴가 나오게 할 수 있을까 질문을 드립니다. 부트스트랩에 있는 nav를 수정하면 가능할까 하고 생각하는데..

BlogIcon 베누시안

한메일은 메일이 잘 보내지지 않더군요. 회원 가입을 수동으로 활성화 했습니다. 아래의 링크를 보면 좌측에 메뉴가 나타나도록 했습니다. 스타일시트를 수정하면 서브 메뉴도 나타나게 할 수 있습니다.

http://bootstrap.diywordpress.kr/one-page4/

igroup

책이 도착했습니다..
열공하며 많은 질문(?)을 드리게 될 것 같습니다..^^
답변에 감사드립니다..

BlogIcon 베누시안

네, 게시판에서 잘 안되는 부분은 질문을 해주세요.

igroup

수동으로 가입했는데 무한루푸..가입에 실패했습니다..
정보가 데이터베이스에 있으면 삭제해주시면 다시 해보겠습니다.
질문) 신간교재 203페이지에서 PHP 명령어중 &&아래의 명령어인 ||는 키보드에서 사용이 가능한지 궁금합니다.키보드를 아무리 찾아도..ㅎㅎㅎ

BlogIcon 베누시안

이전에 가입한 아이디를 활성화 했으니 로그인해보세요.
||는 원화 표시와 같이 있는 키입니다.

igroup

관리자의 승인을 기다리고 있는 댓글입니다

BlogIcon 베누시안

비밀번호가 틀린다고 나와서 해당 비밀번호로 변경했으니 로그인하고 다시 변경하세요.

비밀댓글입니다

BlogIcon 낭만또깡

블로그 내용보고, 얼마나 알찰지 기대하고 바로 주문했습니다.

종종 놀러올께요.

BlogIcon 베누시안

내용의 알찬 정도는 데모 사이트를 확인하면 됩니다.

술친구

위키북스 캐스트을 안드로이드 계열이 아닌 아이폰이나 pc 에서는 볼수가 없을 까요???

BlogIcon 베누시안

유투브에서 위키북스로 검색하면 나옵니다.

ㅇㅇㅇ

책샀는데 예제 소스는 다운이 안됩니까?

BlogIcon 베누시안

책 서문에 링크가 있습니다.

불리운

유튜브 올라온 동영상 거이 다 보았습니다. 2편10장 까지 동영상 있던데..
그이상 없나요???궁금해서 문의 드립니다.

고재영

선생님 안녕하세요
동영상강의를 보려구 구글플레이 검색을 해도 않되고 QR코드로 해도 에러가 나네요..
혹시 다른 방법으로 동영상 강의을 볼수는 없네요
감사합니다.

BlogIcon 베누시안

유투브에서 위키북스로 검색해보세요.

티스토리 툴바