'워드프레스/중급 홈페이지 제작'에 해당되는 글 25건

푸터(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; }

 

 

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

 

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

 

스타일을 수정해서 사이드바의 텍스트를 좀 정리합니다.

구글 크롬의 요소 검사를 통해 클래스명을 살펴보니 <h1> 요소에 "widget-title"로 정의되어 있습니다.

관리자 메뉴의 "외모 - WP Editor"를 통해서 custom.css 를 열고, 위젯 제목 텍스트 크기를 줄이기 위해 아래의 스타일을 추가합니다.

.widget-title { font-size: 1.6em; }

리스트의 점을 없애고 좌측 마진을 좀 줄이기 위해 아래의 스타일을 추가합니다.

.widget ul li { list-style: none; }

.widget ul { margin-left: 10px; }

<수정 전>

<수정 후>

추가로 클래스 widget-title을 아래와 같이 수정하여 위젯 제목과 리스트 사이에 가로선을 넣어서 구분을 짓도록 하겠습니다.

.widget-title { font-size: 1.6em; border-bottom: 1px solid #eee; }

이제 위젯 구성을 좀 바꾸보겠습니다.

검색창, 최근 글, 카테고리만 남기고 나머지는 모두 삭제하고 최신 글의 제목을 "최신 상품"으로, 카테고리 제목을 "제품 카테고리"로 수정한 후 [저장하기]를 클릭하여 적용합니다.

사이드바 가장 아래에 베너이미지를 추가하도록 하겠습니다.

플러그인 검색을 통해 "image widget"을 검색하고, 설치 후 활성화 합니다.

Image Widget

https://wordpress.org/plugins/image-widget/

관리자 메뉴의 "외모 - 위젯"을 선택하고 <Image Widget>을 사이드바 영역으로 넣습니다(드래그 & 드롭).

[Select an Image] 버튼을 클릭하고 이미지 라이브러리(로컬 파일 업로드 가능)의 이미지를 불러옵니다.

Title에 적당한 이름을 넣은 후 Link 에 연결될 인터넷 주소를 넣고 아래쪽 풀다운 메뉴에서 Open New Window 를 선택합니다.

또 Size는 Custom 으로 설정하고 Width, Height 모두 0으로 입력합니다. Align은 center로 설정합니다.

(가로, 세로 사이즈를 넣지 않아야 브라우저의 가로 사이즈가 줄었을 때 자동으로 사이즈가 줄어듭니다)

[저장하기]를 클릭하고 홈페이지의 변경된 모습을 확인합니다.

브라우저 크기가 줄어도 이미지의 크기가 자동으로 조절됩니다(Responsive).

<1024*768>

<800*600>

글의 내용이 늘어나면 그 사이를 이동하는 것도 만만치 않은 일입니다. 그래서 일반적으로 페이지 번호를 달아서 이를 해결하는 데 _S 로 만든 테마는 그런 기능이 없이 그냥 이전글, 다음글로만 이동할 수 있게 되어 있습니다.

그래서 플러그인을 통해 페이지 번호를 달아보겠습니다.

플러그인 검색에서 pagination 으로 검색을 해보면 TW Pagination 이라는 플러그인이 검색됩니다. 업데이트 된 지도 오래되었고 버전도 1.0 으로 끝인데, 별이 다섯개. 그리고 검색 최상단에 위치하고 있네요.

http://wordpress.org/plugins/tw-pagination/

플러그인을 설치하고 활성화 한 후 설정페이지로 갑니다. 관리자 메뉴의 "설정 - TW Pagination"입니다.

다른 것은 건들지 않고, Pagination Label 부분은 빈 칸으로 만듭니다. 굳이 라벨까지 달 필요는 없으니...

Previous Page(이전 페이지), Next Page(다음 페이지) 부분은 << 와 >>로 되어 있는데 ◀ 와 ▶ 로 바꿉니다. 눈에 확 띄게요.

특수문자 입력은 검색엔진에서 검색하셔도 되고 한글의 초성 (ㄱ,ㄴ,ㄷ,ㄹ,ㅁ,...)만 누르고 "한자"키를 누르면 각 초성마다 지정된 특수문자를 선택할 수 있습니다.

Advanced Settings 에서 Before Markup 부분은 페이지 번호 부분을 감싸는 요소 사용자가 지정할 수 있는데, 

기본값인 <div class="navigation">을 <div class="page-navi">로 고칩니다.

아래로 스크롤 하면 플러그인의 사용방법이 나옵니다.

쉽게 말하면 페이지 번호가 들어가 부분인 포스트(글)과 코멘트(댓글) 부분에 각각 

<?php if(function_exists('tw_pagination')) tw_pagination(); ?> 와

<?php if(function_exists('tw_pagination_comments')) tw_pagination_comments(); ?> 를 넣으면 된다는 뜻입니다.

관리자 메뉴에서 "외모 - WP Editor"를 선택하고, home.php를 엽니다.

<?php aca_paging_nav(); ?> 를 지우거나 주석으로 처리하고(사용자마다 함수명은 다를 것입니다), 

<?php if(function_exists('tw_pagination')) 

tw_pagination();

?>

를 넣고 저장합니다. 이제 홈페이지에 페이지 번호가 들어간 것을 확인합니다.

만들어진 페이지 번호를 중앙정렬 하기 위해 custom.css를 열고 스타일을 추가합니다.

/* 페이지 번호 */

.page-navi { text-align: center; }

.page-navi .tw-pagination { display: inline-block; }

코멘트 부분에도 페이지 번호를 넣기 위해 comments.php 파일을 엽니다. 코드를 살펴보면 코멘트 네비게이션 부분이 두 곳이 있습니다. 두 곳을 지우고 대신 

<?php if(function_exists('tw_pagination_comments')) tw_pagination_comments(); ?>

를 넣고 저장합니다(혹시 모르니 원래의 코드들은 따로 복사해서 저장해 놓으세요).

코멘트에도 페이지 번호가 들어간 것을 확인할 수 있습니다. 위 아래 두 군데에 넣는 것은 댓들이 길어져서 스크롤하기 어려울 때를 대비한 것으로 보입니다.

회사소개 마지막에 있는 오시는길 페이지에 구글지도를 넣겠습니다. 비록 동해를 일본해라고 표기하는 괘씸한 부분은 있지만 (국내한정 '동해' 표기로 알고 있는데 맞는지...) 이 외에 쓸만한 서비스가 보이지 않는지라 어쩔 수 없습니다.

국내 돈 많이 벌고 있는 주요 포털 사이트는 뭐하고 있는지...

주소 : 서울특별시 마포구 공일동 123-45

전화 : 02-123-4567

핸드폰 : 101-123-4567

대충 입력해 봤습니다. 주소 부분 아래쪽에 구글에서 지도를 가져와 넣을 것입니다.

구글지도에 접속해서 주소를 입력한 후 위치를 찾습니다.

우측 하단의 "톱니바퀴 모양"의 아이콘을 클릭하고, "지도 공유 및 삽입"을 선택합니다.

"지도 삽입"탭을 클릭하고 지도 크기 항목을 "크게(800*600)"로 설정하면 그에 맞춘 미리보기를 출력해줍니다.

iframe 소스 코드를 클릭해서 클립보드로 복사합니다(ctrl+c).

오시는 길 페이지 편집에서 "텍스트" 모드를 선택하고 주소 내용 하단에 붙여넣습니다(ctrl+v).

저장 후 페이지 보기로 확인합니다.

회사소개 부분의 두 개의 서브메뉴(페이지)에 각 페이지 성격에 맞는 내용을 생각해서 작성합니다.

일반적인 글쓰기로 넣어도 상관은 없지만 부트스트랩의 몇가지 기능을 사용하면 더 좋습니다. 이와 관련된 내용들은 부트스트랩 2.3.2 사이트에 가면 포스팅을 위해 사용할 만한 CSS, Componets, JavaScript 등이 예제로 잘 나와 있습니다.

http://getbootstrap.com/2.3.2/

인사말 부분은 "비주얼" 모드에서 아래의 내용을 넣었습니다. 생각대로 나오지는 않을 것입니다만 그냥 입력하고 이후 수정합니다.

사랑스러운 나의 고양이를 위한 만족스러운 제품을 제공하는 회사. “냐옹(NyaOng)” 홈페이지를 방문해주셔서 감사합니다.

“냐옹”은  2012년 설립 이래로 애묘인을 위한 제품에 대한 끊임없는 고민을 통해 가장 좋은 제품을 합리적이고 경제적인 가격으로 제공하는 것만을 생각하고 있으며, 다양한 제품들을 테스트하고 엄선하여 판매하고 있습니다.

“냐옹”은 각종 인터넷 쇼핑몰, 오픈마켓 등을 통해 제품을 판매하고 있으며 아래의 링크를 통해 판매처로 이동하실 수 있습니다.

“냐옹”의 공식 홈페이지에서는 취급하는 상품 및 상품에 대한 정보 그리고 각종 지원을 통해 고객과 가까이 하고자 합니다.

항상 집사님의 건강, 애묘의 건강을 위해 노력하는 “냐옹”이 되겠습니다. 감사합니다.

냐옹 대표 아무개

<브라우저>

<HTML 소스>

<p>사랑스러운 나의 고양이를 위한 만족스러운 제품을 제공하는 회사. "냐옹(NyaOng)" 홈페이지를 방문해주셔서 감사합니다.<⁄p>
<p><blockquote>"냐옹"은  2012년 설립 이래로 애묘인을 위한 제품에 대한 끊임없는 고민을 통해 가장 좋은 제품을 합리적이고 경제적인 가격으로 제공하는 것만을 생각하고 있으며, 다양한 제품들을 테스트하고 엄선하여 판매하고 있습니다.<⁄blockquote><⁄p>
<p><blockquote>"냐옹"은 각종 인터넷 쇼핑몰, 오픈마켓 등을 통해 제품을 판매하고 있으며 아래의 링크를 통해 판매처로 이동하실 수 있습니다.<⁄blockquote><⁄p>
<p><blockquote>"냐옹"의 공식 홈페이지에서는 취급하는 상품 및 상품에 대한 정보 그리고 각종 지원을 통해 고객과 가까이 하고자 합니다.<⁄blockquote><⁄p>
<p>항상 집사님의 건강, 애묘의 건강을 위해 노력하는 "냐옹"이 되겠습니다. 감사합니다.<⁄p>
<p>냐옹 대표 아무개<⁄p>

blockquote 들여쓰기 부분이 위에 처럼 세로선으로 표시되는 것은 부트스트랩 스타일 때문입니다. 주의할 점은 "비주얼" 상태에서 blockquote 를 넣게 되면 세 부분으로 나뉘어 나오지 않고, 하나로 묶여 나오기 때문에 내용을 입력한 후 '텍스트' 모드로 들어가서 소스를 수정해 줘야 한다는 것입니다. 
비주얼 모드와 텍스트 모드에서 서로 차이가 발생하는 것은 워드프레스 포스팅에서 자주 일어나는 일이기때문에 포스팅할 때는 항상 생각대로 출력되는지 확인을 꼭 해보는 습관이 필요합니다.

연혁 페이지의 내용들은 "탭(tab)" 방식으로 넣을 것입니다. 부트스트랩에서 기본적으로 제공하고 있으며 보다 쉬운 포스팅을 위한 "부트스트랩 쇼트코드 플러그인"들도 많지만 우선은 기본적인 하드코딩 방식으로 넣을 것입니다.

부트스트랩 홈페이지에서 Component 부분에 보면 Navs 라는 항목이 있습니다. 그곳에서 아래쪽으로 좀 더 스크롤하면 
"Tabbable nav"라는 항목이 있습니다. 이 부분의 소스를 복사합니다.

연혁 페이지로 돌아와서 "텍스트"모드에서 복사한 소스를 [ctrl+v]로 붙여넣습니다. 그 후 내용을 수정합니다.

소스를 잘 보면 위쪽에 제목, 아래쪽에 내용이 들어가는 것을 알 수 있습니다. 그래서 위쪽에 년도, 아래쪽에 사업 활동내용을 넣었습니다. 2012년 입력을 위해 요소를 하나씩 더 추가한 것도 보입니다.

사실상 이것만으로는 매우 썰렁한 페이지입니다만 페이지 타이틀과 내용 사이에 대표이미지를 넣거나 하는 방법을 통해 좀 더 보기 좋은 페이지로 업그레이드 할 수도 있을 것입니다.

페이지나 포스트 하단에는 댓들을 달 수가 있게 되어 있습니다. 언더스코어스의 기본 댓글 부분의 폼 입력부분의 크기를 contact form 7 처럼 고치려고 합니다. 우선 구글 크롬 브라우저를 통해 해당 폼들의 id나 class 를 알아봅니다.

폼에서 마우스 우측클릭을 하고 "요소 검사"를 선택하면, 크롬 브라우저 하단에 도큐먼트의 소스를 볼 수 있는 창이 나타납니다. 다른 탭은 건들지 말고 Elements(요소) 탭에서 텍스트 입력폼 중 하나가 선택된 것을 확인합니다.

우측에 Styles 탭이 있는데, 선택된 요소 부분이 검은색으로 눈에 띄게 보여지고 있습니다. input[type="text"] 라는 부분입니다. 그 스타일 요소를 보면 height: 20px; 라는 것이 있는데 이 부분이 text 입력폼의 높이입니다. 앞쪽의 체크를 했다-풀었다하면 입력폼의 높이가 변하는 것을 확인할 수 있습니다.

높이값 20px을 2em 으로 바꿔보고 브라우저의 변경되는 모습을 확인해봅니다.

그 다음 댓글 입력부분의 요소를 확인해 봅니다. 우측 Styles 탭에 보면 textarea 라는 스타일 요소가 활성화(검은색) 된 것을 알 수 있습니다. 그중에서 넓이 요소를 찾아봅니다.

넓이값 width: 206px; 부분의 체크를 풀어보고 가로 크기를 확인해 봅니다. 거의 가로 영역 전체를 다 차지하게 됩니다.

넓이값을 따로 지정해도 되지만 100%로 보여지게 해봅니다. width: 100%; 로 수정합니다.

이제 이 두 부분을 고려해서, custom.css에 스타일을 추가합니다.

이름, 이메일, 웹사이트 및 내용 부분의 높이는 2em, 댓글 부분의 넓이는 100% 로 고쳐보겠습니다.

/* 코멘트수정 */
input[type="text"], input[type="email"], input[type="url"] { height: 2em; }

textarea { width: 100%; }

이름, 이메일, 웹사이트 부분의 높이가 변경되었고, 댓글의 가로 크기가 전체 영역으로 커졌습니다.

제품소개 카테고리로 들어가보면 제품들이 일렬로 쭈욱~ 나열되어 있습니다. 별로 보기가 좋지 않죠.

여기도 메인화면처럼 3행으로 뿌려지게 하면 좋겠습니다. 기본적인 방법은 메인화면에 포스트를 뿌려주는 코드와 크게 다르지 않습니다.

우선 제품 전체를 볼 수 있게 메뉴를 하나 더 추가합니다.

관리자의 외모 - 메뉴에 가서 카테고리 항목을 펼치고 "제품소개"항목을 우측 메뉴리스트에 추가하고 네비게이션 라벨을 "모두보기"로 입력한 후 저장합니다. 이제 제품소개의 하위 카테고리는 이 메뉴를 통해 모두 볼 수 있습니다.

윈도우 탐색기에서 archive.php 파일을 복사한 후 category.php 라는 이름으로 저장하고, FTP나 WP-Editor 의 파일업로드 기능을 사용하여 테마 구성파일에 추가합니다.

이제 워드프레스는 archive.php 를 불러오기 전에 category.php를 불러올 것입니다.

category.php 의 코드 중에서 내용이 불려와지는 곳의 소스에 부트스트랩 레이아웃을 위한 요소 및 클래스를 추가합니다. 이를 통해 제품들이 3열로 뿌려질 것입니다.

</header><!-- .page-header --> 아래쪽을 수정합니다.

      	<div id="products-list" class="row">
			<?php $post_count = 1; ⁄⁄카운터 ?>
			<?php ⁄* Start the Loop *⁄ ?>
			<?php while ( have_posts() ) : the_post(); ?>

				<?php
					⁄* Include the Post-Format-specific template for the content.
					 * If you want to override this in a child theme, then include a file
					 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
					 *⁄

					echo('<div class="span3">');
							get_template_part( 'content', get_post_format() );
					echo('<⁄div>');
				?>

			<?php if ($post_count % 3 == 0) { echo '<div class="clear"><⁄div>'; } ?>
			<?php $post_count++; endwhile; ?>
		<⁄div><!-- #products-list .row -->

이미지를 영역 크기에 맞춰서 보이게 하기 위해 스타일도 수정합니다. custom.css 에 아래 코드를 추가합니다.

⁄* 제품리스트 썸네일 크기 *⁄
#products-list .autoexcerpt_thumb {
  width: 100%;
  height: auto;
}

