워드프레스 완벽 입문 – HTML/CSS 기초부터 부트스트랩을 활용한 테마 제작까지

 

워드프레스 일반 사용자와 웹디자이너, 웹개발자를 위한 지침서!

워드프레스는 웹사이트 및 블로그를 만드는 데 최적의 도구입니다. 단순한 블로그부터 시작해 기업 홈페이지, 뉴스 사이트, 팬 카페, 디시인사이드와 같은 포럼, 인터넷 쇼핑몰에 이르기까지 다양한 웹사이트를 만들 수 있습니다.

해외에서는 워드프레스의 인기가 아주 높아서 현재 만들어져 있는 웹사이트 중 워드프레스가 차지하는 비율이 17 퍼센트에 달합니다. 미국 정부 각 기관이나 미디어 사이트 등의 홈페이지에 사용되고 있으며, 대표적인 사이트로 미국 CIA, US Army를 비롯한 미국방성 등 미정부기관과 CNN, 이베이, 야후!, 삼성, 포드, 피플매거진 등 많은 곳에서 블로그 프로그램으로 사용하고 있습니다

국내에서는 블로터닷넷과 서울시 홈페이지가 워드프레스로 만들어졌습니다. 사용의 용이함과 디자인 변경의 자유로움으로 향후 국내에서 워드프레스를 사용하는 인구는 늘어날 전망이고 이와 관련해서 웹디자이너와 웹개발자들이 워드프레스를 활용할 수 있는 지침서로 사용할 수 있습니다.

 

트위터 부트스트랩을 이용한 모바일 웹사이트 만들기!

또한, 이 책에서는 워드프레스를 사용하기 위한 정보를 총괄하고 있으며, 워드프레스 테마를 디자인하기 위한 웹 기초 지식과 CSS, HTML을 비롯해 특히 해외 웹디자이너들에게 각광받고 있는 트위터 부트스트랩으로 모바일용 테마를 만드는 방법까지 소개합니다.

1장 워드프레스 시작

1-1 워드프레스란?
1-1-1 오픈소스 프로그램과 GPL
1-1-2 컨텐트 매니지먼트 시스템
1-1-3 블로그의 형태
1-2 워드프레스 소개
1-2-1 워드프레스 탄생과 발전 과정
1-2-2 워드프레스의 특징
1-2-3 워드프레스 통계
1-3 WAMP서버에 워드프레스 설치하기
1-3-1 WAMP 설치하기
1-3-2 워드프레스 설치하기
1-4 웹호스팅에 워드프레스 설치하기
1-4-1 웹호스팅 신청하기
1-4-2 워드프레스 환경설정파일 수정
1-4-3 파일질라 FTP프로그램을 이용하여 웹호스팅 서버에 업로드하기
1-4-4 워드프레스 설치하기
1-5 유료 웹호스팅에 워드프레스 설치하기
1-6 워드프레스닷컴에서 워드프레스 블로그만들기
1-7 워드프레스 홈페이지에서 테마 선택하기
1-8 유료테마 구매
1-8-1 워드프레스 테마의 중요성
1-8-1-1 워드프레스 테마란?
1-8-1-2 테마 선택의 중요성
1-8-2 테마선택시 고려할 사항
1-8-2-1 무료테마와 유료테마
1-8-2-2 기능
1-8-2-3 누가 디자인한 것인가.
1-8-2-4 레이아웃
1-8-2-5 모든 웹브라우저 지원여부
1-8-3 유료테마구매하기
1-8-3-1 외국의 워드프레스 테마 사이트
1-9 처음으로 포스팅하기

2장 워드프레스 포스팅 전에 알아야할 사항

1. 관리자화면 개요
1-1. 로그인 주소
1-2 그라바타
1-3 관리자 바
1-4 사이드 메뉴
1-5. 메뉴 축소

2. 대시보드
2-1 화면옵션
2-2. 타이틀 바
2-3. 블로그 현황
2-4. 빨리 쓰기
2-5. 최근 댓글, 최근 임시글, 들어오는 링크, 워드프레스 블로그

