'언더스코어스'에 해당되는 글 7건

"스텝 바이 스텝 워드프레스 테마 쉽게 만들기"를 전자책으로 발매하였습니다.

부트스트랩3와 언더스코어스 테마를 가지고 직접 디자인한 홈페이지를 만드는 방법을 다루었으며, 텍소노미, 커스텀 포스트 타입 등으로 콘텐츠를 분류하여 포스팅하고 이를 출력하는 것을 배울 수 있습니다. 구글 북스에서는 20%정도 미리보기가 가능합니다.

워드프레스 테마 쉽게 만들기

푸터(Footer)는 홈페이지나 웹사이트 하단부에 위치하면서 저작권 정보 및 연락처 등이 표기되는 공간입니다. 과거에는 단지 앞에서 적은 것 정도만 출력하는 경우가 많았지만 요즘은 이 외에 여러 컨텐츠를 넣고 있는 추세이고 이런 콘텐츠가 노출되는 푸터를 메가푸터(Mega Footer)라고 합니다. 아래는 Avada 테마의 메가푸터 입니다.

대부분의 유료 테마를 보면 푸터 부분에 글 모음(월별), 최근 댓글, 갤러리 썸네일, 로그인 링크 등이 들어가 있는 것을 쉽게 찾을 수 있죠.

_S 테마는 기본적인 저작권 정보(카피라이트)만 들어가 있습니다. 그것도 고치려면 footer.php 를 수정해야 하죠. 이 기본적인 푸터를 메가푸터로 업그레이드 해 보겠습니다. 방법은 푸터 영역에 사이드바 처럼 위젯을 넣을 공간을 만들어 주고 그곳에 위젯을 추가하면 됩니다.

우선 functions.php 에 다음의 코드를 추가합니다.

⁄* 푸터 위젯 영역 추가 함수 *⁄
if ( function_exists('register_sidebar') ) { 
	register_sidebar();
	register_sidebars(3, array('name'=>'Footer %d')	); 
}

푸터 부분에 사이드바 처럼 위젯을 넣을 수 있게 하는 함수입니다. 위의 코드 중 "숫자 3"이 나오는데 공간을 몇 개나 만들 것인가 정하는 부분입니다. 보통 메가푸터는 3~4 개의 단으로 구성되는 경우가 많습니다.

 

 

다음은 footer.php를 열고, 위젯을 넣을 공간을 HTML 태그로 만듭니다.

<footer id="colophon" class="site-footer" role="contentinfo"> 아래 줄에 다음의 코드를 입력합니다.

<div id="megafooter" class="row"><!-- 메가푸터:위젯 -->
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 1') ) : ?>
		<?php endif; ?>
	<⁄div>
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 2') ) : ?>
		<?php endif; ?>
	<⁄div>
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 3') ) : ?>
		<?php endif; ?>
	<⁄div>
<⁄div><!-- .row:메가푸터:위젯끝 -->

<DIV> 요소를 사용하여 위젯이 들어갈 공간을 만들었습니다.

 

 

 

 

관리자 메뉴의 "외모 - 위젯"으로 이동하면 Footer1, 2, 3 이라는 이름의 위젯 영역이 생성된 것을 볼 수 있습니다.

 

 

 

좌측의 "사용할 수 있는 위젯"에서 각 푸터 영역으로 위젯들을 드래그&드롭하고 각각 [저장하기]를 클릭한 다음 홈 화면을 확인해봅니다.

 

 

스케쥴, 최근 댓글, 홈페이지 이용안내 라고 하는 3개의 내용이 푸터에 추가된 것을 확인할 수 있습니다.

 

 

이제 스타일을 수정해서 조금 다듬어야 합니다. custom.css 를 열고 아래의 코드를 추가합니다.

상단의 더블라인을 가지고 배경이 밝은 회색으로 채워진 푸터가 만들어진 것을 확인할 수 있습니다.

⁄*------------------------------------------------------------
 푸터 수정
 *------------------------------------------------------------
 *⁄
⁄* 푸터 전체 모양 *⁄
.site-footer {
  margin-top: 4em;
  border-top: 3px double #aaa;
  background-color: #efefef;
}