이미지 크기를 수정했는데 문제가 생겼습니다. 기본 섬네일크기가 150*150 인데 영역 크기에 맞추려니 강제 확대가 되어 깨져보입니다. 플러그인에 가서 기본으로 보여지는 이미지를 좀 더 고해상도 이미지로 볼 수 있게 설정을 바꿔야 합니다.

Auto Excerpt everywhere 셋팅에 가서 Include post thumbnail 종류를 Medium 으로 바꿉니다.

단점은 분명 큰 사이즈를 불러와서 트래픽이 늘어나겠지만, 이미지가 깨지는 것 보다는 더 나을 것입니다.

그리고 홈화면의 제품이미지 크기를 위한 스타일도 수정합니다. 그렇지 않으면 플러그인 셋팅으로 인해 사이즈가 Medium에 맞춰져서 커지게 됩니다.

⁄* 홈포스트 썸네일 크기 *⁄
#homepost .autoexcerpt_thumb {
  width: 150px;
  height: 150px;
}

제품소개 리스트의 제품명도 너무 크니까 홈화면 처럼 폰트 크기를 줄입니다.

⁄* 제품리스트 타이틀 폰트 크기 *⁄
#products-list .entry-title { font-size: 1.6em; }

만들어진 폼의 크기가 작고 좁고 아름답지 못합니다. 약간의 스타일을 수정하여 크고 아름답게 만들어야 합니다.

