'테마제작'에 해당되는 글 17건

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

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

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

인천 남구 '주안미디어문화축제' 홈페이지.

부트스트랩 3.1.1과 언더스코어스를 사용.

IE9 이상 및 크롬, 사파리, 오페라, 파이어폭스에서 동작.

클라이언트의 계속된 수정 요청을 수용, 

심플한 화이트, 그래이, 다크블루 컬러에서 옐로우, 오랜지 및 레트로 컬러로 변경.

메뉴 부분에 손글씨 느낌을 표현하기 위해 플러그인을 통해 이미지 메뉴를 구현. 

(초기 로딩시간을 줄이기 위해 구글 폰트는 사용하지 않음)

이벤트 기획 초기부터 계속 수정을 반복하면서 작업을 했기 때문에 꽤 긴 시간 작업했지만, 

클라이언트의 요구를 거의 충족.

URL

http://imediafestival.kr/

글의 내용이 늘어나면 그 사이를 이동하는 것도 만만치 않은 일입니다. 그래서 일반적으로 페이지 번호를 달아서 이를 해결하는 데 _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(); ?>

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

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

고객지원 메뉴에 문의사항을 위한 게시판을 넣기 위해 워드프레스용으로 나온 게시판 플러그인 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; }

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

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

카테고리로 "제품소개(슬러그: 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)"를 만들고 부모, 자식 설정을 합니다.

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

콘텐츠 부분의 요소는 <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"를 추가합니다. 이 두개의 파일은 "검색결과"의 출력에 관련된 파일입니다.

페이지 화면에 부트스트랩 레이아웃을 적용하는 것도 홈 화면에서 한 방법과 큰 차이가 없습니다. 단지 다른 점은 "사이드 바"가 있기 때문에 페이지와 사이드 바 두 개의 단으로 나뉘어진다는 것 뿐입니다. 두 개의 영역이 12개의 단에서 서로 어느만큼 차지하게 할 지는 개발자 마음이지만 여기서는 "span9"와 "span3"으로 나누겠습니다.

테마 편집기에서 "page.php"를 열고 아래와 같이 "span9"를 추가합니다.
<div id="primary" class="content-area span9">
[Update File]을 클릭해 저장합니다.

그리고 "sidebar.php"를 열고 아래와 같이 "span3"을 추가합니다.
<div id="secondary" class="widget-area span3" role="complementary">
[Update File]을 클릭해 저장합니다.

이제 홈페이지에서 메뉴 네비게이션의 샘플 페이지를 클릭해 적용된 모습을 확인해 봅니다.

댓글 남기기 아래쪽에 있는 "다음의 HTML 태그와 속성을 사용할 수 있습니다:"의 태그 속성이 가로로 사이드바까지 침범한 것을 고치기 위해 "custom.css"에 다음의 코드를 넣습니다.

⁄* 댓글 적용태크 줄바꿈 *⁄
code {
	white-space: normal;
}

포스트의 경우도 페이지와 같은 방법으로 레이아웃을 잡을 수 있습니다. 페이지와 다른 점은 단지 "single.php" 파일을 수정한다는 것 뿐입니다.

테마 편집기에서 "page.php"를 열고 아래와 같이 "span9"를 추가합니다.
<div id="primary" class="content-area span9">
[Update File]을 클릭해 저장합니다.

이제 홈 화면에서 포스트 06을 클릭해서 적용된 모습을 확인해 봅니다.

대부분의 홈페이지에 jQuery 등으로 제작된 이미지 슬라이더가 들어가 있습니다. 홈페이지를 대표하거나 설명할 수 있는 멋진 이미지들을 볼 수 있고, 링크를 통해 해당 컨텐츠로 이동도 할 수 있습니다. 여러 뛰어난 성능의 무료 이미지 슬라이드 플러그인들이 있는데 여기서는 "Meta Slider"를 설치해 보겠습니다. 무료 버전으로도 일반적인 홈페이지라면 무리없이 사용할 수 있습니다.

Meta Slider

http://wordpress.org/plugins/ml-slider/

슬라이더를 설치하고 활성화 한 후 관리자 페이지 아래쪽에 보면 Meta Slider 메뉴가 생긴 것을 확인할 수 있습니다. [+] 버튼을 클릭하여 새로운 슬라이드쇼를 추가하고, 이름을 Home Slider 로 합니다. 그리고 [Add Slide] 버튼을 클릭하여 이미지를 업로드하거나 불러옵니다.

