'홈페이지제작'에 해당되는 글 15건

페이지를 사용해서 메뉴를 작성했고, 다음은 포스트의 카테고리를 사용해서 메뉴를 작성합니다. 기본 방법은 페이지와 큰 차이가 없습니다.

관리자에서 글 - 카테고리 로 이동하여 기존의 카테고리들을 모두 삭제합니다. 미분류는 삭제되지 않습니다.

 

 

 

카테고리로 "제품소개(슬러그: products)", "공지&뉴스(슬러그: notice-news)"를 추가합니다.

 

 

 

 

글 - 모든 글로 이동해서 포스트 01~03까지는 "제품소개" 카테고리로, 포스트 04~06까지는 "공지&뉴스" 카테고리로 설정합니다. 미분류에는 어떤 포스트도 설정하지 않습니다.

 

 

 

외모 - 메뉴로 이동하여 페이지와 카테고리 탭을 열어서 항목에 체크한 후 [메뉴에 추가]하여 메뉴를 설계한 후 메뉴를 저장합니다. 저장된 메뉴가 제대로 적용되었는지 확인합니다.

 

 

 

 

블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

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

 

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

 

-회사명 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)"를 만들고 부모, 자식 설정을 합니다.

 

 

 

 

블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

워드프레스는 설치 후 테마 적용만으로 홈페이지를 만들 수 있습니다. 물론 그 이후의 작업이 더 어려워지기도 하지만 적용한 테마의 디자인 및 기능을 벗어나지 않고 그대로만 사용한다면 이만큼 쉬운 홈페이지 제작법은 없으리라고 생각됩니다(덕분에 홈페이지 제작을 더 우습게 보고 제작가격을 후려치려는 싸장님들도 많아진 것도 사실입니다. 그럴때면 그냥 "그냥 직접 공부해서 만드세요~" 라고 말해주고 싶습니다).

그런데 이 워드프레스라는 것이 외쿡 것이라 국내의 실정(?) 또는 일반인들이 생각하는 홈페이지와는 서로 괴리가 있는 경우가 많은 편인데, 아마 큰 이유가 디자인 스타일도 국내의 그것과는 좀 다른 편이고 큼직큼직한 그리드 기반의 레이아웃은 아기자기하고 꽉꽉 채워져있는 듯한 국내의 웹디자인과는 좀 달라서가 아닌가 싶습니다.
그나마 요즘의 세계화 기조 덕분일까... 몇몇 큰 기업의 이벤트 홈페이지, 블로그, 관공서 홈페이지 등의 디자인들이 그리드 기반 레이아웃으로 조금씩 바뀌어져 가고는 있는 상황이라서 이 부분은 나아지고 있는 편입니다.

어쨌든 워드프레스로 홈페이지 제작을 할 때 '이미 만들어져 있는 테마'를 사용하지 않는다면 결국 직접 만들어야 합니다.
워드프레스 관련 서적을 보신 분들은 알겠지만 style.css와 index.php 두 개의 파일이 테마를 만드는 최소한의 구성요소이고 이 외에도 codex.wordpress.org 를 참조하여 필요한 파일들을 만들어가야 하는 것... 등등 생각할 것도 많고 할 일도 많습니다.

그런데 친절하게도 워드프레스 측에서 일종의 테마 제작틀을 제공하고 있습니다. 보통 "스타터(starter) 테마"라고도 하는데 힘들고 귀찮은 테마 파일 제작과정을 건너 뛸 수 있게 해 주고 또한 프로그램에 대한 지식이 많이 없는 웹디자이너 또는 퍼블리셔도 워드프레스를 사용한 간단한 홈페이지를 직접 만들 수 있게 해 줍니다. 즉, 스타터 테마를 사용하면 (어느정도)자신만의 테마를 만들 수 있다는 것입니다.

"_S" 언더스코어스(underscoreS)를 다운 받습니다.
http://underscores.me/

underscores스타터테마 언더스코어스

페이지에 입력란이 있는데 적당한 이름을 넣습니다. 너무 길게 넣으면 나중에 소스 수정할 때 번거로우니까 영문자 2~3자로 하는 것이 편합니다. 본인은 "aca" 로 했습니다. 이 문자는 이제 만들어질 테마의 이름이기도 하고, 내부 소스의 함수(function)명 앞에 접두어처럼 붙게 됩니다. 예를 들면 "aca_functionname" 이런 식으로 함수명이 만들어집니다.

우측의 [Generate] 버튼을 클릭하면 사용자의 컴퓨터로 압축파일 하나가 다운로드 됩니다. 저의 경우는 "aca.zip" 파일이 다운로드 되었습니다. 이제 이 파일을 적당한 곳에다 압축을 풀면 테마 파일들이 생긴 것을 확인할 수 있습니다. 이 파일들이 워드프레스에서 제공하는 기본 테마의 동작 파일들이라고 봐도 과언은 아닐 것입니다...(라고 생각합니다). 

테마 압축 파일_S 테마 압축 파일

 

이 테마 파일을 워드프레스 관리자에서 테마로 등록합니다. 외모 - 테마 - 새로 추가 (또는 새 테마 추가하기)를 통해서 할 수 있습니다. 테마가 설치되면 테마 리스트에 새로 등록된 테마가 보일 것입니다. 이미지 부분이 없는 것은 screenshot.png 파일이 아무런 내용이 없는 투명한 png 파일이기 때문입니다.

워드프레스 테마 화면워드프레스 테마 화면

테마 설치테마 파일 업로드 설치

_S 테마 등록등록된 _S 테마

 

컴퓨터에 저장되어 있는 테마 파일의 압축을 풀고 생성된 파일들 중에서 screenshot.png 파일을 포토샵 등의 이미지 프로그램을 사용하여 수정한 후 FTP 프로그램을 사용하여 테마폴더에 업로드 합니다.
제가 사용하는 카페24의 경우 
/home/hosting_users/호스팅유저명/www/워드프레스설치디렉토리/wp-content/themes/aca
에 aca 테마가 설치된 상태입니다.

_S 테마 압축 풀기_S 테마 압축 풀기

테마 썸네일 파일테마 썸네일 이미지 screenshot.png

썸네일 제작썸네일 제작 및 저장

 

관리자 - 외모 - 테마 페이지를 보면 비어있던 aca 테마의 이미지가 수정된 이미지로 바뀐 것을 확인 할 수 있습니다. 이제 aca 테마를 활성화 시켜 봅니다.

썸네일 등록 확인_S 테마 썸네일 등록 확인

테마 활성화_S 테마 활성화

 


블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,