컨텍트 폼으로 가서 "폼" 항목을 다음과 같이 수정합니다. 클래스를 추가하는 것입니다.

<p>이름 (필수)<br ⁄>
    [text* your-name class:cf01-size] <⁄p>

<p>이메일 (필수)<br ⁄>
    [email* your-email class:cf01-size] <⁄p>

<p>제목<br ⁄>
    [text your-subject class:cf01-size] <⁄p>

<p>메시지<br ⁄>
    [textarea your-message class:cf01-msgsize] <⁄p>

<p>스팸방지<br ⁄>
    [captchac captcha-241]
    [captchar captcha-241] <⁄p>

<p>[submit "보내기"]<⁄p>

그리고 관리자에서 "외모 - Theme Editor"로 이동하여, custom.css 를 선택하여 열고, 아래의 내용을 추가합니다.

⁄* 폼메일 사이즈 *⁄
.cf01-size {
  width: 50%;
  height: 2em !important;
}
.cf01-msgsize {
  width: 100%;
}

워드프레스로 만들어진 홈페이지를 보면 대부분 Contact 항목이 있습니다.

일반적으로 사용자 이름, 이메일, 전화번호, 내용, 전송버튼 으로 이루어진 이것은 폼메일을 보내는 플러그인을 통해 만들어지고 어떤 프로젝트의 의뢰라든가 문의를 받는 용도로 많이 사용되고 있습니다.