3. 설정
3-1. 일반설정
3-2. 쓰기 설정
3-3. 읽기 설정
3-4. 토론 설정
3-5. 그라바타 등록
3-6. 미디어 설정
3-7. 프라이버시 설정
3-8. 고유주소 설정

4. 관리자프로필 만들기, 회원등록, 회원관리
4-1. 관리자 프로필 등록
4-2. 회원등록
4-3 사용자 레벨과 권한
4-4 회원 정보 관리

5. 댓글관리
5-1. 대시보드와 댓글관리 화면에서 댓글관리하기
5-2. 댓글관리 키보드 단축키
5-3. 스팸관리

6. 고유주소(Permalink) 설정
6-1. 고유주소와 검색엔진 최적화
6-2. WAMP 서버에서 모듈의 활성화, 웹호스팅 서버에 .htaccess 파일 업로드하기
6-3. 글 제목 슬러그 만들기

7. 포스트(Post)와 페이지(Page)의 차이와 페이지 만들기
7-1. 포스트와 페이지의 차이
7-2. 페이지 만들기
7-3. 메뉴의 상하 관계

8. 위젯 사용하기
8-1. 위젯 설정하기
8-2. 텍스트 위젯 사용하기
8-3. 접근모드 활성화
8-4. 위젯 글자 스타일링하기

9. 한글 웹폰트 사용하기
9-1. 모빌리스 웹폰트 사이트에서 링크 복사
9-2. 워드프레스 편집기에서 편집하기

10. 다중 사이트(Multisite) 블로그 만들기
10-1. 다중사이트 만들기
10-1-1. wp-config.php파일의 수정
10-1-2. 서브 디렉토리의 선택
10-1-3. blogs.dir 디렉토리 만들기, 코드 복사하여 붙여넣기
10-1-4. .htaccess파일 새로 만들기
10-2 네트워크 관리
10-2-1 사이트 관리
10-2-2. 사용자 관리
10-2-3. 테마
10-2-4. 플러그인
10-2-5. 설정
10-2-6 업데이트

11. 플러그인
11-1. 워드프레스 기본 플러그인
11-2 유료와 무료 플러그인
11-3. 플러그인 사용하기
11-3-1. 워드프레스 홈페이지에서 내려 받아 설치하기
11-3-2 블로그에서 직접 설치하기
11-3-3 로그인 시 블로그 화면으로 이동하는 플러그인
11-3-4. 블로그에 임시글을 만드는 플러그인

제 3장 포스팅 하기

1 . 무엇을 쓸것인가?
1-1 블로거는 콘텐츠의 주 생산자
1-2 콘텐츠의 생산

2. 새 글 쓰기 화면 개요

3 공개하기 메타박스
3-1 상태
3-2 가시성
3-4 예약

4. 편집기
4-1 비주얼 편집기
4-2 HTML 편집기

5. 미디어파일 업로드
5-1 미디어 설정
5-2 내 컴퓨터에서 업로드하기
5-3 URL에서 업로드하기
5-4 이미지 갤러리 만들기
5-5 이미지 편집
5-6 미디어 라이브러리
5-7 비디오, 오디오 파일 올리기
5-8 유투브 동영상 올리기

6. 카테고리와 태그
6-1. 카테고리
6-1-1 새 카테고리 만들기
6-1-2 카테고리 이름 변경하기
6-1-3 카테고리의 글을 다른 카테고리로 이동하기
6-2 태그
6-2-1 태그 만들기

7. 요약 메타박스

8. 특성이미지

9. 글 형식(Post Formats)
9-1 글 형식의 종류
9-2 Twenty-Eleven 테마의 하루살이 위젯

10. 기타 메타박스
10-1 토론
10-2 댓글
10-3 슬러그
10-4 글쓴이
10-5 사용자 정의 필드
10-6 리비전

