WP홈페이지 제작 - 제품소개 포스트

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

 

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

 

 

 

 

 

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

 

 

 

 

 

 

 

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

 

 

 

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

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

 

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