하지만 KBoard를 사용해서 의뢰나 문의를 받는다면 거의 필요가 없지 않을까...라고 생각하는데 굳이 만드는 이유는 홈페이지의 심미적인 면에서 있으면 뭔가 좀 그럴 듯 해보이는 느낌이 있어서...랄까요.

우선 새로운 페이지를 만들고 저장합니다. 페이지 제목은 "콘텍트", 슬러그는 "contact"이고, 상위 페이지로 고객지원을 설정했습니다. 토론 항목은 모두 비활성화 합니다.

관리자에서 "플러그인 - 플러그인 추가하기"를 통해 "Contact Form 7"을 검색하여 설치하고 활성화합니다.

관리자 - Contact 에서 현재 만들어져 있는 "컨텍트 폼 1"의 단축코드 아래의 내용을 클릭하여 선택하고 복사합니다.

관리자에서 "페이지 - 모든 페이지"를 클릭한 후 콘텍트 페이지를 열고, 복사한 코드를 [ctrl+v]로 붙여 넣고, [업데이트]를 클릭한 후 수정된 페이지를 확인해 봅니다.

테스트로 내용을 작성해서 발송해 봅니다. 이메일 주소는 워드프레스를 설치할 때 설정된 관리자 메일 주소로 자동 설정됩니다. 메일이 제대로 발송되면 아래쪽에 메시지가 출력됩니다.