11. 링크
11-1 링크 카테고리 만들기
11-2 새 링크 만들기
11-3 링크 편집
11-4. 링크 목록 사이드바에 설치하기

12. 사용자 정의 메뉴
12-1 메뉴 만들기
12-2 메뉴 이동 배치
12-3 사이드바에 메뉴 배치

13. 테마
13-1. 테마 관리
13-2 테마 옵션
13-3 사용자 정의 헤더
13-4 사용자 정의 배경

4장 테마만들기

1. 웹 프로그래밍 언어
1-1. PHP와 자바스크립트
1-2. HTML과 CSS
1-2-1 HTML
1-2-2 CSS(Cascading Style Sheet)
1-2-3 CSS3의 주요 내용
1-2-4 W3C의 웹개발 단계

2. HTML
2-1 HTML의 간략한 역사
2-2 HTML5의 추가된 태그
2-3 HTML5의 태그
3. HTML5와 CSS를 이용한 레이아웃
3-1 기본 웹페이지 만들기
3-2 태그 선택자, 블록 요소
3-2-1 태그 선택자
3-2-2 블록요소
3-2-3 HTML5의 IE 핵
3-2-4 요소의 이동
3-2-5 웹브라우저 기본 마진과 패딩 제거
3-2-6 콘텐츠의 중앙 배치
3-3 CSS의 구문구조와 선택자
3-3-1. 선택자(Selector)
3-3-2. 아이디 선택자(ID Selector)
3-3-3. 클래스 선택자(Class Selector)
3-3-4 복합선택자, 유사선택자
3-3-5 선택자의 우열
3-3-6. 아이디 선택자와 클래스 선택자의 선택
3-4 마진과 패딩, 테두리(border)의 관계
3-4-1 마진과 패딩 적용하는 방법
3-4-2. 보더(border) 적용하는 방법
3-4-3. 웹페이지에 적용하기
3-5 배경이미지 삽입하기
3-6 내비게이션 메뉴 만들기

4. 워드프레스 테마 구조
4-1 워드프레스 설치 폴더의 내용
4-2 템플릿 계층구조(Template Hierarchy)
4-3 템플릿 파일과 템플릿 태그
4-3-1 PHP 코드 블록
4-3-2 워드프레스 템플릿 태그의 종류
4-3-3 워드프레스의 템플릿 태그와 함께 사용되는 php 구문
4-3-4 워드프레스 템플릿 태그

5. 템플릿 파일 만들기
5-1 빈 템플릿 파일 만들기
5-2 header.php파일 내용 추가하기
5-3 footer.php 파일 내용 추가하기
5-4 sidebar.php 파일 내용 추가하기
5-5 function.php 파일 내용 추가하기
5-6 index.php파일에 컨텐트 영역 만들기
5-7 single.php 파일 내용 추가하기
5-8 search.php파일 내용 추가하기
5-9 archive.php 파일 내용 추가하기
5-10 404.php 페이지 내용 추가하기

6. Font Awesome 폰트 아이콘 삽입하기

제 5장 테마의 수정

5-1. 트위터 부트스트랩
5-1-1 트위터 부트스트랩의 특징
5-1-2 트위터 부트스트랩 파일 내려받기
5-1-3 트위터 부트스트랩의 개요

5-2 콘텐츠 입력하기
5-2-1 카테고리 만들기
5-2-2 메뉴 등록하기
5-2-3 글 만들기
5-2-4 워드프레스 파일 내보내기와 가져오기
5-2-5 플러그인 설치

5-3 자식 테마(Child Theme) 폴더 만들기
5-3-1 프로젝트 폴더 만들기
5-3-2 테마 폴더 파일 정리
5-3-3 자바스트립트와 스타일시트 붙여넣기
5-3-4 함수를 사용하여 관련 파일 링크하기

5-4 부트스트랩으로 레이아웃 만들기
5-4-1 테마의 HTML 구조
5-4-2 테마에 부트스트랩 레이아웃 적용하기
5-4-3 레이아웃 정리

