Twenty Fifteen Theme - display excerpts instead of full post content

[워드프레스] jQuery를 사용하여 Twenty Fifteen 테마에서 전체 글 내용 대신 요약문 표시하기

이전 글에서 Twenty Sixteen 테마의 블로그 페이지 또는 전면 페이지에 전체 글 내용 대신 요약문 표시하는 방법을 살펴보았습니다. 이전 글에서는 일반적인 방법으로 테마 소스를 수정하는 방법을 소개했습니다. 동일한 방법을 Twenty Fifteen 테마에도 적용하여 전면 페이지(홈페이지) 또는 블로그 페이지에 전체 글 내용 대신 요약글을 표시할 수 있습니다.

이 글에서는 보다 간단한 방법으로 jQuery를 사용하여 동일한 효과를 얻는 방법을 살펴보려고 합니다. 이 방법의 이점은 테마 파일을 수정할 필요가 없다는 점입니다. 하지만 jQuery 파일을 Enqueque하는 방법을 알고 있어야 합니다. (js 파일 enqueque(후크)에 대한 자세한 내용은 여기를 참고해보시기 바랍니다.)

참고로 이러한 방법을 사용하지 않고 글 목록에서 “Read More” 링크를 추가하려면 글 쓰기 화면에서 “더읽기” 태그를 삽입할 수 있습니다.

Add Read More tag

이 방법을 사용하면 개별 글에 대하여 원하는 분량의 요약문만 표시할 수 있다는 장점이 있지만, 모든 글에 대해 일일이 “더보기” 태그를 삽입해야 하는 번거로움이 있습니다. 만약 이미 수 백 개의 글이 작성되어 있다면 일일이 추가하기란 쉽지 않을 것입니다.

글자 수를 줄이는 jQuery 스크립트는 이 글에 나와 있습니다. 다음과 같은 jQuery 스크립트를 사용하면 글 목록에서 개별 글에 표시되는 전체 글 컨텐츠가 175자까지만 표시되고 나머지 부분은 생략됩니다.

$(".entry-content").text(function(index, currentText) {
return currentText.substr(0, 175)+'...';
});

그리고 다음 스크립투를 추가하면 Read More -> 링크가 요약글 아래에 추가됩니다(jQuery에서 화살표를 추가하는 코드 등 특수기호는 이 사이트를 참고하세요).

var lnk = $(this).parent('article').children('.entry-header').children('.entry-title').children('a').attr('href');
$('<a class="readmore">Read More &rarr;</a>').insertAfter(this).attr('href', lnk);

그리고 다음과 비슷한 CSS로 Read More의 스타일을 적절히 조정하도록 합니다.

/* Read More 스타일 */
a.readmore {
display: inline-block;
padding-left: 80px;
margin-bottom: 20px;
text-decoration: underline;
}

a.readmore:hover {
color: blue;
}

그러면 다음과 같이 블로그 페이지에 전체 글 컨텐츠 대신에 “요약문”이 표시됩니다.
Twenty Fifteen Theme - display excerpts instead of full post content

이 방법을 사용하면 워드프레스 테마의 소스 파일을 일일이 수정할 필요 없이 간단한 jQuery와 CSS로 간단히 전체 글 대신 요약문을 표시할 수 있습니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.