메일이 제대로 수신된 것을 확인할 수 있습니다...(왜 배경이 핑크하트...? 언제 바뀐거지;;;)

작성된 콘텍트 페이지를 통해 혹시 모를 스팸 메일이 유입될 수 있으므로, CAPTCHA 기능을 추가합니다.

Contact Form 7 의 경우 Really Simple CAPTCHA 플러그인을 통해 간편하게 문자입력 방식의 스팸 방지 기능을 붙일 수 있습니다. 플러그인 검색을 통해 "Really Simple CAPTCHA"를 설치하고 활성화합니다.

관리자의 "Contact" 항목에서 "컨텍트 폼 1"을 편집합니다.

[태그생성]을 클릭하고, CAPTCHA를 선택합니다. 이름 항목이 랜덤으로 생성된 것을 확인할 수 있습니다. 

나머지 항목은 우선 빈칸으로 그냥 두고 기본값(default)으로 출력되게 하겠습니다. 아래쪽에 생성된 코드 두 개를 왼쪽 "폼" 항목에 추가하고 [저장하기]를 클릭합니다.

아래쪽에 스팸 방지를 위한 문자열 입력창이 추가되었습니다. 문자를 입력하지 않고 [보내기]를 클릭하면, 에러 메시지가 출력됩니다. 문자를 제대로 입력하면 메일이 발송됩니다.