5-5 테마 스타일시트 시작
5-5-1 메뉴바
5-5-2 헤더 이미지의 수정
5-5-3 전체 파일에 레이아웃 적용하기
5-5-4 메인(main) 영역 레이아웃
5-5-5 초기화면 편집
5-5-6 싱글페이지 수정
5-5-7 사이드바 수정
5-5-8 푸터 수정
5-5-9 IE 버그 수정

5-6 전면페이지(Front Page) 만들기
5-6-1 front-page.php 파일 만들기
5-6-2 플러그인 설치
5-6-3 사이드바 파일 만들기

5-7 구글 애드센스와 구글 애널리틱스 사용하기
5-8 워드프레스에 외부파일 사용하기

5-9 부트스트랩 메뉴바 수정
5-9-1 부트스트랩 다단계 하위 메뉴 만들기
5-9-2 부트스트랩의 다단계 메뉴 사용 방법
5-9-3 하위 메뉴 위치 이동

5-10 푸터 영역에 메뉴바 추가하기

5-11 컨텍트 폼의 사용과 기본 페이지 파일(page.php)의 수정

5-12 작성일자 스타일링하기

5-13 다중 헤더와 다중 푸터 사용하기
5-13-1 header.php파일과 footer.php 파일 만들기
5-13-2 header.php 파일의 수정
5-13-3 footer.php 파일의 수정
5-13-4 IE 버그 수정

5-14 비비프레스(bbPress)
5-14-1 비비프레스 사용하기
5-14-2 포럼 화면의 수정

부록

6-1 템플릿 태그
6-2 플러그인
6-3 티스토리 블로그 글 가져오기
6-4 워드프레스 업데이트
6-5 워드프레스 3.5버전과 기본테마 Twenty Twelve

[contact-form] [contact-field label="이름" type="name" required="true" /] [contact-field label="이메일" type="email" required="true" /] [contact-field label="웹사이트" type="url" /] [contact-field label="댓글" type="textarea" required="true" /] [/contact-form]

 

Related posts:

  1. 워드프레스 3.4 한글 언어 파일(WordPress Korean Language 3.4) 업그레이드 및 워드프레스 업데이트하기 워드프레스 최신 버전이 3.4로 업데이트 됐습니다. RC(Release Candidate) 상태에서 추가된 용어와 도움말 등 전체 영문을 번역 작업 해서 영문버전의 출시와 함께 선보입니다. 아직...
  2. 워드프레스 게시판 플러그인 bbPress 사용하기   5-14 비비프레스(bbPress)   워드프레스가 탄생하기 이전에는 대부분의 프로그램이 게시판 형태였습니다. 게시판을 영어로 Bulletin Board라고 하는데 이 당시에 php로 개발된...
  3. 부트스트랩을 이용한 티스토리 모바일 겸용 블로그 스킨 공개합니다.(최종 버전)     현재 티스토리 블로그가 커스텀 모바일 스킨을 지원하지 않고 모든 포털 사이트의 블로그가 그렇지만 모바일로 접속하면 일방적인 디자인으로 나타나고...
  4. 워드프레스 첨부 파일 제2장 소셜 네트워킹 버튼 추가 플러그인 언어파일 cfile29.uf.1670CD494FE841372682DD.zip 관리자 이메일 함수 코드 cfile8.uf.191CEC4C4FEBD4BA0317A9.txt 제3장 워드프레스 제3장 이미지 파일 cfile21.uf.193C3D464FEBD26F2B4D28.zip 유투브...
  5. 워드프레스 한글 wp-config-sample.php 주석문 한글화 워드프레스를 사용하면서 누구라도 한번은 파일의 내부를 들여다 보게 되는 파일이 wp-config-sample.php입니다. 이것을 wp-config.php로 변경해서 사용하거나 설치시 데이터베이스 정보를 웹페이지에서 직접 입력하면 자동생성됩니다....

댓글 남기기