슬라이더용 이미지를 하나하나 추가하고, 우측의 셋팅에서 "Nivo Slider"를 선택하고 Width, Height 값을 지워서 빈칸으로 만듭니다. 빈칸으로 만들면 자동으로 화면에 꽉 채워서 보여줍니다. 
참고로 슬라이더에 등록할 이미지의 가로:세로 비율은 가로는 길고 세로는 짧게. 즉, 와이드(wide)한 비율이 보기 좋습니다. 저는 2.35:1(영화 스크린 비율)로 했습니다. 
모든 설정을 다 마치면 [Save] 버튼을 클릭하고 하단에 있는 Usage 항목에서 Template Include 탭을 클릭하여 아래에 생성되는 php 코드를 복사합니다.

테마 편집기에서 "home.php"를 열고 <section class="row"> 위에 다음의 코드를 넣고 저장합니다.

      <div class="imageslider">
        <?php echo do_shortcode("[metaslider id=38]"); ?>
      <⁄div><!-- .imageslider -->

홈페이지를 확인하면 3열 2행의 최근 포스트 위에 이미지 슬라이더가 동작하는 것을 볼 수 있습니다.

header.php 즉, 헤더 부분에 부트스트랩 레이아웃을 적용한 후 다음으로는 "홈" 부분에 레이아웃을 적용해야 합니다.
그냥 쭉 나열되어 있는 콘텐츠들을 (여기서는 최근 포스트 6개) 3열 2행으로 나열하는 것을 목표로 합니다.

우선 윈도우 탐색기를 통해 aca 테마 파일 중 "index.php"를 선택하고 [ctrl+c] 후 [ctrl+v]로 사본을 만듭니다. 그리고 사본의 이름을 "home.php"로 바꾼 후 FTP 나 테마 에디터를 통해 웹서버에 업로드 합니다.

이제 워드프레스는 "홈"을 불러올 때 "home.php"를 불러올 것입니다(워드프레스의 php 파일 로딩 순서에서 home.php가 index.php 보다 먼저 불러오게 되어 있습니다).

홈 화면에서는 사이드바를 삭제할 것이므로, "home.php" 소스에서 사이드바 관련 코드를 삭제해야 합니다.
<?php get_sidebar(); ?> 를 삭제하면 페이지 하단에 있던 사이드바가 사라집니다.

"header.php" 맨 아래 줄에서 클래스에 "row"를 추가했기 때문에 "home.php" 소스에서는 "span" 클래스를 추가합니다.

id가 primary 인 div 요소의 클래스명 content-area 뒤에 span12 를 추가합니다. 포트스 내용이 브라우저의 가운데로 제대로 정열이 되면서 마진이 생깁니다.

<div id="primary" class="content-area span12">

이제 포스트들을 3열 2행으로 만들어야 합니다. home.php 소스에 보면 워드프레스의 루프(Loop) 소스가 있습니다. 이 부분을 수정해서 구현합니다.

<?php if ( have_posts() ) : ?> 부터 <?php endif; ?> 까지의 내용을 아래와 같이 수정합니다.

			<section class="row">
					<?php $post_count = 1; ⁄⁄카운터 ?>
					<?php if ( have_posts() ) : ?>

					<?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="span4">');
							get_template_part( 'content', get_post_format() );
						echo('<⁄div>');
					?>

					<?php if ($post_count % 3 == 0) { echo '<div class="clear"><⁄div>'; } ?>
					<?php $post_count++; endwhile; ?>

					<?php aca_paging_nav(); ?>

					<?php else : ?>

					<?php get_template_part( 'content', 'none' ); ?>

					<?php endif; ?>
			<⁄section><!-- .row -->

3열 2행의 레이아웃으로 변경되었습니다.
루프 소스 중에 카운터를 넣은 것은 3열마다 css의 클리어 요소(clear: both)를 넣어서 줄바꿈을 해 주어야 하기 때문입니다. 클리어 요소를 넣지 않으면 포스트의 내용에 따라 줄바꿈이 뒤죽박죽 되어 버립니다.
만일 3열이 아닌 4열로 포스트로 나열하고 싶다면 {span4} 대신에 {span3}을 넣고,{$post_count % 3} 을 {$post_count % 4}로 수정하면 됩니다.

포스트의 내용이 제각각이라서 좀 들쭉날쭉 합니다. 입력된 내용이 전부 보여지게 되어 있기 때문인데 이를 해결하기 위해 플러그인을 설치합니다.

Auto Excerpt everywhere
http://wordpress.org/plugins/auto-excerpt-everywhere/

이 플러그인은 포스트의 내용을 요약하여 출력하는 기능을 가지고 있습니다. 플러그인을 설치한 후 Excerpt length 값을 300 으로, Read more text 에 들어갈 문구를 ...more 로 설정했습니다. 출력되는 내용이 일정하게 잘려서 깔끔하게 정리된 모습을 볼 수 있습니다.