'워드프레스'에 해당되는 글 60건

페이지나 포스트 하단에는 댓들을 달 수가 있게 되어 있습니다. 언더스코어스의 기본 댓글 부분의 폼 입력부분의 크기를 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/

새 레이어를 통해 이미지, 동영상 등을 띄워주는 플러그인. 사용법도 간단하고 다른 플러그인들과의 큰 충돌도 없는 것 같아서 주로 사용하고 있습니다. 좀 더 많은 효과를 위해서는 업그레이드가 필요하지만 무료로도 충분히 쓸 만한 플러그인.

첨부파일은 한글 언어 파일로 압축을 풀어나오는 파일들을 플러그인의 languages 폴더에 넣으면 됩니다.

easy-fancybox-languages_ko_KR.zip

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

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

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

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

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

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

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

_S 테마의 경우, 기본값으로 특성이미지(썸네일 이미지)를 사용하지 못하게 셋팅되어 있습니다.

테마 편집기에서 "functions.php"를 열어서 41행 근처에 아래의 소스가 있다면,

//add_theme_support( 'post-thumbnails' );

앞쪽의 // 를 삭제한 후 [Update File]을 클릭하여 저장합니다. 그리고 "글 - 새 글 쓰기" 나 "페이지 - 새 페이지 추가"에서  우측상단의 [화면옵션]을 열고 "특성 이미지"에 체크하면, 특성이미지를 넣을 수 있는 메타박스가 생성됩니다.

홈 및 콘텐츠와 사이드바 에 부트스트랩 레이아웃을 적용하면서 알게 된 것을 간단히 정리하면

콘텐츠 부분의 요소는 <section id="primary" class="content-area span9"> 부분이고,

사이드바 부분의 요소는 <div id="secondary" class="widget-area span3" role="complementary"> 인 것을 알 수 있습니다.

즉 나머지 php 소스들을 살펴보고 같은 요소들이 있다면 위와 같이 적용하면 될 것입니다.

네비게이션에서 [카테고리2] 를 선택하면 "카테고리2"에 분류되어 있는 포스트들의 목록이 나타납니다. 이 카테고리 목록 부분을 출력하는 화일은 "archive.php" 파일인데 이 파일을 테마 편집기로 열어서 부트스트랩 레이아웃을 적용해 봅니다. 위와 같이 "span9"를 추가하면 포스트 목록 부분과 사이드바 부분의 레이아웃이 맞춰집니다.

마찬가지 방법으로 "search.php", "404.php" 파일도 열어서 클래스 "span9"를 추가합니다. 이 두개의 파일은 "검색결과"의 출력에 관련된 파일입니다.