⁄*푸터 위젯 제목 및 리스트 크기 *⁄
#megafooter li { list-style: none; }
.widgettitle { font-size: 1.6em; border-bottom: 1px solid #aaa; }

 

 

모양이 좀 많이 별루지만... 메가푸터 맞습니다;;; 스타일 수정을 더 하면 멋지게 나오겠죠.

 

부족한 글이나마 도움이 되었다면 "좋아요" 부탁드립니다.

 

원래 계획은 KBoard 를 사용하지 않으려고 했는데, 상당히 많은 수의 (국내) 워드프레스로 제작된 홈페이지에서 사용되고 있으며 또한 좋은 플러그인이기에 아래 내용에 추가하게 되었고 ,덕분에 약간의 내용 수정이 되었습니다

우선, 글(포스트)는 모두 제품소개와 관련된 게시글들이 올라가는 것으로 정하고 카테고리도 그에 맞추게 되었습니다.

제품소개 (product)

- 간식 (snack)

- 완구 (toy)

- 주식 (food)

등으로 설정됩니다.

페이지는 "회사소개" 관련 페이지와 "KBoard" 및 "Contact Form 7"을 플러그인을 위한 페이지 등이 만들어졌습니다.

회사소개 (company)

- 인사말 (greeting)

- 연혁 (history)

- 오시는길 (map)

고객지원 (support)

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

- 문의사항 (question) - KBoard

- 콘텍트 (contact) - Contact Form 7

이로인해 메인페이지의 출력 내용이 상품소개 3열 2행으로 변경되었습니다.

제품소개 포스트에 적당한 내용을 넣어봅니다.
집에서 고양이를 키우고 있는 관계로 굴러다니는 고양이 간식을 가지고 내용을 작성해봤습니다.
관리자에서 글 - 새 글 쓰기 혹은 글 편집으로 포스팅을 합니다(편집모드는 비주얼).

품명, 특징, 설명, 상세로 내용을 입력하고 특징, 설명, 상세는 리스트화 하고, 아래쪽에 이미지를 [미디어 추가]로 넣습니다. 또 특성이미지도 등록합니다.

특성이미지 나 본문에 이미지를 넣기 위해서 컴퓨터에 있는 화일을 워드프레스에 업로드 할 때는 "첨부 상세" 항목에서 "대체 텍스트"를 넣는 편이 좋습니다(국내외의 인터넷 웹접근성 개선에 관한 정책상 넣어야 합니다).

홈 화면에서 타이틀 부분이 변경된 것을 확인할 수 있고 링크를 타고 들어가면 상품에 대한 상세 내용을 볼 수 있습니다.

하지만 이미지를 클릭하니 새창이 뜨지 않고 현재 창에서 이미지가 링크되어 브라우저에서 보입니다.

플러그인을 추가하여 새 레이어를 띄우고 이미지를 출력할 수 있습니다.

Easy Fancybox

https://wordpress.org/plugins/easy-fancybox/

특성이미지로 넣은 사진도 미디어 추가를 통해서 내용 하단에 넣어보고, 마찬가지 방법으로 두 개의 제품을 더 포스팅합니다.

홈 화면을 보니 특성 이미지도 보이지 않고, 제품명도 너무 큽니다. 특성이미지를 출력시키고, 제품명의 글꼴 크기도 줄여보겠습니다.

요약글 플러그인인 Auto Excerpt everywhere에는 include post thumbnail 기능이 있습니다. 특성이미지(Featured Image)를 포트트 썸네일(post thumbnail)이라고도 합니다(정확하게는 좀 틀리지만). 아래와 같이 셋팅하고 저장하면 홈 화면에 제품 이미지가 출력됩니다.

제품명 크기를 줄이기 위해서 <테마 편집기>에서 "home.php"를 엽니다.

소스 중에서 <section class="row">를 찾고 <section id="homepost" class="row">로 id를 추가하고 저장합니다.

id를 추가하는 이유는 클래스 "entry-title"이 이곳 말고도 다른 페이지에서도 사용되어서 겹치기 때문입니다. 그냥 "entry-title"을 변경하면 홈페이지 전체의 타이틀 부분의 글꼴 크기가 변경됩니다.

"custom.css"를 열고 아래에 스타일을 추가하고 저장하면, 제품명의 글꼴 크기가 변하는 것을 확인할 수 있습니다.

⁄*------------------------------------------------------------
 홈 화면 수정
 *------------------------------------------------------------
 *⁄
⁄* 홈 화면 3열 포스트 제목   *⁄
#homepost .entry-title { font-size: 1.6em; }

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

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

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

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

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

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

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

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