원래 계획은 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행으로 변경되었습니다.

고객지원 메뉴에 문의사항을 위한 게시판을 넣기 위해 워드프레스용으로 나온 게시판 플러그인 KBoard를 사용할 것입니다.

이 부분에 대해서 워드프레스 사용자들 사이에서는 이래저래 말이 좀 많은데,

굳이 기존의 게시판 방식을 고집할 필요가 있나?

bbPress 같은 포럼형 플러그인을 사용하는 편이 좋지 않은가?

커스텀 포스트 타잎으로 또 다른 글쓰기 항목을 만들어서 리스트 형식으로 게시물을 관리하면 되지 않겠는가?

정도로 의견이 나뉜다고 보면 되겠네요. 저의 경우는... 흠... 아직 모르겠습니다...라고 밖에는...

KBoard 플러그인은 아래에서 다운받을 수 있습니다.

http://www.cosmosfarm.com/products/kboard

"KBoard:게시판"과 "KBoard:댓글" 두 개의 파일을 다운로드 받아서 설치를 한 후 활성화를 합니다.

페이지 항목에서 새로운 페이지를 만듭니다. 제목은 "문의사항", 슬러그는 "question"으로 입력하고 [공개하기]를 클릭합니다.

플러그인을 설치하면 관리자 항목에 "KBoard" 메뉴가 생깁니다. 메뉴에서 "게시판 생성"을 클릭한 후

- 게시판 이름 : 문의사항

- 게시판 자동 설치 : 문의사항 페이지에 자동으로 설치합니다

- 특정 테마 레이아웃 깨짐 방지 : 활성화

- 게시물 표시 : 10개

등으로 설정하여 새로운 게시판을 만듭니다. 나머지 항목은 아래 그림을 참조합니다.

설정항목을 저장하고 외모 - 메뉴에서 "문의사항" 항목을 "고객지원" 아래로 위치 시키고 [메뉴 저장]을 클릭합니다.

홈 페이지에 문의사항 게시판이 설치된 것을 확인할 수 있습니다.

문의사항 게시판의 설정은 로그인 없이 글을 쓸 수가 있으며, 섬네일 이미지 추가 및 첨부 파일 2개를 업로드 할 수 있게 되어 있습니다. 만일 섬네일 기능, 첨부파일 기능을 삭제하려면 플러그인의 php 소스를 고쳐서 수정해야 합니다.

비로그인 사용자 글쓰기의 경우 자체적으로 제공하는 captcha 기능을 통해 스팸 게시물 등록을 막을 수 있습니다.

게시판 설정을 변경하려면 관리자 - KBoard - 게시판 목록을 통해 해당 게시판을 클릭합니다.

"글 작성 에디터 항목"을 "워드프레스 내장 에디터 사용"으로 설정하면 글쓰기를 위한 여러 기능이 담긴 패널이 생성되고, 관리자의 경우에 한하여 본문에 이미지를 삽입할 수 있게 [미디어 추가] 기능을 사용할 수 있게 됩니다.

일부 테마에서는 게시물 검색 부분만 나타나고 글쓰기 관련 항목은 나타나지 않는 현상이 있는 것 같습니다. 테마에 따라 설치 여부가 달라질 수 있다는 것에 주의해야 하겠습니다.

같은 방법을 사용하여 "공지&뉴스" 게시판을 생성하고 메뉴로 등록해 봅니다.

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

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

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

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

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

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

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; }