WP홈페이지 제작 - 기획, 페이지메뉴

워드프레스는 상대적으로 짧은 시간 , 저렴한 제작비용으로 홈페이지를 만들 수 있기 때문에 근래 주목을 받고 있습니다. 우선 테마를 사용해서 디자인을 쉽게 바꿀 수 있고, 플러그인을 사용해서 쉽게 기능을 추가할 수 있죠. 물론 깊게 들어가면 어렵습니다. 태생적인 한계도 있고요.(속도라던가 속도라던가 속도라던가...) 그대로 장점이 더 많은 것이 사실입니다.

 

이제 아래의 일반적인 홈페이지의 사이트맵을 구현하는 것을 목표로 할 것입니다.

 

-회사명 NyaOng (냐옹) 고양이 용품 제작회사-

홈 - 이미지 슬라이더, 공지&뉴스 3개, 제품 3개

회사소개 (page : company)

- 인사말 (page : greeting)

- 연혁 (page : history)

- 오시는길 (page : map : Google Map)

제품소개 (post-category : product)

- 주식 (post-category : food)

- 간식 (post-category : snack)

- 완구 (post-category : toy)

고객지원 (page : support)

- 공지&뉴스 (page : notice-news : KBoard )

- 문의사항 (page : question : KBoard)

- 콘텍트 (page : contact : Contact Form 7)

사이드바 - 카테고리, 태그, 댓글, 이미지 베너

푸터 - 월별 게시물, 카피라이트, 로그인

 

우선 테마 편집기에서 custom.css를 열어서 아래의 코드를 넣습니다. 사이트 제목과 설명의 태그라인의 폰트 크기를 수정해서 보기 좋게 하기 위해서 입니다. 사이트 타이틀은 그대로 둔 상태이고, 태그라인의 크기만을 0.8em(기본 폰트크기의 80%)로 설정하고, 행간을 1em(기본 폰트크기)로 설정 했습니다.

⁄*------------------------------------------------------------
 헤더수정
 *------------------------------------------------------------
 *⁄
.site-title {}
.site-description { font-size: 0.8em; line-height: 1em; }

 

 

 

관리자에서 <외모> - <사용자 정의하기> 를 선택하고 <사이트 제목과 태그라인>을 선택하여 적당한 내용을 입력하고 저장합니다.

- 사이트 제목 : NyaOng

- 태그라인 : 반려묘 용품 제작회사 냐옹닷컴

 

우측의 미리보기의 네비게이션 모양이 변한 이유는 홈페이지가 출력되는 영역의 가로크기가 줄어들었기 때문입니다.

저장 후 홈페이지로 들어가 보면 사이트 제목 부분의 내용이 변경된 것을 확인할 수 있습니다.

 

 

 

 

이제 페이지를 수정하고 메뉴도 수정해야 합니다.

먼저 회사소개, 인사말, 연혁, 오시는길 이라는 제목으로 페이지를 만듭니다. 이미 만들어 놓은 페이지를 수정해도 되는데 주의할 점은 내용을 수정하고 반드시 슬러그(slug)도 수정해야 한다는 것입니다. 그리고 슬러그는 되도록 "영문"으로 합니다.

- 회사소개 : company-info

- 인사말 : company-greeting

- 연혁 : company-history

- 오시는길 : company-map

슬러그를 따로 정해주는 이유는 한글주소가 있는 경우 인터넷 익스플로러에서 페이지를 못 찾는 버그가 있기 때문입니다. 여러가지 해결 방법이 있기는 하지만 100% 해결이 되는 것은 아니기 때문에 슬러그를 영문으로 만들어 주는 것이 가장 좋습니다.

페이지 편집 화면에서 슬러그 등의 메타박스가 없는 경우 우측 상단의 "화면옵션"을 열어서 체크하면 나타납니다.

 

 

 

 

 

인사말, 연혁, 오시는길 페이지의 상위 페이지를 회사소개로 설정하여 자식 페이지로 만듭니다. 그리고 페이지의 경우는 "댓글허용"의 체크를 풀어서 댓글을 달지 못하게 하는 편이 좋습니다.

 

 

 

 

그리고 각 페이지에 걸맞는 콘텐츠를 채운 후, 페이지로 메뉴를 만듭니다. 관리자에서 외모 - 메뉴로 이동하여 처음 계획한 순서대로 회사소개 메뉴를 만듭니다. 이 후 페이지로 메뉴를 만들어야 할 "고객지원(슬러그:support)", "콘텍트(슬러그:contect)"를 만들고 부모, 자식 설정을 합니다.